kolor-picker 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0fdf3ce0ebc05edde1ac15f1bd685b3b257864a9
-  data.tar.gz: 6b32c86177a0cc5f5b7133b18bcd606d76569f25
+  metadata.gz: 50366cb39a4be06221ffb5a217133de42f2d5757
+  data.tar.gz: 18dca4892c7228e906e24aac6e181c74d635cf2c
 SHA512:
-  metadata.gz: 4858a3c0af510fdfa12ff961a68f1b6e4dbe28b22231bfc85bd19f3cbdadd4ef08097d46110734707fcb6556f4ae268771c0cc87bb3d092eb18f756373391047
-  data.tar.gz: d9051e611702a095c61b6cccbbb6cfb64941345740514a8e2154d3df82495ef9bbc5f65ffb1a7408dd646513803a6b1911fbd408b84e37e21379bd3d364deb62
+  metadata.gz: 61973aebade480a7816d1ad412a8450c20ab18cc7e15b74adc0cc24a3699c4edc6a606cca76c7c6c08e6c18636567edb90f1c12efae4e311d0cb898c7c455161
+  data.tar.gz: 4b165123c512f9963ffacbcca4800a82b329eacbe8882c9bce18adff74abf28e328b889833157d6cfa040bec5c7f05d7ac6a61e65665bbd31ddeb52dcd76502d

data/CHANGELOG.md

@@ -1,3 +1,9 @@
+# v0.1.1 / 2016-05-10
+
+* Upgraded kolor-picker to v0.2.1
+* Fixed missing value.
+* Restructured helper and widget.
+
 # v0.1.0 / 2016-04-19
 
 Create project

data/README.md

@@ -41,12 +41,14 @@ You can use `colorpicker_tag` and `colorpicker`.
 ```ERB
 <%= colorpicker_tag(name, default_color, kolor_picker_options, html_options) %>
 <%= colorpicker_tag(:color, 'red', {:doRender => false}, {:class => 'color'}) %>
+<%= colorpicker_tag(:color) %>
 
 or form builder
 
 <% form_for @item do |f| %>
-<%= f.colorpicker(method, default_color, kolor_picker_options, html_options) %>
-<%= f.colorpicker(:color, 'red', {:doRender => false}, {:class => 'color'}) %>
+<%= f.colorpicker(method, kolor_picker_options, html_options) %>
+<%= f.colorpicker(:color, {:doRender => false}, {:class => 'color'}) %>
+<%= f.colorpicker(:color) %>
 <% end %>
 ```
 

data/app/assets/javascripts/kolor-picker.js

