--- /dev/null
+/*!
+ * Very simple jQuery Color Picker
+ * https://github.com/tkrotoff/jquery-simplecolorpicker
+ *
+ * Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
+ *
+ * Licensed under the MIT license
+ */
+
+/**
+ * Inspired by Bootstrap Twitter.
+ * See https://github.com/twbs/bootstrap/blob/master/less/navbar.less
+ * See https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less
+ */
+
+.simplecolorpicker.picker {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 1051; /* Above Bootstrap modal (@zindex-modal = 1050) */
+ display: none;
+ float: left;
+
+ min-width: 160px;
+ max-width: 283px; /* @popover-max-width = 276px + 7 */
+
+ padding: 5px 0 0 5px;
+ margin: 2px 0 0;
+ list-style: none;
+ background-color: #fff; /* @dropdown-bg */
+
+ border: 1px solid #ccc; /* @dropdown-fallback-border */
+ border: 1px solid rgba(0, 0, 0, .15); /* @dropdown-border */
+
+ -webkit-border-radius: 4px; /* @border-radius-base */
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+
+ -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+ -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+}
+
+.simplecolorpicker.inline {
+ display: inline-block;
+ padding: 6px 0;
+}
+
+.simplecolorpicker span {
+ margin: 0 5px 5px 0;
+}
+
+.simplecolorpicker.icon,
+.simplecolorpicker span.color {
+ display: inline-block;
+
+ cursor: pointer;
+ border: 1px solid transparent;
+}
+
+.simplecolorpicker.icon:after,
+.simplecolorpicker span.color:after {
+ content: '\00a0\00a0\00a0\00a0'; /* Spaces */
+}
+
+.simplecolorpicker span.color[data-disabled]:hover {
+ cursor: not-allowed;
+ border: 1px solid transparent;
+}
+
+.simplecolorpicker span.color:hover,
+.simplecolorpicker span.color[data-selected],
+.simplecolorpicker span.color[data-selected]:hover {
+ border: 1px solid #222; /* @gray-dark */
+}
+.simplecolorpicker span.color[data-selected]:after {
+ color: #fff;
+}
+
+/* Vertical separator, replaces optgroup. */
+.simplecolorpicker span.vr {
+ border-left: 1px solid #222; /* @gray-dark */
+}
--- /dev/null
+/*!
+ * Very simple jQuery Color Picker
+ * https://github.com/tkrotoff/jquery-simplecolorpicker
+ *
+ * Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
+ *
+ * Licensed under the MIT license
+ */
+
+(function($) {
+ 'use strict';
+
+ /**
+ * Constructor.
+ */
+ var SimpleColorPicker = function(select, options) {
+ this.init('simplecolorpicker', select, options);
+ };
+
+ /**
+ * SimpleColorPicker class.
+ */
+ SimpleColorPicker.prototype = {
+ constructor: SimpleColorPicker,
+
+ init: function(type, select, options) {
+ var self = this;
+
+ self.type = type;
+
+ self.$select = $(select);
+ self.$select.hide();
+
+ self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
+
+ self.$colorList = null;
+
+ if (self.options.picker === true) {
+ var selectText = self.$select.find('> option:selected').text();
+ self.$icon = $('<span class="simplecolorpicker icon"'
+ + ' title="' + selectText + '"'
+ + ' style="background-color: ' + self.$select.val() + ';"'
+ + ' role="button" tabindex="0">'
+ + '</span>').insertAfter(self.$select);
+ self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));
+
+ self.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></span>').appendTo(document.body);
+ self.$colorList = self.$picker;
+
+ // Hide picker when clicking outside
+ $(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
+ self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
+ } else {
+ self.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
+ self.$colorList = self.$inline;
+ }
+
+ // Build the list of colors
+ // <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
+ self.$select.find('> option').each(function() {
+ var $option = $(this);
+ var color = $option.val();
+
+ var isSelected = $option.is(':selected');
+ var isDisabled = $option.is(':disabled');
+
+ var selected = '';
+ if (isSelected === true) {
+ selected = ' data-selected';
+ }
+
+ var disabled = '';
+ if (isDisabled === true) {
+ disabled = ' data-disabled';
+ }
+
+ var title = '';
+ if (isDisabled === false) {
+ title = ' title="' + $option.text() + '"';
+ }
+
+ var role = '';
+ if (isDisabled === false) {
+ role = ' role="button" tabindex="0"';
+ }
+
+ var $colorSpan = $('<span class="color"'
+ + title
+ + ' style="background-color: ' + color + ';"'
+ + ' data-color="' + color + '"'
+ + selected
+ + disabled
+ + role + '>'
+ + '</span>');
+
+ self.$colorList.append($colorSpan);
+ $colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
+
+ var $next = $option.next();
+ if ($next.is('optgroup') === true) {
+ // Vertical break, like hr
+ self.$colorList.append('<span class="vr"></span>');
+ }
+ });
+ },
+
+ /**
+ * Changes the selected color.
+ *
+ * @param color the hexadecimal color to select, ex: '#fbd75b'
+ */
+ selectColor: function(color) {
+ var self = this;
+
+ var $colorSpan = self.$colorList.find('> span.color').filter(function() {
+ return $(this).data('color').toLowerCase() === color.toLowerCase();
+ });
+
+ if ($colorSpan.length > 0) {
+ self.selectColorSpan($colorSpan);
+ } else {
+ console.error("The given color '" + color + "' could not be found");
+ }
+ },
+
+ showPicker: function() {
+ var pos = this.$icon.offset();
+ this.$picker.css({
+ // Remove some pixels to align the picker icon with the icons inside the dropdown
+ left: pos.left - 6,
+ top: pos.top + this.$icon.outerHeight()
+ });
+
+ this.$picker.show(this.options.pickerDelay);
+ },
+
+ hidePicker: function() {
+ this.$picker.hide(this.options.pickerDelay);
+ },
+
+ /**
+ * Selects the given span inside $colorList.
+ *
+ * The given span becomes the selected one.
+ * It also changes the HTML select value, this will emit the 'change' event.
+ */
+ selectColorSpan: function($colorSpan) {
+ var color = $colorSpan.data('color');
+ var title = $colorSpan.prop('title');
+
+ // Mark this span as the selected one
+ $colorSpan.siblings().removeAttr('data-selected');
+ $colorSpan.attr('data-selected', '');
+
+ if (this.options.picker === true) {
+ this.$icon.css('background-color', color);
+ this.$icon.prop('title', title);
+ this.hidePicker();
+ }
+
+ // Change HTML select value
+ this.$select.val(color);
+ },
+
+ /**
+ * The user clicked on a color inside $colorList.
+ */
+ colorSpanClicked: function(e) {
+ // When a color is clicked, make it the new selected one (unless disabled)
+ if ($(e.target).is('[data-disabled]') === false) {
+ this.selectColorSpan($(e.target));
+ this.$select.trigger('change');
+ }
+ },
+
+ /**
+ * Prevents the mousedown event from "eating" the click event.
+ */
+ mousedown: function(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ },
+
+ destroy: function() {
+ if (this.options.picker === true) {
+ this.$icon.off('.' + this.type);
+ this.$icon.remove();
+ $(document).off('.' + this.type);
+ }
+
+ this.$colorList.off('.' + this.type);
+ this.$colorList.remove();
+
+ this.$select.removeData(this.type);
+ this.$select.show();
+ }
+ };
+
+ /**
+ * Plugin definition.
+ * How to use: $('#id').simplecolorpicker()
+ */
+ $.fn.simplecolorpicker = function(option) {
+ var args = $.makeArray(arguments);
+ args.shift();
+
+ // For HTML element passed to the plugin
+ return this.each(function() {
+ var $this = $(this),
+ data = $this.data('simplecolorpicker'),
+ options = typeof option === 'object' && option;
+ if (data === undefined) {
+ $this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
+ }
+ if (typeof option === 'string') {
+ data[option].apply(data, args);
+ }
+ });
+ };
+
+ /**
+ * Default options.
+ */
+ $.fn.simplecolorpicker.defaults = {
+ // No theme by default
+ theme: '',
+
+ // Show the picker or make it inline
+ picker: false,
+
+ // Animation delay in milliseconds
+ pickerDelay: 0
+ };
+
+})(jQuery);
--- /dev/null
+Copyright (c) 2012-2013 Tanguy Krotoff
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.