kolor-picker 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 50366cb39a4be06221ffb5a217133de42f2d5757
-  data.tar.gz: 18dca4892c7228e906e24aac6e181c74d635cf2c
+  metadata.gz: 354187e29d33fd02a857473b8990a618df88b71c
+  data.tar.gz: 7314277c0a49b7e23565efeadd52c138344d8055
 SHA512:
-  metadata.gz: 61973aebade480a7816d1ad412a8450c20ab18cc7e15b74adc0cc24a3699c4edc6a606cca76c7c6c08e6c18636567edb90f1c12efae4e311d0cb898c7c455161
-  data.tar.gz: 4b165123c512f9963ffacbcca4800a82b329eacbe8882c9bce18adff74abf28e328b889833157d6cfa040bec5c7f05d7ac6a61e65665bbd31ddeb52dcd76502d
+  metadata.gz: 0e7dfea643e637a4de94ce6cdb1ef0c4e26c7e93a5cba4a5219ef7fe7f2f701b3dbdf44262a18cf85b890b86f0d692b061eaba28b5a7615d462cda2703887386
+  data.tar.gz: 8b831cdd099bff14f356aee518b76a6ba2bffcf3b3003fe4989619e89e296413ed9cd61e493fc21ef0ccd3ffb343ab8341b186b36264bc6f68722f163623170c

data/.gitignore

@@ -1,9 +1,9 @@
-/.bundle/
-/.yardoc
-/Gemfile.lock
-/_yardoc/
-/coverage/
-/doc/
-/pkg/
-/spec/reports/
-/tmp/
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.rspec

@@ -1 +1 @@
---color
+--color

data/.travis.yml

@@ -1,11 +1,10 @@
-language: ruby
-rvm:
-  - 2.3.0
-  - 2.2.4
-  - 2.1.9
-before_install: gem install bundler
-branches:
-  only:
-    - master
-env:
-  - COVERALLS=1
+language: ruby
+rvm:
+  - 2.3.0
+  - 2.2.4
+before_install: gem install bundler
+branches:
+  only:
+    - master
+env:
+  - COVERALLS=1

data/CHANGELOG.md

@@ -1,9 +1,17 @@
-# v0.1.1 / 2016-05-10
+# Change Log
 
-* Upgraded kolor-picker to v0.2.1
-* Fixed missing value.
-* Restructured helper and widget.
+## v0.1.2 / 2016-10-15
+### Changed
+- Upgraded color-sampler to v0.1.6
+- trigger change event.
 
-# v0.1.0 / 2016-04-19
+## v0.1.1 / 2016-05-10
+### Changed
+- Upgraded kolor-picker to v0.2.1
+- Restructured helper and widget.
+### Fixed
+- missing value.
 
-Create project
+## v0.1.0 / 2016-04-19
+### Added
+- Created project

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

@@ -1,33 +1,33 @@
-//= require kolor-picker/jqColorPicker.min
-//= require kolor-picker/color-sampler
-//= require kolor-picker/kolor-picker
-
-(function ($) {
-  var colorPicker  = $();
-
-  $(document).on('ready page:load', function () {
-    $('[data-widget-kolor-picker]').each(function () {
-      var element = $(this);
-      var options = element.data('widget-kolor-picker') || {};
-      options.onSelect = function (color) {
-        element.val(color);
-      };
-      element.addClass('kolor-picker-input')
-        .attr('autocomplete', 'off')
-        .kolorPicker(options)
-        .wrap('<span class="kolor-picker-wrapper" />');
-    });
-  });
-
-  $(document).on('page:before-unload', function() {
-    if (!colorPicker.length) {
-      colorPicker = $('.cp-color-picker');
-    }
-  });
-
-  $(document).on('page:load', function() {
-    if (colorPicker.length) {
-      $('body').append(colorPicker);
-    }
-  });
-})(jQuery);
+//= require kolor-picker/jqColorPicker.min
+//= require kolor-picker/color-sampler
+//= require kolor-picker/kolor-picker
+
+(function ($) {
+  var colorPicker  = $();
+
+  $(document).on('ready page:load', function () {
+    $('[data-widget-kolor-picker]').each(function () {
+      var element = $(this);
+      var options = element.data('widget-kolor-picker') || {};
+      options.onSelect = function (color) {
+        element.val(color).change();
+      };
+      element.addClass('kolor-picker-input')
+        .attr('autocomplete', 'off')
+        .kolorPicker(options)
+        .wrap('<span class="kolor-picker-wrapper" />');
+    });
+  });
+
+  $(document).on('page:before-unload', function() {
+    if (!colorPicker.length) {
+      colorPicker = $('.cp-color-picker');
+    }
+  });
+
+  $(document).on('page:load', function() {
+    if (colorPicker.length) {
+      $('body').append(colorPicker);
+    }
+  });
+})(jQuery);

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

