Add an ability to share created gradients in the tool via link

dist/css/style.css

@@ -128,6 +128,20 @@ body {
   fill: rgba(255, 255, 255, 0.85);
 }
 
+#share_link {
+  width: 23px;
+  height: 23px;
+  padding: 3px;
+  position: absolute;
+  top: 5px;
+  right: 65px;
+  opacity: .4;
+}
+
+#share_link:hover{
+  opacity: 1;
+}
+
 input:focus, input:active {
   outline: none;
 }

dist/js/main.js

@@ -3398,16 +3398,25 @@ var jscolor = {
 
 jscolor.install();
 
-
-
-
-
-
 ;(function(window) {
 
     'use strict';
 
 
+    if ('replaceState' in history) { // Yay, supported!
+        window.replaceHash = function(newhash) {
+            if ((''+newhash).charAt(0) !== '#') newhash = '#' + newhash;
+            history.replaceState('', '', newhash);
+        }
+    } else {
+        var hash = location.hash;
+        window.replaceHash = function(newhash) {
+            if (location.hash !== hash) history.back();
+            location.hash = newhash;
+        };
+
+    }
+
     // General functions
 
     function extend( a, b ) {
@@ -3512,6 +3521,7 @@ jscolor.install();
         bgColor = document.getElementById('bg-color'),
         pointsOp = document.getElementById('points-op'),
         exportCode = document.getElementById('export_code'),
+        shareLink = document.getElementById('share_link'),
         generatedCode = document.getElementById('generated_code'),
         popupCode = document.getElementById('popup-code'),
         popupQ = document.getElementById('popup-q'),
@@ -3673,6 +3683,8 @@ jscolor.install();
         obj.bg = bgColor.value;
         // console.log(obj)
         localStorage.setItem('value', JSON.stringify(obj));
+        shareLink.setAttribute('href', '#code=' + btoa(JSON.stringify(obj)));
+        replaceHash('#code=' + btoa(JSON.stringify(obj)))
     }
 
 

gulpfile.js

@@ -22,7 +22,7 @@ gulp.task('styles', function(){
 
 
 gulp.task('scripts', function(){
-	return gulp.src('src/scripts/**/*.js')
+	return gulp.src(['src/scripts/ZeroClipboard.js', 'src/scripts/**/*.js'])
 		.pipe(jshint())
 		.pipe(jshint.reporter('default'))
 		.pipe(concat('main.js'))

index.html

@@ -17,6 +17,9 @@
 	 <!--  <span draggable="true" class="dragme" id="d1" data-colour="#ffffff" data-deep="50%"></span> -->
 
 		<!-- Nodes -->
+		<a href="#code=x" onclick="return false" id="share_link">
+			<img src="//s.svgbox.net/hero-outline.svg?fill=ffffff&ic=share">
+		</a>
 		<a href="#" onclick="return false" id="export_code">
 			<svg viewBox="0 0 32 32">
 		  <path d="M17.063 0l-.031.156-5 22-.188.844h3.094l.031-.156 5-22 .188-.844h-3.094zm-7.063 3l-.406.313-9 7-.594.469v1.438l.594.469 9 7 .406.313v-3.781l-6.063-4.719 6.063-4.719v-3.781zm12 0v3.781l6.063 4.719-6.063 4.719v3.781l.406-.313 9-7 .594-.469v-1.438l-.594-.469-9-7-.406-.313z"
@@ -237,6 +240,17 @@
 		}
 
 
+		if(/#code=(.+)/.test(location.hash)) {
+			let code = /#code=(.+)/.exec(location.hash)[1];
+			try {
+				JSON.parse(atob(code));
+				window.localStorage.setItem('value', atob(code));
+			} catch (e) {
+				console.error(e)
+				console.warn("We couldn't parse the code parameter, so we won't replace the localStorage value");
+			}
+		}
+
 		/*
 		 * 
 		 * localStorage Stuff

src/scripts/main.js

@@ -1,13 +1,22 @@
-
-
-
-
-
 ;(function(window) {
 
     'use strict';
 
 
+    if ('replaceState' in history) { // Yay, supported!
+        window.replaceHash = function(newhash) {
+            if ((''+newhash).charAt(0) !== '#') newhash = '#' + newhash;
+            history.replaceState('', '', newhash);
+        }
+    } else {
+        var hash = location.hash;
+        window.replaceHash = function(newhash) {
+            if (location.hash !== hash) history.back();
+            location.hash = newhash;
+        };
+
+    }
+
     // General functions
 
     function extend( a, b ) {
@@ -112,6 +121,7 @@
         bgColor = document.getElementById('bg-color'),
         pointsOp = document.getElementById('points-op'),
         exportCode = document.getElementById('export_code'),
+        shareLink = document.getElementById('share_link'),
         generatedCode = document.getElementById('generated_code'),
         popupCode = document.getElementById('popup-code'),
         popupQ = document.getElementById('popup-q'),
@@ -273,6 +283,8 @@
         obj.bg = bgColor.value;
         // console.log(obj)
         localStorage.setItem('value', JSON.stringify(obj));
+        shareLink.setAttribute('href', '#code=' + btoa(JSON.stringify(obj)));
+        replaceHash('#code=' + btoa(JSON.stringify(obj)))
     }
 
 

src/scss/style.scss

@@ -118,6 +118,20 @@ body {
   &:hover { path { fill:rgba(white,0.85); } }
 }
 
+#share_link {
+  width: 23px;
+  height: 23px;
+  padding: 3px;
+  position: absolute;
+  top: 5px;
+  right: 65px;
+  opacity: .4;
+
+  &:hover{
+    opacity: 1;
+  }
+}
+
 input:focus, input:active { outline:none;}
 
 .add {