small style fixes

giventofly · Jul 3, 2019 · 5690c75 · 5690c75
1 parent fdbd029
commit 5690c75
Show file tree

Hide file tree

Showing 8 changed files with 426 additions and 142 deletions.
diff --git a/docs/assets/main.js b/docs/assets/main.js
@@ -114,14 +114,21 @@ document.getElementById("pixlInput").onchange = function(e) {
 
   //function to apply effects
   const pixelit = ()=>{
-      px.setScale(blocksize.value).setPalette(paletteList[currentPalette]).draw().pixelate();
-      greyscale.checked ? px.convertGrayscale() : null;
-      palette.checked ?  px.convertPalette() : null;
-      maxheight.value ? px.setMaxHeight(maxheight.value).resizeImage()  : null;
-      maxwidth.value ? px.setMaxWidth(maxwidth.value).resizeImage() : null;
+    document.querySelector('.loader').classList.toggle('active');
+    px.setScale(blocksize.value).setPalette(paletteList[currentPalette]).draw().pixelate();
+    greyscale.checked ? px.convertGrayscale() : null;
+    palette.checked ?  px.convertPalette() : null;
+    maxheight.value ? px.setMaxHeight(maxheight.value).resizeImage()  : null;
+    maxwidth.value ? px.setMaxWidth(maxwidth.value).resizeImage() : null;
+    setTimeout(() => {
+      document.querySelector('.loader').classList.toggle('active');
+    }, 250);
+
   }
 
 
+
+
 
 const makePaletteGradient = ()=>{
       //create palette
@@ -130,13 +137,16 @@ const makePaletteGradient = ()=>{
     document.querySelector('#palettecolor').innerHTML = '';
     paletteList[currentPalette].forEach(elem=>{
       let div = document.createElement('div');
-      div.innerHTML = `<div class="colorblock" style="background-color: rgba(${elem[0]},${elem[1]},${elem[2]},1)"></div>`;
+      div.classList = 'colorblock';
+      div.style.backgroundColor = `rgba(${elem[0]},${elem[1]},${elem[2]},1)`;
+      //div.innerHTML = `<div class="colorblock" style="background-color: rgba(${elem[0]},${elem[1]},${elem[2]},1)"></div>`;
       document.querySelector('#palettecolor').appendChild(div);
       //pdivs += `<div class="colorblock" style="background-color: rgba(${elem[0]},${elem[1]},${elem[2]},1)"></div>`;
     });
-    document.querySelector('#palettecolor').innerHTML = pdivs;
+    //document.querySelector('#palettecolor').innerHTML = pdivs;
   }
-  makePaletteGradient();
+
+makePaletteGradient();
 
   //block size
  const blocksize = document.querySelector('#blocksize');

diff --git a/docs/assets/mainmin.js b/docs/assets/mainmin.js
@@ -28,11 +28,15 @@ document.addEventListener("DOMContentLoaded", function () {
 
 
   var pixelit = function pixelit() {
+    document.querySelector('.loader').classList.toggle('active');
     px.setScale(blocksize.value).setPalette(paletteList[currentPalette]).draw().pixelate();
     greyscale.checked ? px.convertGrayscale() : null;
     palette.checked ? px.convertPalette() : null;
     maxheight.value ? px.setMaxHeight(maxheight.value).resizeImage() : null;
     maxwidth.value ? px.setMaxWidth(maxwidth.value).resizeImage() : null;
+    setTimeout(function () {
+      document.querySelector('.loader').classList.toggle('active');
+    }, 250);
   };
 
   var makePaletteGradient = function makePaletteGradient() {
@@ -42,10 +46,11 @@ document.addEventListener("DOMContentLoaded", function () {
     document.querySelector('#palettecolor').innerHTML = '';
     paletteList[currentPalette].forEach(function (elem) {
       var div = document.createElement('div');
-      div.innerHTML = "<div class=\"colorblock\" style=\"background-color: rgba(".concat(elem[0], ",").concat(elem[1], ",").concat(elem[2], ",1)\"></div>");
+      div.classList = 'colorblock';
+      div.style.backgroundColor = "rgba(".concat(elem[0], ",").concat(elem[1], ",").concat(elem[2], ",1)"); //div.innerHTML = `<div class="colorblock" style="background-color: rgba(${elem[0]},${elem[1]},${elem[2]},1)"></div>`;
+
       document.querySelector('#palettecolor').appendChild(div); //pdivs += `<div class="colorblock" style="background-color: rgba(${elem[0]},${elem[1]},${elem[2]},1)"></div>`;
-    });
-    document.querySelector('#palettecolor').innerHTML = pdivs;
+    }); //document.querySelector('#palettecolor').innerHTML = pdivs;
   };
 
   makePaletteGradient(); //block size

diff --git a/docs/assets/style.css b/docs/assets/style.css