Skip to content

Commit 38547c7

Browse files
last-endcodelast-endcode
committed
update again
1 parent 5d91f25 commit 38547c7

File tree

1 file changed

+105
-108
lines changed
  • OOP_Projects/gallery/starter

1 file changed

+105
-108
lines changed

‎OOP_Projects/gallery/starter/app.js‎

Lines changed: 105 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,122 @@
1-
function getElement(selectElement) {
2-
const element = document.querySelector(selectElement);
3-
// if true back to element value
1+
function getElement(selection) {
2+
const element = document.querySelector(selection);
43
if (element) {
54
return element;
65
}
7-
// if falses notice
86
throw new Error(
9-
`please check your element on html ${selectElement} cause not found`
7+
`please check again element html : ${selection} because not found!`
108
);
119
}
1210

13-
function Gallery(element) {
14-
// for all picture tdk menggunakan ini
15-
//karena nodelist dan solusi ada spread operator
16-
// this.list = element.querySelectorAll('.img');
17-
this.list = [...element.querySelectorAll('.img')];
18-
// console.log(this.list);
19-
// ** Target
20-
this.container = element;
21-
this.modal = getElement('.modal'); //tampilan awal fixed
22-
this.mainImg = getElement('.main-img'); //content tuk gambar
23-
this.imgName = getElement('.image-name'); //tuk text dibawah content
24-
this.modalImages = getElement('.modal-images'); //gambar dibawah
25-
// ** close
26-
this.prevBtn = getElement('.prev-btn');
27-
this.nextBtn = getElement('.next-btn');
28-
this.closeBtn = getElement('.close-btn');
11+
class Gallery {
12+
constructor(element) {
13+
this.list = [...element.querySelectorAll('.img')];
14+
// target
15+
this.container = element;
16+
this.modal = getElement('.modal');
17+
this.mainImage = getElement('.main-img');
18+
this.imgName = getElement('.image-name');
19+
this.modalImages = getElement('.modal-images');
20+
this.closeBtn = getElement('.close-btn');
21+
this.prevBtn = getElement('.prev-btn');
22+
this.nextBtn = getElement('.next-btn');
2923

30-
// Bind function
31-
// pointing to Gallery
32-
this.closeModal = this.closeModal.bind(this);
33-
this.prevImage = this.prevImage.bind(this);
34-
this.nextImage = this.nextImage.bind(this);
35-
this.chooseImage = this.chooseImage.bind(this);
24+
// bind to function
25+
this.closeImage = this.closeImage.bind(this);
26+
this.prevImage = this.prevImage.bind(this);
27+
this.nextImage = this.nextImage.bind(this);
28+
this.chooseImage = this.chooseImage.bind(this);
3629

37-
// ref u can use this one
38-
let self = this; //dia merujuk pada Gallery
39-
// ** Click
40-
this.container.addEventListener(
41-
'click',
42-
function (e) {
43-
// ** IF target same with img
44-
// tampilkan e.target , dan list (img)
45-
if (e.target.classList.contains('img')) {
46-
this.openModal(e.target, this.list);
47-
}
48-
// self.openModal();
49-
}.bind(this)
50-
);
51-
}
52-
53-
// protype function for openModal()
54-
// param for selectedImage, and list (img)
55-
Gallery.prototype.openModal = function (selectedImage, list) {
56-
// *** invoke this.setMainImage
57-
this.setMainImage(selectedImage);
58-
// *** map modalImages
59-
// menampilkan gambar yg diklik dibawah agar muncul sesuai ururat
60-
// jadi gambar yg diklik ada ikut juga dibawah
61-
this.modalImages.innerHTML = list
62-
.map(function (image) {
63-
// console.log(image);
64-
return `<img src="${
65-
image.src
66-
}" title="${image.title}" data-id="${image.dataset.id}" class="${selectedImage.dataset.id === image.dataset.id ? 'modal-img selected' : 'modal-img'}" />`;
67-
})
68-
.join('');
69-
// console.log(list); array img
70-
// *** invoke this.modal
71-
this.modal.classList.add('open');
72-
this.closeBtn.addEventListener('click', this.closeModal);
73-
this.prevBtn.addEventListener('click', this.prevImage);
74-
this.nextBtn.addEventListener('click', this.nextImage);
75-
this.modalImages.addEventListener('click', this.chooseImage);
76-
};
77-
78-
// for main-image, and image-name
79-
Gallery.prototype.setMainImage = function (selectedImage) {
80-
// set picture & title
81-
this.mainImg.src = selectedImage.src;
82-
this.imgName.textContent = selectedImage.title;
83-
};
30+
this.container.addEventListener(
31+
'click',
32+
function (e) {
33+
//target
34+
// jika target sama dgn class img
35+
// tampilkan gambar sesuai target yg dipilih
36+
// dan juga tampilkan gambar sesuai array
37+
if (e.target.classList.contains('img')) {
38+
this.openModal(e.target, this.list);
39+
}
40+
}.bind(this)
41+
);
42+
}
43+
// *** method
8444

85-
Gallery.prototype.closeModal = function () {
86-
// close modal
87-
this.modal.classList.remove('open');
88-
this.closeBtn.removeEventListener('click', this.closeModal);
89-
this.prevBtn.removeEventListener('click', this.prevImage);
90-
this.nextBtn.removeEventListener('click', this.nextImage);
91-
};
45+
// ** openModal
46+
openModal(selectedImage, list) {
47+
// Sesuaikan kemunculan "gambar yg dibawah" sesuai list array
48+
// yg diklik, misal kamu klik nature otomatis yg muncul smua
49+
// element gambar nature(3), atau city(5)
50+
// dan jika yg dipilih sama munculkan yg selected
51+
this.modalImages.innerHTML = list
52+
.map(function (image) {
53+
// console.log(image);
54+
return `<img src="${image.src}" title="${image.title}
55+
data-id="${
56+
image.dataset.id
57+
}" class="${selectedImage.dataset.id === image.dataset.id ? 'modal-img selected' : 'modal-img'}" />`;
58+
})
59+
.join('');
60+
// panggil function setMainImg tuk menampilkan gambar
61+
this.setMainImg(selectedImage);
62+
// panggil modal dan tambah class open tuk membuka modal
63+
this.modal.classList.add('open');
9264

93-
// for nextImage mainImg yang dipilih
94-
Gallery.prototype.nextImage = function () {
95-
const selected = this.modalImages.querySelector('.selected');
96-
const next =
97-
selected.nextElementSibling || this.modalImages.firstElementChild;
98-
selected.classList.remove('selected');
99-
next.classList.add('selected');
100-
this.setMainImage(next);
101-
};
65+
// fitur
66+
this.closeBtn.addEventListener('click', this.closeImage);
67+
this.prevBtn.addEventListener('click', this.prevImage);
68+
this.nextBtn.addEventListener('click', this.nextImage);
69+
this.modalImages.addEventListener('click', this.chooseImage);
70+
}
10271

103-
Gallery.prototype.prevImage = function () {
104-
const selected = this.modalImages.querySelector('.selected');
105-
const prev = selected.previousSibling || this.modalImages.lastChild;
106-
selected.classList.remove('selected');
107-
prev.classList.add('selected');
108-
this.setMainImage(prev);
109-
};
72+
// ** setMainImg tuk menampilkan gambar
73+
setMainImg(selectedImage) {
74+
// gambar utama setelah diklik adalah .main-img
75+
this.mainImage.src = selectedImage.src;
76+
this.imgName.textContent = selectedImage.title;
77+
}
11078

111-
// for Choose Image
112-
Gallery.prototype.chooseImage = function (e) {
113-
const selected = this.modalImages.querySelector('.selected');
114-
// jika target sama dgn modal-img
115-
//
116-
if (e.target.classList.contains('modal-img')) {
117-
// console.log(e.target); check gambar dibawah maka hasilnya adalah sesuai dgn gambar diklik
79+
// closeImage
80+
closeImage() {
81+
this.modal.classList.remove('open');
82+
this.closeBtn.removeEventListener('click', this.closeImage);
83+
this.prevBtn.removeEventListener('click', this.prevImage);
84+
this.nextBtn.removeEventListener('click', this.nextImage);
85+
this.modalImages.removeEventListener('click', this.chooseImage);
86+
}
87+
nextImage() {
88+
// remember modalImages adalah gambar yang dibawah
89+
const selected = this.modalImages.querySelector('.selected');
90+
const next =
91+
selected.nextElementSibling || this.modalImages.firstElementChild;
92+
// remove selected
93+
selected.classList.remove('selected');
94+
next.classList.add('selected');
95+
// update img
96+
this.setMainImg(next);
97+
}
98+
prevImage() {
99+
// remember modalImages adalah gambar yang dibawah
100+
const selected = this.modalImages.querySelector('.selected');
101+
const prev =
102+
selected.previousElementSibling || this.modalImages.lastElementChild;
103+
// remove selected
118104
selected.classList.remove('selected');
119-
this.setMainImage(e.target);
120-
e.target.classList.add('selected');
105+
prev.classList.add('selected');
106+
// update img
107+
this.setMainImg(prev);
121108
}
122-
};
123-
// create new instance object
109+
110+
chooseImage(e) {
111+
if (e.target.classList.contains('modal-img')) {
112+
const selected = this.modalImages.querySelector('.selected');
113+
selected.classList.remove('selected');
114+
// update
115+
this.setMainImg(e.target);
116+
e.target.classList.add('selected');
117+
}
118+
}
119+
}
120+
124121
const nature = new Gallery(getElement('.nature'));
125122
const city = new Gallery(getElement('.city'));

0 commit comments

Comments
 (0)