Release v2.0.5 - Shuffle Gradient

Author: khagwal

README.md

@@ -21,7 +21,7 @@ CoolHue is also available as a node module. You can read [How it works](https://
 `npm install --save-dev coolhue`
 
 ## Sketch App Plugin
-1. Download [`Coolhue.sketchplugin.zip`](https://github.com/webkul/coolhue/releases/download/v2.0.4/CoolHue.sketchplugin.zip)
+1. Download [`Coolhue.sketchplugin.zip`](https://github.com/webkul/coolhue/releases/download/v2.0.5/CoolHue.sketchplugin.zip)
 2. Extract the archive
 3. Install `Coolhue.sketchplugin` for Sketch App
 4. Access it from Sketch's Menu Bar. Go to `Plugins` ➡️ `Coolhue` ➡️ `Palette`

appcast.xml

@@ -13,5 +13,9 @@
       <title>Version 2.0.4</title>
       <enclosure url="https://github.com/webkul/coolhue/releases/download/v2.0.4/CoolHue.sketchplugin.zip" sparkle:version="2.0.4"/>
     </item>
+    <item>
+      <title>Version 2.0.5</title>
+      <enclosure url="https://github.com/webkul/coolhue/releases/download/v2.0.5/CoolHue.sketchplugin.zip" sparkle:version="2.0.5"/>
+    </item>
   </channel>
 </rss>

distro/CoolHue.sketchplugin/Contents/Resources/_webpack_resources/ba2d9836387884f15f45466d8db71894.html distro/CoolHue.sketchplugin/Contents/Resources/_webpack_resources/f26f00243c3832631637c6f76c717088.html

@@ -19,9 +19,10 @@
     <div class="controller">
         <div class="grd">
             <div class="grd-lt">
-                <h2 class="cl-title">CoolHue v2.0.0</h2>
+                <h2 class="cl-title">CoolHue v2.0.5</h2>
             </div>
             <div class="grd-rt">
+                <span class="cl-shuffle"></span>
                 <span class="cl-theme"></span>
             </div>
         </div>

distro/CoolHue.sketchplugin/Contents/Resources/core/assets/script.js

@@ -0,0 +1,122 @@
+//Initialization
+let initHandler = () => {
+  window.document.addEventListener('contextmenu', event => event.preventDefault());
+  var getPaint = document.getElementById("paint");
+  var clTheme = document.querySelector(".cl-theme");
+  var clShuffle = document.querySelector(".cl-shuffle");
+  var getBody = document.body;
+
+  var gradientRand = () => {
+    return "#" + Math.random().toString(16).substr(2,6);
+  }
+  var data = [
+    ["#FDEB71", "#F8D800"],
+    ["#ABDCFF", "#0396FF"],
+    ["#FEB692", "#EA5455"],
+    ["#CE9FFC", "#7367F0"],
+    ["#90F7EC", "#32CCBC"],
+    ["#FFF6B7", "#F6416C"],
+    ["#81FBB8", "#28C76F"],
+    ["#E2B0FF", "#9F44D3"],
+    ["#F97794", "#623AA2"],
+    ["#FCCF31", "#F55555"],
+    ["#F761A1", "#8C1BAB"],
+    ["#43CBFF", "#9708CC"],
+    ["#5EFCE8", "#736EFE"],
+    ["#FAD7A1", "#E96D71"],
+    ["#FFD26F", "#3677FF"],
+    ["#A0FE65", "#FA016D"],
+    ["#FFDB01", "#0E197D"],
+    ["#FEC163", "#DE4313"],
+    ["#92FFC0", "#002661"],
+    ["#EEAD92", "#6018DC"],
+    ["#F6CEEC", "#D939CD"],
+    ["#52E5E7", "#130CB7"],
+    ["#F1CA74", "#A64DB6"],
+    ["#E8D07A", "#5312D6"],
+    ["#EECE13", "#B210FF"],
+    ["#79F1A4", "#0E5CAD"],
+    ["#FDD819", "#E80505"],
+    ["#FFF3B0", "#CA26FF"],
+    ["#FFF5C3", "#9452A5"],
+    ["#F05F57", "#360940"],
+    ["#2AFADF", "#4C83FF"],
+    ["#FFF886", "#F072B6"],
+    ["#97ABFF", "#123597"],
+    ["#F5CBFF", "#C346C2"],
+    ["#FFF720", "#3CD500"],
+    ["#FF6FD8", "#3813C2"],
+    ["#EE9AE5", "#5961F9"],
+    ["#FFD3A5", "#FD6585"],
+    ["#C2FFD8", "#465EFB"],
+    ["#FD6585", "#0D25B9"],
+    ["#FD6E6A", "#FFC600"],
+    ["#65FDF0", "#1D6FA3"],
+    ["#6B73FF", "#000DFF"],
+    ["#FF7AF5", "#513162"],
+    ["#F0FF00", "#58CFFB"],
+    ["#FFE985", "#FA742B"],
+    ["#FFA6B7", "#1E2AD2"],
+    ["#FFAA85", "#B3315F"],
+    ["#72EDF2", "#5151E5"],
+    ["#FF9D6C", "#BB4E75"],
+    ["#F6D242", "#FF52E5"],
+    ["#69FF97", "#00E4FF"],
+    ["#3B2667", "#BC78EC"],
+    ["#70F570", "#49C628"],
+    ["#3C8CE7", "#00EAFF"],
+    ["#FAB2FF", "#1904E5"],
+    ["#81FFEF", "#F067B4"],
+    ["#FFA8A8", "#FCFF00"],
+    ["#FFCF71", "#2376DD"],
+    ["#FF96F9", "#C32BAC"]
+  ];
+  for (var i = 0; i < data.length; i++) {
+    var createBrick = document.createElement("div");
+    let firstColor = data[i][0];
+    let secondColor = data[i][1];
+    createBrick.dataset.firstColor = firstColor;
+    createBrick.dataset.secondColor = secondColor;
+    createBrick.classList.add("brick");
+    createBrick.style.backgroundImage = "linear-gradient(135deg, " + firstColor + " 10%, " + secondColor + " 100%)";
+    getPaint.appendChild(createBrick);
+  }
+
+
+
+  if (typeof (Storage) != undefined) {
+    var getTheme = localStorage.getItem("theme");
+    if (getTheme != undefined && getTheme === "dark") {
+      getBody.classList.add("dark");
+    }
+    clTheme.addEventListener("click", () => {
+      if (getBody.classList.contains("dark")) {
+        getBody.classList.remove("dark");
+        localStorage.setItem("theme", "bright");
+      } else {
+        getBody.classList.add("dark");
+        localStorage.setItem("theme", "dark");
+      }
+    })
+  }
+
+  window.addEventListener("click", (ev) => {
+    if (ev.target.matches(".brick")) {
+      var tempObj = new Object();
+      tempObj["firstColor"] = ev.target.dataset.firstColor;
+      tempObj["secondColor"] = ev.target.dataset.secondColor;
+      window.postMessage('nativeGradientApplier', tempObj);
+    }
+  });
+
+  clShuffle.addEventListener("click", () => {
+    var tempObj = new Object();
+      tempObj["firstColor"] = gradientRand();
+      tempObj["secondColor"] = gradientRand();
+      window.postMessage('nativeGradientApplier', tempObj);
+  });
+  //Handler
+}
+
+//Trigger Intialization
+window.addEventListener("load", initHandler);

distro/CoolHue.sketchplugin/Contents/Resources/core/assets/script.min.js

@@ -105,7 +105,17 @@ body {
     display: inline-block;
     vertical-align: middle;
     background-image: url("../images/sprite.png");
-    background-position: left center;
+    background-position: 0px 0px;
+}
+
+.grd-rt .cl-shuffle {
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+    vertical-align: middle;
+    background-image: url("../images/sprite.png");
+    background-position: -36px 0px;
+    margin-right: 7px;
 }
 
 body.dark {
@@ -121,5 +131,9 @@ body.dark .grd-lt h2.cl-title {
 }
 
 body.dark .grd-rt .cl-theme {
-    background-position: right center;
+    background-position: -18px 0px;
+}
+
+body.dark .grd-rt .cl-shuffle {
+    background-position: -54px 0px;
 }

distro/CoolHue.sketchplugin/Contents/Resources/core/assets/style.css

@@ -16,7 +16,7 @@
     ]
   },
   "appcast": "https://raw.githubusercontent.com/webkul/coolhue/master/appcast.xml",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Coolest handpicked Gradient Hues and Swatches",
   "name": "CoolHue",
   "identifier": "CoolHue",