Last active
October 4, 2021 15:07
-
-
Save rei1406/00fc8e9cda225260b1f5a450d0b731b5 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const produkListItem = document.querySelectorAll('.produk-list-item') | |
| // product card component selector | |
| const produkCardInformasi = document.querySelectorAll('.produk-card .informasi') | |
| const produkCardImage = document.querySelectorAll('.produk-card .image') | |
| const produkCardOperasiJumlahPembelian = document.querySelectorAll( | |
| '.produk-card .operasi-jumlah-pembelian' | |
| ) | |
| const produkCardButton = document.querySelectorAll( | |
| '.produk-card .aksi-pembelian button' | |
| ) | |
| const produkCardJumlahPembelian = document.querySelectorAll( | |
| '.produk-card .aksi-pembelian .jumlah-pembelian' | |
| ) | |
| const produkCardPlusPad = document.querySelectorAll( | |
| '.produk-card .aksi-pembelian .plus-pad' | |
| ) | |
| const produkCardMinusPad = document.querySelectorAll( | |
| '.produk-card .aksi-pembelian .minus-pad' | |
| ) | |
| // Bottom sheet component selector | |
| const produkBottomSheet = document.querySelectorAll( | |
| '.produk-list-item .produk-bottom-sheet' | |
| ) | |
| const produkBottomSheetCard = document.querySelectorAll( | |
| '.produk-list-item .produk-bottom-sheet .bottom-sheet-card' | |
| ) | |
| const produkBottomSheetCardCloseButton = document.querySelectorAll( | |
| '.produk-list-item .produk-bottom-sheet .bottom-sheet-card .close-button' | |
| ) | |
| const bottomSheetCardButon = document.querySelectorAll( | |
| '.produk-bottom-sheet button' | |
| ) | |
| const bottomSheetCardOperasiJumlahPembelian = document.querySelectorAll( | |
| '.produk-bottom-sheet .bottom-sheet-card .operasi-jumlah-pembelian' | |
| ) | |
| const bottomSheetCardJumlahPembelian = document.querySelectorAll( | |
| '.produk-bottom-sheet .bottom-sheet-card .jumlah-pembelian' | |
| ) | |
| const bottomSheetCardPlusPad = document.querySelectorAll( | |
| '.produk-bottom-sheet .bottom-sheet-card .plus-pad' | |
| ) | |
| const bottomSheetCardMinusPad = document.querySelectorAll( | |
| '.produk-bottom-sheet .bottom-sheet-card .minus-pad' | |
| ) | |
| // Looping untuk mendapatkan index dari nodelist component oleh sebab itu selectornya menggunakan document.querySelectorAll() | |
| for (let index = 0; index < produkListItem.length; index++) { | |
| const tampilkanOperasiJumlahPembelian = () => { | |
| setTimeout(() => { | |
| produkCardButton[index].classList.add('hide') | |
| produkCardOperasiJumlahPembelian[index].classList.add('show') | |
| bottomSheetCardOperasiJumlahPembelian[index].classList.add('show') | |
| bottomSheetCardButon[index].classList.add('hide') | |
| }, 300) | |
| } | |
| const sembunyikanOperasiJumlahPembelian = () => { | |
| produkCardButton[index].classList.remove('hide') | |
| produkCardOperasiJumlahPembelian[index].classList.remove('show') | |
| bottomSheetCardOperasiJumlahPembelian[index].classList.remove('show') | |
| bottomSheetCardButon[index].classList.remove('hide') | |
| } | |
| const tampilkanProdukBottomSheet = () => { | |
| produkBottomSheet[index].classList.add('show') | |
| produkBottomSheetCard[index].classList.add('slideup') | |
| } | |
| const sembunyikanProdukBottomSheet = () => { | |
| produkBottomSheetCard[index].classList.remove('slideup') | |
| setTimeout(() => produkBottomSheet[index].classList.remove('show'), 300) | |
| } | |
| const tambahJumlahPembelian = () => { | |
| bottomSheetCardJumlahPembelian[index].innerHTML = | |
| parseInt(bottomSheetCardJumlahPembelian[index].innerHTML) + 1 | |
| produkCardJumlahPembelian[index].innerHTML = | |
| parseInt(produkCardJumlahPembelian[index].innerHTML) + 1 | |
| } | |
| const kurangiJumlahPembelian = () => { | |
| bottomSheetCardJumlahPembelian[index].innerHTML = | |
| parseInt(bottomSheetCardJumlahPembelian[index].innerHTML) - 1 | |
| produkCardJumlahPembelian[index].innerHTML = | |
| parseInt(produkCardJumlahPembelian[index].innerHTML) - 1 | |
| } | |
| window.addEventListener('DOMContentLoaded', () => { | |
| if (parseInt(bottomSheetCardJumlahPembelian[index].innerHTML) !== 0) { | |
| tampilkanOperasiJumlahPembelian() | |
| } | |
| }) | |
| produkCardButton[index].addEventListener('click', () => { | |
| tampilkanOperasiJumlahPembelian() | |
| tambahJumlahPembelian() | |
| }) | |
| bottomSheetCardButon[index].addEventListener('click', () => { | |
| tampilkanOperasiJumlahPembelian() | |
| tambahJumlahPembelian() | |
| }) | |
| produkCardPlusPad[index].addEventListener('click', () => | |
| tambahJumlahPembelian() | |
| ) | |
| bottomSheetCardPlusPad[index].addEventListener('click', () => | |
| tambahJumlahPembelian() | |
| ) | |
| produkCardMinusPad[index].addEventListener('click', () => { | |
| if (parseInt(bottomSheetCardJumlahPembelian[index].innerHTML) === 1) { | |
| kurangiJumlahPembelian() | |
| sembunyikanOperasiJumlahPembelian() | |
| } else { | |
| kurangiJumlahPembelian() | |
| } | |
| }) | |
| bottomSheetCardMinusPad[index].addEventListener('click', () => { | |
| if (parseInt(bottomSheetCardJumlahPembelian[index].innerHTML) === 1) { | |
| kurangiJumlahPembelian() | |
| sembunyikanOperasiJumlahPembelian() | |
| } else { | |
| kurangiJumlahPembelian() | |
| } | |
| }) | |
| produkCardImage[index].addEventListener('click', () => | |
| tampilkanProdukBottomSheet() | |
| ) | |
| produkCardInformasi[index].addEventListener('click', () => | |
| tampilkanProdukBottomSheet() | |
| ) | |
| produkBottomSheet[index].addEventListener('click', (e) => { | |
| if (e.target === produkBottomSheet[index]) { | |
| sembunyikanProdukBottomSheet() | |
| } | |
| }) | |
| produkBottomSheetCardCloseButton[index].addEventListener('click', () => | |
| sembunyikanProdukBottomSheet() | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment