Support selected colorstep view

addon/colorpicker.js

@@ -8062,14 +8062,18 @@ var EmbedColorPicker = function (_UIElement) {
     value: function afterRender() {
       var _this2 = this;
 
-      this.colorPicker = ColorPickerUI.create({
-        type: "sketch",
+      var parent = this.opt;
+
+      var options = parent.opt.colorpickerOptions || {
+        type: "sketch"
+      };
+      this.colorPicker = ColorPickerUI.create(_extends({
         position: "inline",
         container: this.refs.$el.el,
         onChange: function onChange(c) {
           _this2.changeColor(c);
         }
-      });
+      }, options));
     }
   }, {
     key: "template",
@@ -9742,6 +9746,7 @@ var GradientEditor = function (_UIElement) {
     value: function selectStep(index) {
       this.index = index;
       this.currentStep = this.colorsteps[index];
+      this.refs.$stepList.attr('data-selected-index', index);
       this.$currentStep = this.refs.$stepList.$("[data-index=\"" + index.toString() + "\"]");
       if (this.$currentStep) {
         this.$colorView = this.$currentStep.$('.color-view');

dist/colorpicker.js

@@ -8142,14 +8142,18 @@ var EmbedColorPicker = function (_UIElement) {
     value: function afterRender() {
       var _this2 = this;
 
-      this.colorPicker = ColorPickerUI.create({
-        type: "sketch",
+      var parent = this.opt;
+
+      var options = parent.opt.colorpickerOptions || {
+        type: "sketch"
+      };
+      this.colorPicker = ColorPickerUI.create(_extends({
         position: "inline",
         container: this.refs.$el.el,
         onChange: function onChange(c) {
           _this2.changeColor(c);
         }
-      });
+      }, options));
     }
   }, {
     key: "template",
@@ -9822,6 +9826,7 @@ var GradientEditor = function (_UIElement) {
     value: function selectStep(index) {
       this.index = index;
       this.currentStep = this.colorsteps[index];
+      this.refs.$stepList.attr('data-selected-index', index);
       this.$currentStep = this.refs.$stepList.$("[data-index=\"" + index.toString() + "\"]");
       if (this.$currentStep) {
         this.$colorView = this.$currentStep.$('.color-view');

index.html

@@ -768,6 +768,9 @@ <h1 class="title">Default Html Sample </h1>
             position: 'inline',
             container: item,
             type: type,
+            colorpickerOptions: {
+                type: 'chromedevtool'
+            },
             gradient: 'linear-gradient(to right, red 0%, white 100%)',
             onChange : function (gradientString, gradientObject) {
                 console.log('change', gradientString, gradientObject);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easylogic/colorpicker",
-  "version": "1.9.60",
+  "version": "1.9.61",
   "description": "simple colorpicker used anywhere",
   "main": "./dist/colorpicker.js",
   "scripts": {

src/gradient/EmbedColorPicker.js

@@ -3,13 +3,18 @@ import ColorPickerUI from "../colorpicker/index";
 
 export default class EmbedColorPicker extends UIElement {
   afterRender() {
+    var parent = this.opt;
+
+    var options = parent.opt.colorpickerOptions || {
+      type: "sketch"
+    };
     this.colorPicker = ColorPickerUI.create({
-      type: "sketch",
       position: "inline",
       container: this.refs.$el.el,
       onChange: c => {
         this.changeColor(c);
-      }
+      },
+      ...options
     });
   }
 

src/gradient/GradientEditor.js

@@ -301,6 +301,7 @@ export default class GradientEditor extends UIElement  {
   selectStep(index) {
     this.index = index; 
     this.currentStep = this.colorsteps[index];
+    this.refs.$stepList.attr('data-selected-index', index);    
     this.$currentStep = this.refs.$stepList.$(`[data-index="${index.toString()}"]`)
     if (this.$currentStep) {
       this.$colorView = this.$currentStep.$('.color-view');

src/gradient/GradientPicker.js

@@ -88,7 +88,6 @@ export default class GradientPicker extends BaseColorPicker {
     this.$root.addClass('gradient-picker');
     this.selectedTab = "linear-gradient";
 
-
     this.setValue(this.opt.gradient || 'linear-gradient(to right, red 0%, yellow 100%)')
 
   }