Download as
Browse Code »

Commit 8f79b72dbfa32e97da16e6f2bb15ef8fe421b058

Authored by Victor Costa
1 parent 5d182131
Exists in theme-brasil-digital-from-staging and in 9 other branches angular_poc, api-article-archived, backup-7-jan-2016, captcha_serpro_plugin, login-captcha, production, resend_confirmation_email, staging, staging_rails3

Change the category color selection to use a colorpicker component. 

The field display_color has turned into char(6) and stores the color rgb hex code.
(ActionItem2915)
Showing 16 changed files with 2896 additions and 74 deletions   Show diff stats
app/controllers/admin/categories_controller.rb
  Diff comments   View file @8f79b72
... ... @@ -45,9 +45,11 @@ class CategoriesController < AdminController
45 45 if request.post?
46 46 @category.update_attributes!(params[:category])
47 47 @saved = true
  48 + session[:notice] = _("Category %s saved." % @category.name)
48 49 redirect_to :action => 'index'
49 50 end
50 51 rescue Exception => e
  52 + session[:notice] = _('Could not save category.')
51 53 render :action => 'edit'
52 54 end
53 55 end
... ...
app/helpers/application_helper.rb
  Diff comments   View file @8f79b72
... ... @@ -1415,4 +1415,14 @@ module ApplicationHelper
1415 1415 content_tag('ul', article.versions.map {|v| link_to("r#{v.version}", @page.url.merge(:version => v.version))})
1416 1416 end
1417 1417  
  1418 + def labelled_colorpicker_field(human_name, object_name, method, options = {})
  1419 + options[:id] ||= 'text-field-' + FormsHelper.next_id_number
  1420 + content_tag('label', human_name, :for => options[:id], :class => 'formlabel') +
  1421 + colorpicker_field(object_name, method, options.merge(:class => 'colorpicker_field'))
  1422 + end
  1423 +
  1424 + def colorpicker_field(object_name, method, options = {})
  1425 + text_field(object_name, method, options.merge(:class => 'colorpicker_field'))
  1426 + end
  1427 +
1418 1428 end
... ...
app/helpers/categories_helper.rb
  Diff comments   View file @8f79b72
1 1 module CategoriesHelper
2 2  
3   -
4   - COLORS = [
5   - [ N_('Do not display at the menu'), nil ],
6   - [ N_('Orange'), 1],
7   - [ N_('Green'), 2],
8   - [ N_('Purple'), 3],
9   - [ N_('Red'), 4],
10   - [ N_('Dark Green'), 5],
11   - [ N_('Blue Oil'), 6],
12   - [ N_('Blue'), 7],
13   - [ N_('Brown'), 8],
14   - [ N_('Light Green'), 9],
15   - [ N_('Light Blue'), 10],
16   - [ N_('Dark Blue'), 11],
17   - [ N_('Blue Pool'), 12],
18   - [ N_('Beige'), 13],
19   - [ N_('Yellow'), 14],
20   - [ N_('Light Brown'), 15]
21   - ]
22   -
23 3 TYPES = [
24 4 [ _('General Category'), Category.to_s ],
25 5 [ _('Product Category'), ProductCategory.to_s ],
26 6 [ _('Region'), Region.to_s ],
27 7 ]
28 8  
29   - def select_color_for_category
30   - if @category.top_level?
31   - labelled_form_field(_('Display at the menu?'), select('category', 'display_color', CategoriesHelper::COLORS.map {|item| [gettext(item[0]), item[1]] }))
32   - else
33   - ""
34   - end
  9 + def select_category_type(field)
  10 + value = params[field]
  11 + labelled_form_field(_('Type of category'), select_tag('type', options_for_select(TYPES, value)))
35 12 end
36 13  
37 14 def display_color_for_category(category)
... ... @@ -43,9 +20,9 @@ module CategoriesHelper
43 20 end
44 21 end
45 22  
46   - def select_category_type(field)
47   - value = params[field]
48   - labelled_form_field(_('Type of category'), select_tag('type', options_for_select(TYPES, value)))
  23 + def category_color_style(category)
  24 + return '' if category.display_color.blank?
  25 + 'background-color: #'+category.display_color+';'
49 26 end
50 27  
51 28 #FIXME make this test
... ... @@ -63,4 +40,14 @@ module CategoriesHelper
63 40 {:id => category_id ? "select-category-#{category_id}-link" : nil, :remote => true, :class => 'select-subcategory-link'}.merge(html_options)
64 41 end
65 42  
  43 + protected
  44 +
  45 + def search_category_tree_for_color(category)
  46 + if category.display_color.blank?
  47 + category.parent.nil? ? nil : search_category_tree_for_color(category.parent)
  48 + else
  49 + category.display_color
  50 + end
  51 + end
  52 +
66 53 end
... ...
app/models/category.rb
  Diff comments   View file @8f79b72
