閉じる用のjs用のクラスを用意してそのクラスがあるものに対してイベントを付与する形に変更

develop/.tmp/assets/js/home.js

@@ -15,7 +15,7 @@
   \*******************************/
 /***/ (function() {
 
-eval("class Home {\n  constructor() {\n    this.modal();\n    this.fadeIn();\n  }\n\n  modal() {\n    const body = document.getElementsByTagName(\"body\")[0];\n    const btn = document.querySelectorAll(\".novelList__button\");\n    const modalBack = document.querySelector(\".modalBackground\");\n    const modal = document.querySelectorAll(\".modal\");\n    const closeBtn = document.querySelector(\".modal__button\");\n\n    // モーダルを表示する\n    for (let i = 0; i < btn.length; i++) {\n      btn[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    closeBtn.addEventListener(\"click\", function () {\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      const menus = document.getElementsByClassName(\"close\");\n      body.classList.remove(\"open\");\n      modalBack.classList.remove(\"open\");\n      const hogeElements = document.querySelectorAll(\".modal\");\n\n      hogeElements.forEach((item) => {\n        item.classList.remove(\"open\");\n      });\n    }\n\n    const menus = document.getElementsByClassName(\"close\");\n    for (let i = 0; i < menus.length; i++) {\n      menus[i].addEventListener(\"click\", menuClick, false);\n    }\n\n    const menus02 = document.getElementsByClassName(\"modal__button\");\n    for (let i = 0; i < menus.length; i++) {\n      menus02[i].addEventListener(\"click\", menuClick, false);\n    }\n  }\n\n  // フェードイン\n  fadeIn() {\n    function scroll_effect() {\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    window.addEventListener(\"scroll\", scroll_effect);\n  }\n}\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n  new Home();\n});\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?");
+eval("class 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\", function () {\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 hogeElements = document.querySelectorAll(\".modal\");\n\n      hogeElements.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, false);\n    });\n  }\n\n  // フェードイン\n  fadeIn() {\n    function scroll_effect() {\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    window.addEventListener(\"scroll\", scroll_effect);\n  }\n}\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n  new Home();\n});\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?");
 
 /***/ })
 

develop/.tmp/assets/styles/dist/magnific-popup.css

