Commit 14ebb36f by Yutaka Kobayashi

ファイルを外部からimport

1 parent 0ab81146
...@@ -7,26 +7,37 @@ ...@@ -7,26 +7,37 @@
* 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() { // webpackBootstrap /******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ "./src/assets/js/fadeIn.js":
/*!*********************************!*\
!*** ./src/assets/js/fadeIn.js ***!
\*********************************/
/***/ (function() {
eval("throw new Error(\"Module parse failed: Unexpected token (5:11)\\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\\n| export function fadeIn() {\\n| // フェードイン\\n> fadeIn() {\\n| window.addEventListener(\\n| \\\"scroll\\\",\");\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/fadeIn.js?");
/***/ }),
/***/ "./src/assets/js/home.js": /***/ "./src/assets/js/home.js":
/*!*******************************!*\ /*!*******************************!*\
!*** ./src/assets/js/home.js ***! !*** ./src/assets/js/home.js ***!
\*******************************/ \*******************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var throttle_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! throttle-debounce */ \"./node_modules/throttle-debounce/esm/index.js\");\n\nclass Home {\n constructor() {\n this.modal();\n this.fadeIn();\n }\n\n modal() {\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\", addOpen);\n function addOpen(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 mpdalElements = document.querySelectorAll(\".modal\");\n\n mpdalElements.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 fadeIn() {\n window.addEventListener(\n \"scroll\",\n (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, () => {\n window.addEventListener(\"scroll\", () => {\n var element = document.getElementsByClassName(\"scrollUp\");\n if (!element) return;\n\n var scrollY = window.pageYOffset;\n var windowHeight = window.innerHeight;\n var showTiming = 200;\n for (var i = 0; i < element.length; i++) {\n var elementClientRect = element[i].getBoundingClientRect();\n var 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\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n new Home();\n});\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?"); "use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modal */ \"./src/assets/js/modal.js\");\n/* harmony import */ var _fadeIn__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./fadeIn */ \"./src/assets/js/fadeIn.js\");\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n (0,_modal__WEBPACK_IMPORTED_MODULE_0__.modal)();\n (0,_fadeIn__WEBPACK_IMPORTED_MODULE_1__.fadeIn)();\n});\n\n// import { throttle } from \"throttle-debounce\";\n\n\n\n// class Home {\n// constructor() {\n// this.modal();\n// this.fadeIn();\n// }\n// }\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n new Home();\n});\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?");
/***/ }), /***/ }),
/***/ "./node_modules/throttle-debounce/esm/index.js": /***/ "./src/assets/js/modal.js":
/*!*****************************************************!*\ /*!********************************!*\
!*** ./node_modules/throttle-debounce/esm/index.js ***! !*** ./src/assets/js/modal.js ***!
\*****************************************************/ \********************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { /***/ (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 */ \"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?"); "use strict";
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 */ });\nfunction modal() {\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\", addOpen);\n function addOpen(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 mpdalElements = document.querySelectorAll(\".modal\");\n\n mpdalElements.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//# sourceURL=webpack://static-boilerplate/./src/assets/js/modal.js?");
/***/ }) /***/ })
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<h2 class="modal__title">吾輩は猫である</h2> <h2 class="modal__title">吾輩は猫である</h2>
<p class="modal__text">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p> <p class="modal__text">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p class="modal__button closeButton">閉じる</p> <p class="modal__button closeButton">閉じる</p>
<div class="close closeButton"> <div class="close__sign closeButton">
<div class="close__line --type01"></div> <div class="close__line --type01"></div>
<div class="close__line --type02"></div> <div class="close__line --type02"></div>
</div> </div>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<h2 class="modal__title">銀河鉄道の夜</h2> <h2 class="modal__title">銀河鉄道の夜</h2>
<p class="modal__text">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p> <p class="modal__text">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p>
<p class="modal__button closeButton">閉じる</p> <p class="modal__button closeButton">閉じる</p>
<div class="close closeButton"> <div class="close__sign closeButton">
<div class="close__line --type01"></div> <div class="close__line --type01"></div>
<div class="close__line --type02"></div> <div class="close__line --type02"></div>
</div> </div>
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<h2 class="modal__title">風の歌を聴け</h2> <h2 class="modal__title">風の歌を聴け</h2>
<p class="modal__text">「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。</p> <p class="modal__text">「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。</p>
<p class="modal__button closeButton">閉じる</p> <p class="modal__button closeButton">閉じる</p>
<div class="close closeButton"> <div class="close__sign closeButton">
<div class="close__line --type01"></div> <div class="close__line --type01"></div>
<div class="close__line --type02"></div> <div class="close__line --type02"></div>
</div> </div>
......
import { throttle } from "throttle-debounce";
export function fadeIn() {
// フェードイン
fadeIn() {
window.addEventListener(
"scroll",
throttle(300, () => {
window.addEventListener("scroll", () => {
var element = document.getElementsByClassName("scrollUp");
if (!element) return;
var scrollY = window.pageYOffset;
var windowHeight = window.innerHeight;
var showTiming = 200;
for (var i = 0; i < element.length; i++) {
var elementClientRect = element[i].getBoundingClientRect();
var elementY = scrollY + elementClientRect.top;
if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show");
}
}
});
})
);
}
}
import { throttle } from "throttle-debounce"; window.addEventListener("DOMContentLoaded", () => {
class Home { modal();
constructor() { fadeIn();
this.modal(); });
this.fadeIn();
}
modal() {
const body = document.getElementsByTagName("body")[0];
const button = document.querySelectorAll(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", addOpen);
function addOpen(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 mpdalElements = document.querySelectorAll(".modal");
mpdalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
// フェードイン // import { throttle } from "throttle-debounce";
fadeIn() { import { modal } from "./modal";
window.addEventListener( import { fadeIn } from "./fadeIn";
"scroll",
throttle(300, () => {
window.addEventListener("scroll", () => {
var element = document.getElementsByClassName("scrollUp");
if (!element) return;
var scrollY = window.pageYOffset; // class Home {
var windowHeight = window.innerHeight; // constructor() {
var showTiming = 200; // this.modal();
for (var i = 0; i < element.length; i++) { // this.fadeIn();
var elementClientRect = element[i].getBoundingClientRect(); // }
var elementY = scrollY + elementClientRect.top; // }
if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show");
}
}
});
})
);
}
}
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
new Home(); new Home();
......
export function modal() {
const body = document.getElementsByTagName("body")[0];
const button = document.querySelectorAll(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", addOpen);
function addOpen(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 mpdalElements = document.querySelectorAll(".modal");
mpdalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
} }
/* クローズボタン */ /* クローズボタン */
.close { .close__sign {
width: 25px; width: 25px;
height: 25px; height: 25px;
position: absolute; position: absolute;
......
...@@ -9,7 +9,7 @@ block main ...@@ -9,7 +9,7 @@ block main
h2.modal__title 吾輩は猫である h2.modal__title 吾輩は猫である
p.modal__text 吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 p.modal__text 吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
p.modal__button.closeButton 閉じる p.modal__button.closeButton 閉じる
.close.closeButton .close__sign.closeButton
.close__line.--type01 .close__line.--type01
.close__line.--type02 .close__line.--type02
...@@ -18,7 +18,7 @@ block main ...@@ -18,7 +18,7 @@ block main
h2.modal__title 銀河鉄道の夜 h2.modal__title 銀河鉄道の夜
p.modal__text 「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。 p.modal__text 「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。
p.modal__button.closeButton 閉じる p.modal__button.closeButton 閉じる
.close.closeButton .close__sign.closeButton
.close__line.--type01 .close__line.--type01
.close__line.--type02 .close__line.--type02
...@@ -27,7 +27,7 @@ block main ...@@ -27,7 +27,7 @@ block main
h2.modal__title 風の歌を聴け h2.modal__title 風の歌を聴け
p.modal__text 「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。 p.modal__text 「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。
p.modal__button.closeButton 閉じる p.modal__button.closeButton 閉じる
.close.closeButton .close__sign.closeButton
.close__line.--type01 .close__line.--type01
.close__line.--type02 .close__line.--type02
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!