Fix spreader title transform, new colorPalettes

Author: softwaretailoring

css/index.css

@@ -16,6 +16,7 @@ header a {
     background-color: #ddd;
     color: #555;
     text-decoration: none;
+    padding: 0 3px 0 3px;
 }
 
 header a:hover {
@@ -37,6 +38,7 @@ footer a {
     background-color: #ddd;
     color: #555;
     text-decoration: none;
+    padding: 0 3px 0 3px;
 }
 
 footer a:hover {

js/dist/core/wheelnav.js

@@ -357,7 +357,7 @@ wheelnav.prototype.navigateWheel = function (clicked) {
         else {
             this.marker.setCurrentTransform();
         }
-        this.spreader.setCurrentTransform();
+        this.spreader.setCurrentTransform(true);
     }
 };
 
@@ -530,8 +530,8 @@ wheelnav.prototype.parseWheel = function (holderDiv) {
                     this.markerPathFunction = markerPath()[wheelnavMarkerPath];
                 }
             }
-            //data-wheelnav-onlyinit
-            var wheelnavOnlyinit = holderDiv.getAttribute("data-wheelnav-onlyinit");
+            //data-wheelnav-init
+            var wheelnavOnlyinit = holderDiv.getAttribute("data-wheelnav-init");
             if (wheelnavOnlyinit !== null) {
                 onlyInit = true;
             }
@@ -671,15 +671,16 @@ wheelnavItem = function (wheelnav, title, itemIndex) {
     this.animateeffect = "bounce";
     this.animatetime = 1500;
     this.sliceAngle = 360 / wheelnav.navItemCount;
-    
+
+    this.navigateHref = null;
+    this.navigateFunction = null;
+
+    //Navitem styles
     this.styleNavItem();
 
     //Wheelnav settings
     this.setWheelSettings();
 
-    this.navigateHref = null;
-    this.navigateFunction = null;
-
     return this;
 };
 
@@ -889,7 +890,7 @@ wheelnavItem.prototype.hoverEffect = function (hovered, isEnter) {
         }
 
         this.wheelnav.marker.setCurrentTransform();
-        this.wheelnav.spreader.setCurrentTransform();
+        this.wheelnav.spreader.setCurrentTransform(true);
     }
 };
 