@@ -6,16 +6,16 @@
   var colorPicker  = $();
 
   $(document).on('ready page:load', function () {
-    $('[data-kolor-picker]').each(function () {
+    $('[data-widget-kolor-picker]').each(function () {
       var element = $(this);
-      var options = element.data('kolor-picker') || {};
+      var options = element.data('widget-kolor-picker') || {};
       options.onSelect = function (color) {
         element.val(color);
       };
-      var colorWrapper = $('<div class="kolor-picker-color-wrapper" />');
-      var color = $('<div class="kolor-picker-color"/>').css('background-color', element.val() || 'white').appendTo(colorWrapper);
-      colorWrapper.insertAfter(element);
-      color.kolorPicker(options);
+      element.addClass('kolor-picker-input')
+        .attr('autocomplete', 'off')
+        .kolorPicker(options)
+        .wrap('<span class="kolor-picker-wrapper" />');
     });
   });
 

data/app/assets/javascripts/kolor-picker/kolor-picker.js

@@ -1,7 +1,7 @@
 /**
  * [kolor-picker]{@link https://github.com/emn178/kolor-picker}
  *
- * @version 0.2.0
+ * @version 0.2.1
  * @author Yi-Cyuan Chen [emn178@gmail.com]
  * @copyright Yi-Cyuan Chen 2015-2016
  * @license MIT
@@ -86,6 +86,7 @@
     this.options = options || {};
     this.canvas = this.options.canvas;
     this.theme = this.options.theme || $.kolorPicker.theme;
+    this.color = this.element.css('background-color');
 
     if (this.canvas) {
       this.canvas = $(this.canvas);
@@ -116,20 +117,31 @@
   };
 
   KolorPicker.prototype.selectColor = function (color) {
+    this.color = color;
     if ($.isFunction(this.options.onSelect)) {
       this.options.onSelect.call(this.element, color);
     }
+    this.element.trigger('kolorPicker:select', color)
   };
 
   KolorPicker.prototype.changeColor = function (color) {
     if ($.isFunction(this.options.onChange)) {
       this.options.onChange.call(this.element, color);
     }
+    this.element.trigger('kolorPicker:change', color)
   };
 
-  KolorPicker.prototype.setColor = function (color) {
-    wrapper.colorPicker.color.setColor(color);
-    wrapper.colorPicker.render();
+  KolorPicker.prototype.setColor = function (color) {    
+    this.color = color;
+    this.element.css('background-color', color);
+    if (wrapper) {
+      wrapper.colorPicker.color.setColor(color);
+      wrapper.colorPicker.render();
+    }
+  };
+
+  KolorPicker.prototype.getColor = function () {
+    return this.color;
   };
 
   var KolorPickerOptions = {
@@ -143,17 +155,15 @@
     }
   };
 
-  var PublicMethods = ['setColor'];
+  var PublicMethods = ['setColor', 'getColor'];
   $.fn.kolorPicker = function (options) {
     if (typeof (options) == 'string') {
       if ($.inArray(options, PublicMethods) != -1) {
         var args = Array.prototype.splice.call(arguments, 1);
-        this.each(function () {
-          var kolorPicker = $(this).data(KEY);
-          if (kolorPicker) {
-            return kolorPicker[options].apply(kolorPicker, args);
-          }
-        });
+        var kolorPicker = $(this).data(KEY);
+        if (kolorPicker) {
+          return kolorPicker[options].apply(kolorPicker, args);
+        }
       }
     } else {
       this.each(function () {
@@ -172,4 +182,4 @@
   };
 })(jQuery);
 
-$.kolorPicker.css="[data-theme=light].cp-color-picker{background-color:#fff}[data-theme=light] .kolor-picker .sampler{border-color:#ebebeb;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAgNJREFUWAntlztOw0AURWPRQEPFAgxsBIkGUbABdoBYARsIEhUSDQ0dG0A07AAKGjoa5FAg0VIB4neulBdNRmM7CfHYkeZKV/O15/hl/Mbp9ZJSBFIEUgS6HIFV4Pr4Dt/jU7yGO6kcqif86/mFduegc6AK7MNaW5GOrowVlwOr5vQV2OBCpbZHVO2y2iv+wmd4CUs5LnAI0u3Tno6mPVb6xC7AJe1NXHj97hy33mdeFO2wig9rIO+MWb2q1Iuo7BFFA1apgqkbK7g+x1Gkl+wN10GVjRdcm+NK2ctQOWnKwe0p52u6fpktXODoOmfFsiiG+gvm57gVbbCqohUCC/XpRVT2aEWCfcYCU/69HtZDoG6fUl4TW5PblmudIYusYPeHU08oXbiyug6XaCqDNYBJoPWQoWPc7jG3sg7WFqrbHjrGM5vcVDkprLaHIli2HT4Y07dHo5oFdgCRn/IEq2+PRjUrrK6TjrBORD2Avj0a1X9hDS6zSpPlvGCbZBzdO8GOQjHnykJFdoWHf8TKn+5x68dEefZ7OG9AqYdsRcesKtgfbN8GPoh7KLQKK7AHLOALNQLqFKz47O/O4SLAivEWK8I3ajjqXGSN7YCKgA1akdb20J5WX+t7FoYxZbSusEG7pbJHa9lgjNJrCFqR1vbQntaLqOyhlJeUIpAikCLQwQj8Ad75Juue3l4FAAAAAElFTkSuQmCC)}[data-theme=light] .kolor-picker input{border-color:#ebebeb;color:#85888f}[data-theme=light] .kolor-picker .preview{border-color:#ebebeb}.cp-color-picker{background-color:#2f3239;border-radius:3px}.cp-xy-slider{width:240px;height:178px}.cp-xy-cursor{height:15px;width:15px;border:2px solid #fff}.cp-z-slider{height:178px}.cp-z-cursor{border:0;background-color:#fff;height:8px;border-radius:3px}.kolor-picker .sampler,.kolor-picker input{border:2px solid #555b60;vertical-align:middle}.kolor-picker{clear:both;height:35px;margin:10px 0;padding-top:5px}.kolor-picker .sampler{display:inline-block;width:26px;height:26px;border-radius:3px;cursor:pointer;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAhZJREFUWAntl7FOwlAUhkEXWZzcBXkZ4sAL8AaGF9AXwMSJxMWFzRcwLmyOOrC4uRh1MLoaBzVq/f6mxzQX2oKWtsZ7kp/b3nt7z9ef01uo1Xx4B7wD3gHvwL91IAiCdTRAF2iChmijkoYA1kTXyI17OqoFDZBgb1zS2PmwcJdJXkdrbmL6smDFPXGvs/MVO8izJeE26z2gZ44P0arWp23SnKFNlBbvaYO5jgHVRW8oHsectFFaGcTnD3KFSlqMjB3kwhrIix1ktHoQ15Ny5NpPotsMmKxhfQPNXKGSFiORHrKnLKKU8eJg7SaA2U0BShsqHjYGfZRGNmOsVNgtgBapYz2IbbvZQlsSC/YOKd7RaXiU/aEtL9ynCwMmYQuZs4LtKTntAZonDkuHNQBo54HWTU69xm2N3FqSzHTWTcC8rPJ4ZE7dvS7X8wVge8yVg0nxyoB+eywvSDCvs3FY1bi75Qm2uzxSVv4FbEtgXL+H9EbUDXQqDWtwgC63XiNnfloGobMGW0iLIx52KU7/NWcbAF8hxffr1nWGMW1dH5pE6MkvvmYFReJ9ERCfKPxtkABrL4XyYCPgyxA3CEYuaDTuvhTKcdbggLW/O33rs1aOo2o4G4M6jxweW5/aSsJGYDsRsJox6qMRUk0ryq3ZuIsRcB2okxBt+kO7R7k16wLHoOW0ykM1rQdRu0dj1nzf5x3wDmQ78AUqu6QCF8YEagAAAABJRU5ErkJggg==);background-size:22px;background-repeat:no-repeat;background-position:center;opacity:.5}.kolor-picker .sampler:hover{opacity:1}.kolor-picker .preview-block{display:inline-block;vertical-align:middle;float:right}.kolor-picker input{height:26px;width:150px;background-color:transparent;padding:0;margin:0 10px 0 0;border-radius:3px;text-align:center;color:#fff;font-size:14px;font-family:SourceSansPro-Regular}.kolor-picker .preview-wrapper{display:inline-block;width:31px;height:26px;border:2px solid #555b60;border-radius:3px;vertical-align:middle;background-image:url(data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7)}.kolor-picker .preview{height:100%}";
+$.kolorPicker.css="[data-theme=light].cp-color-picker{background-color:#fff}[data-theme=light] .kolor-picker .sampler{border-color:#ebebeb;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAgNJREFUWAntlztOw0AURWPRQEPFAgxsBIkGUbABdoBYARsIEhUSDQ0dG0A07AAKGjoa5FAg0VIB4neulBdNRmM7CfHYkeZKV/O15/hl/Mbp9ZJSBFIEUgS6HIFV4Pr4Dt/jU7yGO6kcqif86/mFduegc6AK7MNaW5GOrowVlwOr5vQV2OBCpbZHVO2y2iv+wmd4CUs5LnAI0u3Tno6mPVb6xC7AJe1NXHj97hy33mdeFO2wig9rIO+MWb2q1Iuo7BFFA1apgqkbK7g+x1Gkl+wN10GVjRdcm+NK2ctQOWnKwe0p52u6fpktXODoOmfFsiiG+gvm57gVbbCqohUCC/XpRVT2aEWCfcYCU/69HtZDoG6fUl4TW5PblmudIYusYPeHU08oXbiyug6XaCqDNYBJoPWQoWPc7jG3sg7WFqrbHjrGM5vcVDkprLaHIli2HT4Y07dHo5oFdgCRn/IEq2+PRjUrrK6TjrBORD2Avj0a1X9hDS6zSpPlvGCbZBzdO8GOQjHnykJFdoWHf8TKn+5x68dEefZ7OG9AqYdsRcesKtgfbN8GPoh7KLQKK7AHLOALNQLqFKz47O/O4SLAivEWK8I3ajjqXGSN7YCKgA1akdb20J5WX+t7FoYxZbSusEG7pbJHa9lgjNJrCFqR1vbQntaLqOyhlJeUIpAikCLQwQj8Ad75Juue3l4FAAAAAElFTkSuQmCC)}[data-theme=light] .kolor-picker input{border-color:#ebebeb;color:#85888f}[data-theme=light] .kolor-picker .preview{border-color:#ebebeb}.cp-color-picker{background-color:#2f3239;border-radius:3px}.cp-xy-slider{width:240px;height:178px}.cp-xy-cursor{height:15px;width:15px;border:2px solid #fff}.cp-z-slider{height:178px}.cp-z-cursor{border:0;background-color:#fff;height:8px;border-radius:3px}.kolor-picker .sampler,.kolor-picker input{border:2px solid #555b60;vertical-align:middle}.kolor-picker{clear:both;height:35px;margin:10px 0;padding-top:5px}.kolor-picker .sampler{display:inline-block;width:26px;height:26px;border-radius:3px;cursor:pointer;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAhZJREFUWAntl7FOwlAUhkEXWZzcBXkZ4sAL8AaGF9AXwMSJxMWFzRcwLmyOOrC4uRh1MLoaBzVq/f6mxzQX2oKWtsZ7kp/b3nt7z9ef01uo1Xx4B7wD3gHvwL91IAiCdTRAF2iChmijkoYA1kTXyI17OqoFDZBgb1zS2PmwcJdJXkdrbmL6smDFPXGvs/MVO8izJeE26z2gZ44P0arWp23SnKFNlBbvaYO5jgHVRW8oHsectFFaGcTnD3KFSlqMjB3kwhrIix1ktHoQ15Ny5NpPotsMmKxhfQPNXKGSFiORHrKnLKKU8eJg7SaA2U0BShsqHjYGfZRGNmOsVNgtgBapYz2IbbvZQlsSC/YOKd7RaXiU/aEtL9ynCwMmYQuZs4LtKTntAZonDkuHNQBo54HWTU69xm2N3FqSzHTWTcC8rPJ4ZE7dvS7X8wVge8yVg0nxyoB+eywvSDCvs3FY1bi75Qm2uzxSVv4FbEtgXL+H9EbUDXQqDWtwgC63XiNnfloGobMGW0iLIx52KU7/NWcbAF8hxffr1nWGMW1dH5pE6MkvvmYFReJ9ERCfKPxtkABrL4XyYCPgyxA3CEYuaDTuvhTKcdbggLW/O33rs1aOo2o4G4M6jxweW5/aSsJGYDsRsJox6qMRUk0ryq3ZuIsRcB2okxBt+kO7R7k16wLHoOW0ykM1rQdRu0dj1nzf5x3wDmQ78AUqu6QCF8YEagAAAABJRU5ErkJggg==);background-size:22px;background-repeat:no-repeat;background-position:center;opacity:.5}.kolor-picker .sampler:hover{opacity:1}.kolor-picker .preview-block{display:inline-block;vertical-align:middle;float:right}.kolor-picker input{height:26px;width:150px;background-color:transparent;padding:0;margin:0 10px 0 0;border-radius:3px;text-align:center;color:#fff;font-size:14px;font-family:SourceSansPro-Regular}.kolor-picker .preview-wrapper{display:inline-block;width:31px;height:26px;border:2px solid #555b60;border-radius:3px;vertical-align:middle;background-image:url(data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7)}.kolor-picker .preview{height:100%}";

data/app/assets/stylesheets/kolor-picker.css

@@ -1,16 +1,20 @@
 /*
  *= require kolor-picker/color-sampler
  */
-.kolor-picker-color-wrapper {
-  display: inline-block;
+.kolor-picker-input {
   width: 35px;
   height: 30px;
   border: 1px solid black;
-  vertical-align: middle;
-  text-indent: 100%;
-  background-image: url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');
+  text-indent: -999px;
+  cursor: default;
 }
 
-.kolor-picker-color {
-  height: 100%;
+.kolor-picker-input:focus {
+  outline-offset: 0;
+  outline: 0;
+}
+
+.kolor-picker-wrapper {
+  display: inline-flex;
+  background-image: url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');    
 }

data/lib/kolor-picker/builder.rb

@@ -4,7 +4,7 @@ module ActionView
   module Helpers
     class FormBuilder
       def colorpicker(method, options = {}, html_options = {})
-        @template.colorpicker(@object_name, method, options, html_options)
+        text_field(method, @template.colorpicker_options(options, html_options))
       end
     end
   end

data/lib/kolor-picker/helper.rb

@@ -3,17 +3,13 @@ module KolorPicker
     def colorpicker_options(options, html_options)
       html_options.deep_merge({
         :data => {
-          :"kolor-picker" => options.to_json
+          :"widget-kolor-picker" => options.to_json
         }
       })
     end
 
     def colorpicker_tag(name, value = nil, options = {}, html_options = {})
-      hidden_field_tag(name, value, colorpicker_options(options, html_options))
-    end
-
-    def colorpicker(object_name, method, options = {}, html_options = {})
-      ActionView::Helpers::Tags::HiddenField.new(object_name, method, self, colorpicker_options(options, html_options)).render
+      text_field_tag(name, value, colorpicker_options(options, html_options))
     end
   end
 end

data/lib/kolor-picker/version.rb

@@ -1,3 +1,3 @@
 module KolorPicker
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: kolor-picker
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Chen, Yi-Cyuan
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-04-19 00:00:00.000000000 Z
+date: 2016-05-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -141,7 +141,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.8
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: Integrate with kolor-picker to provide color picker and form helper.