@@ -1,213 +1,219 @@
-/*!
- * [color-sampler]{@link https://github.com/emn178/color-sampler}
- *
- * @version 0.1.5
- * @author Chen, Yi-Cyuan [emn178@gmail.com]
- * @copyright Chen, Yi-Cyuan 2015-2016
- * @license MIT
- */
-(function ($, window, document) {
-  'use strict';
-
-  var KEY = 'color-sampler';
-  var SELECTOR = ':' + KEY;
-  var INACCURACY = 5;
-  var init = false, preview, previewPixels = [], previewing = false, interval = 200,
-      timer, observations = $();
-
-  $.expr[':'][KEY] = function (element) {
-    return $(element).data(KEY) !== undefined;
-  };
-
-  function Sampler(canvas, options) {
-    this.canvas = $(canvas);
-    this.options = options || {};
-    this.enabled = true;
-    this.context = canvas.getContext("2d");
-    this.resize();
-    this.canvas.on('mousemove', this.onMousemove.bind(this));
-    this.canvas.on('mouseout', this.onMouseout.bind(this));
-    this.canvas.on('click', this.onClick.bind(this));
-  }
-
-  Sampler.prototype.resize = function () {
-    var canvas = this.canvas;
-    this.bounds = {
-      left: parseInt(canvas.css('padding-left')) || 0,
-      top: parseInt(canvas.css('padding-top')) || 0,
-      right: canvas.width(),
-      bottom: canvas.height()
-    };
-  };
-
-  Sampler.prototype.onMousemove = function (e) {
-    if (!this.enabled) {
-      return;
-    }
-    var canvas = this.canvas;
-    var bounds = this.bounds;
-    var x = e.offsetX - bounds.left;
-    var y = e.offsetY - bounds.top;
-    this.inRange = x >= 0 && y >= 0 && x < bounds.right && y < bounds.bottom;
-    if (!this.inRange && (x < -INACCURACY || y < -INACCURACY || x >= bounds.right + INACCURACY || y >= bounds.bottom + INACCURACY)) {
-      hidePreview();
-      return;
-    }
-    preview.css({
-      left: (e.pageX + 5) + 'px',
-      top: (e.pageY + 5) + 'px'
-    });
-    var pixels = this.setupPreview(x, y);
-    showPreview();
-    this.color = previewPixels[60].css('background-color');
-    if ($.isFunction(this.options.onPreview)) {
-      this.options.onPreview.call(canvas, this.color);
-    }
-    this.canvas.trigger('sampler:preview', this.color);
-  };
-
-  Sampler.prototype.setupPreview = function (centralX, centralY) {
-    var startX = centralX - 5;
-    var startY = centralY - 5;
-    var data = this.context.getImageData(startX, startY, 11, 11).data;
-    for (var i = 0, j = 0; i < data.length; i += 4, ++j) {
-      var y = parseInt(j / 11) + startY;
-      var x = j % 11 + startX;
-      if (x < 0 || y < 0) {
-        previewPixels[j].css('background-color', 'white');
-      } else {
-        var color = 'rgba(' + Array.prototype.slice.call(data, i, i + 4).join(',') + ')';
-        previewPixels[j].css('background-color', color);
-      }
-    }
-  };
-
-  Sampler.prototype.onMouseout = function () {
-    hidePreview();
-  };
-
-  Sampler.prototype.onClick = function (e) {
-    if (!this.color || !this.enabled || !this.inRange) {
-      return;
-    }
-    if ($.isFunction(this.options.onSelect)) {
-      this.options.onSelect.call(this.canvas, this.color);
-    }
-    this.canvas.trigger('sampler:select', this.color);
-  };
-
-  Sampler.prototype.detect = function () {
-    if (this.canvas.width() != this.bounds.right || this.canvas.height() != this.bounds.bottom) {
-      this.resize();
-    }
-  };
-
-  Sampler.prototype.enable = function (enabled) {
-    if (enabled === undefined) {
-      enabled = true;
-    }
-    this.enabled = enabled;
-  };
-
-  Sampler.prototype.disable = function (disabled) {
-    if (disabled === undefined) {
-      disabled = true;
-    }
-    this.enabled = !disabled;
-    hidePreview();
-  };
-
-  function resize() {
-    $(SELECTOR).each(function () {
-      $(this).data(KEY).resize();
-    });
-  }
-
-  function createPreview() {
-    preview = $('<div class="color-sampler-preview"/>');
-    var table = $('<table/>');
-    preview.append(table);
-    for (var y = 0; y < 11; ++y) {
-      var tr = $('<tr>');
-      for (var x = 0; x < 11; ++x) {
-        var td = $('<td></td>').attr('x', x).attr('y', y);
-        previewPixels.push(td);
-        tr.append(td);
-      }
-      table.append(tr);
-    }
-    $('body').append(preview);
-  }
-
-  function showPreview() {
-    if (previewing) {
-      return;
-    }
-    previewing = true;
-    preview.addClass('active');
-  }
-
-  function hidePreview() {
-    if (!previewing) {
-      return;
-    }
-    previewing = false;
-    preview.removeClass('active');
-  }
-
-  function detect() {
-    observations = observations.filter(SELECTOR);
-    observations.each(function () {
-      $(this).data(KEY).detect();
-    });
-    if (observations.length === 0) {
-      timer = clearInterval(timer);
-    }
-  }
-
-  var PublicMethods = ['enable', 'disable', 'resize'];
-  $.fn.colorSampler = function (method, options) {
-    var sampler, isString = typeof (method) == 'string';
-    this.filter('canvas').each(function () {
-      if (isString) {
-        if ($.inArray(method, PublicMethods) != -1) {
-          sampler = $(this).data(KEY);
-          if (sampler) {
-            sampler[method].apply(sampler, options);
-          }
-        }
-      } else {
-        options = method;
-        sampler = new Sampler(this, options);
-        $(this).data(KEY, sampler);
-
-        if (!init) {
-          init = true;
-          createPreview();
-          $(document).ready(function () {
-            $(window).bind('resize', resize);
-          });
-        }
-
-        observations = observations.add(this);
-        if (interval && !timer) {
-          timer = setInterval(detect, interval);
-        }
-      }
-    });
-    return this;
-  };
-
-  $.colorSamper = {};
-
-  $.colorSamper.setInterval = function (v) {
-    if (v == interval || !$.isNumeric(v) || v < 0) {
-      return;
-    }
-    interval = v;
-    timer = clearInterval(timer);
-    if (interval > 0) {
-      timer = setInterval(detect, interval);
-    }
-  };
-})(jQuery, window, document);
+/*!
+ * [color-sampler]{@link https://github.com/emn178/color-sampler}
+ *
+ * @version 0.1.6
+ * @author Chen, Yi-Cyuan [emn178@gmail.com]
+ * @copyright Chen, Yi-Cyuan 2015-2016
+ * @license MIT
+ */
+(function ($, window, document) {
+  'use strict';
+
+  var KEY = 'color-sampler';
+  var SELECTOR = ':' + KEY;
+  var INACCURACY = 5;
+  var init = false, preview, previewPixels = [], previewing = false, interval = 200,
+      timer, observations = $();
+
+  $.expr[':'][KEY] = function (element) {
+    return $(element).data(KEY) !== undefined;
+  };
+
+  function Sampler(canvas, options) {
+    this.canvas = $(canvas);
+    this.options = options || {};
+    this.enabled = true;
+    this.context = canvas.getContext("2d");
+    this.resize();
+    this.canvas.on('mousemove', this.onMousemove.bind(this));
+    this.canvas.on('mouseout', this.onMouseout.bind(this));
+    this.canvas.on('click', this.onClick.bind(this));
+  }
+
+  Sampler.prototype.resize = function () {
+    var canvas = this.canvas;
+    this.bounds = {
+      left: parseInt(canvas.css('padding-left')) || 0,
+      top: parseInt(canvas.css('padding-top')) || 0,
+      right: canvas.width(),
+      bottom: canvas.height()
+    };
+  };
+
+  Sampler.prototype.onMousemove = function (e) {
+    if (!this.enabled) {
+      return;
+    }
+    var canvas = this.canvas;
+    var bounds = this.bounds;
+    var x = e.offsetX - bounds.left;
+    var y = e.offsetY - bounds.top;
+    this.inRange = this.checkInRange(x, y);
+    if (!this.inRange && (x < -INACCURACY || y < -INACCURACY || x >= bounds.right + INACCURACY || y >= bounds.bottom + INACCURACY)) {
+      hidePreview();
+      return;
+    }
+    preview.css({
+      left: (e.pageX + 5) + 'px',
+      top: (e.pageY + 5) + 'px'
+    });
+    var pixels = this.setupPreview(x, y);
+    showPreview();
+    this.color = previewPixels[60].css('background-color');
+    if ($.isFunction(this.options.onPreview)) {
+      this.options.onPreview.call(canvas, this.color);
+    }
+    this.canvas.trigger('sampler:preview', this.color);
+  };
+
+  Sampler.prototype.setupPreview = function (centralX, centralY) {
+    var startX = centralX - 5;
+    var startY = centralY - 5;
+    var data = this.context.getImageData(startX, startY, 11, 11).data;
+    for (var i = 0, j = 0; i < data.length; i += 4, ++j) {
+      var y = parseInt(j / 11) + startY;
+      var x = j % 11 + startX;
+      if (!this.checkInRange(x, y)) {
+        previewPixels[j].css('background-color', 'white');
+      } else {
+        var color = Array.prototype.slice.call(data, i, i + 4);
+        color[3] = Math.min(color[3] / 100, 1);
+        color = 'rgba(' + color.join(',') + ')';
+        previewPixels[j].css('background-color', color);
+      }
+    }
+  };
+
+  Sampler.prototype.checkInRange = function (x, y) {
+    return x >= 0 && y >= 0 && x < this.bounds.right && y < this.bounds.bottom;
+  };
+
+  Sampler.prototype.onMouseout = function () {
+    hidePreview();
+  };
+
+  Sampler.prototype.onClick = function (e) {
+    if (!this.color || !this.enabled || !this.inRange) {
+      return;
+    }
+    if ($.isFunction(this.options.onSelect)) {
+      this.options.onSelect.call(this.canvas, this.color);
+    }
+    this.canvas.trigger('sampler:select', this.color);
+  };
+
+  Sampler.prototype.detect = function () {
+    if (this.canvas.width() != this.bounds.right || this.canvas.height() != this.bounds.bottom) {
+      this.resize();
+    }
+  };
+
+  Sampler.prototype.enable = function (enabled) {
+    if (enabled === undefined) {
+      enabled = true;
+    }
+    this.enabled = enabled;
+  };
+
+  Sampler.prototype.disable = function (disabled) {
+    if (disabled === undefined) {
+      disabled = true;
+    }
+    this.enabled = !disabled;
+    hidePreview();
+  };
+
+  function resize() {
+    $(SELECTOR).each(function () {
+      $(this).data(KEY).resize();
+    });
+  }
+
+  function createPreview() {
+    preview = $('<div class="color-sampler-preview"/>');
+    var table = $('<table/>');
+    preview.append(table);
+    for (var y = 0; y < 11; ++y) {
+      var tr = $('<tr>');
+      for (var x = 0; x < 11; ++x) {
+        var td = $('<td></td>').attr('x', x).attr('y', y);
+        previewPixels.push(td);
+        tr.append(td);
+      }
+      table.append(tr);
+    }
+    $('body').append(preview);
+  }
+
+  function showPreview() {
+    if (previewing) {
+      return;
+    }
+    previewing = true;
+    preview.addClass('active');
+  }
+
+  function hidePreview() {
+    if (!previewing) {
+      return;
+    }
+    previewing = false;
+    preview.removeClass('active');
+  }
+
+  function detect() {
+    observations = observations.filter(SELECTOR);
+    observations.each(function () {
+      $(this).data(KEY).detect();
+    });
+    if (observations.length === 0) {
+      timer = clearInterval(timer);
+    }
+  }
+
+  var PublicMethods = ['enable', 'disable', 'resize'];
+  $.fn.colorSampler = function (method, options) {
+    var sampler, isString = typeof (method) == 'string';
+    this.filter('canvas').each(function () {
+      if (isString) {
+        if ($.inArray(method, PublicMethods) != -1) {
+          sampler = $(this).data(KEY);
+          if (sampler) {
+            sampler[method].apply(sampler, options);
+          }
+        }
+      } else {
+        options = method;
+        sampler = new Sampler(this, options);
+        $(this).data(KEY, sampler);
+
+        if (!init) {
+          init = true;
+          createPreview();
+          $(document).ready(function () {
+            $(window).bind('resize', resize);
+          });
+        }
+
+        observations = observations.add(this);
+        if (interval && !timer) {
+          timer = setInterval(detect, interval);
+        }
+      }
+    });
+    return this;
+  };
+
+  $.colorSamper = {};
+
+  $.colorSamper.setInterval = function (v) {
+    if (v == interval || !$.isNumeric(v) || v < 0) {
+      return;
+    }
+    interval = v;
+    timer = clearInterval(timer);
+    if (interval > 0) {
+      timer = setInterval(detect, interval);
+    }
+  };
+})(jQuery, window, document);

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

