refactor(js): Refactor js code

migueravila · Mar 18, 2022 · 99560cd · 99560cd
1 parent 141a1a5
commit 99560cd
Show file tree

Hide file tree

Showing 11 changed files with 431 additions and 470 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,3 +1,2 @@
 FROM nginx
-COPY . /usr/share/nginx/html
-
+COPY . /usr/share/nginx/html
diff --git a/assets/js/buttons.js b/assets/js/buttons.js
@@ -4,8 +4,8 @@
 // Function to print Button Cards.
 
 const generateFirstButtonsContainer = () => {
-  for (const button of CONFIG.firstButtonsContainer) {
-    let item = `
+	for (const button of CONFIG.firstButtonsContainer) {
+		let item = `
         <a
           href="${button.link}"
           target="${CONFIG.openInNewTab ? '_blank' : ''}"
@@ -15,15 +15,15 @@ const generateFirstButtonsContainer = () => {
         </a>
     `;
 
-    const position = 'beforeend';
+		const position = 'beforeend';
 
-    buttons_1.insertAdjacentHTML(position, item);
-  }
+		buttons_1.insertAdjacentHTML(position, item);
+	}
 };
 
 const generateSecondButtonsContainer = () => {
-  for (const button of CONFIG.secondButtonsContainer) {
-    let item = `
+	for (const button of CONFIG.secondButtonsContainer) {
+		let item = `
         <a
           href="${button.link}"
           target="${CONFIG.openInNewTab ? '_blank' : ''}"
@@ -33,24 +33,24 @@ const generateSecondButtonsContainer = () => {
         </a>
     `;
 
-    const position = 'beforeend';
+		const position = 'beforeend';
 
-    buttons_2.insertAdjacentHTML(position, item);
-  }
+		buttons_2.insertAdjacentHTML(position, item);
+	}
 };
 
 const generateButtons = () => {
-  switch (CONFIG.bentoLayout) {
-    case 'bento':
-      generateFirstButtonsContainer();
-      break;
-    case 'buttons':
-      generateFirstButtonsContainer();
-      generateSecondButtonsContainer();
-      break;
-    default:
-      break;
-  }
+	switch (CONFIG.bentoLayout) {
+		case 'bento':
+			generateFirstButtonsContainer();
+			break;
+		case 'buttons':
+			generateFirstButtonsContainer();
+			generateSecondButtonsContainer();
+			break;
+		default:
+			break;
+	}
 };
 
 generateButtons();
diff --git a/assets/js/greeting.js b/assets/js/greeting.js
@@ -13,11 +13,11 @@ const gree3 = `${CONFIG.greetingAfternoon}\xa0`;
 const gree4 = `${CONFIG.greetingEvening}\xa0`;
 
 if (hour >= 23 || hour < 5) {
-  document.getElementById('greetings').innerText = gree1 + name;
+	document.getElementById('greetings').innerText = gree1 + name;
 } else if (hour >= 6 && hour < 12) {
-  document.getElementById('greetings').innerText = gree2 + name;
+	document.getElementById('greetings').innerText = gree2 + name;
 } else if (hour >= 12 && hour < 17) {
-  document.getElementById('greetings').innerText = gree3 + name;
+	document.getElementById('greetings').innerText = gree3 + name;
 } else {
-  document.getElementById('greetings').innerText = gree4 + name;
+	document.getElementById('greetings').innerText = gree4 + name;
 }
diff --git a/assets/js/layout.js b/assets/js/layout.js
@@ -4,42 +4,42 @@
 // Generate Layout.
 
 const generateLayout = () => {
-  let firstButtonsContainer = `
+	let firstButtonsContainer = `
     <div class="buttonsContainer" id="buttons_1"></div>
   `;
-  let secondButtonsContainer = `
+	let secondButtonsContainer = `
     <div class="buttonsContainer" id="buttons_2"></div>
   `;
-  let firstListsContainer = `
+	let firstListsContainer = `
     <div class="listsContainer" id="lists_1"></div>
   `;
 
-  let secondListsContainer = `
+	let secondListsContainer = `
     <div class="listsContainer" id="lists_2"></div>
   `;
 
-  const position = 'beforeend';
+	const position = 'beforeend';
 
-  switch (CONFIG.bentoLayout) {
-    case 'bento':
-      linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
-      linksBlockRight.insertAdjacentHTML(position, firstListsContainer);
-      linksBlock.classList.remove('reduceGap');
-      linksBlock.classList.remove('removeGap');
-      break;
-    case 'lists':
-      linksBlockLeft.insertAdjacentHTML(position, firstListsContainer);
-      linksBlockRight.insertAdjacentHTML(position, secondListsContainer);
-      linksBlock.classList.add('reduceGap');
-      break;
-    case 'buttons':
-      linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
-      linksBlockRight.insertAdjacentHTML(position, secondButtonsContainer);
-      linksBlock.classList.add('removeGap');
-      break;
-    default:
-      break;
-  }
+	switch (CONFIG.bentoLayout) {
+		case 'bento':
+			linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
+			linksBlockRight.insertAdjacentHTML(position, firstListsContainer);
+			linksBlock.classList.remove('reduceGap');
+			linksBlock.classList.remove('removeGap');
+			break;
+		case 'lists':
+			linksBlockLeft.insertAdjacentHTML(position, firstListsContainer);
+			linksBlockRight.insertAdjacentHTML(position, secondListsContainer);
+			linksBlock.classList.add('reduceGap');
+			break;
+		case 'buttons':
+			linksBlockLeft.insertAdjacentHTML(position, firstButtonsContainer);
+			linksBlockRight.insertAdjacentHTML(position, secondButtonsContainer);
+			linksBlock.classList.add('removeGap');
+			break;
+		default:
+			break;
+	}
 };
 
 generateLayout();
diff --git a/assets/js/lists.js b/assets/js/lists.js
@@ -4,8 +4,8 @@
 // Functions for printing both lists
 
 const generateFirstListsContainer = () => {
-  for (const list of CONFIG.firstlistsContainer) {
-    let item = `
+	for (const list of CONFIG.firstlistsContainer) {
+		let item = `
         <div class="card list list__${list.id}" id="list_${list.id}">
           <i class="listIcon" icon-name="${list.icon}"></i>
           <a
@@ -30,14 +30,14 @@ const generateFirstListsContainer = () => {
           >${list.links[3].name}</a>
         </div>
       `;
-    const position = 'beforeend';
-    lists_1.insertAdjacentHTML(position, item);
-  }
+		const position = 'beforeend';
+		lists_1.insertAdjacentHTML(position, item);
+	}
 };
 
 const generateSecondListsContainer = () => {
-  for (const list of CONFIG.secondListsContainer) {
-    let item = `
+	for (const list of CONFIG.secondListsContainer) {
+		let item = `
         <div class="card list list__${list.id}" id="list_${list.id}">
         <i class="listIcon" icon-name="${list.icon}"></i>
         <a
@@ -62,23 +62,23 @@ const generateSecondListsContainer = () => {
         >${list.links[3].name}</a>
         </div>
       `;
-    const position = 'beforeend';
-    lists_2.insertAdjacentHTML(position, item);
-  }
+		const position = 'beforeend';
+		lists_2.insertAdjacentHTML(position, item);
+	}
 };
 
 const generateLists = () => {
-  switch (CONFIG.bentoLayout) {
-    case 'bento':
-      generateFirstListsContainer();
-      break;
-    case 'lists':
-      generateFirstListsContainer();
-      generateSecondListsContainer();
-      break;
-    default:
-      break;
-  }
+	switch (CONFIG.bentoLayout) {
+		case 'bento':
+			generateFirstListsContainer();
+			break;
+		case 'lists':
+			generateFirstListsContainer();
+			generateSecondListsContainer();
+			break;
+		default:
+			break;
+	}
 };
 
 generateLists();
diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -8,69 +8,56 @@ const themeToggle = document.querySelector('#themeButton');
 const bodyBackground = document.getElementById('#body');
 
 const enableDark = () => {
-  document.body.classList.add('darktheme');
-  localStorage.setItem('darkTheme', 'enabled');
-  themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="sun"></i>`;
-  lucide.createIcons();
+	document.body.classList.add('darktheme');
+	localStorage.setItem('darkTheme', 'enabled');
+	themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="sun"></i>`;
+	lucide.createIcons();
 };
 
 const disableDark = () => {
-  document.body.classList.remove('darktheme');
-  localStorage.setItem('darkTheme', null);
-  themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="moon"></i>`;
-  lucide.createIcons();
+	document.body.classList.remove('darktheme');
+	localStorage.setItem('darkTheme', null);
+	themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="moon"></i>`;
+	lucide.createIcons();
 };
 
 if (darkTheme === 'enabled') {
-  document.body.classList.add('notransition');
-  enableDark();
-  document.body.classList.remove('notransition');
+	document.body.classList.add('notransition');
+	enableDark();
+	document.body.classList.remove('notransition');
 } else {
-  disableDark();
+	disableDark();
 }
 
 themeToggle.addEventListener('click', () => {
-  darkTheme = localStorage.getItem('darkTheme');
-  if (darkTheme !== 'enabled') {
-    enableDark();
-  } else {
-    disableDark();
-  }
+	darkTheme = localStorage.getItem('darkTheme');
+	if (darkTheme !== 'enabled') {
+		enableDark();
+	} else {
+		disableDark();
+	}
 });
 
 if (CONFIG.imageBackground) {
-  document.body.classList.add('withImageBackground');
+	document.body.classList.add('withImageBackground');
 }
 
 if (CONFIG.changeThemeByOS && CONFIG.autoChangeTheme) {
-  if (
-    window.matchMedia &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-  ) {
-    enableDark();
-  } else {
-    disableDark();
-  }
+	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+		enableDark();
+	} else {
+		disableDark();
+	}
 }
 
-if (
-  CONFIG.changeThemeByHour &&
-  CONFIG.autoChangeTheme &&
-  !CONFIG.changeThemeByOS
-) {
-  const date = new Date();
-  const hours =
-    date.getHours() < 10
-      ? '0' + date.getHours().toString()
-      : date.getHours().toString();
-  const minutes =
-    date.getMinutes() < 10
-      ? '0' + date.getMinutes().toString()
-      : date.getMinutes().toString();
-  const currentTime = hours + ':' + minutes;
-  if (currentTime >= CONFIG.hourDarkThemeActive) {
-    enableDark();
-  } else if (currentTime >= CONFIG.hourDarkThemeInactive) {
-    disableDark();
-  }
+if (CONFIG.changeThemeByHour && CONFIG.autoChangeTheme && !CONFIG.changeThemeByOS) {
+	const date = new Date();
+	const hours = date.getHours() < 10 ? '0' + date.getHours().toString() : date.getHours().toString();
+	const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes().toString() : date.getMinutes().toString();
+	const currentTime = hours + ':' + minutes;
+	if (currentTime >= CONFIG.hourDarkThemeActive) {
+		enableDark();
+	} else if (currentTime >= CONFIG.hourDarkThemeInactive) {
+		disableDark();
+	}
 }
diff --git a/assets/js/time.js b/assets/js/time.js
@@ -5,40 +5,27 @@
 
 window.onload = displayClock();
 function displayClock() {
-  const monthNames = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-  ];
+	const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
-  var d = new Date();
-  var mm = monthNames[d.getMonth()];
-  var dd = d.getDate();
-  var min = (mins = ('0' + d.getMinutes()).slice(-2));
-  var hh = d.getHours();
-  var ampm = '';
+	var d = new Date();
+	var mm = monthNames[d.getMonth()];
+	var dd = d.getDate();
+	var min = (mins = ('0' + d.getMinutes()).slice(-2));
+	var hh = d.getHours();
+	var ampm = '';
 
-  if (CONFIG.twelveHourFormat) {
-    ampm = hh >= 12 ? ' pm' : ' am';
-    hh = hh % 12;
-    hh = hh ? hh : 12;
-  }
+	if (CONFIG.twelveHourFormat) {
+		ampm = hh >= 12 ? ' pm' : ' am';
+		hh = hh % 12;
+		hh = hh ? hh : 12;
+	}
 
-  document.getElementById('hour').innerText = hh;
-  document.getElementById('separator').innerHTML = ' : ';
-  document.getElementById('minutes').innerText = min + ampm;
+	document.getElementById('hour').innerText = hh;
+	document.getElementById('separator').innerHTML = ' : ';
+	document.getElementById('minutes').innerText = min + ampm;
 
-  document.getElementById('month').innerText = mm;
-  document.getElementById('day').innerText = dd;
+	document.getElementById('month').innerText = mm;
+	document.getElementById('day').innerText = dd;
 
-  setTimeout(displayClock, 1000);
+	setTimeout(displayClock, 1000);
 }