... ... @@ -14,9 +14,6 @@ class Category < ActiveRecord::Base
14 14 validates_uniqueness_of :slug,:scope => [ :environment_id, :parent_id ], :message => N_('{fn} is already being used by another category.').fix_i18n
15 15 belongs_to :environment
16 16  
17   - validates_inclusion_of :display_color, :in => 1..15, :allow_nil => true
18   - validates_uniqueness_of :display_color, :scope => :environment_id, :if => (lambda { |cat| ! cat.display_color.nil? }), :message => N_('{fn} was already assigned to another category.').fix_i18n
19   -
20 17 # Finds all top level categories for a given environment.
21 18 scope :top_level_for, lambda { |environment|
22 19 {:conditions => ['parent_id is null and environment_id = ?', environment.id ]}
... ... @@ -42,6 +39,13 @@ class Category < ActiveRecord::Base
42 39  
43 40 acts_as_having_image
44 41  
  42 + before_save :normalize_display_color
  43 +
  44 + def normalize_display_color
  45 + display_color.gsub!('#', '') if display_color
  46 + display_color = nil if display_color.blank?
  47 + end
  48 +
45 49 scope :from_types, lambda { |types|
46 50 types.select{ |t| t.blank? }.empty? ?
47 51 { :conditions => { :type => types } } :
... ...
app/views/categories/_category.html.erb
  Diff comments   View file @8f79b72
1 1 <li>
2 2 <div class='treeitem'>
3   - <%= display_color_for_category(category) %>
4   - <%= category.name %>
  3 + <% unless category_color_style(category).empty? %>
  4 + <span class="color_marker" style="<%= category_color_style(category) %>" ></span>
  5 + <% end %>
  6 + <span><%= category.name %></span>
  7 +
5 8 <% if category.children.count > 0 %>
6 9 <div class='button' id="category-loading-<%= category.id %>" style="position: relative;">
7 10 <a href="#" id="show-button-<%= category.id %>" class="show-button" onclick="return false;" data-category="<%= category.id %>"><%= _('Show') %></a>
... ...
app/views/categories/_form.html.erb
  Diff comments   View file @8f79b72
  1 +<%= stylesheet_link_tag 'spectrum.css' %>
  2 +<%= javascript_include_tag "spectrum.js" %>
  3 +<%= javascript_include_tag "colorpicker-noosfero.js" %>
  4 +
1 5 <%= error_messages_for 'category' %>
2 6  
3 7 <%= labelled_form_for 'category', :html => { :multipart => true} do |f| %>
... ... @@ -13,12 +17,13 @@
13 17 <% end %>
14 18 <% end %>
15 19  
16   - <%= select_color_for_category if !environment.enabled?('disable_categories_menu') %>
17   -
18 20 <%= required f.text_field('name') %>
19 21  
20 22 <%= labelled_check_box(_('Display in the menu'), 'category[display_in_menu]', '1', @category.display_in_menu) %>
21 23  
  24 + <%= labelled_colorpicker_field(_('Pick a color'), :category, 'display_color' ) unless environment.enabled?('disable_categories_menu')%>
  25 + <span id="color_preview" class = "color_marker" style="<%= category_color_style(@category) %>" ></span>
  26 +
22 27 <%= f.fields_for :image_builder, @category.image do |i| %>
23 28 <%= file_field_or_thumbnail(_('Image:'), @category.image, i) %>
24 29 <% end %>
... ...
db/migrate/20140807134625_change_category_display_color_to_string.rb 0 → 100644
  Diff comments   View file @8f79b72
... ... @@ -0,0 +1,30 @@
  1 +class ChangeCategoryDisplayColorToString < ActiveRecord::Migration
  2 +
  3 + def self.up
  4 + change_table :categories do |t|
  5 + t.string :display_color_tmp, :limit => 6
  6 + end
  7 + Category.update_all({:display_color_tmp => "ffa500"}, {:display_color => 1})
  8 + Category.update_all({:display_color_tmp => "00FF00"}, {:display_color => 2})
  9 + Category.update_all({:display_color_tmp => "a020f0"}, {:display_color => 3})
  10 + Category.update_all({:display_color_tmp => "ff0000"}, {:display_color => 4})
  11 + Category.update_all({:display_color_tmp => "006400"}, {:display_color => 5})
  12 + Category.update_all({:display_color_tmp => "191970"}, {:display_color => 6})
  13 + Category.update_all({:display_color_tmp => "0000ff"}, {:display_color => 7})
  14 + Category.update_all({:display_color_tmp => "a52a2a"}, {:display_color => 8})
  15 + Category.update_all({:display_color_tmp => "32cd32"}, {:display_color => 9})
  16 + Category.update_all({:display_color_tmp => "add8e6"}, {:display_color => 10})
  17 + Category.update_all({:display_color_tmp => "483d8b"}, {:display_color => 11})
  18 + Category.update_all({:display_color_tmp => "b8e9ee"}, {:display_color => 12})
  19 + Category.update_all({:display_color_tmp => "f5f5dc"}, {:display_color => 13})
  20 + Category.update_all({:display_color_tmp => "ffff00"}, {:display_color => 14})
  21 + Category.update_all({:display_color_tmp => "f4a460"}, {:display_color => 15})
  22 + end
  23 +
  24 + def self.down
  25 + change_table :categories do |t|
  26 + t.remove :display_color
  27 + t.rename :display_color_tmp, :display_color
  28 + end
  29 + end
  30 +end
... ...
public/javascripts/colorpicker-noosfero.js 0 → 100644
  Diff comments   View file @8f79b72
... ... @@ -0,0 +1,25 @@
  1 +jQuery(document).ready(function($) {
  2 + $(".colorpicker_field").spectrum({
  3 + showInput: true,
  4 + showInitial: false,
  5 + preferredFormat: "hex",
  6 + allowEmpty: true,
  7 + showPalette: true,
  8 + palette: [
  9 + ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
  10 + "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
  11 + ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
  12 + "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
  13 + ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
  14 + "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
  15 + "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
  16 + "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
  17 + "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
  18 + "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
  19 + "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
  20 + "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
  21 + "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
  22 + "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
  23 + ]
  24 + });
  25 +});
... ...
public/javascripts/spectrum.js 0 → 100644
  Diff comments   View file @8f79b72
... ... @@ -0,0 +1,2259 @@
  1 +// Spectrum Colorpicker v1.4.1
  2 +// https://github.com/bgrins/spectrum
  3 +// Author: Brian Grinstead
  4 +// License: MIT
  5 +
  6 +(function (window, $, undefined) {
  7 + "use strict";
  8 +
  9 + var defaultOpts = {
  10 +
  11 + // Callbacks
  12 + beforeShow: noop,
  13 + move: noop,
  14 + change: noop,
  15 + show: noop,
  16 + hide: noop,
  17 +
  18 + // Options
  19 + color: false,
  20 + flat: false,
  21 + showInput: false,
  22 + allowEmpty: false,
  23 + showButtons: true,
  24 + clickoutFiresChange: false,
  25 + showInitial: false,
  26 + showPalette: false,
  27 + showPaletteOnly: false,
  28 + hideAfterPaletteSelect: false,
  29 + togglePaletteOnly: false,
  30 + showSelectionPalette: true,
  31 + localStorageKey: false,
  32 + appendTo: "body",
  33 + maxSelectionSize: 7,
  34 + cancelText: "cancel",
  35 + chooseText: "choose",
  36 + togglePaletteMoreText: "more",
  37 + togglePaletteLessText: "less",
  38 + clearText: "Clear Color Selection",
  39 + noColorSelectedText: "No Color Selected",
  40 + preferredFormat: false,
  41 + className: "", // Deprecated - use containerClassName and replacerClassName instead.
  42 + containerClassName: "",
  43 + replacerClassName: "",
  44 + showAlpha: false,
  45 + theme: "sp-light",
  46 + palette: [["#ffffff", "#000000", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3"]],
  47 + selectionPalette: [],
  48 + disabled: false
  49 + },
  50 + spectrums = [],
  51 + IE = !!/msie/i.exec( window.navigator.userAgent ),
  52 + rgbaSupport = (function() {
  53 + function contains( str, substr ) {
  54 + return !!~('' + str).indexOf(substr);
  55 + }
  56 +
  57 + var elem = document.createElement('div');
  58 + var style = elem.style;
  59 + style.cssText = 'background-color:rgba(0,0,0,.5)';
  60 + return contains(style.backgroundColor, 'rgba') || contains(style.backgroundColor, 'hsla');
  61 + })(),
  62 + inputTypeColorSupport = (function() {
  63 + var colorInput = $("<input type='color' value='!' />")[0];
  64 + return colorInput.type === "color" && colorInput.value !== "!";
  65 + })(),
  66 + replaceInput = [
  67 + "<div class='sp-replacer'>",
  68 + "<div class='sp-preview'><div class='sp-preview-inner'></div></div>",
  69 + "<div class='sp-dd'>&#9660;</div>",
  70 + "</div>"
  71 + ].join(''),
  72 + markup = (function () {
  73 +
  74 + // IE does not support gradients with multiple stops, so we need to simulate
  75 + // that for the rainbow slider with 8 divs that each have a single gradient
  76 + var gradientFix = "";
  77 + if (IE) {
  78 + for (var i = 1; i <= 6; i++) {
  79 + gradientFix += "<div class='sp-" + i + "'></div>";
  80 + }
  81 + }
  82 +
  83 + return [
  84 + "<div class='sp-container sp-hidden'>",
  85 + "<div class='sp-palette-container'>",
  86 + "<div class='sp-palette sp-thumb sp-cf'></div>",
  87 + "<div class='sp-palette-button-container sp-cf'>",
  88 + "<button type='button' class='sp-palette-toggle'></button>",
  89 + "</div>",
  90 + "</div>",
  91 + "<div class='sp-picker-container'>",
  92 + "<div class='sp-top sp-cf'>",
  93 + "<div class='sp-fill'></div>",
  94 + "<div class='sp-top-inner'>",
  95 + "<div class='sp-color'>",
  96 + "<div class='sp-sat'>",
  97 + "<div class='sp-val'>",
  98 + "<div class='sp-dragger'></div>",
  99 + "</div>",
  100 + "</div>",
  101 + "</div>",
  102 + "<div class='sp-clear sp-clear-display'>",
  103 + "</div>",
  104 + "<div class='sp-hue'>",
  105 + "<div class='sp-slider'></div>",
  106 + gradientFix,
  107 + "</div>",
  108 + "</div>",
  109 + "<div class='sp-alpha'><div class='sp-alpha-inner'><div class='sp-alpha-handle'></div></div></div>",
  110 + "</div>",
  111 + "<div class='sp-input-container sp-cf'>",
  112 + "<input class='sp-input' type='text' spellcheck='false' />",
  113 + "</div>",
  114 + "<div class='sp-initial sp-thumb sp-cf'></div>",
  115 + "<div class='sp-button-container sp-cf'>",
  116 + "<a class='sp-cancel' href='#'></a>",
  117 + "<button type='button' class='sp-choose'></button>",
  118 + "</div>",
  119 + "</div>",
  120 + "</div>"
  121 + ].join("");
  122 + })();
  123 +
  124 + function paletteTemplate (p, color, className, opts) {
  125 + var html = [];
  126 + for (var i = 0; i < p.length; i++) {
  127 + var current = p[i];
  128 + if(current) {
  129 + var tiny = tinycolor(current);
  130 + var c = tiny.toHsl().l < 0.5 ? "sp-thumb-el sp-thumb-dark" : "sp-thumb-el sp-thumb-light";
  131 + c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : "";
  132 + var formattedString = tiny.toString(opts.preferredFormat || "rgb");
  133 + var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter();
  134 + html.push('<span title="' + formattedString + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';" /></span>');
  135 + } else {
  136 + var cls = 'sp-clear-display';
  137 + html.push($('<div />')
  138 + .append($('<span data-color="" style="background-color:transparent;" class="' + cls + '"></span>')
  139 + .attr('title', opts.noColorSelectedText)
  140 + )
  141 + .html()
  142 + );
  143 + }
  144 + }
  145 + return "<div class='sp-cf " + className + "'>" + html.join('') + "</div>";
  146 + }
  147 +
  148 + function hideAll() {
  149 + for (var i = 0; i < spectrums.length; i++) {
  150 + if (spectrums[i]) {
  151 + spectrums[i].hide();
  152 + }
  153 + }
  154 + }
  155 +
  156 + function instanceOptions(o, callbackContext) {
  157 + var opts = $.extend({}, defaultOpts, o);
  158 + opts.callbacks = {
  159 + 'move': bind(opts.move, callbackContext),
  160 + 'change': bind(opts.change, callbackContext),
  161 + 'show': bind(opts.show, callbackContext),
  162 + 'hide': bind(opts.hide, callbackContext),
  163 + 'beforeShow': bind(opts.beforeShow, callbackContext)
  164 + };
  165 +
  166 + return opts;
  167 + }
  168 +
  169 + function spectrum(element, o) {
  170 +
  171 + var opts = instanceOptions(o, element),
  172 + flat = opts.flat,
  173 + showSelectionPalette = opts.showSelectionPalette,
  174 + localStorageKey = opts.localStorageKey,
  175 + theme = opts.theme,
  176 + callbacks = opts.callbacks,
  177 + resize = throttle(reflow, 10),
  178 + visible = false,
  179 + dragWidth = 0,
  180 + dragHeight = 0,
  181 + dragHelperHeight = 0,
  182 + slideHeight = 0,
  183 + slideWidth = 0,
  184 + alphaWidth = 0,
  185 + alphaSlideHelperWidth = 0,
  186 + slideHelperHeight = 0,
  187 + currentHue = 0,
  188 + currentSaturation = 0,
  189 + currentValue = 0,
  190 + currentAlpha = 1,
  191 + palette = [],
  192 + paletteArray = [],
  193 + paletteLookup = {},
  194 + selectionPalette = opts.selectionPalette.slice(0),
  195 + maxSelectionSize = opts.maxSelectionSize,
  196 + draggingClass = "sp-dragging",
  197 + shiftMovementDirection = null;
  198 +
  199 + var doc = element.ownerDocument,
  200 + body = doc.body,
  201 + boundElement = $(element),
  202 + disabled = false,
  203 + container = $(markup, doc).addClass(theme),
  204 + pickerContainer = container.find(".sp-picker-container"),
  205 + dragger = container.find(".sp-color"),
  206 + dragHelper = container.find(".sp-dragger"),
  207 + slider = container.find(".sp-hue"),
  208 + slideHelper = container.find(".sp-slider"),
  209 + alphaSliderInner = container.find(".sp-alpha-inner"),
  210 + alphaSlider = container.find(".sp-alpha"),
  211 + alphaSlideHelper = container.find(".sp-alpha-handle"),
  212 + textInput = container.find(".sp-input"),
  213 + paletteContainer = container.find(".sp-palette"),
  214 + initialColorContainer = container.find(".sp-initial"),
  215 + cancelButton = container.find(".sp-cancel"),
  216 + clearButton = container.find(".sp-clear"),
  217 + chooseButton = container.find(".sp-choose"),
  218 + toggleButton = container.find(".sp-palette-toggle"),
  219 + isInput = boundElement.is("input"),
  220 + isInputTypeColor = isInput && inputTypeColorSupport && boundElement.attr("type") === "color",
  221 + shouldReplace = isInput && !flat,
  222 + replacer = (shouldReplace) ? $(replaceInput).addClass(theme).addClass(opts.className).addClass(opts.replacerClassName) : $([]),
  223 + offsetElement = (shouldReplace) ? replacer : boundElement,
  224 + previewElement = replacer.find(".sp-preview-inner"),
  225 + initialColor = opts.color || (isInput && boundElement.val()),
  226 + colorOnShow = false,
  227 + preferredFormat = opts.preferredFormat,
  228 + currentPreferredFormat = preferredFormat,
  229 + clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange,
  230 + isEmpty = !initialColor,
  231 + allowEmpty = opts.allowEmpty && !isInputTypeColor;
  232 +
  233 + function applyOptions() {
  234 +
  235 + if (opts.showPaletteOnly) {
  236 + opts.showPalette = true;
  237 + }
  238 +
  239 + toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
  240 +
  241 + if (opts.palette) {
  242 + palette = opts.palette.slice(0);
  243 + paletteArray = $.isArray(palette[0]) ? palette : [palette];
  244 + paletteLookup = {};
  245 + for (var i = 0; i < paletteArray.length; i++) {
  246 + for (var j = 0; j < paletteArray[i].length; j++) {
  247 + var rgb = tinycolor(paletteArray[i][j]).toRgbString();
  248 + paletteLookup[rgb] = true;
  249 + }
  250 + }
  251 + }
  252 +
  253 + container.toggleClass("sp-flat", flat);
  254 + container.toggleClass("sp-input-disabled", !opts.showInput);
  255 + container.toggleClass("sp-alpha-enabled", opts.showAlpha);
  256 + container.toggleClass("sp-clear-enabled", allowEmpty);
  257 + container.toggleClass("sp-buttons-disabled", !opts.showButtons);
  258 + container.toggleClass("sp-palette-buttons-disabled", !opts.togglePaletteOnly);
  259 + container.toggleClass("sp-palette-disabled", !opts.showPalette);
  260 + container.toggleClass("sp-palette-only", opts.showPaletteOnly);
  261 + container.toggleClass("sp-initial-disabled", !opts.showInitial);
  262 + container.addClass(opts.className).addClass(opts.containerClassName);
  263 +
  264 + reflow();
  265 + }
  266 +
  267 + function initialize() {
  268 +
  269 + if (IE) {
  270 + container.find("*:not(input)").attr("unselectable", "on");
  271 + }
  272 +
  273 + applyOptions();
  274 +
  275 + if (shouldReplace) {
  276 + boundElement.after(replacer).hide();
  277 + }
  278 +
  279 + if (!allowEmpty) {
  280 + clearButton.hide();
  281 + }
  282 +
  283 + if (flat) {
  284 + boundElement.after(container).hide();
  285 + }
  286 + else {
  287 +
  288 + var appendTo = opts.appendTo === "parent" ? boundElement.parent() : $(opts.appendTo);
  289 + if (appendTo.length !== 1) {
  290 + appendTo = $("body");
  291 + }
  292 +
  293 + appendTo.append(container);
  294 + }
  295 +
  296 + updateSelectionPaletteFromStorage();
  297 +
  298 + offsetElement.bind("click.spectrum touchstart.spectrum", function (e) {
  299 + if (!disabled) {
  300 + toggle();
  301 + }
  302 +
  303 + e.stopPropagation();
  304 +
  305 + if (!$(e.target).is("input")) {
  306 + e.preventDefault();
  307 + }
  308 + });
  309 +
  310 + if(boundElement.is(":disabled") || (opts.disabled === true)) {
  311 + disable();
  312 + }
  313 +
  314 + // Prevent clicks from bubbling up to document. This would cause it to be hidden.
  315 + container.click(stopPropagation);
  316 +
  317 + // Handle user typed input
  318 + textInput.change(setFromTextInput);
  319 + textInput.bind("paste", function () {
  320 + setTimeout(setFromTextInput, 1);
  321 + });
  322 + textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
  323 +
  324 + cancelButton.text(opts.cancelText);
  325 + cancelButton.bind("click.spectrum", function (e) {
  326 + e.stopPropagation();
  327 + e.preventDefault();
  328 + hide("cancel");
  329 + });
  330 +
  331 + clearButton.attr("title", opts.clearText);
  332 + clearButton.bind("click.spectrum", function (e) {
  333 + e.stopPropagation();
  334 + e.preventDefault();
  335 + isEmpty = true;
  336 + move();
  337 +
  338 + if(flat) {
  339 + //for the flat style, this is a change event
  340 + updateOriginalInput(true);
  341 + }
  342 + });
  343 +
  344 + chooseButton.text(opts.chooseText);
  345 + chooseButton.bind("click.spectrum", function (e) {
  346 + e.stopPropagation();
  347 + e.preventDefault();
  348 +
  349 + if (isValid()) {
  350 + updateOriginalInput(true);
  351 + hide();
  352 + }
  353 + });
  354 +
  355 + toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
  356 + toggleButton.bind("click.spectrum", function (e) {
  357 + e.stopPropagation();
  358 + e.preventDefault();
  359 +
  360 + opts.showPaletteOnly = !opts.showPaletteOnly;
  361 +
  362 + // To make sure the Picker area is drawn on the right, next to the
  363 + // Palette area (and not below the palette), first move the Palette
  364 + // to the left to make space for the picker, plus 5px extra.
  365 + // The 'applyOptions' function puts the whole container back into place
  366 + // and takes care of the button-text and the sp-palette-only CSS class.
  367 + if (!opts.showPaletteOnly && !flat) {
  368 + container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5));
  369 + }
  370 + applyOptions();
  371 + });
  372 +
  373 + draggable(alphaSlider, function (dragX, dragY, e) {
  374 + currentAlpha = (dragX / alphaWidth);
  375 + isEmpty = false;
  376 + if (e.shiftKey) {
  377 + currentAlpha = Math.round(currentAlpha * 10) / 10;
  378 + }
  379 +
  380 + move();
  381 + }, dragStart, dragStop);
  382 +
  383 + draggable(slider, function (dragX, dragY) {
  384 + currentHue = parseFloat(dragY / slideHeight);
  385 + isEmpty = false;
  386 + if (!opts.showAlpha) {
  387 + currentAlpha = 1;
  388 + }
  389 + move();
  390 + }, dragStart, dragStop);
  391 +
  392 + draggable(dragger, function (dragX, dragY, e) {
  393 +
  394 + // shift+drag should snap the movement to either the x or y axis.
  395 + if (!e.shiftKey) {
  396 + shiftMovementDirection = null;
  397 + }
  398 + else if (!shiftMovementDirection) {
  399 + var oldDragX = currentSaturation * dragWidth;
  400 + var oldDragY = dragHeight - (currentValue * dragHeight);
  401 + var furtherFromX = Math.abs(dragX - oldDragX) > Math.abs(dragY - oldDragY);
  402 +
  403 + shiftMovementDirection = furtherFromX ? "x" : "y";
  404 + }
  405 +
  406 + var setSaturation = !shiftMovementDirection || shiftMovementDirection === "x";
  407 + var setValue = !shiftMovementDirection || shiftMovementDirection === "y";
  408 +
  409 + if (setSaturation) {
  410 + currentSaturation = parseFloat(dragX / dragWidth);
  411 + }
  412 + if (setValue) {
  413 + currentValue = parseFloat((dragHeight - dragY) / dragHeight);
  414 + }
  415 +
  416 + isEmpty = false;
  417 + if (!opts.showAlpha) {
  418 + currentAlpha = 1;
  419 + }
  420 +
  421 + move();
  422 +
  423 + }, dragStart, dragStop);
  424 +
  425 + if (!!initialColor) {
  426 + set(initialColor);
  427 +
  428 + // In case color was black - update the preview UI and set the format
  429 + // since the set function will not run (default color is black).
  430 + updateUI();
  431 + currentPreferredFormat = preferredFormat || tinycolor(initialColor).format;
  432 +
  433 + addColorToSelectionPalette(initialColor);
  434 + }
  435 + else {
  436 + updateUI();
  437 + }
  438 +
  439 + if (flat) {
  440 + show();
  441 + }
  442 +
  443 + function paletteElementClick(e) {
  444 + if (e.data && e.data.ignore) {
  445 + set($(e.target).closest(".sp-thumb-el").data("color"));
  446 + move();
  447 + }
  448 + else {
  449 + set($(e.target).closest(".sp-thumb-el").data("color"));
  450 + move();
  451 + updateOriginalInput(true);
  452 + if (opts.hideAfterPaletteSelect) {
  453 + hide();
  454 + }
  455 + }
  456 +
  457 + return false;
  458 + }
  459 +
  460 + var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
  461 + paletteContainer.delegate(".sp-thumb-el", paletteEvent, paletteElementClick);
  462 + initialColorContainer.delegate(".sp-thumb-el:nth-child(1)", paletteEvent, { ignore: true }, paletteElementClick);
  463 + }
  464 +
  465 + function updateSelectionPaletteFromStorage() {
  466 +
  467 + if (localStorageKey && window.localStorage) {
  468 +
  469 + // Migrate old palettes over to new format. May want to remove this eventually.
  470 + try {
  471 + var oldPalette = window.localStorage[localStorageKey].split(",#");
  472 + if (oldPalette.length > 1) {
  473 + delete window.localStorage[localStorageKey];
  474 + $.each(oldPalette, function(i, c) {
  475 + addColorToSelectionPalette(c);
  476 + });
  477 + }
  478 + }
  479 + catch(e) { }
  480 +
  481 + try {
  482 + selectionPalette = window.localStorage[localStorageKey].split(";");
  483 + }
  484 + catch (e) { }
  485 + }
  486 + }
  487 +
  488 + function addColorToSelectionPalette(color) {
  489 + if (showSelectionPalette) {
  490 + var rgb = tinycolor(color).toRgbString();
  491 + if (!paletteLookup[rgb] && $.inArray(rgb, selectionPalette) === -1) {
  492 + selectionPalette.push(rgb);
  493 + while(selectionPalette.length > maxSelectionSize) {
  494 + selectionPalette.shift();
  495 + }
  496 + }
  497 +
  498 + if (localStorageKey && window.localStorage) {
  499 + try {
  500 + window.localStorage[localStorageKey] = selectionPalette.join(";");
  501 + }
  502 + catch(e) { }
  503 + }
  504 + }
  505 + }
  506 +
  507 + function getUniqueSelectionPalette() {
  508 + var unique = [];
  509 + if (opts.showPalette) {
  510 + for (var i = 0; i < selectionPalette.length; i++) {
  511 + var rgb = tinycolor(selectionPalette[i]).toRgbString();
  512 +
  513 + if (!paletteLookup[rgb]) {
  514 + unique.push(selectionPalette[i]);
  515 + }
  516 + }
  517 + }
  518 +
  519 + return unique.reverse().slice(0, opts.maxSelectionSize);
  520 + }
  521 +
  522 + function drawPalette() {
  523 +
  524 + var currentColor = get();
  525 +
  526 + var html = $.map(paletteArray, function (palette, i) {
  527 + return paletteTemplate(palette, currentColor, "sp-palette-row sp-palette-row-" + i, opts);
  528 + });
  529 +
  530 + updateSelectionPaletteFromStorage();
  531 +
  532 + if (selectionPalette) {
  533 + html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, "sp-palette-row sp-palette-row-selection", opts));
  534 + }
  535 +
  536 + paletteContainer.html(html.join(""));
  537 + }
  538 +
  539 + function drawInitial() {
  540 + if (opts.showInitial) {
  541 + var initial = colorOnShow;
  542 + var current = get();
  543 + initialColorContainer.html(paletteTemplate([initial, current], current, "sp-palette-row-initial", opts));
  544 + }
  545 + }
  546 +
  547 + function dragStart() {
  548 + if (dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0) {
  549 + reflow();
  550 + }
  551 + container.addClass(draggingClass);
  552 + shiftMovementDirection = null;
  553 + boundElement.trigger('dragstart.spectrum', [ get() ]);
  554 + }
  555 +
  556 + function dragStop() {
  557 + container.removeClass(draggingClass);
  558 + boundElement.trigger('dragstop.spectrum', [ get() ]);
  559 + }
  560 +
  561 + function setFromTextInput() {
  562 +
  563 + var value = textInput.val();
  564 +
  565 + if ((value === null || value === "") && allowEmpty) {
  566 + set(null);
  567 + updateOriginalInput(true);
  568 + }
  569 + else {
  570 + var tiny = tinycolor(value);
  571 + if (tiny.isValid()) {
  572 + set(tiny);
  573 + updateOriginalInput(true);
  574 + }
  575 + else {
  576 + textInput.addClass("sp-validation-error");
  577 + }
  578 + }
  579 + }
  580 +
  581 + function toggle() {
  582 + if (visible) {
  583 + hide();
  584 + }
  585 + else {
  586 + show();
  587 + }
  588 + }
  589 +
  590 + function show() {
  591 + var event = $.Event('beforeShow.spectrum');
  592 +
  593 + if (visible) {
  594 + reflow();
  595 + return;
  596 + }
  597 +
  598 + boundElement.trigger(event, [ get() ]);
  599 +
  600 + if (callbacks.beforeShow(get()) === false || event.isDefaultPrevented()) {
  601 + return;
  602 + }
  603 +
  604 + hideAll();
  605 + visible = true;
  606 +
  607 + $(doc).bind("click.spectrum", hide);
  608 + $(window).bind("resize.spectrum", resize);
  609 + replacer.addClass("sp-active");
  610 + container.removeClass("sp-hidden");
  611 +
  612 + reflow();
  613 + updateUI();
  614 +
  615 + colorOnShow = get();
  616 +
  617 + drawInitial();
  618 + callbacks.show(colorOnShow);
  619 + boundElement.trigger('show.spectrum', [ colorOnShow ]);
  620 + }
  621 +
  622 + function hide(e) {
  623 +
  624 + // Return on right click
  625 + if (e && e.type == "click" && e.button == 2) { return; }
  626 +
  627 + // Return if hiding is unnecessary
  628 + if (!visible || flat) { return; }
  629 + visible = false;
  630 +
  631 + $(doc).unbind("click.spectrum", hide);
  632 + $(window).unbind("resize.spectrum", resize);
  633 +
  634 + replacer.removeClass("sp-active");
  635 + container.addClass("sp-hidden");
  636 +
  637 + var colorHasChanged = !tinycolor.equals(get(), colorOnShow);
  638 +
  639 + if (colorHasChanged) {
  640 + if (clickoutFiresChange && e !== "cancel") {
  641 + updateOriginalInput(true);
  642 + }
  643 + else {
  644 + revert();
  645 + }
  646 + }
  647 +
  648 + callbacks.hide(get());
  649 + boundElement.trigger('hide.spectrum', [ get() ]);
  650 + }
  651 +
  652 + function revert() {
  653 + set(colorOnShow, true);
  654 + }
  655 +
  656 + function set(color, ignoreFormatChange) {
  657 + if (tinycolor.equals(color, get())) {
  658 + // Update UI just in case a validation error needs
  659 + // to be cleared.
  660 + updateUI();
  661 + return;
  662 + }
  663 +
  664 + var newColor, newHsv;
  665 + if (!color && allowEmpty) {
  666 + isEmpty = true;
  667 + } else {
  668 + isEmpty = false;
  669 + newColor = tinycolor(color);
  670 + newHsv = newColor.toHsv();
  671 +
  672 + currentHue = (newHsv.h % 360) / 360;
  673 + currentSaturation = newHsv.s;
  674 + currentValue = newHsv.v;
  675 + currentAlpha = newHsv.a;
  676 + }
  677 + updateUI();
  678 +
  679 + if (newColor && newColor.isValid() && !ignoreFormatChange) {
  680 + currentPreferredFormat = preferredFormat || newColor.getFormat();
  681 + }
  682 + }
  683 +
  684 + function get(opts) {
  685 + opts = opts || { };
  686 +
  687 + if (allowEmpty && isEmpty) {
  688 + return null;
  689 + }
  690 +
  691 + return tinycolor.fromRatio({
  692 + h: currentHue,
  693 + s: currentSaturation,
  694 + v: currentValue,
  695 + a: Math.round(currentAlpha * 100) / 100
  696 + }, { format: opts.format || currentPreferredFormat });
  697 + }
  698 +
  699 + function isValid() {
  700 + return !textInput.hasClass("sp-validation-error");
  701 + }
  702 +
  703 + function move() {
  704 + updateUI();
  705 +
  706 + callbacks.move(get());
  707 + boundElement.trigger('move.spectrum', [ get() ]);
  708 + }
  709 +
  710 + function updateUI() {
  711 +
  712 + textInput.removeClass("sp-validation-error");
  713 +
  714 + updateHelperLocations();
  715 +
  716 + // Update dragger background color (gradients take care of saturation and value).
  717 + var flatColor = tinycolor.fromRatio({ h: currentHue, s: 1, v: 1 });
  718 + dragger.css("background-color", flatColor.toHexString());
  719 +
  720 + // Get a format that alpha will be included in (hex and names ignore alpha)
  721 + var format = currentPreferredFormat;
  722 + if (currentAlpha < 1 && !(currentAlpha === 0 && format === "name")) {
  723 + if (format === "hex" || format === "hex3" || format === "hex6" || format === "name") {
  724 + format = "rgb";
  725 + }
  726 + }
  727 +
  728 + var realColor = get({ format: format }),
  729 + displayColor = '';
  730 +
  731 + //reset background info for preview element
  732 + previewElement.removeClass("sp-clear-display");
  733 + previewElement.css('background-color', 'transparent');
  734 +
  735 + if (!realColor && allowEmpty) {
  736 + // Update the replaced elements background with icon indicating no color selection
  737 + previewElement.addClass("sp-clear-display");
  738 + }
  739 + else {
  740 + var realHex = realColor.toHexString(),
  741 + realRgb = realColor.toRgbString();
  742 +
  743 + // Update the replaced elements background color (with actual selected color)
  744 + if (rgbaSupport || realColor.alpha === 1) {
  745 + previewElement.css("background-color", realRgb);
  746 + }
  747 + else {
  748 + previewElement.css("background-color", "transparent");
  749 + previewElement.css("filter", realColor.toFilter());
  750 + }
  751 +
  752 + if (opts.showAlpha) {
  753 + var rgb = realColor.toRgb();
  754 + rgb.a = 0;
  755 + var realAlpha = tinycolor(rgb).toRgbString();
  756 + var gradient = "linear-gradient(left, " + realAlpha + ", " + realHex + ")";
  757 +
  758 + if (IE) {
  759 + alphaSliderInner.css("filter", tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));
  760 + }
  761 + else {
  762 + alphaSliderInner.css("background", "-webkit-" + gradient);
  763 + alphaSliderInner.css("background", "-moz-" + gradient);
  764 + alphaSliderInner.css("background", "-ms-" + gradient);
  765 + // Use current syntax gradient on unprefixed property.
  766 + alphaSliderInner.css("background",
  767 + "linear-gradient(to right, " + realAlpha + ", " + realHex + ")");
  768 + }
  769 + }
  770 +
  771 + displayColor = realColor.toString(format);
  772 + }
  773 +
  774 + // Update the text entry input as it changes happen
  775 + if (opts.showInput) {
  776 + textInput.val(displayColor);
  777 + }
  778 +
  779 + if (opts.showPalette) {
  780 + drawPalette();
  781 + }
  782 +
  783 + drawInitial();
  784 + }
  785 +
  786 + function updateHelperLocations() {
  787 + var s = currentSaturation;
  788 + var v = currentValue;
  789 +
  790 + if(allowEmpty && isEmpty) {
  791 + //if selected color is empty, hide the helpers
  792 + alphaSlideHelper.hide();
  793 + slideHelper.hide();
  794 + dragHelper.hide();
  795 + }
  796 + else {
  797 + //make sure helpers are visible
  798 + alphaSlideHelper.show();
  799 + slideHelper.show();
  800 + dragHelper.show();
  801 +
  802 + // Where to show the little circle in that displays your current selected color
  803 + var dragX = s * dragWidth;
  804 + var dragY = dragHeight - (v * dragHeight);
  805 + dragX = Math.max(
  806 + -dragHelperHeight,
  807 + Math.min(dragWidth - dragHelperHeight, dragX - dragHelperHeight)
  808 + );
  809 + dragY = Math.max(
  810 + -dragHelperHeight,
  811 + Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight)
  812 + );
  813 + dragHelper.css({
  814 + "top": dragY + "px",
  815 + "left": dragX + "px"
  816 + });
  817 +
  818 + var alphaX = currentAlpha * alphaWidth;
  819 + alphaSlideHelper.css({
  820 + "left": (alphaX - (alphaSlideHelperWidth / 2)) + "px"
  821 + });
  822 +
  823 + // Where to show the bar that displays your current selected hue
  824 + var slideY = (currentHue) * slideHeight;
  825 + slideHelper.css({
  826 + "top": (slideY - slideHelperHeight) + "px"
  827 + });
  828 + }
  829 + }
  830 +
  831 + function updateOriginalInput(fireCallback) {
  832 + var color = get(),
  833 + displayColor = '',
  834 + hasChanged = !tinycolor.equals(color, colorOnShow);
  835 +
  836 + if (color) {
  837 + displayColor = color.toString(currentPreferredFormat);
  838 + // Update the selection palette with the current color
  839 + addColorToSelectionPalette(color);
  840 + }
  841 +
  842 + if (isInput) {
  843 + boundElement.val(displayColor);
  844 + }
  845 +
  846 + colorOnShow = color;
  847 +
  848 + if (fireCallback && hasChanged) {
  849 + callbacks.change(color);
  850 + boundElement.trigger('change', [ color ]);
  851 + }
  852 + }
  853 +
  854 + function reflow() {
  855 + dragWidth = dragger.width();
  856 + dragHeight = dragger.height();
  857 + dragHelperHeight = dragHelper.height();
  858 + slideWidth = slider.width();
  859 + slideHeight = slider.height();
  860 + slideHelperHeight = slideHelper.height();
  861 + alphaWidth = alphaSlider.width();
  862 + alphaSlideHelperWidth = alphaSlideHelper.width();
  863 +
  864 + if (!flat) {
  865 + container.css("position", "absolute");
  866 + container.offset(getOffset(container, offsetElement));
  867 + }
  868 +
  869 + updateHelperLocations();
  870 +
  871 + if (opts.showPalette) {
  872 + drawPalette();
  873 + }
  874 +
  875 + boundElement.trigger('reflow.spectrum');
  876 + }
  877 +
  878 + function destroy() {
  879 + boundElement.show();
  880 + offsetElement.unbind("click.spectrum touchstart.spectrum");
  881 + container.remove();
  882 + replacer.remove();
  883 + spectrums[spect.id] = null;
  884 + }
  885 +
  886 + function option(optionName, optionValue) {
  887 + if (optionName === undefined) {
  888 + return $.extend({}, opts);
  889 + }
  890 + if (optionValue === undefined) {
  891 + return opts[optionName];
  892 + }
  893 +
  894 + opts[optionName] = optionValue;
  895 + applyOptions();
  896 + }
  897 +
  898 + function enable() {
  899 + disabled = false;
  900 + boundElement.attr("disabled", false);
  901 + offsetElement.removeClass("sp-disabled");
  902 + }
  903 +
  904 + function disable() {
  905 + hide();
  906 + disabled = true;
  907 + boundElement.attr("disabled", true);
  908 + offsetElement.addClass("sp-disabled");
  909 + }
  910 +
  911 + initialize();
  912 +
  913 + var spect = {
  914 + show: show,
  915 + hide: hide,
  916 + toggle: toggle,
  917 + reflow: reflow,
  918 + option: option,
  919 + enable: enable,
  920 + disable: disable,
  921 + set: function (c) {
  922 + set(c);
  923 + updateOriginalInput();
  924 + },
  925 + get: get,
  926 + destroy: destroy,
  927 + container: container
  928 + };
  929 +
  930 + spect.id = spectrums.push(spect) - 1;
  931 +
  932 + return spect;
  933 + }
  934 +
  935 + /**
  936 + * checkOffset - get the offset below/above and left/right element depending on screen position
  937 + * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js
  938 + */
  939 + function getOffset(picker, input) {
  940 + var extraY = 0;
  941 + var dpWidth = picker.outerWidth();
  942 + var dpHeight = picker.outerHeight();
  943 + var inputHeight = input.outerHeight();
  944 + var doc = picker[0].ownerDocument;
  945 + var docElem = doc.documentElement;
  946 + var viewWidth = docElem.clientWidth + $(doc).scrollLeft();
  947 + var viewHeight = docElem.clientHeight + $(doc).scrollTop();
  948 + var offset = input.offset();
  949 + offset.top += inputHeight;
  950 +
  951 + offset.left -=
  952 + Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
  953 + Math.abs(offset.left + dpWidth - viewWidth) : 0);
  954 +
  955 + offset.top -=
  956 + Math.min(offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
  957 + Math.abs(dpHeight + inputHeight - extraY) : extraY));
  958 +
  959 + return offset;
  960 + }
  961 +
  962 + /**
  963 + * noop - do nothing
  964 + */
  965 + function noop() {
  966 +
  967 + }
  968 +
  969 + /**
  970 + * stopPropagation - makes the code only doing this a little easier to read in line
  971 + */
  972 + function stopPropagation(e) {
  973 + e.stopPropagation();
  974 + }
  975 +
  976 + /**
  977 + * Create a function bound to a given object
  978 + * Thanks to underscore.js
  979 + */
  980 + function bind(func, obj) {
  981 + var slice = Array.prototype.slice;
  982 + var args = slice.call(arguments, 2);
  983 + return function () {
  984 + return func.apply(obj, args.concat(slice.call(arguments)));
  985 + };
  986 + }
  987 +
  988 + /**
  989 + * Lightweight drag helper. Handles containment within the element, so that
  990 + * when dragging, the x is within [0,element.width] and y is within [0,element.height]
  991 + */
  992 + function draggable(element, onmove, onstart, onstop) {
  993 + onmove = onmove || function () { };
  994 + onstart = onstart || function () { };
  995 + onstop = onstop || function () { };
  996 + var doc = element.ownerDocument || document;
  997 + var dragging = false;
  998 + var offset = {};
  999 + var maxHeight = 0;
  1000 + var maxWidth = 0;
  1001 + var hasTouch = ('ontouchstart' in window);
  1002 +
  1003 + var duringDragEvents = {};
  1004 + duringDragEvents["selectstart"] = prevent;
  1005 + duringDragEvents["dragstart"] = prevent;
  1006 + duringDragEvents["touchmove mousemove"] = move;
  1007 + duringDragEvents["touchend mouseup"] = stop;
  1008 +
  1009 + function prevent(e) {
  1010 + if (e.stopPropagation) {
  1011 + e.stopPropagation();
  1012 + }
  1013 + if (e.preventDefault) {
  1014 + e.preventDefault();
  1015 + }
  1016 + e.returnValue = false;
  1017 + }
  1018 +
  1019 + function move(e) {
  1020 + if (dragging) {
  1021 + // Mouseup happened outside of window
  1022 + if (IE && document.documentMode < 9 && !e.button) {
  1023 + return stop();
  1024 + }
  1025 +
  1026 + var touches = e.originalEvent.touches;
  1027 + var pageX = touches ? touches[0].pageX : e.pageX;
  1028 + var pageY = touches ? touches[0].pageY : e.pageY;
  1029 +
  1030 + var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
  1031 + var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));
  1032 +
  1033 + if (hasTouch) {
  1034 + // Stop scrolling in iOS
  1035 + prevent(e);
  1036 + }
  1037 +
  1038 + onmove.apply(element, [dragX, dragY, e]);
  1039 + }
  1040 + }
  1041 +
  1042 + function start(e) {
  1043 + var rightclick = (e.which) ? (e.which == 3) : (e.button == 2);
  1044 + var touches = e.originalEvent.touches;
  1045 +
  1046 + if (!rightclick && !dragging) {
  1047 + if (onstart.apply(element, arguments) !== false) {
  1048 + dragging = true;
  1049 + maxHeight = $(element).height();
  1050 + maxWidth = $(element).width();
  1051 + offset = $(element).offset();
  1052 +
  1053 + $(doc).bind(duringDragEvents);
  1054 + $(doc.body).addClass("sp-dragging");
  1055 +
  1056 + if (!hasTouch) {
  1057 + move(e);
  1058 + }
  1059 +
  1060 + prevent(e);
  1061 + }
  1062 + }
  1063 + }
  1064 +
  1065 + function stop() {
  1066 + if (dragging) {
  1067 + $(doc).unbind(duringDragEvents);
  1068 + $(doc.body).removeClass("sp-dragging");
  1069 + onstop.apply(element, arguments);
  1070 + }
  1071 + dragging = false;
  1072 + }
  1073 +
  1074 + $(element).bind("touchstart mousedown", start);
  1075 + }
  1076 +
  1077 + function throttle(func, wait, debounce) {
  1078 + var timeout;
  1079 + return function () {
  1080 + var context = this, args = arguments;
  1081 + var throttler = function () {
  1082 + timeout = null;
  1083 + func.apply(context, args);
  1084 + };
  1085 + if (debounce) clearTimeout(timeout);
  1086 + if (debounce || !timeout) timeout = setTimeout(throttler, wait);
  1087 + };
  1088 + }
  1089 +
  1090 + /**
  1091 + * Define a jQuery plugin
  1092 + */
  1093 + var dataID = "spectrum.id";
  1094 + $.fn.spectrum = function (opts, extra) {
  1095 +
  1096 + if (typeof opts == "string") {
  1097 +
  1098 + var returnValue = this;
  1099 + var args = Array.prototype.slice.call( arguments, 1 );
  1100 +
  1101 + this.each(function () {
  1102 + var spect = spectrums[$(this).data(dataID)];
  1103 + if (spect) {
  1104 + var method = spect[opts];
  1105 + if (!method) {
  1106 + throw new Error( "Spectrum: no such method: '" + opts + "'" );
  1107 + }
  1108 +
  1109 + if (opts == "get") {
  1110 + returnValue = spect.get();
  1111 + }
  1112 + else if (opts == "container") {
  1113 + returnValue = spect.container;
  1114 + }
  1115 + else if (opts == "option") {
  1116 + returnValue = spect.option.apply(spect, args);
  1117 + }
  1118 + else if (opts == "destroy") {
  1119 + spect.destroy();
  1120 + $(this).removeData(dataID);
  1121 + }
  1122 + else {
  1123 + method.apply(spect, args);
  1124 + }
  1125 + }
  1126 + });
  1127 +
  1128 + return returnValue;
  1129 + }
  1130 +
  1131 + // Initializing a new instance of spectrum
  1132 + return this.spectrum("destroy").each(function () {
  1133 + var options = $.extend({}, opts, $(this).data());
  1134 + var spect = spectrum(this, options);
  1135 + $(this).data(dataID, spect.id);
  1136 + });
  1137 + };
  1138 +
  1139 + $.fn.spectrum.load = true;
  1140 + $.fn.spectrum.loadOpts = {};
  1141 + $.fn.spectrum.draggable = draggable;
  1142 + $.fn.spectrum.defaults = defaultOpts;
  1143 +
  1144 + $.spectrum = { };
  1145 + $.spectrum.localization = { };
  1146 + $.spectrum.palettes = { };
  1147 +
  1148 + $.fn.spectrum.processNativeColorInputs = function () {
  1149 + if (!inputTypeColorSupport) {
  1150 + $("input[type=color]").spectrum({
  1151 + preferredFormat: "hex6"
  1152 + });
  1153 + }
  1154 + };
  1155 +
  1156 + // TinyColor v1.0.0
  1157 + // https://github.com/bgrins/TinyColor
  1158 + // Brian Grinstead, MIT License
  1159 +
  1160 + (function() {
  1161 +
  1162 + var trimLeft = /^[\s,#]+/,
  1163 + trimRight = /\s+$/,
  1164 + tinyCounter = 0,
  1165 + math = Math,
  1166 + mathRound = math.round,
  1167 + mathMin = math.min,
  1168 + mathMax = math.max,
  1169 + mathRandom = math.random;
  1170 +
  1171 + var tinycolor = function tinycolor (color, opts) {
  1172 +
  1173 + color = (color) ? color : '';
  1174 + opts = opts || { };
  1175 +
  1176 + // If input is already a tinycolor, return itself
  1177 + if (color instanceof tinycolor) {
  1178 + return color;
  1179 + }
  1180 + // If we are called as a function, call using new instead
  1181 + if (!(this instanceof tinycolor)) {
  1182 + return new tinycolor(color, opts);
  1183 + }
  1184 +
  1185 + var rgb = inputToRGB(color);
  1186 + this._r = rgb.r,
  1187 + this._g = rgb.g,
  1188 + this._b = rgb.b,
  1189 + this._a = rgb.a,
  1190 + this._roundA = mathRound(100*this._a) / 100,
  1191 + this._format = opts.format || rgb.format;
  1192 + this._gradientType = opts.gradientType;
  1193 +
  1194 + // Don't let the range of [0,255] come back in [0,1].
  1195 + // Potentially lose a little bit of precision here, but will fix issues where
  1196 + // .5 gets interpreted as half of the total, instead of half of 1
  1197 + // If it was supposed to be 128, this was already taken care of by `inputToRgb`
  1198 + if (this._r < 1) { this._r = mathRound(this._r); }
  1199 + if (this._g < 1) { this._g = mathRound(this._g); }
  1200 + if (this._b < 1) { this._b = mathRound(this._b); }
  1201 +
  1202 + this._ok = rgb.ok;
  1203 + this._tc_id = tinyCounter++;
  1204 + };
  1205 +
  1206 + tinycolor.prototype = {
  1207 + isDark: function() {
  1208 + return this.getBrightness() < 128;
  1209 + },
  1210 + isLight: function() {
  1211 + return !this.isDark();
  1212 + },
  1213 + isValid: function() {
  1214 + return this._ok;
  1215 + },
  1216 + getFormat: function() {
  1217 + return this._format;
  1218 + },
  1219 + getAlpha: function() {
  1220 + return this._a;
  1221 + },
  1222 + getBrightness: function() {
  1223 + var rgb = this.toRgb();
  1224 + return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
  1225 + },
  1226 + setAlpha: function(value) {
  1227 + this._a = boundAlpha(value);
  1228 + this._roundA = mathRound(100*this._a) / 100;
  1229 + return this;
  1230 + },
  1231 + toHsv: function() {
  1232 + var hsv = rgbToHsv(this._r, this._g, this._b);
  1233 + return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
  1234 + },
  1235 + toHsvString: function() {
  1236 + var hsv = rgbToHsv(this._r, this._g, this._b);
  1237 + var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
  1238 + return (this._a == 1) ?
  1239 + "hsv(" + h + ", " + s + "%, " + v + "%)" :
  1240 + "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
  1241 + },
  1242 + toHsl: function() {
  1243 + var hsl = rgbToHsl(this._r, this._g, this._b);
  1244 + return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
  1245 + },
  1246 + toHslString: function() {
  1247 + var hsl = rgbToHsl(this._r, this._g, this._b);
  1248 + var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
  1249 + return (this._a == 1) ?
  1250 + "hsl(" + h + ", " + s + "%, " + l + "%)" :
  1251 + "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
  1252 + },
  1253 + toHex: function(allow3Char) {
  1254 + return rgbToHex(this._r, this._g, this._b, allow3Char);
  1255 + },
  1256 + toHexString: function(allow3Char) {
  1257 + return '#' + this.toHex(allow3Char);
  1258 + },
  1259 + toHex8: function() {
  1260 + return rgbaToHex(this._r, this._g, this._b, this._a);
  1261 + },
  1262 + toHex8String: function() {
  1263 + return '#' + this.toHex8();
  1264 + },
  1265 + toRgb: function() {
  1266 + return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
  1267 + },
  1268 + toRgbString: function() {
  1269 + return (this._a == 1) ?
  1270 + "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
  1271 + "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
  1272 + },
  1273 + toPercentageRgb: function() {
  1274 + return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
  1275 + },
  1276 + toPercentageRgbString: function() {
  1277 + return (this._a == 1) ?
  1278 + "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
  1279 + "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
  1280 + },
  1281 + toName: function() {
  1282 + if (this._a === 0) {
  1283 + return "transparent";
  1284 + }
  1285 +
  1286 + if (this._a < 1) {
  1287 + return false;
  1288 + }
  1289 +
  1290 + return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
  1291 + },
  1292 + toFilter: function(secondColor) {
  1293 + var hex8String = '#' + rgbaToHex(this._r, this._g, this._b, this._a);
  1294 + var secondHex8String = hex8String;
  1295 + var gradientType = this._gradientType ? "GradientType = 1, " : "";
  1296 +
  1297 + if (secondColor) {
  1298 + var s = tinycolor(secondColor);
  1299 + secondHex8String = s.toHex8String();
  1300 + }
  1301 +
  1302 + return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
  1303 + },
  1304 + toString: function(format) {
  1305 + var formatSet = !!format;
  1306 + format = format || this._format;
  1307 +
  1308 + var formattedString = false;
  1309 + var hasAlpha = this._a < 1 && this._a >= 0;
  1310 + var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");
  1311 +
  1312 + if (needsAlphaFormat) {
  1313 + // Special case for "transparent", all other non-alpha formats
  1314 + // will return rgba when there is transparency.
  1315 + if (format === "name" && this._a === 0) {
  1316 + return this.toName();
  1317 + }
  1318 + return this.toRgbString();
  1319 + }
  1320 + if (format === "rgb") {
  1321 + formattedString = this.toRgbString();
  1322 + }
  1323 + if (format === "prgb") {
  1324 + formattedString = this.toPercentageRgbString();
  1325 + }
  1326 + if (format === "hex" || format === "hex6") {
  1327 + formattedString = this.toHexString();
  1328 + }
  1329 + if (format === "hex3") {
  1330 + formattedString = this.toHexString(true);
  1331 + }
  1332 + if (format === "hex8") {
  1333 + formattedString = this.toHex8String();
  1334 + }
  1335 + if (format === "name") {
  1336 + formattedString = this.toName();
  1337 + }
  1338 + if (format === "hsl") {
  1339 + formattedString = this.toHslString();
  1340 + }
  1341 + if (format === "hsv") {
  1342 + formattedString = this.toHsvString();
  1343 + }
  1344 +
  1345 + return formattedString || this.toHexString();
  1346 + },
  1347 +
  1348 + _applyModification: function(fn, args) {
  1349 + var color = fn.apply(null, [this].concat([].slice.call(args)));
  1350 + this._r = color._r;
  1351 + this._g = color._g;
  1352 + this._b = color._b;
  1353 + this.setAlpha(color._a);
  1354 + return this;
  1355 + },
  1356 + lighten: function() {
  1357 + return this._applyModification(lighten, arguments);
  1358 + },
  1359 + brighten: function() {
  1360 + return this._applyModification(brighten, arguments);
  1361 + },
  1362 + darken: function() {
  1363 + return this._applyModification(darken, arguments);
  1364 + },
  1365 + desaturate: function() {
  1366 + return this._applyModification(desaturate, arguments);
  1367 + },
  1368 + saturate: function() {
  1369 + return this._applyModification(saturate, arguments);
  1370 + },
  1371 + greyscale: function() {
  1372 + return this._applyModification(greyscale, arguments);
  1373 + },
  1374 + spin: function() {
  1375 + return this._applyModification(spin, arguments);
  1376 + },
  1377 +
  1378 + _applyCombination: function(fn, args) {
  1379 + return fn.apply(null, [this].concat([].slice.call(args)));
  1380 + },
  1381 + analogous: function() {
  1382 + return this._applyCombination(analogous, arguments);
  1383 + },
  1384 + complement: function() {
  1385 + return this._applyCombination(complement, arguments);
  1386 + },
  1387 + monochromatic: function() {
  1388 + return this._applyCombination(monochromatic, arguments);
  1389 + },
  1390 + splitcomplement: function() {
  1391 + return this._applyCombination(splitcomplement, arguments);
  1392 + },
  1393 + triad: function() {
  1394 + return this._applyCombination(triad, arguments);
  1395 + },
  1396 + tetrad: function() {
  1397 + return this._applyCombination(tetrad, arguments);
  1398 + }
  1399 + };
  1400 +
  1401 + // If input is an object, force 1 into "1.0" to handle ratios properly
  1402 + // String input requires "1.0" as input, so 1 will be treated as 1
  1403 + tinycolor.fromRatio = function(color, opts) {
  1404 + if (typeof color == "object") {
  1405 + var newColor = {};
  1406 + for (var i in color) {
  1407 + if (color.hasOwnProperty(i)) {
  1408 + if (i === "a") {
  1409 + newColor[i] = color[i];
  1410 + }
  1411 + else {
  1412 + newColor[i] = convertToPercentage(color[i]);
  1413 + }
  1414 + }
  1415 + }
  1416 + color = newColor;
  1417 + }
  1418 +
  1419 + return tinycolor(color, opts);
  1420 + };
  1421 +
  1422 + // Given a string or object, convert that input to RGB
  1423 + // Possible string inputs:
  1424 + //
  1425 + // "red"
  1426 + // "#f00" or "f00"
  1427 + // "#ff0000" or "ff0000"
  1428 + // "#ff000000" or "ff000000"
  1429 + // "rgb 255 0 0" or "rgb (255, 0, 0)"
  1430 + // "rgb 1.0 0 0" or "rgb (1, 0, 0)"
  1431 + // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
  1432 + // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
  1433 + // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
  1434 + // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
  1435 + // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
  1436 + //
  1437 + function inputToRGB(color) {
  1438 +
  1439 + var rgb = { r: 0, g: 0, b: 0 };
  1440 + var a = 1;
  1441 + var ok = false;
  1442 + var format = false;
  1443 +
  1444 + if (typeof color == "string") {
  1445 + color = stringInputToObject(color);
  1446 + }
  1447 +
  1448 + if (typeof color == "object") {
  1449 + if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) {
  1450 + rgb = rgbToRgb(color.r, color.g, color.b);
  1451 + ok = true;
  1452 + format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
  1453 + }
  1454 + else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) {
  1455 + color.s = convertToPercentage(color.s);
  1456 + color.v = convertToPercentage(color.v);
  1457 + rgb = hsvToRgb(color.h, color.s, color.v);
  1458 + ok = true;
  1459 + format = "hsv";
  1460 + }
  1461 + else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) {
  1462 + color.s = convertToPercentage(color.s);
  1463 + color.l = convertToPercentage(color.l);
  1464 + rgb = hslToRgb(color.h, color.s, color.l);
  1465 + ok = true;
  1466 + format = "hsl";
  1467 + }
  1468 +
  1469 + if (color.hasOwnProperty("a")) {
  1470 + a = color.a;
  1471 + }
  1472 + }
  1473 +
  1474 + a = boundAlpha(a);
  1475 +
  1476 + return {
  1477 + ok: ok,
  1478 + format: color.format || format,
  1479 + r: mathMin(255, mathMax(rgb.r, 0)),
  1480 + g: mathMin(255, mathMax(rgb.g, 0)),
  1481 + b: mathMin(255, mathMax(rgb.b, 0)),
  1482 + a: a
  1483 + };
  1484 + }
  1485 +
  1486 +
  1487 + // Conversion Functions
  1488 + // --------------------
  1489 +
  1490 + // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
  1491 + // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
  1492 +
  1493 + // `rgbToRgb`
  1494 + // Handle bounds / percentage checking to conform to CSS color spec
  1495 + // <http://www.w3.org/TR/css3-color/>
  1496 + // *Assumes:* r, g, b in [0, 255] or [0, 1]
  1497 + // *Returns:* { r, g, b } in [0, 255]
  1498 + function rgbToRgb(r, g, b){
  1499 + return {
  1500 + r: bound01(r, 255) * 255,
  1501 + g: bound01(g, 255) * 255,
  1502 + b: bound01(b, 255) * 255
  1503 + };
  1504 + }
  1505 +
  1506 + // `rgbToHsl`
  1507 + // Converts an RGB color value to HSL.
  1508 + // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
  1509 + // *Returns:* { h, s, l } in [0,1]
  1510 + function rgbToHsl(r, g, b) {
  1511 +
  1512 + r = bound01(r, 255);
  1513 + g = bound01(g, 255);
  1514 + b = bound01(b, 255);
  1515 +
  1516 + var max = mathMax(r, g, b), min = mathMin(r, g, b);
  1517 + var h, s, l = (max + min) / 2;
  1518 +
  1519 + if(max == min) {
  1520 + h = s = 0; // achromatic
  1521 + }
  1522 + else {
  1523 + var d = max - min;
  1524 + s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  1525 + switch(max) {
  1526 + case r: h = (g - b) / d + (g < b ? 6 : 0); break;
  1527 + case g: h = (b - r) / d + 2; break;
  1528 + case b: h = (r - g) / d + 4; break;
  1529 + }
  1530 +
  1531 + h /= 6;
  1532 + }
  1533 +
  1534 + return { h: h, s: s, l: l };
  1535 + }
  1536 +
  1537 + // `hslToRgb`
  1538 + // Converts an HSL color value to RGB.
  1539 + // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
  1540 + // *Returns:* { r, g, b } in the set [0, 255]
  1541 + function hslToRgb(h, s, l) {
  1542 + var r, g, b;
  1543 +
  1544 + h = bound01(h, 360);
  1545 + s = bound01(s, 100);
  1546 + l = bound01(l, 100);
  1547 +
  1548 + function hue2rgb(p, q, t) {
  1549 + if(t < 0) t += 1;
  1550 + if(t > 1) t -= 1;
  1551 + if(t < 1/6) return p + (q - p) * 6 * t;
  1552 + if(t < 1/2) return q;
  1553 + if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
  1554 + return p;
  1555 + }
  1556 +
  1557 + if(s === 0) {
  1558 + r = g = b = l; // achromatic
  1559 + }
  1560 + else {
  1561 + var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
  1562 + var p = 2 * l - q;
  1563 + r = hue2rgb(p, q, h + 1/3);
  1564 + g = hue2rgb(p, q, h);
  1565 + b = hue2rgb(p, q, h - 1/3);
  1566 + }
  1567 +
  1568 + return { r: r * 255, g: g * 255, b: b * 255 };
  1569 + }
  1570 +
  1571 + // `rgbToHsv`
  1572 + // Converts an RGB color value to HSV
  1573 + // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
  1574 + // *Returns:* { h, s, v } in [0,1]
  1575 + function rgbToHsv(r, g, b) {
  1576 +
  1577 + r = bound01(r, 255);
  1578 + g = bound01(g, 255);
  1579 + b = bound01(b, 255);
  1580 +
  1581 + var max = mathMax(r, g, b), min = mathMin(r, g, b);
  1582 + var h, s, v = max;
  1583 +
  1584 + var d = max - min;
  1585 + s = max === 0 ? 0 : d / max;
  1586 +
  1587 + if(max == min) {
  1588 + h = 0; // achromatic
  1589 + }
  1590 + else {
  1591 + switch(max) {
  1592 + case r: h = (g - b) / d + (g < b ? 6 : 0); break;
  1593 + case g: h = (b - r) / d + 2; break;
  1594 + case b: h = (r - g) / d + 4; break;
  1595 + }
  1596 + h /= 6;
  1597 + }
  1598 + return { h: h, s: s, v: v };
  1599 + }
  1600 +
  1601 + // `hsvToRgb`
  1602 + // Converts an HSV color value to RGB.
  1603 + // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
  1604 + // *Returns:* { r, g, b } in the set [0, 255]
  1605 + function hsvToRgb(h, s, v) {
  1606 +
  1607 + h = bound01(h, 360) * 6;
  1608 + s = bound01(s, 100);
  1609 + v = bound01(v, 100);
  1610 +
  1611 + var i = math.floor(h),
  1612 + f = h - i,
  1613 + p = v * (1 - s),
  1614 + q = v * (1 - f * s),
  1615 + t = v * (1 - (1 - f) * s),
  1616 + mod = i % 6,
  1617 + r = [v, q, p, p, t, v][mod],
  1618 + g = [t, v, v, q, p, p][mod],
  1619 + b = [p, p, t, v, v, q][mod];
  1620 +
  1621 + return { r: r * 255, g: g * 255, b: b * 255 };
  1622 + }
  1623 +
  1624 + // `rgbToHex`
  1625 + // Converts an RGB color to hex
  1626 + // Assumes r, g, and b are contained in the set [0, 255]
  1627 + // Returns a 3 or 6 character hex
  1628 + function rgbToHex(r, g, b, allow3Char) {
  1629 +
  1630 + var hex = [
  1631 + pad2(mathRound(r).toString(16)),
  1632 + pad2(mathRound(g).toString(16)),
  1633 + pad2(mathRound(b).toString(16))
  1634 + ];
  1635 +
  1636 + // Return a 3 character hex if possible
  1637 + if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
  1638 + return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
  1639 + }
  1640 +
  1641 + return hex.join("");
  1642 + }
  1643 + // `rgbaToHex`
  1644 + // Converts an RGBA color plus alpha transparency to hex
  1645 + // Assumes r, g, b and a are contained in the set [0, 255]
  1646 + // Returns an 8 character hex
  1647 + function rgbaToHex(r, g, b, a) {
  1648 +
  1649 + var hex = [
  1650 + pad2(convertDecimalToHex(a)),
  1651 + pad2(mathRound(r).toString(16)),
  1652 + pad2(mathRound(g).toString(16)),
  1653 + pad2(mathRound(b).toString(16))
  1654 + ];
  1655 +
  1656 + return hex.join("");
  1657 + }
  1658 +
  1659 + // `equals`
  1660 + // Can be called with any tinycolor input
  1661 + tinycolor.equals = function (color1, color2) {
  1662 + if (!color1 || !color2) { return false; }
  1663 + return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
  1664 + };
  1665 + tinycolor.random = function() {
  1666 + return tinycolor.fromRatio({
  1667 + r: mathRandom(),
  1668 + g: mathRandom(),
  1669 + b: mathRandom()
  1670 + });
  1671 + };
  1672 +
  1673 +
  1674 + // Modification Functions
  1675 + // ----------------------
  1676 + // Thanks to less.js for some of the basics here
  1677 + // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
  1678 +
  1679 + function desaturate(color, amount) {
  1680 + amount = (amount === 0) ? 0 : (amount || 10);
  1681 + var hsl = tinycolor(color).toHsl();
  1682 + hsl.s -= amount / 100;
  1683 + hsl.s = clamp01(hsl.s);
  1684 + return tinycolor(hsl);
  1685 + }
  1686 +
  1687 + function saturate(color, amount) {
  1688 + amount = (amount === 0) ? 0 : (amount || 10);
  1689 + var hsl = tinycolor(color).toHsl();
  1690 + hsl.s += amount / 100;
  1691 + hsl.s = clamp01(hsl.s);
  1692 + return tinycolor(hsl);
  1693 + }
  1694 +
  1695 + function greyscale(color) {
  1696 + return tinycolor(color).desaturate(100);
  1697 + }
  1698 +
  1699 + function lighten (color, amount) {
  1700 + amount = (amount === 0) ? 0 : (amount || 10);
  1701 + var hsl = tinycolor(color).toHsl();
  1702 + hsl.l += amount / 100;
  1703 + hsl.l = clamp01(hsl.l);
  1704 + return tinycolor(hsl);
  1705 + }
  1706 +
  1707 + function brighten(color, amount) {
  1708 + amount = (amount === 0) ? 0 : (amount || 10);
  1709 + var rgb = tinycolor(color).toRgb();
  1710 + rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
  1711 + rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
  1712 + rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
  1713 + return tinycolor(rgb);
  1714 + }
  1715 +
  1716 + function darken (color, amount) {
  1717 + amount = (amount === 0) ? 0 : (amount || 10);
  1718 + var hsl = tinycolor(color).toHsl();
  1719 + hsl.l -= amount / 100;
  1720 + hsl.l = clamp01(hsl.l);
  1721 + return tinycolor(hsl);
  1722 + }
  1723 +
  1724 + // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
  1725 + // Values outside of this range will be wrapped into this range.
  1726 + function spin(color, amount) {
  1727 + var hsl = tinycolor(color).toHsl();
  1728 + var hue = (mathRound(hsl.h) + amount) % 360;
  1729 + hsl.h = hue < 0 ? 360 + hue : hue;
  1730 + return tinycolor(hsl);
  1731 + }
  1732 +
  1733 + // Combination Functions
  1734 + // ---------------------
  1735 + // Thanks to jQuery xColor for some of the ideas behind these
  1736 + // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
  1737 +
  1738 + function complement(color) {
  1739 + var hsl = tinycolor(color).toHsl();
  1740 + hsl.h = (hsl.h + 180) % 360;
  1741 + return tinycolor(hsl);
  1742 + }
  1743 +
  1744 + function triad(color) {
  1745 + var hsl = tinycolor(color).toHsl();
  1746 + var h = hsl.h;
  1747 + return [
  1748 + tinycolor(color),
  1749 + tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
  1750 + tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
  1751 + ];
  1752 + }
  1753 +
  1754 + function tetrad(color) {
  1755 + var hsl = tinycolor(color).toHsl();
  1756 + var h = hsl.h;
  1757 + return [
  1758 + tinycolor(color),
  1759 + tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
  1760 + tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
  1761 + tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
  1762 + ];
  1763 + }
  1764 +
  1765 + function splitcomplement(color) {
  1766 + var hsl = tinycolor(color).toHsl();
  1767 + var h = hsl.h;
  1768 + return [
  1769 + tinycolor(color),
  1770 + tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
  1771 + tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
  1772 + ];
  1773 + }
  1774 +
  1775 + function analogous(color, results, slices) {
  1776 + results = results || 6;
  1777 + slices = slices || 30;
  1778 +
  1779 + var hsl = tinycolor(color).toHsl();
  1780 + var part = 360 / slices;
  1781 + var ret = [tinycolor(color)];
  1782 +
  1783 + for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
  1784 + hsl.h = (hsl.h + part) % 360;
  1785 + ret.push(tinycolor(hsl));
  1786 + }
  1787 + return ret;
  1788 + }
  1789 +
  1790 + function monochromatic(color, results) {
  1791 + results = results || 6;
  1792 + var hsv = tinycolor(color).toHsv();
  1793 + var h = hsv.h, s = hsv.s, v = hsv.v;
  1794 + var ret = [];
  1795 + var modification = 1 / results;
  1796 +
  1797 + while (results--) {
  1798 + ret.push(tinycolor({ h: h, s: s, v: v}));
  1799 + v = (v + modification) % 1;
  1800 + }
  1801 +
  1802 + return ret;
  1803 + }
  1804 +
  1805 + // Utility Functions
  1806 + // ---------------------
  1807 +
  1808 + tinycolor.mix = function(color1, color2, amount) {
  1809 + amount = (amount === 0) ? 0 : (amount || 50);
  1810 +
  1811 + var rgb1 = tinycolor(color1).toRgb();
  1812 + var rgb2 = tinycolor(color2).toRgb();
  1813 +
  1814 + var p = amount / 100;
  1815 + var w = p * 2 - 1;
  1816 + var a = rgb2.a - rgb1.a;
  1817 +
  1818 + var w1;
  1819 +
  1820 + if (w * a == -1) {
  1821 + w1 = w;
  1822 + } else {
  1823 + w1 = (w + a) / (1 + w * a);
  1824 + }
  1825 +
  1826 + w1 = (w1 + 1) / 2;
  1827 +
  1828 + var w2 = 1 - w1;
  1829 +
  1830 + var rgba = {
  1831 + r: rgb2.r * w1 + rgb1.r * w2,
  1832 + g: rgb2.g * w1 + rgb1.g * w2,
  1833 + b: rgb2.b * w1 + rgb1.b * w2,
  1834 + a: rgb2.a * p + rgb1.a * (1 - p)
  1835 + };
  1836 +
  1837 + return tinycolor(rgba);
  1838 + };
  1839 +
  1840 +
  1841 + // Readability Functions
  1842 + // ---------------------
  1843 + // <http://www.w3.org/TR/AERT#color-contrast>
  1844 +
  1845 + // `readability`
  1846 + // Analyze the 2 colors and returns an object with the following properties:
  1847 + // `brightness`: difference in brightness between the two colors
  1848 + // `color`: difference in color/hue between the two colors
  1849 + tinycolor.readability = function(color1, color2) {
  1850 + var c1 = tinycolor(color1);
  1851 + var c2 = tinycolor(color2);
  1852 + var rgb1 = c1.toRgb();
  1853 + var rgb2 = c2.toRgb();
  1854 + var brightnessA = c1.getBrightness();
  1855 + var brightnessB = c2.getBrightness();
  1856 + var colorDiff = (
  1857 + Math.max(rgb1.r, rgb2.r) - Math.min(rgb1.r, rgb2.r) +
  1858 + Math.max(rgb1.g, rgb2.g) - Math.min(rgb1.g, rgb2.g) +
  1859 + Math.max(rgb1.b, rgb2.b) - Math.min(rgb1.b, rgb2.b)
  1860 + );
  1861 +
  1862 + return {
  1863 + brightness: Math.abs(brightnessA - brightnessB),
  1864 + color: colorDiff
  1865 + };
  1866 + };
  1867 +
  1868 + // `readable`
  1869 + // http://www.w3.org/TR/AERT#color-contrast
  1870 + // Ensure that foreground and background color combinations provide sufficient contrast.
  1871 + // *Example*
  1872 + // tinycolor.isReadable("#000", "#111") => false
  1873 + tinycolor.isReadable = function(color1, color2) {
  1874 + var readability = tinycolor.readability(color1, color2);
  1875 + return readability.brightness > 125 && readability.color > 500;
  1876 + };
  1877 +
  1878 + // `mostReadable`
  1879 + // Given a base color and a list of possible foreground or background
  1880 + // colors for that base, returns the most readable color.
  1881 + // *Example*
  1882 + // tinycolor.mostReadable("#123", ["#fff", "#000"]) => "#000"
  1883 + tinycolor.mostReadable = function(baseColor, colorList) {
  1884 + var bestColor = null;
  1885 + var bestScore = 0;
  1886 + var bestIsReadable = false;
  1887 + for (var i=0; i < colorList.length; i++) {
  1888 +
  1889 + // We normalize both around the "acceptable" breaking point,
  1890 + // but rank brightness constrast higher than hue.
  1891 +
  1892 + var readability = tinycolor.readability(baseColor, colorList[i]);
  1893 + var readable = readability.brightness > 125 && readability.color > 500;
  1894 + var score = 3 * (readability.brightness / 125) + (readability.color / 500);
  1895 +
  1896 + if ((readable && ! bestIsReadable) ||
  1897 + (readable && bestIsReadable && score > bestScore) ||
  1898 + ((! readable) && (! bestIsReadable) && score > bestScore)) {
  1899 + bestIsReadable = readable;
  1900 + bestScore = score;
  1901 + bestColor = tinycolor(colorList[i]);
  1902 + }
  1903 + }
  1904 + return bestColor;
  1905 + };
  1906 +
  1907 +
  1908 + // Big List of Colors
  1909 + // ------------------
  1910 + // <http://www.w3.org/TR/css3-color/#svg-color>
  1911 + var names = tinycolor.names = {
  1912 + aliceblue: "f0f8ff",
  1913 + antiquewhite: "faebd7",
  1914 + aqua: "0ff",
  1915 + aquamarine: "7fffd4",
  1916 + azure: "f0ffff",
  1917 + beige: "f5f5dc",
  1918 + bisque: "ffe4c4",
  1919 + black: "000",
  1920 + blanchedalmond: "ffebcd",
  1921 + blue: "00f",
  1922 + blueviolet: "8a2be2",
  1923 + brown: "a52a2a",
  1924 + burlywood: "deb887",
  1925 + burntsienna: "ea7e5d",
  1926 + cadetblue: "5f9ea0",
  1927 + chartreuse: "7fff00",
  1928 + chocolate: "d2691e",
  1929 + coral: "ff7f50",
  1930 + cornflowerblue: "6495ed",
  1931 + cornsilk: "fff8dc",
  1932 + crimson: "dc143c",
  1933 + cyan: "0ff",
  1934 + darkblue: "00008b",
  1935 + darkcyan: "008b8b",
  1936 + darkgoldenrod: "b8860b",
  1937 + darkgray: "a9a9a9",
  1938 + darkgreen: "006400",
  1939 + darkgrey: "a9a9a9",
  1940 + darkkhaki: "bdb76b",
  1941 + darkmagenta: "8b008b",
  1942 + darkolivegreen: "556b2f",
  1943 + darkorange: "ff8c00",
  1944 + darkorchid: "9932cc",
  1945 + darkred: "8b0000",
  1946 + darksalmon: "e9967a",
  1947 + darkseagreen: "8fbc8f",
  1948 + darkslateblue: "483d8b",
  1949 + darkslategray: "2f4f4f",
  1950 + darkslategrey: "2f4f4f",
  1951 + darkturquoise: "00ced1",
  1952 + darkviolet: "9400d3",
  1953 + deeppink: "ff1493",
  1954 + deepskyblue: "00bfff",
  1955 + dimgray: "696969",
  1956 + dimgrey: "696969",
  1957 + dodgerblue: "1e90ff",
  1958 + firebrick: "b22222",
  1959 + floralwhite: "fffaf0",
  1960 + forestgreen: "228b22",
  1961 + fuchsia: "f0f",
  1962 + gainsboro: "dcdcdc",
  1963 + ghostwhite: "f8f8ff",
  1964 + gold: "ffd700",
  1965 + goldenrod: "daa520",
  1966 + gray: "808080",
  1967 + green: "008000",
  1968 + greenyellow: "adff2f",
  1969 + grey: "808080",
  1970 + honeydew: "f0fff0",
  1971 + hotpink: "ff69b4",
  1972 + indianred: "cd5c5c",
  1973 + indigo: "4b0082",
  1974 + ivory: "fffff0",
  1975 + khaki: "f0e68c",
  1976 + lavender: "e6e6fa",
  1977 + lavenderblush: "fff0f5",
  1978 + lawngreen: "7cfc00",
  1979 + lemonchiffon: "fffacd",
  1980 + lightblue: "add8e6",
  1981 + lightcoral: "f08080",
  1982 + lightcyan: "e0ffff",
  1983 + lightgoldenrodyellow: "fafad2",
  1984 + lightgray: "d3d3d3",
  1985 + lightgreen: "90ee90",
  1986 + lightgrey: "d3d3d3",
  1987 + lightpink: "ffb6c1",
  1988 + lightsalmon: "ffa07a",
  1989 + lightseagreen: "20b2aa",
  1990 + lightskyblue: "87cefa",
  1991 + lightslategray: "789",
  1992 + lightslategrey: "789",
  1993 + lightsteelblue: "b0c4de",
  1994 + lightyellow: "ffffe0",
  1995 + lime: "0f0",
  1996 + limegreen: "32cd32",
  1997 + linen: "faf0e6",
  1998 + magenta: "f0f",
  1999 + maroon: "800000",
  2000 + mediumaquamarine: "66cdaa",
  2001 + mediumblue: "0000cd",
  2002 + mediumorchid: "ba55d3",
  2003 + mediumpurple: "9370db",
  2004 + mediumseagreen: "3cb371",
  2005 + mediumslateblue: "7b68ee",
  2006 + mediumspringgreen: "00fa9a",
  2007 + mediumturquoise: "48d1cc",
  2008 + mediumvioletred: "c71585",
  2009 + midnightblue: "191970",
  2010 + mintcream: "f5fffa",
  2011 + mistyrose: "ffe4e1",
  2012 + moccasin: "ffe4b5",
  2013 + navajowhite: "ffdead",
  2014 + navy: "000080",
  2015 + oldlace: "fdf5e6",
  2016 + olive: "808000",
  2017 + olivedrab: "6b8e23",
  2018 + orange: "ffa500",
  2019 + orangered: "ff4500",
  2020 + orchid: "da70d6",
  2021 + palegoldenrod: "eee8aa",
  2022 + palegreen: "98fb98",
  2023 + paleturquoise: "afeeee",
  2024 + palevioletred: "db7093",
  2025 + papayawhip: "ffefd5",
  2026 + peachpuff: "ffdab9",
  2027 + peru: "cd853f",
  2028 + pink: "ffc0cb",
  2029 + plum: "dda0dd",
  2030 + powderblue: "b0e0e6",
  2031 + purple: "800080",
  2032 + red: "f00",
  2033 + rosybrown: "bc8f8f",
  2034 + royalblue: "4169e1",
  2035 + saddlebrown: "8b4513",
  2036 + salmon: "fa8072",
  2037 + sandybrown: "f4a460",
  2038 + seagreen: "2e8b57",
  2039 + seashell: "fff5ee",
  2040 + sienna: "a0522d",
  2041 + silver: "c0c0c0",
  2042 + skyblue: "87ceeb",
  2043 + slateblue: "6a5acd",
  2044 + slategray: "708090",
  2045 + slategrey: "708090",
  2046 + snow: "fffafa",
  2047 + springgreen: "00ff7f",
  2048 + steelblue: "4682b4",
  2049 + tan: "d2b48c",
  2050 + teal: "008080",
  2051 + thistle: "d8bfd8",
  2052 + tomato: "ff6347",
  2053 + turquoise: "40e0d0",
  2054 + violet: "ee82ee",
  2055 + wheat: "f5deb3",
  2056 + white: "fff",
  2057 + whitesmoke: "f5f5f5",
  2058 + yellow: "ff0",
  2059 + yellowgreen: "9acd32"
  2060 + };
  2061 +
  2062 + // Make it easy to access colors via `hexNames[hex]`
  2063 + var hexNames = tinycolor.hexNames = flip(names);
  2064 +
  2065 +
  2066 + // Utilities
  2067 + // ---------
  2068 +
  2069 + // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
  2070 + function flip(o) {
  2071 + var flipped = { };
  2072 + for (var i in o) {
  2073 + if (o.hasOwnProperty(i)) {
  2074 + flipped[o[i]] = i;
  2075 + }
  2076 + }
  2077 + return flipped;
  2078 + }
  2079 +
  2080 + // Return a valid alpha value [0,1] with all invalid values being set to 1
  2081 + function boundAlpha(a) {
  2082 + a = parseFloat(a);
  2083 +
  2084 + if (isNaN(a) || a < 0 || a > 1) {
  2085 + a = 1;
  2086 + }
  2087 +
  2088 + return a;
  2089 + }
  2090 +
  2091 + // Take input from [0, n] and return it as [0, 1]
  2092 + function bound01(n, max) {
  2093 + if (isOnePointZero(n)) { n = "100%"; }
  2094 +
  2095 + var processPercent = isPercentage(n);
  2096 + n = mathMin(max, mathMax(0, parseFloat(n)));
  2097 +
  2098 + // Automatically convert percentage into number
  2099 + if (processPercent) {
  2100 + n = parseInt(n * max, 10) / 100;
  2101 + }
  2102 +
  2103 + // Handle floating point rounding errors
  2104 + if ((math.abs(n - max) < 0.000001)) {
  2105 + return 1;
  2106 + }
  2107 +
  2108 + // Convert into [0, 1] range if it isn't already
  2109 + return (n % max) / parseFloat(max);
  2110 + }
  2111 +
  2112 + // Force a number between 0 and 1
  2113 + function clamp01(val) {
  2114 + return mathMin(1, mathMax(0, val));
  2115 + }
  2116 +
  2117 + // Parse a base-16 hex value into a base-10 integer
  2118 + function parseIntFromHex(val) {
  2119 + return parseInt(val, 16);
  2120 + }
  2121 +
  2122 + // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
  2123 + // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
  2124 + function isOnePointZero(n) {
  2125 + return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
  2126 + }
  2127 +
  2128 + // Check to see if string passed in is a percentage
  2129 + function isPercentage(n) {
  2130 + return typeof n === "string" && n.indexOf('%') != -1;
  2131 + }
  2132 +
  2133 + // Force a hex value to have 2 characters
  2134 + function pad2(c) {
  2135 + return c.length == 1 ? '0' + c : '' + c;
  2136 + }
  2137 +
  2138 + // Replace a decimal with it's percentage value
  2139 + function convertToPercentage(n) {
  2140 + if (n <= 1) {
  2141 + n = (n * 100) + "%";
  2142 + }
  2143 +
  2144 + return n;
  2145 + }
  2146 +
  2147 + // Converts a decimal to a hex value
  2148 + function convertDecimalToHex(d) {
  2149 + return Math.round(parseFloat(d) * 255).toString(16);
  2150 + }
  2151 + // Converts a hex value to a decimal
  2152 + function convertHexToDecimal(h) {
  2153 + return (parseIntFromHex(h) / 255);
  2154 + }
  2155 +
  2156 + var matchers = (function() {
  2157 +
  2158 + // <http://www.w3.org/TR/css3-values/#integers>
  2159 + var CSS_INTEGER = "[-\\+]?\\d+%?";
  2160 +
  2161 + // <http://www.w3.org/TR/css3-values/#number-value>
  2162 + var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
  2163 +
  2164 + // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
  2165 + var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
  2166 +
  2167 + // Actual matching.
  2168 + // Parentheses and commas are optional, but not required.
  2169 + // Whitespace can take the place of commas or opening paren
  2170 + var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
  2171 + var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
  2172 +
  2173 + return {
  2174 + rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
  2175 + rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
  2176 + hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
  2177 + hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
  2178 + hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
  2179 + hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
  2180 + hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
  2181 + hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
  2182 + };
  2183 + })();
  2184 +
  2185 + // `stringInputToObject`
  2186 + // Permissive string parsing. Take in a number of formats, and output an object
  2187 + // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
  2188 + function stringInputToObject(color) {
  2189 +
  2190 + color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase();
  2191 + var named = false;
  2192 + if (names[color]) {
  2193 + color = names[color];
  2194 + named = true;
  2195 + }
  2196 + else if (color == 'transparent') {
  2197 + return { r: 0, g: 0, b: 0, a: 0, format: "name" };
  2198 + }
  2199 +
  2200 + // Try to match string input using regular expressions.
  2201 + // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
  2202 + // Just return an object and let the conversion functions handle that.
  2203 + // This way the result will be the same whether the tinycolor is initialized with string or object.
  2204 + var match;
  2205 + if ((match = matchers.rgb.exec(color))) {
  2206 + return { r: match[1], g: match[2], b: match[3] };
  2207 + }
  2208 + if ((match = matchers.rgba.exec(color))) {
  2209 + return { r: match[1], g: match[2], b: match[3], a: match[4] };
  2210 + }
  2211 + if ((match = matchers.hsl.exec(color))) {
  2212 + return { h: match[1], s: match[2], l: match[3] };
  2213 + }
  2214 + if ((match = matchers.hsla.exec(color))) {
  2215 + return { h: match[1], s: match[2], l: match[3], a: match[4] };
  2216 + }
  2217 + if ((match = matchers.hsv.exec(color))) {
  2218 + return { h: match[1], s: match[2], v: match[3] };
  2219 + }
  2220 + if ((match = matchers.hex8.exec(color))) {
  2221 + return {
  2222 + a: convertHexToDecimal(match[1]),
  2223 + r: parseIntFromHex(match[2]),
  2224 + g: parseIntFromHex(match[3]),
  2225 + b: parseIntFromHex(match[4]),
  2226 + format: named ? "name" : "hex8"
  2227 + };
  2228 + }
  2229 + if ((match = matchers.hex6.exec(color))) {
  2230 + return {
  2231 + r: parseIntFromHex(match[1]),
  2232 + g: parseIntFromHex(match[2]),
  2233 + b: parseIntFromHex(match[3]),
  2234 + format: named ? "name" : "hex"
  2235 + };
  2236 + }
  2237 + if ((match = matchers.hex3.exec(color))) {
  2238 + return {
  2239 + r: parseIntFromHex(match[1] + '' + match[1]),
  2240 + g: parseIntFromHex(match[2] + '' + match[2]),
  2241 + b: parseIntFromHex(match[3] + '' + match[3]),
  2242 + format: named ? "name" : "hex"
  2243 + };
  2244 + }
  2245 +
  2246 + return false;
  2247 + }
  2248 +
  2249 + window.tinycolor = tinycolor;
  2250 + })();
  2251 +
  2252 +
  2253 + $(function () {
  2254 + if ($.fn.spectrum.load) {
  2255 + $.fn.spectrum.processNativeColorInputs();
  2256 + }
  2257 + });
  2258 +
  2259 +})(window, jQuery);
