Adjusted README and changed variable names

NotNeelPatel · Feb 25, 2024 · 64e9102 · 64e9102
1 parent 7175902
commit 64e9102
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -27,3 +27,7 @@ Inspired by [Gruvbox Factory](https://github.com/paulopacitti/gruvbox-factory) a
 4. Press "Convert"
 5. Wait!! It may take a few seconds, especially if you have lower-end hardware. You will know that it is done when you see the "Download" button and "Reset Image" button.
 6. Download the image if you'd like, or if you want to try another palette, press "Reset Image" and repeat steps 3-5.
+
+## How it works
+
+I wrote a blog post in 2022 explaining more about how it works. Check it out: https://notneelpatel.github.io/blog/2022-05-10-wallpaper-theme-converter.html
diff --git a/assets/convert.js b/assets/convert.js
@@ -1,59 +1,30 @@
 // Canvas loading variables
 var imageLoader = document.getElementById('drop-zone');
-
 imageLoader.addEventListener('change', e => {
     handleImage(e.target.files[0])
 });
+
 window.addEventListener('paste', e => {
     handleImage(e.clipboardData.files[0]) 
 });
 
-const dropArea = document.body;
-
-        // Prevent default drag behaviors
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            dropArea.addEventListener(eventName, preventDefaults, false)
-        });
-
-        // Highlight drop area when item is dragged over it
-        ['dragenter', 'dragover'].forEach(eventName => {
-            dropArea.addEventListener(eventName, highlight, false)
-        });
-
-        // Remove highlight when item is dragged out of drop area
-        ['dragleave', 'drop'].forEach(eventName => {
-            dropArea.addEventListener(eventName, unhighlight, false)
-        });
-
-        // Handle dropped files
-        dropArea.addEventListener('drop', handleDrop, false)
-
-        // Prevent default drag behaviors
-        function preventDefaults(event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-
-        // Highlight drop area
-        function highlight() {
-            dropArea.classList.add('highlight');
-        }
-
-        // Remove highlight from drop area
-        function unhighlight() {
-            dropArea.classList.remove('highlight');
-        }
-
-        // Handle dropped files
-        function handleDrop(event) {
-            const dt = event.dataTransfer;
-            const files = dt.files;
+// Prevent default drag behaviors
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => {
+    document.body.addEventListener(e, preventDefaults, false)
+});
 
-            handleImage(files[0]);
-        }
+// Handle dropped files
+document.body.addEventListener('drop', e => {
+    handleImage(e.dataTransfer.files[0])
+});
 
+// Prevent default drag behaviors
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
 
-var canvas = document.getElementById('imageCanvas');
+var canvas = document.getElementById('image-canvas');
 var ctx = canvas.getContext('2d');
 
 
@@ -88,7 +59,6 @@ fetch("./assets/themes.json")
     list_of_themes = data;
 });
 
