Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit 93cc70e6 by Yutaka Kobayashi
Options

modalが動いたので一旦保存

1 parent 0ab81146
Expand all
Inline Side-by-side
Showing with 160 additions and 78 deletions
develop/src/assets/js/fadeIn.js 0 → 100644
import { throttle } from "throttle-debounce";
class Home {
constructor() {
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);
});
}
// フェードイン
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");
}
}
});
})
);
}
}
window.addEventListener("DOMContentLoaded", () => {
new Home();
});
develop/src/assets/js/home.js
import { throttle } from "throttle-debounce"; import { Modal } from "./Modal.js";
class Home {
constructor() { const modal = new Modal();
this.modal(); modal.openModal();
this.fadeIn();
} // class Home {
// constructor() {
modal() { // this.Modal();
const body = document.getElementsByTagName("body")[0]; // this.fadeIn();
const button = document.querySelectorAll(".novelList__button"); // }
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal"); // // フェードイン
const closeButton = document.querySelector(".modal__button"); // fadeIn() {
// window.addEventListener(
// モーダルを表示する // "scroll",
for (let i = 0; i < button.length; i++) { // throttle(300, () => {
button[i].addEventListener("click", addOpen); // window.addEventListener("scroll", () => {
function addOpen(e) { // var element = document.getElementsByClassName("scrollUp");
e.preventDefault(); // if (!element) return;
body.classList.add("open");
modalBack.classList.add("open"); // var scrollY = window.pageYOffset;
modal[i].classList.add("open"); // 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;
closeButton.addEventListener("click", () => { // if (scrollY > elementY - windowHeight + showTiming) {
body.classList.remove("open"); // element[i].classList.add("is-show");
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"); // window.addEventListener("DOMContentLoaded", () => {
const mpdalElements = document.querySelectorAll(".modal"); // new Home();
// });
mpdalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
// フェードイン
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");
}
}
});
})
);
}
}
window.addEventListener("DOMContentLoaded", () => {
new Home();
});
develop/src/assets/js/modal.js 0 → 100644
export class Modal {
openModal() {
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", (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.querySelectorAll(".modal");
modalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
}
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!