-.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:none !important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container:before{content:"";display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-inline-holder .mfp-content,.mfp-ajax-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none !important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-0.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-ready .mfp-preloader{display:none}.mfp-s-error .mfp-content{display:none}button.mfp-close,button.mfp-arrow{overflow:visible;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;display:block;outline:none;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;color:#fff;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:hover,.mfp-close:focus{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-image-holder .mfp-close,.mfp-iframe-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px;white-space:nowrap}.mfp-arrow{position:absolute;opacity:.65;margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:hover,.mfp-arrow:focus{opacity:1}.mfp-arrow:before,.mfp-arrow:after{content:"";display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3f3f3f}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #fff;margin-left:39px}.mfp-arrow-right:before{border-left:27px solid #3f3f3f}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0, 0, 0, 0.6);background:#000}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:40px 0 40px;margin:0 auto}.mfp-figure{line-height:0}.mfp-figure:after{content:"";position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:0 0 8px rgba(0, 0, 0, 0.6);background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width: 800px)and (orientation: landscape),screen and (max-height: 300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0, 0, 0, 0.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0, 0, 0, 0.6);position:fixed;text-align:center;padding:0}}@media all and (max-width: 900px){.mfp-arrow{-webkit-transform:scale(0.75);transform:scale(0.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}/*# sourceMappingURL=magnific-popup.css.map */

develop/.tmp/assets/styles/dist/magnific-popup.css.map

-{"version":3,"sourceRoot":"","sources":["../../../../src/assets/styles/dist/magnific-popup.css"],"names":[],"mappings":"AAAA,QACE,MACA,OACA,WACA,YACA,aACA,gBACA,eACA,mBACA,WAEF,UACE,MACA,OACA,WACA,YACA,aACA,eACA,wBACA,mCAEF,eACE,kBACA,kBACA,WACA,YACA,OACA,MACA,cACA,sBAEF,sBACE,WACA,qBACA,YACA,sBAEF,qCACE,aAEF,aACE,kBACA,qBACA,sBACA,cACA,gBACA,aAEF,8DAEE,WACA,YAEF,cACE,gBAEF,iEAEE,qBACA,wBACA,gBAEF,UACE,eACA,uBACA,oBACA,eAEF,8BACE,YAEF,kDAIE,yBACA,sBACA,iBAEF,wBACE,aAEF,UACE,wBAEF,eACE,WACA,kBACA,QACA,WACA,kBACA,kBACA,SACA,UACA,aAEF,iBACE,WAEF,uBACE,WAEF,4BACE,aAEF,0BACE,aAEF,kCAEE,iBACA,eACA,uBACA,SACA,wBACA,cACA,aACA,UACA,aACA,gBACA,0BAEF,yBACE,UACA,SAEF,WACE,WACA,YACA,iBACA,kBACA,QACA,MACA,qBACA,kBACA,YACA,sBACA,WACA,kBACA,eACA,wCAEF,kCAEE,UAEF,kBACE,QAEF,6BACE,WAEF,2DAEE,WACA,WACA,iBACA,kBACA,WAEF,aACE,kBACA,MACA,QACA,WACA,eACA,iBACA,mBAEF,WACE,kBACA,YACA,SACA,QACA,iBACA,UACA,WACA,aACA,wCAEF,kBACE,iBAEF,kCAEE,UAEF,mCAEE,WACA,cACA,QACA,SACA,kBACA,OACA,MACA,gBACA,iBACA,gCAEF,iBACE,sBACA,yBACA,QAEF,kBACE,sBACA,yBACA,WAEF,gBACE,OAEF,sBACE,6BACA,iBAEF,uBACE,iBACA,gCAEF,iBACE,QAEF,uBACE,4BACA,iBAEF,wBACE,+BAEF,mBACE,iBACA,oBAEF,gCACE,cACA,WACA,gBAEF,8BACE,UAEF,mBACE,WACA,SACA,gBACA,mBAEF,0BACE,kBACA,cACA,MACA,OACA,WACA,YACA,sCACA,gBAEF,YACE,WACA,eACA,YACA,cACA,cACA,sBACA,oBACA,cAEF,YACE,cAEF,kBACE,WACA,kBACA,OACA,SACA,YACA,cACA,QACA,WACA,YACA,WACA,sCACA,gBAEF,kBACE,cACA,cACA,eACA,iBAEF,mBACE,SAEF,gBACE,iBACA,kBACA,SACA,OACA,WACA,YAEF,WACE,gBACA,iBACA,cACA,qBACA,mBAEF,+BACE,eAEF,2CACE,eAEF,gGAEE,kCACE,eACA,gBAEF,4BACE,UAEF,kCACE,MACA,SAEF,kCACE,eACA,gBAEF,gCACE,8BACA,SACA,SACA,SACA,gBACA,eACA,sBAEF,sCACE,UAEF,6BACE,UACA,QAEF,2BACE,MACA,QACA,WACA,YACA,iBACA,8BACA,eACA,kBACA,WAGJ,kCACE,WACE,8BACA,sBAEF,gBACE,2BACA,mBAEF,iBACE,8BACA,sBAEF,eACE,iBACA","file":"magnific-popup.css"}
\ No newline at end of file

develop/.tmp/index.html

@@ -31,8 +31,8 @@
         <div class="modalInner">
           <h2 class="modal__title">吾輩は猫である</h2>
           <p class="modal__text">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
-          <p class="modal__button">閉じる</p>
-          <div class="close">
+          <p class="modal__button closeButton">閉じる</p>
+          <div class="close closeButton">
             <div class="close__line --type01"></div>
             <div class="close__line --type02"></div>
           </div>
@@ -42,8 +42,8 @@
         <div class="modalInner">
           <h2 class="modal__title">銀河鉄道の夜</h2>
           <p class="modal__text">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p>
-          <p class="modal__button">閉じる</p>
-          <div class="close">
+          <p class="modal__button closeButton">閉じる</p>
+          <div class="close closeButton">
             <div class="close__line --type01"></div>
             <div class="close__line --type02"></div>
           </div>
@@ -53,8 +53,8 @@
         <div class="modalInner">
           <h2 class="modal__title">風の歌を聴け</h2>
           <p class="modal__text">「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。</p>
-          <p class="modal__button">閉じる</p>
-          <div class="close">
+          <p class="modal__button closeButton">閉じる</p>
+          <div class="close closeButton">
             <div class="close__line --type01"></div>
             <div class="close__line --type02"></div>
           </div>

develop/src/assets/js/home.js

@@ -6,14 +6,14 @@ class Home {
 
   modal() {
     const body = document.getElementsByTagName("body")[0];
-    const btn = document.querySelectorAll(".novelList__button");
+    const button = document.querySelectorAll(".novelList__button");
     const modalBack = document.querySelector(".modalBackground");
     const modal = document.querySelectorAll(".modal");
-    const closeBtn = document.querySelector(".modal__button");
+    const closebutton = document.querySelector(".modal__button");
 
     // モーダルを表示する
-    for (let i = 0; i < btn.length; i++) {
-      btn[i].addEventListener("click", addOpen);
+    for (let i = 0; i < button.length; i++) {
+      button[i].addEventListener("click", addOpen);
       function addOpen(e) {
         e.preventDefault();
         body.classList.add("open");
@@ -23,7 +23,7 @@ class Home {
     }
 
     // モーダルを非表示にする
-    closeBtn.addEventListener("click", function () {
+    closebutton.addEventListener("click", function () {
       body.classList.remove("open");
       modalBack.classList.remove("open");
       for (let i = 0; i < modal.length; i++) {
@@ -32,7 +32,6 @@ class Home {
     });
 
     function menuClick() {
-      const menus = document.getElementsByClassName("close");
       body.classList.remove("open");
       modalBack.classList.remove("open");
       const hogeElements = document.querySelectorAll(".modal");
@@ -42,15 +41,10 @@ class Home {
       });
     }
 
-    const menus = document.getElementsByClassName("close");
-    for (let i = 0; i < menus.length; i++) {
-      menus[i].addEventListener("click", menuClick, false);
-    }
-
-    const menus02 = document.getElementsByClassName("modal__button");
-    for (let i = 0; i < menus.length; i++) {
-      menus02[i].addEventListener("click", menuClick, false);
-    }
+    const closeTrigger = document.querySelectorAll(".closeButton");
+    closeTrigger.forEach((item) => {
+      item.addEventListener("click", menuClick, false);
+    });
   }
 
   // フェードイン

develop/src/html/index.pug

@@ -8,8 +8,8 @@ block main
       .modalInner
         h2.modal__title 吾輩は猫である
         p.modal__text 吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
-        p.modal__button 閉じる
-        .close
+        p.modal__button.closeButton 閉じる
+        .close.closeButton
           .close__line.--type01
           .close__line.--type02
 
@@ -17,8 +17,8 @@ block main
       .modalInner
         h2.modal__title 銀河鉄道の夜
         p.modal__text 「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。
-        p.modal__button 閉じる
-        .close
+        p.modal__button.closeButton 閉じる
+        .close.closeButton
           .close__line.--type01
           .close__line.--type02
 
@@ -26,8 +26,8 @@ block main
       .modalInner
         h2.modal__title 風の歌を聴け
         p.modal__text 「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。
-        p.modal__button 閉じる
-        .close
+        p.modal__button.closeButton 閉じる
+        .close.closeButton
           .close__line.--type01
           .close__line.--type02