... ...
public/stylesheets/application.css
  Diff comments   View file @8f79b72
... ... @@ -2549,6 +2549,15 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2549 2549 color: #585858;
2550 2550 font-size: 11px;
2551 2551 }
  2552 +.colorpicker_field {
  2553 + display: none;
  2554 +}
  2555 +.color_marker {
  2556 + display: inline-block;
  2557 + width: 10px;
  2558 + height: 10px;
  2559 + border: 1px solid;
  2560 +}
2552 2561 .formfield input {
2553 2562 text-indent: 5px;
2554 2563 padding: 2px 0px;
... ...
public/stylesheets/spectrum.css 0 → 100644
  Diff comments   View file @8f79b72
... ... @@ -0,0 +1,506 @@
  1 +/***
  2 +Spectrum Colorpicker v1.4.1
  3 +https://github.com/bgrins/spectrum
  4 +Author: Brian Grinstead
  5 +License: MIT
  6 +***/
  7 +
  8 +.sp-container {
  9 + position:absolute;
  10 + top:0;
  11 + left:0;
  12 + display:inline-block;
  13 + *display: inline;
  14 + *zoom: 1;
  15 + /* https://github.com/bgrins/spectrum/issues/40 */
  16 + z-index: 9999994;
  17 + overflow: hidden;
  18 +}
  19 +.sp-container.sp-flat {
  20 + position: relative;
  21 +}
  22 +
  23 +/* Fix for * { box-sizing: border-box; } */
  24 +.sp-container,
  25 +.sp-container * {
  26 + -webkit-box-sizing: content-box;
  27 + -moz-box-sizing: content-box;
  28 + box-sizing: content-box;
  29 +}
  30 +
  31 +/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
  32 +.sp-top {
  33 + position:relative;
  34 + width: 100%;
  35 + display:inline-block;
  36 +}
  37 +.sp-top-inner {
  38 + position:absolute;
  39 + top:0;
  40 + left:0;
  41 + bottom:0;
  42 + right:0;
  43 +}
  44 +.sp-color {
  45 + position: absolute;
  46 + top:0;
  47 + left:0;
  48 + bottom:0;
  49 + right:20%;
  50 +}
  51 +.sp-hue {
  52 + position: absolute;
  53 + top:0;
  54 + right:0;
  55 + bottom:0;
  56 + left:84%;
  57 + height: 100%;
  58 +}
  59 +
  60 +.sp-clear-enabled .sp-hue {
  61 + top:33px;
  62 + height: 77.5%;
  63 +}
  64 +
  65 +.sp-fill {
  66 + padding-top: 80%;
  67 +}
  68 +.sp-sat, .sp-val {
  69 + position: absolute;
  70 + top:0;
  71 + left:0;
  72 + right:0;
  73 + bottom:0;
  74 +}
  75 +
  76 +.sp-alpha-enabled .sp-top {
  77 + margin-bottom: 18px;
  78 +}
  79 +.sp-alpha-enabled .sp-alpha {
  80 + display: block;
  81 +}
  82 +.sp-alpha-handle {
  83 + position:absolute;
  84 + top:-4px;
  85 + bottom: -4px;
  86 + width: 6px;
  87 + left: 50%;
  88 + cursor: pointer;
  89 + border: 1px solid black;
  90 + background: white;
  91 + opacity: .8;
  92 +}
  93 +.sp-alpha {
  94 + display: none;
  95 + position: absolute;
  96 + bottom: -14px;
  97 + right: 0;
  98 + left: 0;
  99 + height: 8px;
  100 +}
  101 +.sp-alpha-inner {
  102 + border: solid 1px #333;
  103 +}
  104 +
  105 +.sp-clear {
  106 + display: none;
  107 +}
  108 +
  109 +.sp-clear.sp-clear-display {
  110 + background-position: center;
  111 +}
  112 +
  113 +.sp-clear-enabled .sp-clear {
  114 + display: block;
  115 + position:absolute;
  116 + top:0px;
  117 + right:0;
  118 + bottom:0;
  119 + left:84%;
  120 + height: 28px;
  121 +}
  122 +
  123 +/* Don't allow text selection */
  124 +.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
  125 + -webkit-user-select:none;
  126 + -moz-user-select: -moz-none;
  127 + -o-user-select:none;
  128 + user-select: none;
  129 +}
  130 +
  131 +.sp-container.sp-input-disabled .sp-input-container {
  132 + display: none;
  133 +}
  134 +.sp-container.sp-buttons-disabled .sp-button-container {
  135 + display: none;
  136 +}
  137 +.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
  138 + display: none;
  139 +}
  140 +.sp-palette-only .sp-picker-container {
  141 + display: none;
  142 +}
  143 +.sp-palette-disabled .sp-palette-container {
  144 + display: none;
  145 +}
  146 +
  147 +.sp-initial-disabled .sp-initial {
  148 + display: none;
  149 +}
  150 +
  151 +
  152 +/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
  153 +.sp-sat {
  154 + background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
  155 + background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
  156 + background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
  157 + background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
  158 + background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
  159 + background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
  160 + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
  161 + filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
  162 +}
  163 +.sp-val {
  164 + background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
  165 + background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
  166 + background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
  167 + background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
  168 + background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
  169 + background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
  170 + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
  171 + filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
  172 +}
  173 +
  174 +.sp-hue {
  175 + background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  176 + background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  177 + background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  178 + background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
  179 + background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  180 +}
  181 +
  182 +/* IE filters do not support multiple color stops.
  183 + Generate 6 divs, line them up, and do two color gradients for each.
  184 + Yes, really.
  185 + */
  186 +.sp-1 {
  187 + height:17%;
  188 + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
  189 +}
  190 +.sp-2 {
  191 + height:16%;
  192 + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
  193 +}
  194 +.sp-3 {
  195 + height:17%;
  196 + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
  197 +}
  198 +.sp-4 {
  199 + height:17%;
  200 + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
  201 +}
  202 +.sp-5 {
  203 + height:16%;
  204 + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
  205 +}
  206 +.sp-6 {
  207 + height:17%;
  208 + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
  209 +}
  210 +
  211 +.sp-hidden {
  212 + display: none !important;
  213 +}
  214 +
  215 +/* Clearfix hack */
  216 +.sp-cf:before, .sp-cf:after { content: ""; display: table; }
  217 +.sp-cf:after { clear: both; }
  218 +.sp-cf { *zoom: 1; }
  219 +
  220 +/* Mobile devices, make hue slider bigger so it is easier to slide */
  221 +@media (max-device-width: 480px) {
  222 + .sp-color { right: 40%; }
  223 + .sp-hue { left: 63%; }
  224 + .sp-fill { padding-top: 60%; }
  225 +}
  226 +.sp-dragger {
  227 + border-radius: 5px;
  228 + height: 5px;
  229 + width: 5px;
  230 + border: 1px solid #fff;
  231 + background: #000;
  232 + cursor: pointer;
  233 + position:absolute;
  234 + top:0;
  235 + left: 0;
  236 +}
  237 +.sp-slider {
  238 + position: absolute;
  239 + top:0;
  240 + cursor:pointer;
  241 + height: 3px;
  242 + left: -1px;
  243 + right: -1px;
  244 + border: 1px solid #000;
  245 + background: white;
  246 + opacity: .8;
  247 +}
  248 +
  249 +/*
  250 +Theme authors:
  251 +Here are the basic themeable display options (colors, fonts, global widths).
  252 +See http://bgrins.github.io/spectrum/themes/ for instructions.
  253 +*/
  254 +
  255 +.sp-container {
  256 + border-radius: 0;
  257 + background-color: #ECECEC;
  258 + border: solid 1px #f0c49B;
  259 + padding: 0;
  260 +}
  261 +.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
  262 + font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  263 + -webkit-box-sizing: border-box;
  264 + -moz-box-sizing: border-box;
  265 + -ms-box-sizing: border-box;
  266 + box-sizing: border-box;
  267 +}
  268 +.sp-top {
  269 + margin-bottom: 3px;
  270 +}
  271 +.sp-color, .sp-hue, .sp-clear {
  272 + border: solid 1px #666;
  273 +}
  274 +
  275 +/* Input */
  276 +.sp-input-container {
  277 + float:right;
  278 + width: 100px;
  279 + margin-bottom: 4px;
  280 +}
  281 +.sp-initial-disabled .sp-input-container {
  282 + width: 100%;
  283 +}
  284 +.sp-input {
  285 + font-size: 12px !important;
  286 + border: 1px inset;
  287 + padding: 4px 5px;
  288 + margin: 0;
  289 + width: 100%;
  290 + background:transparent;
  291 + border-radius: 3px;
  292 + color: #222;
  293 +}
  294 +.sp-input:focus {
  295 + border: 1px solid orange;
  296 +}
  297 +.sp-input.sp-validation-error {
  298 + border: 1px solid red;
  299 + background: #fdd;
  300 +}
  301 +.sp-picker-container , .sp-palette-container {
  302 + float:left;
  303 + position: relative;
  304 + padding: 10px;
  305 + padding-bottom: 300px;
  306 + margin-bottom: -290px;
  307 +}
  308 +.sp-picker-container {
  309 + width: 172px;
  310 + border-left: solid 1px #fff;
  311 +}
  312 +
  313 +/* Palettes */
  314 +.sp-palette-container {
  315 + border-right: solid 1px #ccc;
  316 +}
  317 +
  318 +.sp-palette-only .sp-palette-container {
  319 + border: 0;
  320 +}
  321 +
  322 +.sp-palette .sp-thumb-el {
  323 + display: block;
  324 + position:relative;
  325 + float:left;
  326 + width: 24px;
  327 + height: 15px;
  328 + margin: 3px;
  329 + cursor: pointer;
  330 + border:solid 2px transparent;
  331 +}
  332 +.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
  333 + border-color: orange;
  334 +}
  335 +.sp-thumb-el {
  336 + position:relative;
  337 +}
  338 +
  339 +/* Initial */
  340 +.sp-initial {
  341 + float: left;
  342 + border: solid 1px #333;
  343 +}
  344 +.sp-initial span {
  345 + width: 30px;
  346 + height: 25px;
  347 + border:none;
  348 + display:block;
  349 + float:left;
  350 + margin:0;
  351 +}
  352 +
  353 +.sp-initial .sp-clear-display {
  354 + background-position: center;
  355 +}
  356 +
  357 +/* Buttons */
  358 +.sp-palette-button-container,
  359 +.sp-button-container {
  360 + float: right;
  361 +}
  362 +
  363 +/* Replacer (the little preview div that shows up instead of the <input>) */
  364 +.sp-replacer {
  365 + margin:0;
  366 + overflow:hidden;
  367 + cursor:pointer;
  368 + padding: 4px;
  369 + display:inline-block;
  370 + *zoom: 1;
  371 + *display: inline;
  372 + border: solid 1px #91765d;
  373 + background: #eee;
  374 + color: #333;
  375 + vertical-align: middle;
  376 +}
  377 +.sp-replacer:hover, .sp-replacer.sp-active {
  378 + border-color: #F0C49B;
  379 + color: #111;
  380 +}
  381 +.sp-replacer.sp-disabled {
  382 + cursor:default;
  383 + border-color: silver;
  384 + color: silver;
  385 +}
  386 +.sp-dd {
  387 + padding: 2px 0;
  388 + height: 16px;
  389 + line-height: 16px;
  390 + float:left;
  391 + font-size:10px;
  392 +}
  393 +.sp-preview {
  394 + position:relative;
  395 + width:25px;
  396 + height: 20px;
  397 + border: solid 1px #222;
  398 + margin-right: 5px;
  399 + float:left;
  400 + z-index: 0;
  401 +}
  402 +
  403 +.sp-palette {
  404 + *width: 220px;
  405 + max-width: 220px;
  406 +}
  407 +.sp-palette .sp-thumb-el {
  408 + width:16px;
  409 + height: 16px;
  410 + margin:2px 1px;
  411 + border: solid 1px #d0d0d0;
  412 +}
  413 +
  414 +.sp-container {
  415 + padding-bottom:0;
  416 +}
  417 +
  418 +
  419 +/* Buttons: http://hellohappy.org/css3-buttons/ */
  420 +.sp-container button {
  421 + background-color: #eeeeee;
  422 + background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  423 + background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  424 + background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  425 + background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  426 + background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  427 + border: 1px solid #ccc;
  428 + border-bottom: 1px solid #bbb;
  429 + border-radius: 3px;
  430 + color: #333;
  431 + font-size: 14px;
  432 + line-height: 1;
  433 + padding: 5px 4px;
  434 + text-align: center;
  435 + text-shadow: 0 1px 0 #eee;
  436 + vertical-align: middle;
  437 +}
  438 +.sp-container button:hover {
  439 + background-color: #dddddd;
  440 + background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
  441 + background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
  442 + background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
  443 + background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
  444 + background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
  445 + border: 1px solid #bbb;
  446 + border-bottom: 1px solid #999;
  447 + cursor: pointer;
  448 + text-shadow: 0 1px 0 #ddd;
  449 +}
  450 +.sp-container button:active {
  451 + border: 1px solid #aaa;
  452 + border-bottom: 1px solid #888;
  453 + -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  454 + -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  455 + -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  456 + -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  457 + box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
  458 +}
  459 +.sp-cancel {
  460 + font-size: 11px;
  461 + color: #d93f3f !important;
  462 + margin:0;
  463 + padding:2px;
  464 + margin-right: 5px;
  465 + vertical-align: middle;
  466 + text-decoration:none;
  467 +
  468 +}
  469 +.sp-cancel:hover {
  470 + color: #d93f3f !important;
  471 + text-decoration: underline;
  472 +}
  473 +
  474 +
  475 +.sp-palette span:hover, .sp-palette span.sp-thumb-active {
  476 + border-color: #000;
  477 +}
  478 +
  479 +.sp-preview, .sp-alpha, .sp-thumb-el {
  480 + position:relative;
  481 + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
  482 +}
  483 +.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
  484 + display:block;
  485 + position:absolute;
  486 + top:0;left:0;bottom:0;right:0;
  487 +}
  488 +
  489 +.sp-palette .sp-thumb-inner {
  490 + background-position: 50% 50%;
  491 + background-repeat: no-repeat;
  492 +}
  493 +
  494 +.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
  495 + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
  496 +}
  497 +
  498 +.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
  499 + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
  500 +}
  501 +
  502 +.sp-clear-display {
  503 + background-repeat:no-repeat;
  504 + background-position: center;
  505 + background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
  506 +}
