Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit 54321859 by Yutaka Kobayashi
Options

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

1 parent a3fc6b7b
Inline Side-by-side
Showing with 22 additions and 31 deletions
develop/.tmp/assets/js/home.js
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
\*******************************/ \*******************************/
/***/ (function() { /***/ (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 deleted 100644 → 0
.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 deleted 100644 → 0
{"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 @@ ...@@ -31,8 +31,8 @@
<div class="modalInner"> <div class="modalInner">
<h2 class="modal__title">吾輩は猫である</h2> <h2 class="modal__title">吾輩は猫である</h2>
<p class="modal__text">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p> <p class="modal__text">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p class="modal__button">閉じる</p> <p class="modal__button closeButton">閉じる</p>
<div class="close"> <div class="close 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>
...@@ -42,8 +42,8 @@ ...@@ -42,8 +42,8 @@
<div class="modalInner"> <div class="modalInner">
<h2 class="modal__title">銀河鉄道の夜</h2> <h2 class="modal__title">銀河鉄道の夜</h2>
<p class="modal__text">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p> <p class="modal__text">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p>
<p class="modal__button">閉じる</p> <p class="modal__button closeButton">閉じる</p>
<div class="close"> <div class="close 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>
...@@ -53,8 +53,8 @@ ...@@ -53,8 +53,8 @@
<div class="modalInner"> <div class="modalInner">
<h2 class="modal__title">風の歌を聴け</h2> <h2 class="modal__title">風の歌を聴け</h2>
<p class="modal__text">「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。</p> <p class="modal__text">「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。</p>
<p class="modal__button">閉じる</p> <p class="modal__button closeButton">閉じる</p>
<div class="close"> <div class="close 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>
......
develop/src/assets/js/home.js
...@@ -6,14 +6,14 @@ class Home { ...@@ -6,14 +6,14 @@ class Home {
modal() { modal() {
const body = document.getElementsByTagName("body")[0]; const body = document.getElementsByTagName("body")[0];
const btn = document.querySelectorAll(".novelList__button"); const button = document.querySelectorAll(".novelList__button");
const modalBack = document.querySelector(".modalBackground"); const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal"); 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++) { for (let i = 0; i < button.length; i++) {
btn[i].addEventListener("click", addOpen); button[i].addEventListener("click", addOpen);
function addOpen(e) { function addOpen(e) {
e.preventDefault(); e.preventDefault();
body.classList.add("open"); body.classList.add("open");
...@@ -23,7 +23,7 @@ class Home { ...@@ -23,7 +23,7 @@ class Home {
} }
// モーダルを非表示にする // モーダルを非表示にする
closeBtn.addEventListener("click", function () { closebutton.addEventListener("click", function () {
body.classList.remove("open"); body.classList.remove("open");
modalBack.classList.remove("open"); modalBack.classList.remove("open");
for (let i = 0; i < modal.length; i++) { for (let i = 0; i < modal.length; i++) {
...@@ -32,7 +32,6 @@ class Home { ...@@ -32,7 +32,6 @@ class Home {
}); });
function menuClick() { function menuClick() {
const menus = document.getElementsByClassName("close");
body.classList.remove("open"); body.classList.remove("open");
modalBack.classList.remove("open"); modalBack.classList.remove("open");
const hogeElements = document.querySelectorAll(".modal"); const hogeElements = document.querySelectorAll(".modal");
...@@ -42,15 +41,10 @@ class Home { ...@@ -42,15 +41,10 @@ class Home {
}); });
} }
const menus = document.getElementsByClassName("close"); const closeTrigger = document.querySelectorAll(".closeButton");
for (let i = 0; i < menus.length; i++) { closeTrigger.forEach((item) => {
menus[i].addEventListener("click", menuClick, false); item.addEventListener("click", menuClick, false);
} });
const menus02 = document.getElementsByClassName("modal__button");
for (let i = 0; i < menus.length; i++) {
menus02[i].addEventListener("click", menuClick, false);
}
} }
// フェードイン // フェードイン
......
develop/src/html/index.pug
...@@ -8,8 +8,8 @@ block main ...@@ -8,8 +8,8 @@ block main
.modalInner .modalInner
h2.modal__title 吾輩は猫である h2.modal__title 吾輩は猫である
p.modal__text 吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 p.modal__text 吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
p.modal__button 閉じる p.modal__button.closeButton 閉じる
.close .close.closeButton
.close__line.--type01 .close__line.--type01
.close__line.--type02 .close__line.--type02
...@@ -17,8 +17,8 @@ block main ...@@ -17,8 +17,8 @@ block main
.modalInner .modalInner
h2.modal__title 銀河鉄道の夜 h2.modal__title 銀河鉄道の夜
p.modal__text 「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。 p.modal__text 「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。
p.modal__button 閉じる p.modal__button.closeButton 閉じる
.close .close.closeButton
.close__line.--type01 .close__line.--type01
.close__line.--type02 .close__line.--type02
...@@ -26,8 +26,8 @@ block main ...@@ -26,8 +26,8 @@ block main
.modalInner .modalInner
h2.modal__title 風の歌を聴け h2.modal__title 風の歌を聴け
p.modal__text 「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。 p.modal__text 「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。
p.modal__button 閉じる p.modal__button.closeButton 閉じる
.close .close.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!