Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit c0ec1fd1 by Yutaka Kobayashi
Options

Merge commit '62edc9b6' into develop

2 parents 14ebb36f 62edc9b6
Inline Side-by-side
Showing with 78 additions and 80 deletions
develop/.tmp/assets/js/home.js
...@@ -9,99 +9,24 @@ ...@@ -9,99 +9,24 @@
/******/ (function() { // webpackBootstrap /******/ (function() { // webpackBootstrap
/******/ 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() {
"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?");
/***/ }),
/***/ "./src/assets/js/modal.js":
/*!********************************!*\
!*** ./src/assets/js/modal.js ***!
\********************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict"; eval("throw new Error(\"Module parse failed: Unexpected token (1:0)\\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> <<<<<<< HEAD\\n| window.addEventListener(\\\"DOMContentLoaded\\\", () => {\\n| modal();\");\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?");
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?");
/***/ }) /***/ })
/******/ }); /******/ });
/************************************************************************/ /************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony 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/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* 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 /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used. /******/ // This entry module doesn't tell about it's top-level declarations so it can't be inlined
/******/ var __webpack_exports__ = __webpack_require__("./src/assets/js/home.js"); /******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/assets/js/home.js"]();
/******/ /******/
/******/ })() /******/ })()
; ;
\ No newline at end of file
develop/src/assets/js/fadeIn.js
import { throttle } from "throttle-debounce"; import { throttle } from "throttle-debounce";
<<<<<<< HEAD
export function fadeIn() { export function fadeIn() {
// フェードイン // フェードイン
=======
export class Fade {
>>>>>>> 62edc9b6577a872ce95b85c866ef52ea7890671d
fadeIn() { fadeIn() {
window.addEventListener( window.addEventListener(
"scroll", "scroll",
throttle(300, () => { throttle(300, () => {
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
<<<<<<< HEAD
var element = document.getElementsByClassName("scrollUp"); var element = document.getElementsByClassName("scrollUp");
if (!element) return; if (!element) return;
...@@ -16,6 +21,17 @@ export function fadeIn() { ...@@ -16,6 +21,17 @@ export function fadeIn() {
for (var i = 0; i < element.length; i++) { for (var i = 0; i < element.length; i++) {
var elementClientRect = element[i].getBoundingClientRect(); var elementClientRect = element[i].getBoundingClientRect();
var elementY = scrollY + elementClientRect.top; var elementY = scrollY + elementClientRect.top;
=======
let element = document.getElementsByClassName("scrollUp");
if (!element) return;
let scrollY = window.pageYOffset;
let windowHeight = window.innerHeight;
let showTiming = 200;
for (let i = 0; i < element.length; i++) {
let elementClientRect = element[i].getBoundingClientRect();
let elementY = scrollY + elementClientRect.top;
>>>>>>> 62edc9b6577a872ce95b85c866ef52ea7890671d
if (scrollY > elementY - windowHeight + showTiming) { if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show"); element[i].classList.add("is-show");
} }
......
develop/src/assets/js/home.js
<<<<<<< HEAD
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
modal(); modal();
fadeIn(); fadeIn();
...@@ -17,3 +18,13 @@ import { fadeIn } from "./fadeIn"; ...@@ -17,3 +18,13 @@ import { fadeIn } from "./fadeIn";
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
new Home(); new Home();
}); });
=======
import { Modal } from "./Modal.js";
import { Fade } from "./fadeIn.js";
const modal = new Modal();
modal.openModal();
const fade = new Fade();
fade.fadeIn();
>>>>>>> 62edc9b6577a872ce95b85c866ef52ea7890671d
develop/src/assets/js/modal.js
<<<<<<< HEAD
export function modal() { export function modal() {
const body = document.getElementsByTagName("body")[0]; const body = document.getElementsByTagName("body")[0];
const button = document.querySelectorAll(".novelList__button"); const button = document.querySelectorAll(".novelList__button");
...@@ -39,4 +40,48 @@ export function modal() { ...@@ -39,4 +40,48 @@ export function modal() {
closeTrigger.forEach((item) => { closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick); item.addEventListener("click", menuClick);
}); });
=======
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.querySelector(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
>>>>>>> 62edc9b6577a872ce95b85c866ef52ea7890671d
} }
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!