... ...
test/functional/application_controller_test.rb
  Diff comments   View file @8f79b72
... ... @@ -166,7 +166,7 @@ class ApplicationControllerTest &lt; ActionController::TestCase
166 166  
167 167 should 'display only some categories in menu' do
168 168 @controller.stubs(:get_layout).returns('application')
169   - c1 = Environment.default.categories.create!(:name => 'Category 1', :display_color => 1, :parent_id => nil, :display_in_menu => true )
  169 + c1 = Environment.default.categories.create!(:name => 'Category 1', :display_color => 'ffa500', :parent_id => nil, :display_in_menu => true )
170 170 c2 = Environment.default.categories.create!(:name => 'Category 2', :display_color => nil, :parent_id => c1.id, :display_in_menu => true )
171 171 get :index
172 172 assert_tag :tag => 'a', :content => /Category 2/
... ... @@ -174,7 +174,7 @@ class ApplicationControllerTest &lt; ActionController::TestCase
174 174  
175 175 should 'not display some categories in menu' do
176 176 @controller.stubs(:get_layout).returns('application')
177   - c1 = Environment.default.categories.create!(:name => 'Category 1', :display_color => 1, :parent_id => nil, :display_in_menu => true)
  177 + c1 = Environment.default.categories.create!(:name => 'Category 1', :display_color => 'ffa500', :parent_id => nil, :display_in_menu => true)
