Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit ec58005a by Yutaka Kobayashi
Options

一旦コミット

1 parent 0315452d
Expand all
Inline Side-by-side
Showing with 33 additions and 300 deletions
develop/src/assets/js/fadeIn.js
import { throttle } from "throttle-debounce"; import { throttle } from "throttle-debounce";
export class Fade { export class Fade {
fadeIn() { constructor() {
window.addEventListener( this.elements = {
"scroll", element: document.getElementsByClassName("scrollUp"),
throttle(300, () => { scrollY: window.pageYOffset,
window.addEventListener("scroll", () => { windowHeight: window.innerHeight,
let element = document.getElementsByClassName("scrollUp"); showTiming: 200,
if (!element) return; };
}
let scrollY = window.pageYOffset; window.addEventListener(
let windowHeight = window.innerHeight; "scroll",
let showTiming = 200; throttle(300, () => {
for (let i = 0; i < element.length; i++) { window.addEventListener("scroll", () => {
let elementClientRect = element[i].getBoundingClientRect(); if (!element) return;
let elementY = scrollY + elementClientRect.top; for (let i = 0; i < element.length; i++) {
if (scrollY > elementY - windowHeight + showTiming) { let elementClientRect = element[i].getBoundingClientRect();
element[i].classList.add("is-show"); let elementY = scrollY + elementClientRect.top;
} if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show");
} }
}); }
}) });
); })
} );
} }
develop/src/assets/js/home.js
import { Modal } from "./Modal.js"; import { Modal } from "./modal.js";
import { Fade } from "./fadeIn.js"; import { Fade } from "./fadeIn.js";
// const modal = new Modal();
// modal.openModal();
// const fade = new Fade();
// fade.fadeIn();
// const variables1 = "e";
// const variables1 = "e";
class Home { class Home {
constructor() { constructor() {
// 初期化時に必ず実行される関数
new Modal(); new Modal();
// new Fade(); new Fade();
} }
} }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
new Home(); new Home();
}); });
// // グローバル汚染をしないようにする
// class Home1 {
// constructor() {
// this.variables1 = "from home";
// }
// }
// class Home2 {
// constructor() {
// this.variables1 = "from home";
// }
// }
// $(function () {
// const variables1 = 1;
// });
// window.addEventListener("DOMContentLoaded", () => {
// const variables1 = 1;
// });
develop/src/assets/js/modal copy.js deleted 100644 → 0
// ドットシンタックス
const person = {
name: "小林勇太崇",
age: 24,
};
console.log(person.name);
export class Modal {
constructor() {
// this.body = document.querySelector("body");
// this.button = document.querySelector(".novelList__button");
// this.modalBack = document.querySelector(".modalBackground");
// this.modal = document.querySelector(".modal");
// this.closeButton = document.querySelector(".modal__button");
// DOM要素を取得している
this.elements = {
body: document.querySelector("body"),
button: document.querySelectorAll(".novelList__button"),
modalBack: document.querySelector(".modalBackground"),
modal: document.querySelectorAll(".modal"),
closeTrigger: document.querySelectorAll(".closeButton"),
};
// モーダルが開いた時のクラス名
this.openClassName = "open";
// モーダルを開く処理を登録
for (let i = 0; i < this.elements.button.length; i++) {
this.elements.button[i].addEventListener("click", () => {
this.open(i);
});
this.elements.button[i].addEventListener("click", () => {
this.open(i);
});
}
// モーダルを閉じる処理を登録
for (let i = 0; i < this.elements.closeTrigger.length; i++) {
this.elements.closeTrigger[i].addEventListener("click", () => {
this.close();
});
// this.elements.closeTrigger[i].addEventListener("click", this.close())
}
// for (let i = 0; i < button.length; i++) {
// button[i].addEventListener("click", (e) => {
// e.preventDefault(); //
// });
// }
}
// モーダルを開く処理
open(index) {
this.elements.body.classList.add(this.openClassName);
this.elements.modalBack.classList.add(this.openClassName);
this.elements.modal[index].classList.add(this.openClassName);
}
// モーダルを閉じる処理
close() {
this.elements.body.classList.remove(this.openClassName);
this.elements.modalBack.classList.remove(this.openClassName);
for (let i = 0; i < this.elements.modal.length; i++) {
this.elements.modal[i].classList.remove(this.openClassName);
}
}
// openModal() {
// // モーダルを非表示にする
// closeButton.addEventListener("click", () => {});
// function menuClick() {
// body.classList.remove(this.openClassName);
// modalBack.classList.remove(this.openClassName);
// const modalElements = document.querySelector(".modal");
// modalElements.forEach((item) => {
// item.classList.remove(this.openClassName);
// });
// }
// closeTrigger.forEach((item) => {
// item.addEventListener("click", menuClick);
// });
// }
}
// class Modal {
// constructor() {}
// }
// // きほんの形
// class ClassBase {
// constructor() {
// // クラスフィールドの定義
// this.xxx = "xxx";
// this.person = "kobayashi"; // 使いまわしたいもの
// this.SPEED = 1000; // 定数
// this.method02(); // SPEED : 1000
// this.method01(); // SPEED : 1200
// this.method02(); // SPEED : 1200
// }
// method01() {
// this.SPEED = 1200;
// console.log(this.SPEED);
// }
// method02() {
// console.log(this.SPEED);
// }
// method03() {
// console.log(this.xxx);
// }
// }
develop/src/assets/js/modal.js
// ドットシンタックス
const person = {
name: "小林勇太崇",
age: 24,
};
console.log(person.name);
export class Modal { export class Modal {
constructor() { constructor() {
// this.body = document.querySelector("body");
// this.button = document.querySelector(".novelList__button");
// this.modalBack = document.querySelector(".modalBackground");
// this.modal = document.querySelector(".modal");
// this.closeButton = document.querySelector(".modal__button");
// DOM要素を取得している // DOM要素を取得している
this.elements = { this.elements = {
body: document.querySelector("body"), body: document.querySelector("body"),
...@@ -26,35 +12,29 @@ export class Modal { ...@@ -26,35 +12,29 @@ export class Modal {
// モーダルが開いた時のクラス名 // モーダルが開いた時のクラス名
this.openClassName = "open"; this.openClassName = "open";
// モーダルを開く処理を登録 // ①モーダルを開く処理を登録
for (let i = 0; i < this.elements.button.length; i++) { for (let i = 0; i < this.elements.button.length; i++) {
this.elements.button[i].addEventListener("click", () => { this.elements.button[i].addEventListener("click", () => {
this.open(i); this.open();
}); });
} }
// モーダルを閉じる処理を登録 // ②モーダルを閉じる処理を登録
for (let i = 0; i < this.elements.closeTrigger.length; i++) { for (let i = 0; i < this.elements.closeTrigger.length; i++) {
this.elements.closeTrigger[i].addEventListener("click", () => {}); this.elements.closeTrigger[i].addEventListener("click", () => {
this.close();
// this.elements.closeTrigger[i].addEventListener("click", this.close()) });
} }
// for (let i = 0; i < button.length; i++) {
// button[i].addEventListener("click", (e) => {
// e.preventDefault(); //
// });
// }
} }
// モーダルを開く処理 //　①モーダルを開く処理
open(index) { open() {
this.elements.body.classList.add(this.openClassName); this.elements.body.classList.add(this.openClassName);
this.elements.modalBack.classList.add(this.openClassName); this.elements.modalBack.classList.add(this.openClassName);
this.elements.modal[index].classList.add(this.openClassName); this.elements.modal[index].classList.add(this.openClassName);
} }
// モーダルを閉じる処理 // ②モーダルを閉じる処理
close() { close() {
this.elements.body.classList.remove(this.openClassName); this.elements.body.classList.remove(this.openClassName);
this.elements.modalBack.classList.remove(this.openClassName); this.elements.modalBack.classList.remove(this.openClassName);
...@@ -62,55 +42,4 @@ export class Modal { ...@@ -62,55 +42,4 @@ export class Modal {
this.elements.modal[i].classList.remove(this.openClassName); this.elements.modal[i].classList.remove(this.openClassName);
} }
} }
openModal() {
// モーダルを非表示にする
closeButton.addEventListener("click", () => {});
function menuClick() {
body.classList.remove(this.openClassName);
modalBack.classList.remove(this.openClassName);
const modalElements = document.querySelector(".modal");
modalElements.forEach((item) => {
item.classList.remove(this.openClassName);
});
}
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
} }
// class Modal {
// constructor() {}
// }
// // きほんの形
// class ClassBase {
// constructor() {
// // クラスフィールドの定義
// this.xxx = "xxx";
// this.person = "kobayashi"; // 使いまわしたいもの
// this.SPEED = 1000; // 定数
// this.method02(); // SPEED : 1000
// this.method01(); // SPEED : 1200
// this.method02(); // SPEED : 1200
// }
// method01() {
// this.SPEED = 1200;
// console.log(this.SPEED);
// }
// method02() {
// console.log(this.SPEED);
// }
// method03() {
// console.log(this.xxx);
// }
// }
develop/src/assets/js/modal_.js deleted 100644 → 0
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.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!