@@ -2009,16 +2010,28 @@ spreader = function (wheelnav) {
         if (wheelnavTitle().isPathTitle(this.wheelnav.spreaderOutTitle)) {
             outTitle = new wheelnavTitle(this.wheelnav.spreaderOutTitle, this.wheelnav.raphael.raphael);
             this.outTitle = outTitle.getTitlePercentAttr(this.spreaderPathOut.titlePosX, this.spreaderPathOut.titlePosY);
-            this.spreaderTitle = thisWheelNav.raphael.path(this.outTitle.path);
         }
         else {
             outTitle = new wheelnavTitle(this.wheelnav.spreaderOutTitle);
             this.outTitle = outTitle.getTitlePercentAttr(this.spreaderPathOut.titlePosX, this.spreaderPathOut.titlePosY);
-            this.spreaderTitle = thisWheelNav.raphael.text(currentPath.titlePosX, currentPath.titlePosY, this.outTitle.title);
         }
 
+        var currentTitle = this.outTitle;
+        var currentTitleAttr = this.wheelnav.spreaderTitleOutAttr;
+        if (thisWheelNav.initPercent < thisWheelNav.maxPercent) {
+            currentTitle = this.inTitle;
+            currentTitleAttr = this.wheelnav.spreaderTitleInAttr;
+        }
+
+        if (wheelnavTitle().isPathTitle(this.wheelnav.spreaderOutTitle)) {
+            this.spreaderTitle = thisWheelNav.raphael.path(currentTitle.path);
+        }
+        else {
+            this.spreaderTitle = thisWheelNav.raphael.text(currentPath.titlePosX, currentPath.titlePosY, currentTitle.title);
+        }
+        
         this.spreaderTitle.attr(this.fontAttr);
-        this.spreaderTitle.attr(thisWheelNav.spreaderOnAttr);
+        this.spreaderTitle.attr(currentTitleAttr);
         this.spreaderTitle.id = thisWheelNav.getSpreaderTitleId();
         this.spreaderTitle.node.id = this.spreaderTitle.id;
         this.spreaderTitle.click(function () {
@@ -2031,60 +2044,62 @@ spreader = function (wheelnav) {
     return this;
 };
 
-spreader.prototype.setCurrentTransform = function () {
+spreader.prototype.setCurrentTransform = function (withoutAnimate) {
     if (this.wheelnav.spreaderEnable) {
-        this.spreaderPath.toFront();
-        
 
-        if (this.wheelnav.currentPercent > this.wheelnav.minPercent) {
-            currentPath = this.spreaderPathOut.spreaderPathString;
-        }
-        else {
-            currentPath = this.spreaderPathIn.spreaderPathString;
-        }
+        if (withoutAnimate === undefined ||
+            withoutAnimate === false) {
+            
+            if (this.wheelnav.currentPercent > this.wheelnav.minPercent) {
+                currentPath = this.spreaderPathOut.spreaderPathString;
+            }
+            else {
+                currentPath = this.spreaderPathIn.spreaderPathString;
+            }
 
-        spreaderTransformAttr = {
-            path: currentPath
-        };
+            spreaderTransformAttr = {
+                path: currentPath
+            };
 
-        //Animate spreader
-        this.spreaderPath.animate(spreaderTransformAttr, this.animatetime, this.animateeffect);
+            //Animate spreader
+            this.spreaderPath.animate(spreaderTransformAttr, this.animatetime, this.animateeffect);
 
-        //titles
-        var currentTitle;
+            //titles
+            var currentTitle;
+            var titleTransformAttr;
 
-        if (this.wheelnav.currentPercent === this.wheelnav.maxPercent) {
-            currentTitle = this.outTitle;
-            this.spreaderTitle.attr(this.wheelnav.spreaderTitleOutAttr);
-            this.spreaderPath.attr(this.wheelnav.spreaderPathOutAttr);
-        }
-        else {
-            currentTitle = this.inTitle;
-            this.spreaderTitle.attr(this.wheelnav.spreaderTitleInAttr);
-            this.spreaderPath.attr(this.wheelnav.spreaderPathInAttr);
-        }
+            if (this.wheelnav.currentPercent === this.wheelnav.maxPercent) {
+                currentTitle = this.outTitle;
+                titleTransformAttr = this.wheelnav.spreaderTitleOutAttr;
+                this.spreaderPath.attr(this.wheelnav.spreaderPathOutAttr);
+            }
+            else {
+                currentTitle = this.inTitle;
+                titleTransformAttr = this.wheelnav.spreaderTitleInAttr;
+                this.spreaderPath.attr(this.wheelnav.spreaderPathInAttr);
+            }
 
-        if (this.spreaderTitle.type === "path") {
-            titleTransformAttr = {
-                path: currentTitle.path
-            };
-        }
-        else {
-            //Little hack for proper appearance of "-" sign
-            offYOffset = 0;
-            if (currentTitle.title === "-") { offYOffset = 3; }
+            if (this.spreaderTitle.type === "path") {
+                titleTransformAttr.path = currentTitle.path;
+            }
+            else {
+                //Little hack for proper appearance of "-" sign
+                offYOffset = 0;
+                if (currentTitle.title === "-") { offYOffset = 3; };
 
-            titleTransformAttr = {
-                x: currentTitle.x,
-                y: currentTitle.y - offYOffset
-            };
+                titleTransformAttr.x = currentTitle.x;
+                titleTransformAttr.y = currentTitle.y - offYOffset;
 
-            if (currentTitle.title !== null) {
-                this.spreaderTitle.attr({ text: currentTitle.title });
+                if (currentTitle.title !== null) {
+                    this.spreaderTitle.attr({ text: currentTitle.title });
+                }
             }
+
+            //Animate title
+            this.spreaderTitle.animate(titleTransformAttr, this.animatetime, this.animateeffect);
         }
 
-        this.spreaderTitle.animate(titleTransformAttr, this.animatetime, this.animateeffect);
+        this.spreaderPath.toFront();
         this.spreaderTitle.toFront();
     }
 };
@@ -2702,6 +2717,7 @@ var colorpalette = {
     defaultpalette: new Array("#2ECC40", "#FFDC00", "#FF851B", "#FF4136", "#0074D9", "#777"),
     purple: new Array("#4F346B", "#623491", "#9657D6", "#AD74E7", "#CBA3F3"),
     greenred: new Array("#17B92A", "#FF3D00", "#17B92A", "#FF3D00"),
+    greensilver: new Array("#1F700A", "#79CC3C", "#D4E178", "#E6D5C3", "#AC875D"),
     oceanfive: new Array("#00A0B0", "#6A4A3C", "#CC333F", "#EB6841", "#EDC951"),
     garden: new Array("#648A4F", "#2B2B29", "#DF6126", "#FFA337", "#F57C85"),
     gamebookers: new Array("#FF9900", "#DCDCDC", "#BCBCBC", "#3299BB", "#727272"),
@@ -2711,5 +2727,8 @@ var colorpalette = {
     theworldismine: new Array("#F21D1D", "#FF2167", "#B521FF", "#7E2AA8", "#000000"),
     fractalloveone: new Array("#002EFF", "#00FFF7", "#00FF62", "#FFAA00", "#FFF700"),
     fractallovetwo: new Array("#FF9500", "#FF0000", "#FF00F3", "#AA00FF", "#002EFF"),
-    fractallove: new Array("#002EFF", "#00FFF7", "#00FF62", "#FFAA00", "#FFF700", "#FF0000", "#FF00F3", "#AA00FF")
+    fractallove: new Array("#002EFF", "#00FFF7", "#00FF62", "#FFAA00", "#F5D908", "#FF0000", "#FF00F3", "#AA00FF"),
+    sprinkles: new Array("#272523", "#FFACAC", "#FFD700", "#00590C", "#08006D"),
+    goldenyellow: new Array("#D8B597", "#8C4006", "#B6690F", "#E3C57F", "#FFEDBE"),
+    hotaru: new Array("#364C4A", "#497C7F", "#92C5C0", "#858168", "#CCBCA5")
 };