178 178 c2 = Environment.default.categories.create!(:name => 'Category 2', :display_color => nil, :parent_id => c1)
179 179 get :index
180 180 assert_no_tag :tag => 'a', :content => /Category 2/
... ... @@ -239,7 +239,7 @@ class ApplicationControllerTest &lt; ActionController::TestCase
239 239  
240 240 should 'not display categories menu if categories feature disabled' do
241 241 Environment.any_instance.stubs(:enabled?).with(anything).returns(true)
242   - c1 = Environment.default.categories.create!(:name => 'Category 1', :display_color => 1, :parent_id => nil, :display_in_menu => true )
  242 + c1 = Environment.default.categories.create!(:name => 'Category 1', :display_color => 'ffa500', :parent_id => nil, :display_in_menu => true )
243 243 c2 = Environment.default.categories.create!(:name => 'Category 2', :display_color => nil, :parent_id => c1.id, :display_in_menu => true )
244 244 get :index
245 245 assert_no_tag :tag => 'a', :content => /Category 2/
... ...
test/functional/categories_controller_test.rb
  Diff comments   View file @8f79b72
... ... @@ -41,7 +41,7 @@ class CategoriesControllerTest &lt; ActionController::TestCase
41 41 end
42 42  
43 43 def test_edit_save
44   - post :edit, :id => cat1.id, :category => { :name => 'new name for category' }
  44 + post :edit, :id => cat1.id, :category => { :name => 'new name for category', :display_color => nil }
