Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit 0315452d by Yutaka Kobayashi
Options

Co-authored-by: McTex <McTex@users.noreply.github.com>

1 parent 04565349
Inline Side-by-side
Showing with 434 additions and 185 deletions
develop/.tmp/assets/js/home.js
...@@ -6,163 +6,111 @@ ...@@ -6,163 +6,111 @@
* or disable the default devtool with "devtool: false". * or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/ */
/******/ (function () { /******/ (function() { // webpackBootstrap
// webpackBootstrap /******/ "use strict";
/******/ "use strict"; /******/ var __webpack_modules__ = ({
/******/ var __webpack_modules__ = {
/***/ "./src/assets/js/Modal.js": /***/ "./src/assets/js/Modal.js":
/*!********************************!*\ /*!********************************!*\
!*** ./src/assets/js/Modal.js ***! !*** ./src/assets/js/Modal.js ***!
\********************************/ \********************************/
/***/ function ( /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__unused_webpack_module,
__webpack_exports__, eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Modal\": function() { return /* binding */ Modal; }\n/* harmony export */ });\nclass Modal {\n openModal() {\n const body = document.querySelector(\"body\");\n const button = document.querySelector(\".novelList__button\");\n const modalBack = document.querySelector(\".modalBackground\");\n const modal = document.querySelector(\".modal\");\n const closeButton = document.querySelector(\".modal__button\");\n\n // モーダルを表示する\n for (let i = 0; i < button.length; i++) {\n button[i].addEventListener(\"click\", (e) => {\n e.preventDefault();\n body.classList.add(\"open\");\n modalBack.classList.add(\"open\");\n modal[i].classList.add(\"open\");\n });\n }\n\n // モーダルを非表示にする\n closeButton.addEventListener(\"click\", () => {\n body.classList.remove(\"open\");\n modalBack.classList.remove(\"open\");\n for (let i = 0; i < modal.length; i++) {\n modal[i].classList.remove(\"open\");\n }\n });\n\n function menuClick() {\n body.classList.remove(\"open\");\n modalBack.classList.remove(\"open\");\n const modalElements = document.querySelector(\".modal\");\n\n modalElements.forEach((item) => {\n item.classList.remove(\"open\");\n });\n }\n\n const closeTrigger = document.querySelectorAll(\".closeButton\");\n closeTrigger.forEach((item) => {\n item.addEventListener(\"click\", menuClick);\n });\n }\n}\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/Modal.js?");
__webpack_require__
) { /***/ }),
eval(
'__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "Modal": function() { return /* binding */ Modal; }\n/* harmony export */ });\nclass Modal {\n openModal() {\n const body = document.getElementsByTagName("body")[0];\n const button = document.querySelectorAll(".novelList__button");\n const modalBack = document.querySelector(".modalBackground");\n const modal = document.querySelectorAll(".modal");\n const closeButton = document.querySelector(".modal__button");\n\n // モーダルを表示する\n for (let i = 0; i < button.length; i++) {\n button[i].addEventListener("click", (e) => {\n e.preventDefault();\n body.classList.add("open");\n modalBack.classList.add("open");\n modal[i].classList.add("open");\n });\n }\n\n // モーダルを非表示にする\n closeButton.addEventListener("click", () => {\n body.classList.remove("open");\n modalBack.classList.remove("open");\n for (let i = 0; i < modal.length; i++) {\n modal[i].classList.remove("open");\n }\n });\n\n function menuClick() {\n body.classList.remove("open");\n modalBack.classList.remove("open");\n const modalElements = document.querySelectorAll(".modal");\n\n modalElements.forEach((item) => {\n item.classList.remove("open");\n });\n }\n\n const closeTrigger = document.querySelectorAll(".closeButton");\n closeTrigger.forEach((item) => {\n item.addEventListener("click", menuClick);\n });\n }\n}\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/Modal.js?' /***/ "./src/assets/js/fadeIn.js":
); /*!*********************************!*\
!*** ./src/assets/js/fadeIn.js ***!
\*********************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Fade\": function() { return /* binding */ Fade; }\n/* harmony export */ });\n/* harmony import */ var throttle_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! throttle-debounce */ \"./node_modules/throttle-debounce/esm/index.js\");\n\nclass Fade {\n fadeIn() {\n window.addEventListener(\n \"scroll\",\n (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, () => {\n window.addEventListener(\"scroll\", () => {\n let element = document.getElementsByClassName(\"scrollUp\");\n if (!element) return;\n\n let scrollY = window.pageYOffset;\n let windowHeight = window.innerHeight;\n let showTiming = 200;\n for (let i = 0; i < element.length; i++) {\n let elementClientRect = element[i].getBoundingClientRect();\n let elementY = scrollY + elementClientRect.top;\n if (scrollY > elementY - windowHeight + showTiming) {\n element[i].classList.add(\"is-show\");\n }\n }\n });\n })\n );\n }\n}\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/fadeIn.js?");
/***/ /***/ }),
},
/***/ "./src/assets/js/fadeIn.js": /***/ "./src/assets/js/home.js":
/*!*********************************!*\ /*!*******************************!*\
!*** ./src/assets/js/fadeIn.js ***! !*** ./src/assets/js/home.js ***!
\*********************************/ \*******************************/
/***/ function ( /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__unused_webpack_module,
__webpack_exports__,
__webpack_require__
) {
eval(
'__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "Fade": function() { return /* binding */ Fade; }\n/* harmony export */ });\n/* harmony import */ var throttle_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! throttle-debounce */ "./node_modules/throttle-debounce/esm/index.js");\n\nclass Fade {\n fadeIn() {\n window.addEventListener(\n "scroll",\n (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, () => {\n window.addEventListener("scroll", () => {\n let element = document.getElementsByClassName("scrollUp");\n if (!element) return;\n\n let scrollY = window.pageYOffset;\n let windowHeight = window.innerHeight;\n let showTiming = 200;\n for (let i = 0; i < element.length; i++) {\n let elementClientRect = element[i].getBoundingClientRect();\n let elementY = scrollY + elementClientRect.top;\n if (scrollY > elementY - windowHeight + showTiming) {\n element[i].classList.add("is-show");\n }\n }\n });\n })\n );\n }\n}\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/fadeIn.js?'
);
/***/ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Modal_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Modal.js */ \"./src/assets/js/Modal.js\");\n/* harmony import */ var _fadeIn_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./fadeIn.js */ \"./src/assets/js/fadeIn.js\");\n\n\n\n// const modal = new Modal();\n// modal.openModal();\n\n// const fade = new Fade();\n// fade.fadeIn();\n\n// const variables1 = \"e\";\n\n// const variables1 = \"e\";\n\nclass Home {\n constructor() {\n // 初期化時に必ず実行される関数\n new _Modal_js__WEBPACK_IMPORTED_MODULE_0__.Modal();\n // new Fade();\n }\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n new Home();\n});\n\n// // グローバル汚染をしないようにする\n\n// class Home1 {\n// constructor() {\n// this.variables1 = \"from home\";\n// }\n// }\n\n// class Home2 {\n// constructor() {\n// this.variables1 = \"from home\";\n// }\n// }\n\n// $(function () {\n// const variables1 = 1;\n// });\n\n// window.addEventListener(\"DOMContentLoaded\", () => {\n// const variables1 = 1;\n// });\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?");
},
/***/ "./src/assets/js/home.js": /***/ }),
/*!*******************************!*\
!*** ./src/assets/js/home.js ***!
\*******************************/
/***/ function (
__unused_webpack_module,
__webpack_exports__,
__webpack_require__
) {
eval(
'__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Modal_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Modal.js */ "./src/assets/js/Modal.js");\n/* harmony import */ var _fadeIn_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./fadeIn.js */ "./src/assets/js/fadeIn.js");\n\n\n\nconst modal = new _Modal_js__WEBPACK_IMPORTED_MODULE_0__.Modal();\nmodal.openModal();\n\nconst fade = new _fadeIn_js__WEBPACK_IMPORTED_MODULE_1__.Fade();\nfade.fadeIn();\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?'
);
/***/ /***/ "./node_modules/throttle-debounce/esm/index.js":
}, /*!*****************************************************!*\
!*** ./node_modules/throttle-debounce/esm/index.js ***!
\*****************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
/***/ "./node_modules/throttle-debounce/esm/index.js": eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"debounce\": function() { return /* binding */ debounce; },\n/* harmony export */ \"throttle\": function() { return /* binding */ throttle; }\n/* harmony export */ });\n/* eslint-disable no-undefined,no-param-reassign,no-shadow */\n\n/**\n * Throttle execution of a function. Especially useful for rate limiting\n * execution of handlers on events like resize and scroll.\n *\n * @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)\n * are most useful.\n * @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,\n * as-is, to `callback` when the throttled-function is executed.\n * @param {object} [options] - An object to configure options.\n * @param {boolean} [options.noTrailing] - Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds\n * while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed\n * one final time after the last throttled-function call. (After the throttled-function has not been called for\n * `delay` milliseconds, the internal counter is reset).\n * @param {boolean} [options.noLeading] - Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback\n * immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that\n * callback will never executed if both noLeading = true and noTrailing = true.\n * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is\n * false (at end), schedule `callback` to execute after `delay` ms.\n *\n * @returns {Function} A new, throttled, function.\n */\nfunction throttle (delay, callback, options) {\n var _ref = options || {},\n _ref$noTrailing = _ref.noTrailing,\n noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,\n _ref$noLeading = _ref.noLeading,\n noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,\n _ref$debounceMode = _ref.debounceMode,\n debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;\n /*\n * After wrapper has stopped being called, this timeout ensures that\n * `callback` is executed at the proper times in `throttle` and `end`\n * debounce modes.\n */\n\n\n var timeoutID;\n var cancelled = false; // Keep track of the last time `callback` was executed.\n\n var lastExec = 0; // Function to clear existing timeout\n\n function clearExistingTimeout() {\n if (timeoutID) {\n clearTimeout(timeoutID);\n }\n } // Function to cancel next exec\n\n\n function cancel(options) {\n var _ref2 = options || {},\n _ref2$upcomingOnly = _ref2.upcomingOnly,\n upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;\n\n clearExistingTimeout();\n cancelled = !upcomingOnly;\n }\n /*\n * The `wrapper` function encapsulates all of the throttling / debouncing\n * functionality and when executed will limit the rate at which `callback`\n * is executed.\n */\n\n\n function wrapper() {\n for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {\n arguments_[_key] = arguments[_key];\n }\n\n var self = this;\n var elapsed = Date.now() - lastExec;\n\n if (cancelled) {\n return;\n } // Execute `callback` and update the `lastExec` timestamp.\n\n\n function exec() {\n lastExec = Date.now();\n callback.apply(self, arguments_);\n }\n /*\n * If `debounceMode` is true (at begin) this is used to clear the flag\n * to allow future `callback` executions.\n */\n\n\n function clear() {\n timeoutID = undefined;\n }\n\n if (!noLeading && debounceMode && !timeoutID) {\n /*\n * Since `wrapper` is being called for the first time and\n * `debounceMode` is true (at begin), execute `callback`\n * and noLeading != true.\n */\n exec();\n }\n\n clearExistingTimeout();\n\n if (debounceMode === undefined && elapsed > delay) {\n if (noLeading) {\n /*\n * In throttle mode with noLeading, if `delay` time has\n * been exceeded, update `lastExec` and schedule `callback`\n * to execute after `delay` ms.\n */\n lastExec = Date.now();\n\n if (!noTrailing) {\n timeoutID = setTimeout(debounceMode ? clear : exec, delay);\n }\n } else {\n /*\n * In throttle mode without noLeading, if `delay` time has been exceeded, execute\n * `callback`.\n */\n exec();\n }\n } else if (noTrailing !== true) {\n /*\n * In trailing throttle mode, since `delay` time has not been\n * exceeded, schedule `callback` to execute `delay` ms after most\n * recent execution.\n *\n * If `debounceMode` is true (at begin), schedule `clear` to execute\n * after `delay` ms.\n *\n * If `debounceMode` is false (at end), schedule `callback` to\n * execute after `delay` ms.\n */\n timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);\n }\n }\n\n wrapper.cancel = cancel; // Return the wrapper function.\n\n return wrapper;\n}\n\n/* eslint-disable no-undefined */\n/**\n * Debounce execution of a function. Debouncing, unlike throttling,\n * guarantees that a function is only executed a single time, either at the\n * very beginning of a series of calls, or at the very end.\n *\n * @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.\n * @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,\n * to `callback` when the debounced-function is executed.\n * @param {object} [options] - An object to configure options.\n * @param {boolean} [options.atBegin] - Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds\n * after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.\n * (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).\n *\n * @returns {Function} A new, debounced function.\n */\n\nfunction debounce (delay, callback, options) {\n var _ref = options || {},\n _ref$atBegin = _ref.atBegin,\n atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;\n\n return throttle(delay, callback, {\n debounceMode: atBegin !== false\n });\n}\n\n\n//# sourceMappingURL=index.js.map\n\n\n//# sourceURL=webpack://static-boilerplate/./node_modules/throttle-debounce/esm/index.js?");
/*!*****************************************************!*\
!*** ./node_modules/throttle-debounce/esm/index.js ***!
\*****************************************************/
/***/ function (
__unused_webpack___webpack_module__,
__webpack_exports__,
__webpack_require__
) {
eval(
'__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ "debounce": function() { return /* binding */ debounce; },\n/* harmony export */ "throttle": function() { return /* binding */ throttle; }\n/* harmony export */ });\n/* eslint-disable no-undefined,no-param-reassign,no-shadow */\n\n/**\n * Throttle execution of a function. Especially useful for rate limiting\n * execution of handlers on events like resize and scroll.\n *\n * @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)\n * are most useful.\n * @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,\n * as-is, to `callback` when the throttled-function is executed.\n * @param {object} [options] - An object to configure options.\n * @param {boolean} [options.noTrailing] - Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds\n * while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed\n * one final time after the last throttled-function call. (After the throttled-function has not been called for\n * `delay` milliseconds, the internal counter is reset).\n * @param {boolean} [options.noLeading] - Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback\n * immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that\n * callback will never executed if both noLeading = true and noTrailing = true.\n * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is\n * false (at end), schedule `callback` to execute after `delay` ms.\n *\n * @returns {Function} A new, throttled, function.\n */\nfunction throttle (delay, callback, options) {\n var _ref = options || {},\n _ref$noTrailing = _ref.noTrailing,\n noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,\n _ref$noLeading = _ref.noLeading,\n noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,\n _ref$debounceMode = _ref.debounceMode,\n debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;\n /*\n * After wrapper has stopped being called, this timeout ensures that\n * `callback` is executed at the proper times in `throttle` and `end`\n * debounce modes.\n */\n\n\n var timeoutID;\n var cancelled = false; // Keep track of the last time `callback` was executed.\n\n var lastExec = 0; // Function to clear existing timeout\n\n function clearExistingTimeout() {\n if (timeoutID) {\n clearTimeout(timeoutID);\n }\n } // Function to cancel next exec\n\n\n function cancel(options) {\n var _ref2 = options || {},\n _ref2$upcomingOnly = _ref2.upcomingOnly,\n upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;\n\n clearExistingTimeout();\n cancelled = !upcomingOnly;\n }\n /*\n * The `wrapper` function encapsulates all of the throttling / debouncing\n * functionality and when executed will limit the rate at which `callback`\n * is executed.\n */\n\n\n function wrapper() {\n for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {\n arguments_[_key] = arguments[_key];\n }\n\n var self = this;\n var elapsed = Date.now() - lastExec;\n\n if (cancelled) {\n return;\n } // Execute `callback` and update the `lastExec` timestamp.\n\n\n function exec() {\n lastExec = Date.now();\n callback.apply(self, arguments_);\n }\n /*\n * If `debounceMode` is true (at begin) this is used to clear the flag\n * to allow future `callback` executions.\n */\n\n\n function clear() {\n timeoutID = undefined;\n }\n\n if (!noLeading && debounceMode && !timeoutID) {\n /*\n * Since `wrapper` is being called for the first time and\n * `debounceMode` is true (at begin), execute `callback`\n * and noLeading != true.\n */\n exec();\n }\n\n clearExistingTimeout();\n\n if (debounceMode === undefined && elapsed > delay) {\n if (noLeading) {\n /*\n * In throttle mode with noLeading, if `delay` time has\n * been exceeded, update `lastExec` and schedule `callback`\n * to execute after `delay` ms.\n */\n lastExec = Date.now();\n\n if (!noTrailing) {\n timeoutID = setTimeout(debounceMode ? clear : exec, delay);\n }\n } else {\n /*\n * In throttle mode without noLeading, if `delay` time has been exceeded, execute\n * `callback`.\n */\n exec();\n }\n } else if (noTrailing !== true) {\n /*\n * In trailing throttle mode, since `delay` time has not been\n * exceeded, schedule `callback` to execute `delay` ms after most\n * recent execution.\n *\n * If `debounceMode` is true (at begin), schedule `clear` to execute\n * after `delay` ms.\n *\n * If `debounceMode` is false (at end), schedule `callback` to\n * execute after `delay` ms.\n */\n timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);\n }\n }\n\n wrapper.cancel = cancel; // Return the wrapper function.\n\n return wrapper;\n}\n\n/* eslint-disable no-undefined */\n/**\n * Debounce execution of a function. Debouncing, unlike throttling,\n * guarantees that a function is only executed a single time, either at the\n * very beginning of a series of calls, or at the very end.\n *\n * @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.\n * @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,\n * to `callback` when the debounced-function is executed.\n * @param {object} [options] - An object to configure options.\n * @param {boolean} [options.atBegin] - Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds\n * after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.\n * (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).\n *\n * @returns {Function} A new, debounced function.\n */\n\nfunction debounce (delay, callback, options) {\n var _ref = options || {},\n _ref$atBegin = _ref.atBegin,\n atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;\n\n return throttle(delay, callback, {\n debounceMode: atBegin !== false\n });\n}\n\n\n//# sourceMappingURL=index.js.map\n\n\n//# sourceURL=webpack://static-boilerplate/./node_modules/throttle-debounce/esm/index.js?'
);
/***/ /***/ })
},
/******/ /******/ });
}; /************************************************************************/
/************************************************************************/ /******/ // The module cache
/******/ // The module cache /******/ var __webpack_module_cache__ = {};
/******/ var __webpack_module_cache__ = {}; /******/
/******/ /******/ // The require function
/******/ // The require function /******/ function __webpack_require__(moduleId) {
/******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache
/******/ // Check if module is in cache /******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ var cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) {
/******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports;
/******/ return cachedModule.exports; /******/ }
/******/ /******/ // Create a new module (and put it into the cache)
} /******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // Create a new module (and put it into the cache) /******/ // no module.id needed
/******/ var module = (__webpack_module_cache__[moduleId] = { /******/ // no module.loaded needed
/******/ // no module.id needed /******/ exports: {}
/******/ // no module.loaded needed /******/ };
/******/ exports: {}, /******/
/******/ /******/ // Execute the module function
}); /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ /******/
/******/ // Execute the module function /******/ // Return the exports of the module
/******/ __webpack_modules__[moduleId]( /******/ return module.exports;
module, /******/ }
module.exports, /******/
__webpack_require__ /************************************************************************/
); /******/ /* webpack/runtime/define property getters */
/******/ /******/ !function() {
/******/ // Return the exports of the module /******/ // define getter functions for harmony exports
/******/ return module.exports; /******/ __webpack_require__.d = function(exports, definition) {
/******/ /******/ for(var key in definition) {
} /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/************************************************************************/ /******/ }
/******/ /* webpack/runtime/define property getters */ /******/ }
/******/ !(function () { /******/ };
/******/ // define getter functions for harmony exports /******/ }();
/******/ __webpack_require__.d = function (exports, definition) { /******/
/******/ for (var key in definition) { /******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ if ( /******/ !function() {
__webpack_require__.o(definition, key) && /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
!__webpack_require__.o(exports, key) /******/ }();
) { /******/
/******/ Object.defineProperty(exports, key, { /******/ /* webpack/runtime/make namespace object */
enumerable: true, /******/ !function() {
get: definition[key], /******/ // define __esModule on exports
}); /******/ __webpack_require__.r = function(exports) {
/******/ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
} /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ /******/ }
} /******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ /******/ };
}; /******/ }();
/******/ /******/
})(); /************************************************************************/
/******/ /******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ // startup
/******/ !(function () { /******/ // Load entry module and return exports
/******/ __webpack_require__.o = function (obj, prop) { /******/ // This entry module can't be inlined because the eval devtool is used.
return Object.prototype.hasOwnProperty.call(obj, prop); /******/ var __webpack_exports__ = __webpack_require__("./src/assets/js/home.js");
}; /******/
/******/ /******/ })()
})(); ;
/******/ \ No newline at end of file
/******/ /* webpack/runtime/make namespace object */
/******/ !(function () {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function (exports) {
/******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, {
value: "Module",
});
/******/
}
/******/ Object.defineProperty(exports, "__esModule", { value: true });
/******/
};
/******/
})();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = __webpack_require__(
"./src/assets/js/home.js"
);
/******/
/******/
})();
develop/.tmp/index.html
...@@ -70,19 +70,22 @@ ...@@ -70,19 +70,22 @@
<div class="novelList__content"> <div class="novelList__content">
<h2 class="novelList__title">吾輩は猫である</h2> <h2 class="novelList__title">吾輩は猫である</h2>
<p class="novelList__author">夏目漱石</p> <p class="novelList__author">夏目漱石</p>
</div><a class="novelList__button" href="">詳細を見る</a> </div>
<button class="novelList__button" type="button">詳細を見る</button>
</li> </li>
<li class="novelList__item"> <li class="novelList__item">
<div class="novelList__content"> <div class="novelList__content">
<h2 class="novelList__title">銀河鉄道の夜</h2> <h2 class="novelList__title">銀河鉄道の夜</h2>
<p class="novelList__author">宮沢賢治</p> <p class="novelList__author">宮沢賢治</p>
</div><a class="novelList__button" href="">詳細を見る</a> </div>
<button class="novelList__button" type="button">詳細を見る</button>
</li> </li>
<li class="novelList__item"> <li class="novelList__item">
<div class="novelList__content"> <div class="novelList__content">
<h2 class="novelList__title">風の歌を聴け</h2> <h2 class="novelList__title">風の歌を聴け</h2>
<p class="novelList__author">村上春樹</p> <p class="novelList__author">村上春樹</p>
</div><a class="novelList__button" href="">詳細を見る</a> </div>
<button class="novelList__button" type="button">詳細を見る</button>
</li> </li>
</ul> </ul>
</div> </div>
......
develop/src/assets/js/home.js
import { Modal } from "./Modal.js"; import { Modal } from "./Modal.js";
import { Fade } from "./fadeIn.js"; import { Fade } from "./fadeIn.js";
const modal = new Modal(); // const modal = new Modal();
modal.openModal(); // modal.openModal();
const fade = new Fade(); // const fade = new Fade();
fade.fadeIn(); // fade.fadeIn();
// const variables1 = "e";
// const variables1 = "e";
class Home {
constructor() {
// 初期化時に必ず実行される関数
new Modal();
// new Fade();
}
}
document.addEventListener("DOMContentLoaded", () => {
new Home();
});
// // グローバル汚染をしないようにする
// class Home1 {
// constructor() {
// this.variables1 = "from home";
// }
// }
// class Home2 {
// constructor() {
// this.variables1 = "from home";
// }
// }
// $(function () {
// const variables1 = 1;
// });
// window.addEventListener("DOMContentLoaded", () => {
// const variables1 = 1;
// });
develop/src/assets/js/modal copy.js 0 → 100644
// ドットシンタックス
const person = {
name: "小林勇太崇",
age: 24,
};
console.log(person.name);
export class Modal {
constructor() {
// this.body = document.querySelector("body");
// this.button = document.querySelector(".novelList__button");
// this.modalBack = document.querySelector(".modalBackground");
// this.modal = document.querySelector(".modal");
// this.closeButton = document.querySelector(".modal__button");
// DOM要素を取得している
this.elements = {
body: document.querySelector("body"),
button: document.querySelectorAll(".novelList__button"),
modalBack: document.querySelector(".modalBackground"),
modal: document.querySelectorAll(".modal"),
closeTrigger: document.querySelectorAll(".closeButton"),
};
// モーダルが開いた時のクラス名
this.openClassName = "open";
// モーダルを開く処理を登録
for (let i = 0; i < this.elements.button.length; i++) {
this.elements.button[i].addEventListener("click", () => {
this.open(i);
});
this.elements.button[i].addEventListener("click", () => {
this.open(i);
});
}
// モーダルを閉じる処理を登録
for (let i = 0; i < this.elements.closeTrigger.length; i++) {
this.elements.closeTrigger[i].addEventListener("click", () => {
this.close();
});
// this.elements.closeTrigger[i].addEventListener("click", this.close())
}
// for (let i = 0; i < button.length; i++) {
// button[i].addEventListener("click", (e) => {
// e.preventDefault(); //
// });
// }
}
// モーダルを開く処理
open(index) {
this.elements.body.classList.add(this.openClassName);
this.elements.modalBack.classList.add(this.openClassName);
this.elements.modal[index].classList.add(this.openClassName);
}
// モーダルを閉じる処理
close() {
this.elements.body.classList.remove(this.openClassName);
this.elements.modalBack.classList.remove(this.openClassName);
for (let i = 0; i < this.elements.modal.length; i++) {
this.elements.modal[i].classList.remove(this.openClassName);
}
}
// openModal() {
// // モーダルを非表示にする
// closeButton.addEventListener("click", () => {});
// function menuClick() {
// body.classList.remove(this.openClassName);
// modalBack.classList.remove(this.openClassName);
// const modalElements = document.querySelector(".modal");
// modalElements.forEach((item) => {
// item.classList.remove(this.openClassName);
// });
// }
// closeTrigger.forEach((item) => {
// item.addEventListener("click", menuClick);
// });
// }
}
// class Modal {
// constructor() {}
// }
// // きほんの形
// class ClassBase {
// constructor() {
// // クラスフィールドの定義
// this.xxx = "xxx";
// this.person = "kobayashi"; // 使いまわしたいもの
// this.SPEED = 1000; // 定数
// this.method02(); // SPEED : 1000
// this.method01(); // SPEED : 1200
// this.method02(); // SPEED : 1200
// }
// method01() {
// this.SPEED = 1200;
// console.log(this.SPEED);
// }
// method02() {
// console.log(this.SPEED);
// }
// method03() {
// console.log(this.xxx);
// }
// }
develop/src/assets/js/modal.js
// ドットシンタックス
const person = {
name: "小林勇太崇",
age: 24,
};
console.log(person.name);
export class Modal { export class Modal {
openModal() { constructor() {
const body = document.querySelector("body"); // this.body = document.querySelector("body");
const button = document.querySelector(".novelList__button"); // this.button = document.querySelector(".novelList__button");
const modalBack = document.querySelector(".modalBackground"); // this.modalBack = document.querySelector(".modalBackground");
const modal = document.querySelector(".modal"); // this.modal = document.querySelector(".modal");
const closeButton = document.querySelector(".modal__button"); // this.closeButton = document.querySelector(".modal__button");
// モーダルを表示する // DOM要素を取得している
for (let i = 0; i < button.length; i++) { this.elements = {
button[i].addEventListener("click", (e) => { body: document.querySelector("body"),
e.preventDefault(); button: document.querySelectorAll(".novelList__button"),
body.classList.add("open"); modalBack: document.querySelector(".modalBackground"),
modalBack.classList.add("open"); modal: document.querySelectorAll(".modal"),
modal[i].classList.add("open"); closeTrigger: document.querySelectorAll(".closeButton"),
};
// モーダルが開いた時のクラス名
this.openClassName = "open";
// モーダルを開く処理を登録
for (let i = 0; i < this.elements.button.length; i++) {
this.elements.button[i].addEventListener("click", () => {
this.open(i);
}); });
} }
// モーダルを閉じる処理を登録
for (let i = 0; i < this.elements.closeTrigger.length; i++) {
this.elements.closeTrigger[i].addEventListener("click", () => {});
// this.elements.closeTrigger[i].addEventListener("click", this.close())
}
// for (let i = 0; i < button.length; i++) {
// button[i].addEventListener("click", (e) => {
// e.preventDefault(); //
// });
// }
}
// モーダルを開く処理
open(index) {
this.elements.body.classList.add(this.openClassName);
this.elements.modalBack.classList.add(this.openClassName);
this.elements.modal[index].classList.add(this.openClassName);
}
// モーダルを閉じる処理
close() {
this.elements.body.classList.remove(this.openClassName);
this.elements.modalBack.classList.remove(this.openClassName);
for (let i = 0; i < this.elements.modal.length; i++) {
this.elements.modal[i].classList.remove(this.openClassName);
}
}
openModal() {
// モーダルを非表示にする // モーダルを非表示にする
closeButton.addEventListener("click", () => { closeButton.addEventListener("click", () => {});
body.classList.remove("open");
modalBack.classList.remove("open");
for (let i = 0; i < modal.length; i++) {
modal[i].classList.remove("open");
}
});
function menuClick() { function menuClick() {
body.classList.remove("open"); body.classList.remove(this.openClassName);
modalBack.classList.remove("open"); modalBack.classList.remove(this.openClassName);
const modalElements = document.querySelector(".modal"); const modalElements = document.querySelector(".modal");
modalElements.forEach((item) => { modalElements.forEach((item) => {
item.classList.remove("open"); item.classList.remove(this.openClassName);
}); });
} }
const closeTrigger = document.querySelector(".closeButton");
closeTrigger.forEach((item) => { closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick); item.addEventListener("click", menuClick);
}); });
} }
} }
// class Modal {
// constructor() {}
// }
// // きほんの形
// class ClassBase {
// constructor() {
// // クラスフィールドの定義
// this.xxx = "xxx";
// this.person = "kobayashi"; // 使いまわしたいもの
// this.SPEED = 1000; // 定数
// this.method02(); // SPEED : 1000
// this.method01(); // SPEED : 1200
// this.method02(); // SPEED : 1200
// }
// method01() {
// this.SPEED = 1200;
// console.log(this.SPEED);
// }
// method02() {
// console.log(this.SPEED);
// }
// method03() {
// console.log(this.xxx);
// }
// }
develop/src/assets/js/modal_.js 0 → 100644
export class Modal {
openModal() {
const body = document.querySelector("body");
const button = document.querySelector(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelector(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", (e) => {
e.preventDefault();
body.classList.add("open");
modalBack.classList.add("open");
modal[i].classList.add("open");
});
}
// モーダルを非表示にする
closeButton.addEventListener("click", () => {
body.classList.remove("open");
modalBack.classList.remove("open");
for (let i = 0; i < modal.length; i++) {
modal[i].classList.remove("open");
}
});
function menuClick() {
body.classList.remove("open");
modalBack.classList.remove("open");
const modalElements = document.querySelector(".modal");
modalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
}
develop/src/assets/js/second.js 0 → 100644
import { Fade } from "./fadeIn.js";
// クラス
class Second {
constructor() {
new Fade();
}
}
// 関数
const second = () => {
new Fade();
};
document.addEventListener("DOMContentLoaded", () => {
// クラス
new Second();
// 関数
second();
});
develop/src/html/index.pug
...@@ -40,19 +40,19 @@ block main ...@@ -40,19 +40,19 @@ block main
.novelList__content .novelList__content
h2.novelList__title 吾輩は猫である h2.novelList__title 吾輩は猫である
p.novelList__author 夏目漱石 p.novelList__author 夏目漱石
a(href="").novelList__button 詳細を見る button(type="button").novelList__button 詳細を見る
li.novelList__item li.novelList__item
.novelList__content .novelList__content
h2.novelList__title 銀河鉄道の夜 h2.novelList__title 銀河鉄道の夜
p.novelList__author 宮沢賢治 p.novelList__author 宮沢賢治
a(href="").novelList__button 詳細を見る button(type="button").novelList__button 詳細を見る
li.novelList__item li.novelList__item
.novelList__content .novelList__content
h2.novelList__title 風の歌を聴け h2.novelList__title 風の歌を聴け
p.novelList__author 村上春樹 p.novelList__author 村上春樹
a(href="").novelList__button 詳細を見る button(type="button").novelList__button 詳細を見る
.content .content
.contentBox.--music .contentBox.--music
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!