-
 // Loads image onto canvas
 function handleImage(source){
     ogimage = source;
@@ -116,7 +86,7 @@ function reset(){
 }
 
 // Displays the colour palette
-function Palette(){
+function displayPalette(){
     // Deletes previous colour palette
     if (colour_palette_count != 0){
         for (var i = 0; i < colour_palette_count; i++){
@@ -143,7 +113,7 @@ function Palette(){
 }
 
 // Opens the custom menu 
-function Custom(){
+function openCustomMenu(){
     if (menuVisible == true){
         document.getElementById("custom-menu").style.display = "none";
         menuVisible = false;
@@ -155,7 +125,7 @@ function Custom(){
 }
 
 // Adds a colour swatch when pressed
-function AddColour(){
+function addColour(){
     const colour_node = document.createElement("input");
     colour_node.setAttribute("type","color");
     colour_node.id = ("node" + nodes);
@@ -164,15 +134,15 @@ function AddColour(){
 }
 
 // Removes a colour swatch when pressed
-function RemoveColour(){
+function removeColour(){
     if (nodes > 0) {
         document.getElementById("colours").removeChild(colours_div.lastElementChild);
         nodes--;
     }
 }
 
 // When the user is done with their custom theme, the colour data is loaded into the theme array
-function Done(){
+function closeCustomMenu(){
     var hex_colour = "#FFFFFF";
     var hex_parsed = 0;
     var colour_palette = [];
@@ -188,26 +158,26 @@ function Done(){
     theme = colour_palette;
     customMenu.style.display = "none";
     menuVisible = false;
-    Palette();
+    displayPalette();
 }
 
 function initialize(){
     loadingScreen.style.opacity = '100';
     loadingScreen.style.visibility = 'visible';
     loadingScreen.style.transition = '0s';
     setTimeout(function(){
-        Start();
+        convertImage();
         loadingScreen.style.transition = '0.5s';
         loadingScreen.style.opacity = '0';
         loadingScreen.style.visibility = 'hidden';
-        },0);
-    }
+    },0);
+}
 /*
 This is the function that processes the image.
 It works by scanning every pixel and finding the nearest colour.
 After finding the nearest colour, it uses that data to reconstruct the image.
 */
-function Start(){ 
+function convertImage(){ 
     downloadButton.style.visibility = 'hidden';
     resetButton.style.visibility = 'hidden';
     // Assigning variables
@@ -252,7 +222,7 @@ function Start(){
 
 
 //Download function. Works on desktop browsers only at the moment.
-function Download(){
+function downloadImage(){
     image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
     var link = document.createElement('a');
     link.download = ("wallpaper-theme-converter.png");
@@ -263,5 +233,5 @@ function Download(){
 // Change values from RGB values of each palette, stored in themes.json
 function changeTheme(name){
     theme = list_of_themes[name];
-    Palette();
+    displayPalette();
 }
diff --git a/assets/style.css b/assets/style.css
@@ -96,12 +96,12 @@ button:hover {
     align-items: center;
 }
 
-#imageLoader{
+#image-loader{
     font-family: "Inconsolata", monospace;
     font-size: 1em;
 
 }
-#imageLoader::file-selector-button {
+#image-loader::file-selector-button {
     margin-left: 10px;
     font-family: "Inconsolata", monospace;
     background-color: #333;
@@ -110,7 +110,7 @@ button:hover {
     cursor: pointer;
   }
 
-#imageCanvas {
+#image-canvas {
     border: 3px solid #aaa;
     max-width: 50%;
     display: flex;

diff --git a/index.html b/index.html
@@ -23,14 +23,14 @@ <h1 style="margin-right:auto">Wallpaper Theme Converter</h1>
     <br/>
     <div id="main-container">
       <div id="drop-zone" ondragover="handleImage();">
-        <label for="imageLoader">Drag/Drop, Paste (Ctrl+V), or</label>
-        <input type="file" id="imageLoader" name="imageLoader"  accept=".jpg, .jpeg, .png, .webp" />
+        <label for="image-loader">Drag/Drop, Paste (Ctrl+V), or</label>
+        <input type="file" id="image-loader" name="image-loader"  accept=".jpg, .jpeg, .png, .webp" />
       </div>
       <br/>
-      <canvas id="imageCanvas"></canvas>
+      <canvas id="image-canvas"></canvas>
 
       <div style="display:flex; justify-content: center;">
-        <button class="important-button"  id ="download-button" type="button" onclick="Download()">↓ Download ↓</button>
+        <button class="important-button"  id ="download-button" type="button" onclick="download()">↓ Download ↓</button>
         <button class="important-button" id ="reset-button" type="button" onclick="reset()">Reset Image</button>
       </div>
 
@@ -48,16 +48,16 @@ <h3 id = "loading">Select a theme</h3>
       <br/>
       <hr class="body"/>
 
-      <button class = "theme-button" id ="custom" type="button" onclick="Custom()"> Custom Theme </button>
+      <button class = "theme-button" id ="custom" type="button" onclick="openCustomMenu()"> Custom Theme </button>
 
       <div id="custom-menu">
-        <button  type="button" onclick="AddColour()">+</button>
-        <button  type="button" onclick="RemoveColour()">-</button>
+        <button  type="button" onclick="addColour()">+</button>
+        <button  type="button" onclick="removeColour()">-</button>
 
         <div id="colours" style="padding: 0.5em; display:block;">
         </div>
         <br/>
-        <button type="button" onclick="Done()">Done</button>
+        <button type="button" onclick="closeCustomMenu()">Done</button>
       </div>
 
       <hr class="body"/>