45 45 assert_redirected_to :action => 'index'
46 46 assert_equal 'new name for category', Category.find(cat1.id).name
47 47 end
... ... @@ -134,7 +134,7 @@ class CategoriesControllerTest &lt; ActionController::TestCase
134 134 env.save!
135 135 get :new
136 136  
137   - assert_no_tag :tag => 'select', :attributes => { :name => "category[display_color]" }
  137 + assert_no_tag :tag => 'input', :attributes => { :name => "category[display_color]" }
138 138 end
139 139  
140 140 should 'display color selection if environment.categories_menu is true' do
... ... @@ -142,7 +142,7 @@ class CategoriesControllerTest &lt; ActionController::TestCase
142 142 env.save!
143 143 get :new
144 144  
145   - assert_tag :tag => 'select', :attributes => { :name => "category[display_color]" }
  145 + assert_tag :tag => 'input', :attributes => { :name => "category[display_color]" }
146 146 end
147 147  
148 148 should 'not list regions and product categories' do
... ...
test/unit/categories_helper_test.rb
  Diff comments   View file @8f79b72
... ... @@ -15,8 +15,20 @@ class CategoriesHelperTest &lt; ActiveSupport::TestCase
15 15 expects(:options_for_select).with([['General Category', 'Category'],[ 'Product Category', 'ProductCategory'],[ 'Region', 'Region' ]], 'fieldvalue').returns('OPTIONS')
16 16 expects(:select_tag).with('type', 'OPTIONS').returns('TAG')
17 17 expects(:labelled_form_field).with(anything, 'TAG').returns('RESULT')
18   -
  18 +
