nezumi/javascript-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/javascript-training.git synced 2026-09-22 20:01:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimized code

Browse Source
This commit is contained in:
nezumi
2023-09-12 15:34:32 +07:00
parent df39145237
commit 9760d36917
4 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript-practice/src/js/views/commonView.js
+16 -14
View File
@@ -34,10 +34,10 @@ export default class CommonView {
initElementToast() { initElementToast() {
this.toastDialog = document.querySelector('.dialog'); this.toastDialog = document.querySelector('.dialog');
this.toast = document.querySelector('.toast'); this.toast = document.querySelector('.toast');
this.toastIcon = document.querySelector('.mark'); this.toastIcon = this.toast.querySelector('.mark');
this.toastBtn = document.querySelector('.toast__redirect-btn'); this.toastBtn = this.toast.querySelector('.toast__redirect-btn');
this.toastTitle = document.querySelector('.toast__title'); this.toastTitle = this.toast.querySelector('.toast__title');
this.toastContent = document.querySelector('.toast__message'); this.toastContent = this.toast.querySelector('.toast__message');
} }
/** /**
@@ -56,18 +56,14 @@ export default class CommonView {
*/ */
initToastContent(typeToast, title, content, btnContent) { initToastContent(typeToast, title, content, btnContent) {
// Remove old typeToast class if haved // Remove old typeToast class if haved
this.toast.classList.forEach((classItem) => Object.keys(TYPE_TOAST).forEach((value) => {
classItem === TYPE_TOAST.success || classItem === TYPE_TOAST.error CommonView.removeClassElement(value, this.toast);
? this.toast.classList.remove(classItem) });
: '',
);
// Remove old icon toast if haved // Remove old icon toast if haved
this.toastIcon.classList.forEach((classItem) => Object.keys(MARK_ICON).forEach((value) => {
classItem === MARK_ICON.success || classItem === MARK_ICON.error CommonView.removeClassElement(value, this.toastIcon);
? this.toastIcon.classList.remove(classItem) });
: '',
);
// Init content toast // Init content toast
this.toast.classList.add( this.toast.classList.add(
@@ -81,6 +77,12 @@ export default class CommonView {
this.toastBtn.textContent = btnContent; this.toastBtn.textContent = btnContent;
} }
static removeClassElement(classEl, el) {
if (el.classList.contains(classEl)) {
el.classList.remove(classEl);
}
}
/** /**
* Add event listener for toast * Add event listener for toast
*/ */
javascript-practice/src/js/views/homeView.js
+12 -3
View File
@@ -23,13 +23,17 @@ export default class HomeView extends CommonView {
*/ */
handlerTabsTransfer() { handlerTabsTransfer() {
this.tabs.forEach((tab, index) => { this.tabs.forEach((tab, index) => {
tab.addEventListener('click', (e) => { tab.addEventListener('click', () => {
this.removeActiveTab(); this.removeActiveTab();
tab.classList.add('active'); tab.classList.add('active');
const line = document.querySelector('.app__line'); const line = document.querySelector('.app__line');
line.style.width = `${e.target.offsetWidth}px`;
line.style.left = `${e.target.offsetLeft}px`; if (line.classList.contains('left')) {
HomeView.replaceClassElement('left', 'right', line);
} else {
HomeView.replaceClassElement('right', 'left', line);
}
this.allContent.forEach((content) => { this.allContent.forEach((content) => {
content.classList.remove('active'); content.classList.remove('active');
@@ -39,6 +43,11 @@ export default class HomeView extends CommonView {
}); });
} }
static replaceClassElement(oldEl, newEl, el) {
el.classList.remove(oldEl);
el.classList.add(newEl);
}
addCommonEventPage() { addCommonEventPage() {
// Add event close dialog when click outside // Add event close dialog when click outside
this.dialogs.forEach((dialog) => { this.dialogs.forEach((dialog) => {
javascript-practice/src/pages/index.html
+1 -1
View File
@@ -299,7 +299,7 @@
<div class="app__tabs"> <div class="app__tabs">
<button class="app__tab-item active">SUMMARY</button> <button class="app__tab-item active">SUMMARY</button>
<button class="app__tab-item">TRANSACTION DETAILS</button> <button class="app__tab-item">TRANSACTION DETAILS</button>
<div class="app__line"></div> <div class="app__line left"></div>
</div> </div>
<!-- Start content app --> <!-- Start content app -->
<div class="app__contents"> <div class="app__contents">
javascript-practice/src/styles/pages/_index.scss
+10 -2
View File
@@ -109,12 +109,20 @@
&__line { &__line {
position: absolute; position: absolute;
top: 66px; top: 66px;
left: 150px;
width: 115px;
height: 2px; height: 2px;
background-color: $primary-color; background-color: $primary-color;
border-radius: 10px; border-radius: 10px;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
&.left {
left: 152px;
width: 116px;
}
&.right {
left: 272px;
width: 200px;
}
} }
} }