https://arakmu.ac.ir/assets/77e115f4/jquery.simplecolorpicker.js?v=1789538169

1(function($) {
2  'use strict';
3
4  /**
5   * Constructor.
6   */
7  var SimpleColorPicker = function(select, options) {
8    this.init('simplecolorpicker', select, options);
9  };
10
11  /**
12   * SimpleColorPicker class.
13   */
14  SimpleColorPicker.prototype = {
15    constructor: SimpleColorPicker,
16
17    init: function(type, select, options) {
18      var self = this;
19
20      self.type = type;
21
22      self.$select = $(select);
23      self.$select.hide();
24
25      self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
26
27      self.$colorList = null;
28
29      if (self.options.picker === true) {
30        var selectText = self.$select.find('> option:selected').text();
31        self.$icon = $('<span class="simplecolorpicker icon"'
32                     + ' title="' + selectText + '"'
33                     + ' style="background-color: ' + self.$select.val() + ';"'
34                     + ' role="button" tabindex="0">'
35                     + '</span>').insertAfter(self.$select);
36        self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));
37
38        self.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></span>').appendTo(document.body);
39        self.$colorList = self.$picker;
40
41        // Hide picker when clicking outside
42        $(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
43        self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
44      } else {
45        self.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
46        self.$colorList = self.$inline;
47      }
48
49      // Build the list of colors
50      // <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
51      self.$select.find('> option').each(function() {
52        var $option = $(this);
53        var color = $option.val();
54
55        var isSelected = $option.is(':selected');
56        var isDisabled = $option.is(':disabled');
57
58        var selected = '';
59        if (isSelected === true) {
60          selected = ' data-selected';
61        }
62
63        var disabled = '';
64        if (isDisabled === true) {
65          disabled = ' data-disabled';
66        }
67
68        var title = '';
69        if (isDisabled === false) {
70          title = ' title="' + $option.text() + '"';
71        }
72
73        var role = '';
74        if (isDisabled === false) {
75          role = ' role="button" tabindex="0"';
76        }
77
78        var $colorSpan = $('<span class="color"'
79                         + title
80                         + ' style="background-color: ' + color + ';"'
81                         + ' data-color="' + color + '"'
82                         + selected
83                         + disabled
84                         + role + '>'
85                         + '</span>');
86
87        self.$colorList.append($colorSpan);
88        $colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
89
90        var $next = $option.next();
91        if ($next.is('optgroup') === true) {
92          // Vertical break, like hr
93          self.$colorList.append('<span class="vr"></span>');
94        }
95      });
96    },
97
98    /**
99     * Changes the selected color.
100     *
101     * @param color the hexadecimal color to select, ex: '#fbd75b'
102     */
103    selectColor: function(color) {
104      var self = this;
105
106      var $colorSpan = self.$colorList.find('> span.color').filter(function() {
107        return $(this).data('color').toLowerCase() === color.toLowerCase();
108      });
109
110      if ($colorSpan.length > 0) {
111        self.selectColorSpan($colorSpan);
112      } else {
113        console.error("The given color '" + color + "' could not be found");
114      }
115    },
116
117    showPicker: function() {
118      var pos = this.$icon.offset();
119      this.$picker.css({
120        // Remove some pixels to align the picker icon with the icons inside the dropdown
121        left: pos.left - 6,
122        top: pos.top + this.$icon.outerHeight()
123      });
124
125      this.$picker.show(this.options.pickerDelay);
126    },
127
128    hidePicker: function() {
129      this.$picker.hide(this.options.pickerDelay);
130    },
131
132    /**
133     * Selects the given span inside $colorList.
134     *
135     * The given span becomes the selected one.
136     * It also changes the HTML select value, this will emit the 'change' event.
137     */
138    selectColorSpan: function($colorSpan) {
139      var color = $colorSpan.data('color');
140      var title = $colorSpan.prop('title');
141

142      // Mark this span as the selected one
143      $colorSpan.siblings().removeAttr('data-selected');
144      $colorSpan.attr('data-selected', '');
145
146      if (this.options.picker === true) {
147        this.$icon.css('background-color', color);
148        this.$icon.prop('title', title);
149        this.hidePicker();
150      }
151
152      // Change HTML select value
153      this.$select.val(color);
154    },
155
156    /**
157     * The user clicked on a color inside $colorList.
158     */
159    colorSpanClicked: function(e) {
160      // When a color is clicked, make it the new selected one (unless disabled)
161      if ($(e.target).is('[data-disabled]') === false) {
162        this.selectColorSpan($(e.target));
163        this.$select.trigger('change');
164      }
165    },
166
167    /**
168     * Prevents the mousedown event from "eating" the click event.
169     */
170    mousedown: function(e) {
171      e.stopPropagation();
172      e.preventDefault();
173    },
174
175    destroy: function() {
176      if (this.options.picker === true) {
177        this.$icon.off('.' + this.type);
178        this.$icon.remove();
179        $(document).off('.' + this.type);
180      }
181
182      this.$colorList.off('.' + this.type);
183      this.$colorList.remove();
184
185      this.$select.removeData(this.type);
186      this.$select.show();
187    }
188  };
189
190  /**
191   * Plugin definition.
192   * How to use: $('#id').simplecolorpicker()
193   */
194  $.fn.simplecolorpicker = function(option) {
195    var args = $.makeArray(arguments);
196    args.shift();
197
198    // For HTML element passed to the plugin
199    return this.each(function() {
200      var $this = $(this),
201        data = $this.data('simplecolorpicker'),
202        options = typeof option === 'object' && option;
203      if (data === undefined) {
204        $this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
205      }
206      if (typeof option === 'string') {
207        data[option].apply(data, args);
208      }
209    });
210  };
211
212  /**
213   * Default options.
214   */
215  $.fn.simplecolorpicker.defaults = {
216    // No theme by default
217    theme: '',
218
219    // Show the picker or make it inline
220    picker: false,
221
222    // Animation delay in milliseconds
223    pickerDelay: 0
224  };
225
226})(jQuery);