feat(preview): create slide in preview for shadow elements

Author: Dun-sin

index.html

@@ -494,7 +494,8 @@ <h2>
 
           <!-- Box Shadow -->
           <div data-content="box-shadow">
-            <div class="box-shadow-preview" id="box-shadow-preview"></div>
+            <div class="preview-slider"></div>
+
             <div class="colors">
               <label for="color" class="color">
                 <input
@@ -578,6 +579,8 @@ <h2>
 
           <!-- Text shadow generator -->
           <div data-content="text-shadow">
+            <div class="preview-slider"></div>
+
             <textarea
               id="text-shadow-text"
               placeholder="Enter the text"
@@ -668,10 +671,6 @@ <h2>Results</h2>
           <!-- Pic Text -->
           <div class="download-output" data-result="pic-text">
             <div class="output"></div>
-            <p>
-              Note: Downloading only works for firefox <br />
-              but copying the code works for every browser
-            </p>
             <div class="download-btn">
               <div class="image-download">
                 <button class="btn" data-download="pic-text-PNG">

src/lib/general.ts

@@ -159,7 +159,7 @@ export const getResultPage = (): HTMLElement =>
   document.querySelector('.side-results') as HTMLElement;
 
 export const getCopyCodeButton = (attribute: string): HTMLElement =>
-  document.querySelector(`[data-download = ${attribute}-code]`) as HTMLElement;
+  document.querySelector(`[data-download=${attribute}-code]`) as HTMLElement;
 
 export const getPNGButton = (attribute: string): HTMLElement =>
   document.querySelector(`[data-download=${attribute}-PNG]`) as HTMLElement;
@@ -281,6 +281,24 @@ export const getShadowFields = (
     []
   );
 