@@ -1,185 +1,185 @@
-/**
- * [kolor-picker]{@link https://github.com/emn178/kolor-picker}
- *
- * @version 0.2.1
- * @author Yi-Cyuan Chen [emn178@gmail.com]
- * @copyright Yi-Cyuan Chen 2015-2016
- * @license MIT
- */
-(function ($) {
-  'use strict';
-
-  var KEY = 'kolor-picker';
-  var wrapper;
-
-  function Wrapper(element, colorPicker) {
-    this.element = element;
-    this.colorPicker = colorPicker;
-    this.previewElement = $('<div class="kolor-picker"><div class="sampler"></div><div class="preview-block"><input type="text"/><div class="preview-wrapper"><div class="preview" /></div></div></div>');
-    this.element.append(this.previewElement);
-
-    var elements = {
-      preview: this.previewElement.find('.preview'),
-      input: this.previewElement.find('input'),
-      sampler: this.previewElement.find('.sampler'),
-      alpha: this.element.find('.cp-alpha')
-    };
-    this.elements = elements;
-    elements.sampler.click(this.enableSampler.bind(this));
-
-    this.sampling = false;
-    this.lastToggled = false;
-  }
-
-  Wrapper.prototype.enableSampler = function () {
-    if (!this.kolorPicker.canvas) {
-      return;
-    }
-    this.kolorPicker.canvas.colorSampler('enable');
-    this.sampling = true;
-    this.colorPicker.toggle(false);
-  };
-
-  Wrapper.prototype.setKolorPicker = function (kolorPicker) {
-    this.kolorPicker = kolorPicker;
-    this.element.attr('data-theme', kolorPicker.theme);
-    this.elements.sampler.toggle(!!kolorPicker.canvas);
-    this.elements.alpha.toggle(kolorPicker.options.opacity !== false);
-    if (kolorPicker.options.doRender === undefined) {
-      this.colorPicker.color.options.doRender = true;
-    } else {
-      this.colorPicker.color.options.doRender = kolorPicker.options.doRender;
-    }
-  };
-
-  Wrapper.prototype.getColor = function () {
-    var rgb = this.colorPicker.color.colors.rgb;
-    return 'rgba(' + [parseInt(rgb.r * 255), parseInt(rgb.g * 255), parseInt(rgb.b * 255), this.colorPicker.color.colors.alpha.toFixed(2)].join(',') + ')';
-  };
-
-  Wrapper.prototype.updateColor = function () {
-    var color = this.getColor();
-    this.elements.preview.css('background-color', color);
-    this.elements.input.val(color);
-    this.kolorPicker.changeColor(color);
-  };
-
-  Wrapper.prototype.render = function (toggled) {
-    if (toggled === undefined) {
-      this.updateColor();
-    } else if (this.lastToggled === toggled) {
-      return;
-    }
-    this.lastToggled = toggled;
-    if (toggled === false) {
-      if (!this.sampling) {
-        var color = this.getColor();
-        this.kolorPicker.selectColor(color);
-      }
-    } else {
-      this.updateColor();
-    }
-  };
-
-  function KolorPicker(element, options) {
-    this.element = element;
-    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);
-      this.canvas.colorSampler().colorSampler('disable')
-        .bind('sampler:preview', this.onSamplerPreview.bind(this))
-        .bind('sampler:select', this.onSamplerSelect.bind(this));
-    }
-  }
-
-  KolorPicker.prototype.onSamplerSelect = function (e, color) {
-    if (wrapper.kolorPicker != this) {
-      return;
-    }
-    wrapper.sampling = false;
-    this.canvas.colorSampler('disable');
-    this.setColor(color);
-    color = wrapper.getColor();
-    this.selectColor(color);
-  };
-
-  KolorPicker.prototype.onSamplerPreview = function (e, color) {
-    if (wrapper.kolorPicker != this) {
-      return;
-    }
-    this.element.css('background-color', color);
-    color = wrapper.getColor();
-    this.changeColor(color);
-  };
-
-  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) {    
-    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 = {
-    buildCallback: function (element) {
-      wrapper = new Wrapper(element, this);
-    },
-
-    renderCallback: function (element, toggled) {
-      wrapper.setKolorPicker($(element).data(KEY));
-      wrapper.render(toggled);
-    }
-  };
-
-  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);
-        var kolorPicker = $(this).data(KEY);
-        if (kolorPicker) {
-          return kolorPicker[options].apply(kolorPicker, args);
-        }
-      }
-    } else {
-      this.each(function () {
-        var element = $(this);
-        if (!element.data(KEY)) {
-          return element.data(KEY, new KolorPicker(element, options))
-            .colorPicker($.extend({ cssAddon: $.kolorPicker.css }, options, KolorPickerOptions));
-        }
-      });
-    }
-    return this;
-  };
-
-  $.kolorPicker = {
-    theme: ''
-  };
-})(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%}";
+/**
+ * [kolor-picker]{@link https://github.com/emn178/kolor-picker}
+ *
+ * @version 0.2.1
+ * @author Yi-Cyuan Chen [emn178@gmail.com]
+ * @copyright Yi-Cyuan Chen 2015-2016
+ * @license MIT
+ */
+(function ($) {
+  'use strict';
+
+  var KEY = 'kolor-picker';
+  var wrapper;
+
+  function Wrapper(element, colorPicker) {
+    this.element = element;
+    this.colorPicker = colorPicker;
+    this.previewElement = $('<div class="kolor-picker"><div class="sampler"></div><div class="preview-block"><input type="text"/><div class="preview-wrapper"><div class="preview" /></div></div></div>');
+    this.element.append(this.previewElement);
+
+    var elements = {
+      preview: this.previewElement.find('.preview'),
+      input: this.previewElement.find('input'),
+      sampler: this.previewElement.find('.sampler'),
+      alpha: this.element.find('.cp-alpha')
+    };
+    this.elements = elements;
+    elements.sampler.click(this.enableSampler.bind(this));
+
+    this.sampling = false;
+    this.lastToggled = false;
+  }
+
+  Wrapper.prototype.enableSampler = function () {
+    if (!this.kolorPicker.canvas) {
+      return;
+    }
+    this.kolorPicker.canvas.colorSampler('enable');
+    this.sampling = true;
+    this.colorPicker.toggle(false);
+  };
+
+  Wrapper.prototype.setKolorPicker = function (kolorPicker) {
+    this.kolorPicker = kolorPicker;
+    this.element.attr('data-theme', kolorPicker.theme);
+    this.elements.sampler.toggle(!!kolorPicker.canvas);
+    this.elements.alpha.toggle(kolorPicker.options.opacity !== false);
+    if (kolorPicker.options.doRender === undefined) {
+      this.colorPicker.color.options.doRender = true;
+    } else {
+      this.colorPicker.color.options.doRender = kolorPicker.options.doRender;
+    }
+  };
+
+  Wrapper.prototype.getColor = function () {
+    var rgb = this.colorPicker.color.colors.rgb;
+    return 'rgba(' + [parseInt(rgb.r * 255), parseInt(rgb.g * 255), parseInt(rgb.b * 255), this.colorPicker.color.colors.alpha.toFixed(2)].join(',') + ')';
+  };
+
+  Wrapper.prototype.updateColor = function () {
+    var color = this.getColor();
+    this.elements.preview.css('background-color', color);
+    this.elements.input.val(color);
+    this.kolorPicker.changeColor(color);
+  };
+
+  Wrapper.prototype.render = function (toggled) {
+    if (toggled === undefined) {
+      this.updateColor();
+    } else if (this.lastToggled === toggled) {
+      return;
+    }
+    this.lastToggled = toggled;
+    if (toggled === false) {
+      if (!this.sampling) {
+        var color = this.getColor();
+        this.kolorPicker.selectColor(color);
+      }
+    } else {
+      this.updateColor();
+    }
+  };
+
+  function KolorPicker(element, options) {
+    this.element = element;
+    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);
+      this.canvas.colorSampler().colorSampler('disable')
+        .bind('sampler:preview', this.onSamplerPreview.bind(this))
+        .bind('sampler:select', this.onSamplerSelect.bind(this));
+    }
+  }
+
+  KolorPicker.prototype.onSamplerSelect = function (e, color) {
+    if (wrapper.kolorPicker != this) {
+      return;
+    }
+    wrapper.sampling = false;
+    this.canvas.colorSampler('disable');
+    this.setColor(color);
+    color = wrapper.getColor();
+    this.selectColor(color);
+  };
+
+  KolorPicker.prototype.onSamplerPreview = function (e, color) {
+    if (wrapper.kolorPicker != this) {
+      return;
+    }
+    this.element.css('background-color', color);
+    color = wrapper.getColor();
+    this.changeColor(color);
+  };
+
+  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) {    
+    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 = {
+    buildCallback: function (element) {
+      wrapper = new Wrapper(element, this);
+    },
+
+    renderCallback: function (element, toggled) {
+      wrapper.setKolorPicker($(element).data(KEY));
+      wrapper.render(toggled);
+    }
+  };
+
+  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);
+        var kolorPicker = $(this).data(KEY);
+        if (kolorPicker) {
+          return kolorPicker[options].apply(kolorPicker, args);
+        }
+      }
+    } else {
+      this.each(function () {
+        var element = $(this);
+        if (!element.data(KEY)) {
+          return element.data(KEY, new KolorPicker(element, options))
+            .colorPicker($.extend({ cssAddon: $.kolorPicker.css }, options, KolorPickerOptions));
+        }
+      });
+    }
+    return this;
+  };
+
+  $.kolorPicker = {
+    theme: ''
+  };
+})(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%}";

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

