feat: move left, move right button in generated images (#125)

* added move left/right images

* bug fixes and button name change

css/index.css

@@ -24,8 +24,8 @@ body.dark {
   --field-borders: #222;
   --primary-button-bg: #eee;
   --primary-button-color: #111;
-  --delete-button-borders: #E76F7B;
-  --font-color-delete: #E76F7B;
+  --delete-button-borders: #e76f7b;
+  --font-color-delete: #e76f7b;
 }
 @font-face {
   font-family: 'Hindi_Font';
@@ -441,9 +441,9 @@ input[type='file']::before {
   }
 }
 
-/*To generate margin between download as pdf and delete button in small screens*/ 
+/*To generate margin between download as pdf and delete button in small screens*/
 @media (max-width: 430px) {
   .delete-button {
     margin-top: 10px;
   }
-}
+}

index.html

@@ -17,7 +17,7 @@
       gtag('config', 'UA-125454191-4');
     </script>
 
-	  <!-- Mobile Specific Metas -->
+    <!-- Mobile Specific Metas -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <!-- Basic -->
@@ -65,7 +65,7 @@
 
     <title>Text to Handwriting</title>
 
-	  <!-- Favicons -->
+    <!-- Favicons -->
     <link
       rel="apple-touch-icon"
       sizes="180x180"
@@ -84,10 +84,10 @@
       href="images/favicon-16x16.png"
     />
 
-	  <!-- PWA Migration -->
+    <!-- PWA Migration -->
     <link rel="manifest" href="./manifest.webmanifest" />
 
-	  <!-- Load Fonts -->
+    <!-- Load Fonts -->
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Homemade+Apple|Roboto|Caveat|Liu+Jian+Mao+Cao&display=swap"

js/generate-images.mjs

@@ -6,7 +6,7 @@ import {
 import { createPDF } from './utils/helpers.mjs';
 
 const pageEl = document.querySelector('.page-a');
-const outputImages = [];
+let outputImages = [];
 
 /**
  * To generate image, we add styles to DIV and converts that HTML Element into Image.
@@ -102,8 +102,30 @@ export const deleteAll = () => {
   outputImages.splice(0, outputImages.length);
   renderOutput(outputImages);
   document.querySelector('#output-header').textContent =
-    'Output' +
-    (outputImages.length ? ' ( ' + outputImages.length + ' )' : '');
+    'Output' + (outputImages.length ? ' ( ' + outputImages.length + ' )' : '');
+};
+
+const arrayMove = (arr, oldIndex, newIndex) => {
+  if (newIndex >= arr.length) {
+    let k = newIndex - arr.length + 1;
+    while (k--) {
+      arr.push(undefined);
+    }
+  }
+  arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0]);
+  return arr; // for testing
+};
+
+export const moveLeft = (index) => {
+  if (index === 0) return outputImages;
+  outputImages = arrayMove(outputImages, index, index - 1);
+  renderOutput(outputImages);
+};
+
+export const moveRight = (index) => {
+  if (index + 1 === outputImages.length) return outputImages;
+  outputImages = arrayMove(outputImages, index, index + 1);
+  renderOutput(outputImages);
 };
 
 /**
@@ -131,6 +153,26 @@ function setRemoveImageListeners() {
         setRemoveImageListeners();
       });
     });
+
+  document.querySelectorAll('.move-left').forEach((leftButton) => {
+    leftButton.addEventListener('click', (e) => {
+      moveLeft(Number(e.target.dataset.index));
+      // Displaying no. of images on deletion
+      renderOutput(outputImages);
+      // When output changes, we have to set remove listeners again
+      setRemoveImageListeners();
+    });
+  });
+
+  document.querySelectorAll('.move-right').forEach((rightButton) => {
+    rightButton.addEventListener('click', (e) => {
+      moveRight(Number(e.target.dataset.index));
+      // Displaying no. of images on deletion
+      renderOutput(outputImages);
+      // When output changes, we have to set remove listeners again
+      setRemoveImageListeners();
+    });
+  });
 }
 
 /** Modifies image data to add contrast */

js/utils/generate-utils.mjs

@@ -95,6 +95,21 @@ function renderOutput(outputImages) {
           download 
           href="${outputImageCanvas.toDataURL('image/jpeg')}
         ">Download Image</a>
+        <br/>
+        <br/>
+
+        <button 
+          class="button move-left"
+          data-index="${index}" 
+        >
+          Move Left
+        </button>
+        <button 
+          class="button move-right"
+          data-index="${index}" 
+        >
+          Move Right
+        </button>
       </div>
     </div>
     `

js/utils/helpers.mjs

@@ -51,7 +51,7 @@ function formatText(event) {
 }
 
 function addPaperFromFile(file) {
-  var tmppath = URL.createObjectURL(file);
+  const tmppath = URL.createObjectURL(file);
   pageEl.style.backgroundImage = `url(${tmppath})`;
 }