19 19 assert_equal 'RESULT', select_category_type('fieldname')
20 20 end
21 21  
  22 + should 'return category color if its defined' do
  23 + category1 = fast_create(Category, :name => 'education', :display_color => 'fbfbfb')
  24 + assert_equal 'background-color: #fbfbfb;', category_color_style(category1)
  25 + end
  26 +
  27 + should 'not return category parent color if category color is not defined' do
  28 + e = fast_create(Environment)
  29 + category1 = fast_create(Category, :name => 'education', :display_color => 'fbfbfb', :environment_id => e.id)
  30 + category2 = fast_create(Category, :name => 'education', :display_color => nil, :parent_id => category1.id, :environment_id => e.id)
  31 + assert_equal '', category_color_style(category2)
  32 + end
  33 +
22 34 end
... ...
test/unit/category_test.rb
  Diff comments   View file @8f79b72
... ... @@ -159,36 +159,6 @@ class CategoryTest &lt; ActiveSupport::TestCase
159 159  
160 160 end
161 161  
162   - should "limit the possibile display colors" do
163   - c = build(Category, :name => 'test category', :environment_id => @env.id)
164   -
165   - c.display_color = 16
166   - c.valid?
167   - assert c.errors[:display_color.to_s].present?
168   -
169   - valid = (1..15).map { |item| item.to_i }
170   - valid.each do |item|
171   - c.display_color = item
172   - c.valid?
173   - assert !c.errors[:display_color.to_s].present?
174   - end
175   -
176   - end
177   -
178   - should 'avoid duplicated display colors' do
179   - c1 = fast_create(Category, :name => 'test category', :environment_id => @env.id, :display_color => 1)
180   -
181   - c = build(Category, :name => 'lalala', :environment_id => @env.id)
182   - c.display_color = 1
183   - assert !c.valid?
184   - assert c.errors[:display_color.to_s].present?
185   -
186   - c.display_color = 2
187   - c.valid?
188   - assert !c.errors[:display_color.to_s].present?
189   -
190   - end
191   -
192 162 should 'be able to get top ancestor' do
193 163 c1 = fast_create(Category, :name => 'test category', :environment_id => @env.id)
194 164 c2 = fast_create(Category, :name => 'test category', :environment_id => @env.id, :parent_id => c1.id)
... ...
test/unit/environment_test.rb
  Diff comments   View file @8f79b72
... ... @@ -156,7 +156,7 @@ class EnvironmentTest &lt; ActiveSupport::TestCase
156 156  
157 157 should 'list displayable categories' do
158 158 env = fast_create(Environment)
159   - cat1 = create(Category, :environment => env, :name => 'category one', :display_color => 1)
  159 + cat1 = create(Category, :environment => env, :name => 'category one', :display_color => 'ffa500')
160 160 assert ! cat1.new_record?
161 161  
162 162 # subcategories should be ignored
... ...