@@ -1,54 +1,57 @@
-/*!
- * [color-sampler]{@link https://github.com/emn178/color-sampler}
- *
- * @version 0.1.5
- * @author Chen, Yi-Cyuan [emn178@gmail.com]
- * @copyright Chen, Yi-Cyuan 2015-2016
- * @license MIT
- */
-.color-sampler-preview {
-  position: absolute;
-  z-index: 100;
-  display: none;
-  width: 110px;
-  height: 110px;
-  border: 1px solid;
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.color-sampler-preview.active {
-  display: block;
-}
-
-.color-sampler-preview table {
-   border-spacing: 0;
-}
-
-.color-sampler-preview td {
-  border: 1px solid gray;
-  height: 8px;
-  width: 8px;
-  background-color: #BBB4B4;
-  padding: 0;
-}
-
-.color-sampler-preview td[x="5"][y="5"] {
-  border-color: red;
-}
-
-.color-sampler-preview td[x="5"][y="4"] {
-  border-bottom-color: red;
-}
-
-.color-sampler-preview td[x="5"][y="6"] {
-  border-top-color: red;
-}
-
-.color-sampler-preview td[x="4"][y="5"] {
-  border-right-color: red;
-}
-
-.color-sampler-preview td[x="6"][y="5"] {
-  border-left-color: red;
-}
+/*!
+ * [color-sampler]{@link https://github.com/emn178/color-sampler}
+ *
+ * @version 0.1.5
+ * @author Chen, Yi-Cyuan [emn178@gmail.com]
+ * @copyright Chen, Yi-Cyuan 2015-2016
+ * @license MIT
+ */
+.color-sampler-preview {
+  position: absolute;
+  z-index: 100;
+  display: none;
+  width: 110px;
+  height: 110px;
+  border: 1px solid;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: white;
+  background-image: url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');
+  background-size: 6px;
+}
+
+.color-sampler-preview.active {
+  display: block;
+}
+
+.color-sampler-preview table {
+   border-spacing: 0;
+}
+
+.color-sampler-preview td {
+  border: 1px solid gray;
+  height: 8px;
+  width: 8px;
+  background-color: #BBB4B4;
+  padding: 0;
+}
+
+.color-sampler-preview td[x="5"][y="5"] {
+  border-color: red;
+}
+
+.color-sampler-preview td[x="5"][y="4"] {
+  border-bottom-color: red;
+}
+
+.color-sampler-preview td[x="5"][y="6"] {
+  border-top-color: red;
+}
+
+.color-sampler-preview td[x="4"][y="5"] {
+  border-right-color: red;
+}
+
+.color-sampler-preview td[x="6"][y="5"] {
+  border-left-color: red;
+}

data/lib/kolor-picker/engine.rb

@@ -1,11 +1,11 @@
-if defined?(::Rails::Engine)
-	module KolorPicker
-	  class Engine < ::Rails::Engine
-	    initializer "kolor-picker" do
-	      ActiveSupport.on_load(:action_view) do
-	        include KolorPicker::Helper
-	      end
-	    end
-	  end
-	end
-end
+if defined?(::Rails::Engine)
+	module KolorPicker
+	  class Engine < ::Rails::Engine
+	    initializer "kolor-picker" do
+	      ActiveSupport.on_load(:action_view) do
+	        include KolorPicker::Helper
+	      end
+	    end
+	  end
+	end
+end

data/lib/kolor-picker/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: kolor-picker
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Chen, Yi-Cyuan
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-05-13 00:00:00.000000000 Z
+date: 2016-10-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview