adding gradient color scheme

kaldari · kaldari · commit 6f8dd2445ceb · 2018-05-19T14:45:07.000+02:00
diff --git a/index.html b/index.html
@@ -25,15 +25,15 @@
 		Choose a color and click on states you want to apply the color to.
 	</p>
 	<p style="text-align: center;">
-		<input class="jscolor" onclick="color = this.jscolor" value="8dd3c7"/><br/>
-		<input class="jscolor" onclick="color = this.jscolor" value="b3de69"/><br/>
-		<input class="jscolor" onclick="color = this.jscolor" value="bebada"/><br/>
-		<input class="jscolor" onclick="color = this.jscolor" value="fb8072"/><br/>
-		<input class="jscolor" onclick="color = this.jscolor" value="80b1d3"/><br/>
-		<input class="jscolor" onclick="color = this.jscolor" value="fccde5"/><br/>
-		<input class="jscolor" onclick="color = this.jscolor" value="fdb462"/><br/>
-		<input class="jscolor" onclick="color = this.jscolor" value="d3d3d3"/><br/>
-		<!--<a href="#" style="display: inline-block; margin: 4px 0 0 0;">Change color scheme</a>-->
+		<input id="color1" class="jscolor" onclick="color = this.jscolor" value="8dd3c7"/><br/>
+		<input id="color2" class="jscolor" onclick="color = this.jscolor" value="b3de69"/><br/>
+		<input id="color3" class="jscolor" onclick="color = this.jscolor" value="bebada"/><br/>
+		<input id="color4" class="jscolor" onclick="color = this.jscolor" value="fb8072"/><br/>
+		<input id="color5" class="jscolor" onclick="color = this.jscolor" value="80b1d3"/><br/>
+		<input id="color6" class="jscolor" onclick="color = this.jscolor" value="fccde5"/><br/>
+		<input id="color7" class="jscolor" onclick="color = this.jscolor" value="fdb462"/><br/>
+		<input id="color8" class="jscolor" onclick="color = this.jscolor" value="d3d3d3"/><br/>
+		<a href="#" id="switcher" onclick="toggleColors();">Switch to gradient</a>
 	</p>
 	<p>
 		When you're done, click the button below.
diff --git a/js/mapcontroller.js b/js/mapcontroller.js
@@ -20,6 +20,38 @@ function toggleTerritories() {
 	}
 }
 
+function toggleColors() {
+	if ( $( '#switcher' ).text() === 'Switch to gradient' ) {
+		$( '#color1' ).val( '15534C' );
+		$( '#color2' ).val( '297159' );
+		$( '#color3' ).val( '498F60' );
+		$( '#color4' ).val( '73AC61' );
+		$( '#color5' ).val( 'A6C760' );
+		$( '#color6' ).val( 'E2E062' );
+		$( '#color7' ).val( 'FCE77C' );
+		$( '#color8' ).val( 'D3D3D3' );
+		$( '.jscolor' ).each( function() {
+			$( this ).focus();
+			$( this ).blur();
+		} );
+		$( '#switcher' ).text( 'Switch to assortment' );
+	} else {
+		$( '#color1' ).val( '8DD3C7' );
+		$( '#color2' ).val( 'B3DE69' );
+		$( '#color3' ).val( 'BEBADA' );
+		$( '#color4' ).val( 'FB8072' );
+		$( '#color5' ).val( '80B1D3' );
+		$( '#color6' ).val( 'FCCDE5' );
+		$( '#color7' ).val( 'FDB462' );
+		$( '#color8' ).val( 'D3D3D3' );
+		$( '.jscolor' ).each( function() {
+			$( this ).focus();
+			$( this ).blur();
+		} );
+		$( '#switcher' ).text( 'Switch to gradient' );
+	}
+}
+
 function paintTerritory( territory ) {
 	if ( $( 'input#territories' ).prop( 'checked' ) ) {
 		$( '#' + territory ).attr( "fill", "#" + color );
