feat: add homepage to not be seen when a generator is clicked

closes #155

Author: Dun-sin

index.html

@@ -373,8 +373,8 @@ <h2>
 
             <label id="degree">
               <span class="label-title">
-                <span>Speed</span>
-                <span id="degree-display">deg</span>
+                <span class="title-display">Angle</span>
+                <span class="unit-display animation">deg</span>
               </span>
               <input
                 type="range"

src/main.ts

@@ -114,6 +114,11 @@ const gradientBackgroundDegree = getRange('gradient-background');
 // get all range inputs
 const gradientRangeInputs = document.querySelectorAll('.degree-range');
 
+// get title display element for animation
+const titleDisplayElement = <HTMLElement>(
+  document.querySelector('.title-display')
+);
+
 menuIcon?.addEventListener('click', () => {
   if (navBar?.classList.contains('closed-nav')) {
     navBar?.animate(navBarSlideIn, navBarAnimationOptions);
@@ -142,7 +147,9 @@ if (getComputedStyle(menu).display == 'block') {
 
 for (let i = 0; i < generators.length; i++) {
   generators[i].addEventListener('click', () => {
-    navBar?.animate(navBarSlideOut, navBarAnimationOptions);
+    if (!navBar?.classList.contains('closed-nav')) {
+      navBar?.animate(navBarSlideOut, navBarAnimationOptions);
+    }
     navBar?.classList.add('closed-nav');
     menuIcon?.setAttribute('icon', 'dashicons:menu-alt');
   });
@@ -151,6 +158,11 @@ for (let i = 0; i < generators.length; i++) {
 FilePond.create(getImageEntryElement, {
   imagePreviewMaxHeight: 200,
 
+  labelIdle:
+    window.innerWidth < 768
+      ? '<span class="filepond--label-action">Browse</span>'
+      : 'Drag & Drop your files or <span class="filepond--label-action"> Browse </span>',
+
   onpreparefile: (fileItem, output): void => {
     // create a new image object
     const img = new Image();
@@ -269,17 +281,6 @@ function showResult(attribute: string | null) {
   generatorsFunction(attribute);
 }
 
-// display current gradient value for all range inputs
-const displayGradientValue = (gradientElement: HTMLInputElement) => {
-  gradientElement.addEventListener('input', (e) => {
-    const target = e.target as HTMLInputElement;
-    const degreeDisplayElement = <HTMLElement>(
-      target.parentElement?.querySelector('#degree-display')
-    );
-    degreeDisplayElement.innerText = `${target.value}deg`;
-  });
-};
-
 getHeaderText?.addEventListener('click', () => {
   if (getHomePage === null || getGeneratorSection === null) return;
   getHomePage.style.display = 'flex';
@@ -323,6 +324,22 @@ closeBar?.addEventListener('click', () => {
   }, 600);
 });
 
+// display current gradient value for all range inputs
+const displayGradientValue = (gradientElement: HTMLInputElement) => {
+  gradientElement.addEventListener('input', (e) => {
+    const target = e.target as HTMLInputElement;
+    const unitDisplayElement = <HTMLElement>(
+      target.parentElement?.querySelector('.unit-display')
+    );
+
+    // change the unit for opacity
+    const unit = titleDisplayElement.innerText.toLowerCase().includes('opacity')
+      ? ''
+      : 'deg';
+    unitDisplayElement.innerText = `${target.value}${unit}`;
+  });
+};
+
 gradientRangeInputs.forEach((gradientRangeInput: HTMLInputElement) => {
   displayGradientValue(gradientRangeInput);
 });

src/pages/animation.ts

@@ -12,27 +12,25 @@ type Values = {
 };
 
 const attribute = 'animation';
-let getCodeButtonElement =  utils.getCopyCodeButton(attribute);
+let getCodeButtonElement = utils.getCopyCodeButton(attribute);
+
+const OutputElement = utils.getOutput(attribute);
+const DegreeElement = utils.getRange(attribute);
+const radio_button_set = utils.getRadioButtonSet(attribute);
+
+initialConfiguration(radio_button_set, DegreeElement, OutputElement);
 
 export function animationGenerator() {
-  const DegreeElement = utils.getRange(attribute);
   const duration = utils.getInputSpinner(attribute);
-  const radio_button_set = utils.getRadioButtonSet(attribute);
-
-  const OutputElement = utils.getOutput(attribute);
 
   const Stylesheet = utils.getStyleSheet();
   // getCodeButtonElement = utils.getCopyCodeButton(attribute);
   const resultPage = utils.getResultPage();
-  
-  resultPage.style.display = 'flex';
 
- 
+  resultPage.style.display = 'flex';
 
   initial_length = Stylesheet.cssRules.length - 1;
 
-  initialConfiguration(radio_button_set, DegreeElement, OutputElement);
-
   if (OutputElement === null) return;
 
   let i = 0;
@@ -58,8 +56,6 @@ getCodeButtonElement.addEventListener('click', () => {
   );
 });
 
-
-
 /**
  * sets the animation to the output element
  *
@@ -166,6 +162,14 @@ function initialConfiguration(
 
   OutputElement.innerText = 'Lorem Ipsum';
 
+  // get the unit display element for animator
+  const unitDisplayElement = <HTMLElement>(
+    document.querySelector('.unit-display.animation')
+  );
+  const titleDisplayElement = <HTMLElement>(
+    document.querySelector('.title-display')
+  );
+
   elements.forEach((el) =>
     el.addEventListener('click', () => {
       const type = el.value;
@@ -174,11 +178,15 @@ function initialConfiguration(
         DegreeElement.max = '90';
         DegreeElement.step = '1';
         DegreeElement.value = '50';
+        unitDisplayElement.innerText = `${DegreeElement.value}deg`;
+        titleDisplayElement.innerText = 'Angle';
       } else {
         DegreeElement.min = '0';
         DegreeElement.max = '1';
         DegreeElement.step = '.1';
         DegreeElement.value = '.5';
+        unitDisplayElement.innerText = `${DegreeElement.value}`;
+        titleDisplayElement.innerText = 'Opacity';
       }
     })
   );

src/style.css

@@ -327,7 +327,7 @@ input[type='number']::-webkit-outer-spin-button {
   align-items: center;
 }
 
-#degree-display {
+.unit-display {
   opacity: 0.7;
 }