feat: add url params (#565)

Author: Dun-sin

src/eggy-js.d.ts

@@ -0,0 +1 @@
+declare module '@s-r0/eggy-js';

src/lib/packages/helpers.ts

@@ -1,17 +1,18 @@
 // Includes all functions that the utils functions use
 
-import copy from 'copy-to-clipboard';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import {Eggy} from '@s-r0/eggy-js';
 import {
   getColumnGap,
   getNumberOfColumns,
   getNumberOfRows,
   getRowGap,
 } from '../getElements';
 
+import {Eggy} from '@s-r0/eggy-js';
+import copy from 'copy-to-clipboard';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+
 export function createDownloadLink(fileName: string, url: string) {
   const link = document.createElement('a');
   link.download = fileName;
@@ -200,6 +201,25 @@ export const actOnGenerator = (
   }
 };
 
+export function getQueryParam(param: string): string | null {
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get(param);
+}
+
+export function setQueryParam(param: string, value: string): void {
+  const url = new URL(window.location.toString());
+  const urlParams = url.searchParams;
+  urlParams.set(param, value);
+  window.history.replaceState({}, '', url.toString());
+}
+
+export function deleteQueryParam(param: string): void {
+  const url = new URL(window.location.toString());
+  const urlParams = url.searchParams;
+  urlParams.delete(param);
+  window.history.replaceState({}, '', url.toString());
+}
+
 function convertLinearGradientToTailwind(gradient: string): string {
   const angle = extractDegreeFromGradient(gradient);
   const direction = getTailwindDirectionClass(angle);

src/lib/packages/utils.ts

@@ -1,21 +1,26 @@
-import DomToImage from 'dom-to-image';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import {Eggy} from '@s-r0/eggy-js';
 import {
+  actOnGenerator,
+  actOnTailwindGenerator,
+  createDownloadLink,
+  setQueryParam,
+} from './helpers';
+import {
+  getAllColorInput,
+  getAllInputElements,
+  getDegreeSpanElement,
   getGradientPreview,
   getNewColorButton,
   getParentElementOfColors,
+  getRange,
   getRemoveNewColorButton,
-  getAllColorInput,
+  getResetButton,
 } from '../getElements';
 
-import {
-  createDownloadLink,
-  actOnGenerator,
-  actOnTailwindGenerator,
-} from './helpers';
+import DomToImage from 'dom-to-image';
+import {Eggy} from '@s-r0/eggy-js';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 
 export const setGradientDegreeValue = (degreeElement: HTMLElement): void =>
   degreeElement.addEventListener('input', (e) => {
@@ -54,6 +59,11 @@ export const createGradientPreview = (
   ).style.background = `linear-gradient(${fill}deg, ${getColorsValue(
     attribute
   ).join(', ')})`;
+
+  setQueryParam(
+    'values',
+    `linear-gradient(${fill}deg, ${getColorsValue(attribute).join(', ')})`
+  );
 };
 
 /**
@@ -192,13 +202,23 @@ export function getColorsValue(attribute: string): Array<string> {
   return colorValues;
 }
 
+export function setColorsValue(colors: string[] | null, attribute: string) {
+  if (!colors) return;
+  const colorInputs = getAllColorInput(attribute);
+
+  colorInputs.forEach(
+    (colorInput, index) => (colorInput.value = colors[index])
+  );
+}
+
 export function removeColorPicker(attribute: string): void {
   const getParentElementToRemoveFrom = getParentElementOfColors(attribute);
   const numberOfChildren = getParentElementToRemoveFrom?.childElementCount;
 
   if (numberOfChildren === undefined || numberOfChildren === 2) return;
   getParentElementToRemoveFrom?.lastChild?.remove();
 
+  createGradientPreview(getRange(attribute), attribute);
   whatColorButtonShouldShow(attribute);
 }
 
@@ -233,3 +253,55 @@ export function closeDropdown(
     }
   });
 }
+
+export function inputEventListner(attribute: string) {
+  const gradientInputs = getAllInputElements(attribute);
+
+  gradientInputs.forEach((inputElement) => {
+    inputElement.addEventListener('input', () => {
+      createGradientPreview(getRange(attribute), attribute);
+    });
+  });
+}
+
+export function addEventListenerToTheNewColorPicker(attribute: string) {
+  const resetButton = getResetButton(attribute);
+
+  inputEventListner(attribute);
+  if (resetButton.classList.contains('reset-show')) return;
+  resetButton.classList.add('reset-show');
+}
+
+export function applyGradientValues(values: string, attribute: string) {
+  const colors = values.match(/#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g) as
+    | string[]
+    | null;
+  const degreeValueReg = values.match(/linear-gradient\((\d+)deg/) as
+    | string[]
+    | null;
+
+  if (degreeValueReg) {
+    const degreeValue = degreeValueReg[1];
+    const degreeSpanElement = getDegreeSpanElement(attribute);
+    const rangeElement = getRange(attribute);
+
+    degreeSpanElement.innerHTML = `${degreeValue}deg`;
+    rangeElement.value = degreeValue;
+  }
+
+  if (colors) {
+    const colorLength = colors.length;
+
+    if (colorLength > 2) {
+      for (let index = 2; index < colorLength; index++) {
+        addNewColorPicker(attribute);
+        addEventListenerToTheNewColorPicker(attribute);
+      }
+      whatColorButtonShouldShow(attribute);
+    }
+
+    setColorsValue(colors, attribute);
+  }
+
+  createGradientPreview(getRange(attribute), attribute);
+}

src/main.ts

@@ -2,13 +2,19 @@
 import {
   addAnimationListener,
   animationGenerator,
+  applyAnimationValues,
   displayAnimationPreview,
 } from './pages/animation';
 import {
   addBorderRadiusListener,
+  applyBorderRadiusValues,
   borderRadiusGenerator,
 } from './pages/border-radius';
-import {addBoxShadowListener, boxShadowGenerator} from './pages/box-shadow';
+import {
+  addBoxShadowListener,
+  applyBoxShadowValues,
+  boxShadowGenerator,
+} from './pages/box-shadow';
 import {
   addGradientBackgroundListener,
   gradientBackgroundGenerator,
@@ -21,10 +27,14 @@ import {
   addGradientTextListener,
   gradientTextGenerator,
 } from './pages/gradient-text';
-import {rangeGenerator} from './pages/input-range';
+import {applyInputRangeValues, rangeGenerator} from './pages/input-range';
 import {picTextGenerator} from './pages/pic-text';
-import {addTextShadowListener, textShadowGenerator} from './pages/text-shadow';
-import {gridGenerator} from './pages/grid-generator';
+import {
+  addTextShadowListener,
+  applyTextShadowValues,
+  textShadowGenerator,
+} from './pages/text-shadow';
+import {applyGridValues, gridGenerator} from './pages/grid-generator';
 
 // Packages
 import * as FilePond from 'filepond';
@@ -44,8 +54,18 @@ import {
   getRange,
   getResultPage,
 } from './lib/getElements';
-import {addTransformListener, transformGenerator} from './pages/transform';
+import {
+  addTransformListener,
+  applyTransformValue,
+  transformGenerator,
+} from './pages/transform';
 import {scrollGenerator} from './pages/scroll';
+import {
+  deleteQueryParam,
+  getQueryParam,
+  setQueryParam,
+} from './lib/packages/helpers';
+import {applyGradientValues} from './lib/packages/utils';
 
 FilePond.registerPlugin(
   FilePondPluginImagePreview,
@@ -204,6 +224,31 @@ FilePond.create(getImageEntryElement, {
   },
 });
 
+const generatorParam = getQueryParam('generator');
+const valuesParam = getQueryParam('values');
+
+if (generatorParam) {
+  showContent(generatorParam);
+
+  if (valuesParam) {
+    generatorParam === 'animation' &&
+      applyAnimationValues(JSON.parse(valuesParam));
+    generatorParam === 'border-radius' &&
+      applyBorderRadiusValues(JSON.parse(valuesParam));
+    generatorParam === 'box-shadow' && applyBoxShadowValues(valuesParam);
+    generatorParam === 'gradient-background' &&
+      applyGradientValues(valuesParam, 'gradient-background');
+    generatorParam === 'gradient-border' &&
+      applyGradientValues(valuesParam, 'gradient-border');
+    generatorParam === 'gradient-text' &&
+      applyGradientValues(valuesParam, 'gradient-text');
+    generatorParam === 'grid-generators' && applyGridValues(valuesParam);
+    generatorParam === 'input-range' && applyInputRangeValues(valuesParam);
+    generatorParam === 'text-shadow' && applyTextShadowValues(valuesParam);
+    generatorParam === 'transform' && applyTransformValue(valuesParam);
+  }
+}
+
 /**
  * sets which generator to call
  *
@@ -229,7 +274,7 @@ function generatorsFunction(attribute: string, type: openResults): void {
  * @param attribute The attribute name of the generator element
  * @param display display type
  */
-function showContent(attribute: string, display: Display): void {
+function showInputSection(attribute: string, display: Display): void {
   const generatorsContent = document.querySelectorAll(`[data-content]`);
   const showGen = document.querySelector(
     `[data-content=${attribute}]`
@@ -312,6 +357,19 @@ function showOpenPreviousResultText() {
   getOpenPreviousResult.style.animationFillMode = 'backwards';
 }
 
+function showContent(generatorName: string) {
+  !navBar?.classList.contains('closed-nav') &&
+    openOrCloseNavigationBar('close');
+
+  sidebar.style.display = 'none';
+
+  if (getHomePage && getGeneratorSection) {
+    getHomePage.style.display = 'none';
+    getGeneratorSection.style.display = 'flex';
+    showInputSection(generatorName, 'flex');
+  }
+}
+
 // clicking outside the nav bar should close the nav bar
 document.addEventListener('click', (e: Event) => {
   const event = e.target as HTMLElement;
@@ -364,6 +422,9 @@ getHeaderText?.addEventListener('click', () => {
   });
   getHomePage.style.display = 'flex';
   getGeneratorSection.style.display = 'none';
+
+  deleteQueryParam('generator');
+  deleteQueryParam('values');
 });
 
 // clicking on the get result icon should show the old results
@@ -396,24 +457,15 @@ getDegreeElement?.addEventListener('change', () => displayAnimationPreview());
 // adds event listner for which generator should show
 generators.forEach((generator) => {
   generator?.addEventListener('click', (): void => {
-    const checking = generator.getAttribute('data-gen');
+    const generatorName = generator.getAttribute('data-gen');
     openSidePanelButton.style.display = 'none';
 
-    if (
-      checking === null ||
-      getHomePage === null ||
-      getGeneratorSection === null
-    )
-      return;
+    if (generatorName === null) return;
 
-    !navBar?.classList.contains('closed-nav') &&
-      openOrCloseNavigationBar('close');
+    showContent(generatorName);
 
-    sidebar.style.display = 'none';
-    attributeValue = checking;
-    getHomePage.style.display = 'none';
-    getGeneratorSection.style.display = 'flex';
-    showContent(attributeValue, 'flex');
+    deleteQueryParam('values');
+    setQueryParam('generator', generatorName);
   });
 });