+export const getPreviewSlider = (attribute: string): HTMLElement =>
+  document.querySelector(
+    `[data-content=${attribute}] .preview-slider`
+  ) as HTMLElement;
+
+export function slideIn(slider: HTMLElement, isOpen: boolean) {
+  if (isOpen) return;
+
+  const slideIn = [{left: '-300px'}, {left: '-10px'}];
+  const slideInTiming = {
+    duration: 500,
+    iterations: 1,
+    fill: 'both' as FillMode,
+  };
+
+  slider.animate(slideIn, slideInTiming);
+}
+
 function createDownloadLink(fileName: string, url: string) {
   const link = document.createElement('a');
   link.download = fileName;

src/main.ts

@@ -155,6 +155,9 @@ const borderRadiusPreview = document.querySelector(
 const menu = document.querySelector('.menu') as HTMLElement;
 const body = document.querySelector('body') as HTMLElement;
 
+const gradientGenerator = document.querySelectorAll('[data-gen]');
+const getResultButtons = document.querySelectorAll('[data-button]');
+
 // get the element with data-button="open-side-panel" attribute and make it hidden
 const openSidePanelButton = document.getElementsByClassName(
   'open-sidebar'
@@ -389,7 +392,6 @@ const displayGradientValue = (gradientElement: HTMLInputElement) => {
   });
 };
 
-const gradientGenerator = document.querySelectorAll('[data-gen]');
 gradientGenerator.forEach((item) => {
   item.addEventListener('click', () => {
     if (openSidePanelButton) {
@@ -398,7 +400,6 @@ gradientGenerator.forEach((item) => {
   });
 });
 
-const getResultButtons = document.querySelectorAll('[data-button]');
 getResultButtons.forEach((item) => {
   item.addEventListener('click', () => {
     if (openSidePanelButton) {

src/pages/box-shadow.ts

@@ -9,6 +9,7 @@ type Values = {
 };
 
 const attribute = 'box-shadow';
+let isSliderOpen = false;
 
 function copyHandler() {
   const outputElement = utils.getOutput(attribute);
@@ -77,7 +78,7 @@ export function addBoxShadowListener(): void {
   const spread = utils.getShadowSpread(attribute);
   const color = utils.getShadowColor(attribute);
 
-  const preview = utils.getShadowPreview(attribute);
+  const preview = utils.getPreviewSlider(attribute);
 
   const allBoxShadowInputs = [
     horizontalOffset,
@@ -103,6 +104,9 @@ export function addBoxShadowListener(): void {
       allBoxShadowInputsFields[idx].textContent = `${input.value}px`;
     }
     input.addEventListener('input', () => {
+      utils.slideIn(preview, isSliderOpen);
+
+      isSliderOpen = true;
       if (idx < 4) {
         allBoxShadowInputsFields[idx].textContent = `${input.value}px`;
       }

src/pages/gradient-text.ts

@@ -89,7 +89,8 @@ function getGradientTextResult(
     wordElement.style.backgroundClip = 'text';
     wordElement.style.webkitBackgroundClip = 'text';
     wordElement.style.webkitTextFillColor = 'transparent';
-    outputElement.appendChild(wordElement);
+
+    return wordElement;
   };
 
   const getCodeButtonElement = utils.getCopyCodeButton(attribute);
@@ -98,9 +99,9 @@ function getGradientTextResult(
 
   if (outputElement.childElementCount >= 1) {
     outputElement.innerHTML = '';
-    createTextElement();
+    outputElement.appendChild(createTextElement());
   } else {
-    createTextElement();
+    outputElement.appendChild(createTextElement());
   }
 
   getPNGButtonElement.addEventListener('click', pngDownloadHandler);

src/pages/text-shadow.ts

@@ -8,6 +8,7 @@ type Values = {
   text: string;
 };
 
+let isSliderOpen = false;
 const attribute = 'text-shadow';
 
 function copyHandler() {
@@ -78,22 +79,41 @@ export function addTextShadowListener(): void {
   const blur = utils.getShadowBlur(attribute);
   const color = utils.getShadowColor(attribute);
 
+  const getInputElement = utils.getInputText(attribute);
+  const preview = utils.getPreviewSlider(attribute);
+
   const allTextShadowInputs = [horizontalOffset, verticalOffset, blur, color];
   const allTextShadowInputsFields = utils.getShadowFields(attribute, [
     'h-offset',
     'v-offset',
     'blur',
+    'text',
   ]);
 
+  const getShadowValue = () =>
+    `${horizontalOffset.value}px ${verticalOffset.value}px ${blur.value}px ${color.value}`;
+
+  preview.innerText = getInputElement.value;
+  preview.style.textShadow = getShadowValue();
+
   allTextShadowInputs.forEach((input, idx) => {
     // default
     if (idx < 3) {
       allTextShadowInputsFields[idx].textContent = `${input.value}px`;
     }
+    getInputElement.addEventListener('input', () => {
+      preview.innerText = getInputElement.value;
+      preview.style.textShadow = getShadowValue();
+    });
     input.addEventListener('input', () => {
+      utils.slideIn(preview, isSliderOpen);
+
+      isSliderOpen = true;
+
       if (idx < 3) {
         allTextShadowInputsFields[idx].textContent = `${input.value}px`;
       }
+      preview.style.textShadow = getShadowValue();
     });
   });
 }

src/style.css

@@ -194,10 +194,10 @@ main > section:last-of-type {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 
 /* inputs */
-
 .generators > div {
   display: none;
   width: var(--generator-width);
@@ -206,6 +206,29 @@ main > section:last-of-type {
   align-items: center;
 }
 
+.preview-slider {
+  height: 80px;
+  width: 200px;
+
+  position: absolute;
+  left: -300px;
+  border: 1px solid #fff;
+  background: transparent;
+}
+
+[data-content='box-shadow'] .preview-slider {
+  top: -79%;
+}
+
+[data-content='text-shadow'] .preview-slider {
+  top: -30%;
+  word-wrap: break-word;
+  font-size: 0.8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 [data-content='pic-text'] {
   display: flex;
 }