[Summary view] [Print] [Text view]

   1  //
   2  // jQuery MiniColors: A tiny color picker built on jQuery
   3  //
   4  // Developed by Cory LaViska for A Beautiful Site, LLC
   5  //
   6  // Licensed under the MIT license: http://opensource.org/licenses/MIT
   7  //
   8  (function (factory) {
   9    if(typeof define === 'function' && define.amd) {
  10      // AMD. Register as an anonymous module.
  11      define(['jquery'], factory);
  12    } else if(typeof exports === 'object') {
  13      // Node/CommonJS
  14      module.exports = factory(require('jquery'));
  15    } else {
  16      // Browser globals
  17      factory(jQuery);
  18    }
  19  }(function ($) {
  20    'use strict';
  21  
  22    // Defaults
  23    $.minicolors = {
  24      defaults: {
  25        animationSpeed: 50,
  26        animationEasing: 'swing',
  27        change: null,
  28        changeDelay: 0,
  29        control: 'hue',
  30        defaultValue: '',
  31        format: 'hex',
  32        hide: null,
  33        hideSpeed: 100,
  34        inline: false,
  35        keywords: '',
  36        letterCase: 'lowercase',
  37        opacity: false,
  38        position: 'bottom',
  39        show: null,
  40        showSpeed: 100,
  41        theme: 'default',
  42        swatches: []
  43      }
  44    };
  45  
  46    // Public methods
  47    $.extend($.fn, {
  48      minicolors: function(method, data) {
  49  
  50        switch(method) {
  51          // Destroy the control
  52          case 'destroy':
  53            $(this).each(function() {
  54              destroy($(this));
  55            });
  56            return $(this);
  57  
  58          // Hide the color picker
  59          case 'hide':
  60            hide();
  61            return $(this);
  62  
  63          // Get/set opacity
  64          case 'opacity':
  65            // Getter
  66            if(data === undefined) {
  67              // Getter
  68              return $(this).attr('data-opacity');
  69            } else {
  70              // Setter
  71              $(this).each(function() {
  72                updateFromInput($(this).attr('data-opacity', data));
  73              });
  74            }
  75            return $(this);
  76  
  77          // Get an RGB(A) object based on the current color/opacity
  78          case 'rgbObject':
  79            return rgbObject($(this), method === 'rgbaObject');
  80  
  81          // Get an RGB(A) string based on the current color/opacity
  82          case 'rgbString':
  83          case 'rgbaString':
  84            return rgbString($(this), method === 'rgbaString');
  85  
  86          // Get/set settings on the fly
  87          case 'settings':
  88            if(data === undefined) {
  89              return $(this).data('minicolors-settings');
  90            } else {
  91              // Setter
  92              $(this).each(function() {
  93                var settings = $(this).data('minicolors-settings') || {};
  94                destroy($(this));
  95                $(this).minicolors($.extend(true, settings, data));
  96              });
  97            }
  98            return $(this);
  99  
 100          // Show the color picker
 101          case 'show':
 102            show($(this).eq(0));
 103            return $(this);
 104  
 105          // Get/set the hex color value
 106          case 'value':
 107            if(data === undefined) {
 108              // Getter
 109              return $(this).val();
 110            } else {
 111              // Setter
 112              $(this).each(function() {
 113                if(typeof(data) === 'object' && data !== null) {
 114                  if(data.opacity !== undefined) {
 115                    $(this).attr('data-opacity', keepWithin(data.opacity, 0, 1));
 116                  }
 117                  if(data.color) {
 118                    $(this).val(data.color);
 119                  }
 120                } else {
 121                  $(this).val(data);
 122                }
 123                updateFromInput($(this));
 124              });
 125            }
 126            return $(this);
 127  
 128          // Initializes the control
 129          default:
 130            if(method !== 'create') data = method;
 131            $(this).each(function() {
 132              init($(this), data);
 133            });
 134            return $(this);
 135  
 136        }
 137  
 138      }
 139    });
 140  
 141    // Initialize input elements
 142    function init(input, settings) {
 143      var minicolors = $('<div class="minicolors" />');
 144      var defaults = $.minicolors.defaults;
 145      var name;
 146      var size;
 147      var swatches;
 148      var swatch;
 149      var swatchString;
 150      var panel;
 151      var i;
 152  
 153      // Do nothing if already initialized
 154      if(input.data('minicolors-initialized')) return;
 155  
 156      // Handle settings
 157      settings = $.extend(true, {}, defaults, settings);
 158  
 159      // The wrapper
 160      minicolors
 161        .addClass('minicolors-theme-' + settings.theme)
 162        .toggleClass('minicolors-with-opacity', settings.opacity);
 163  
 164      // Custom positioning
 165      if(settings.position !== undefined) {
 166        $.each(settings.position.split(' '), function() {
 167          minicolors.addClass('minicolors-position-' + this);
 168        });
 169      }
 170  
 171      // Input size
 172      if(settings.format === 'rgb') {
 173        size = settings.opacity ? '25' : '20';
 174      } else {
 175        size = settings.keywords ? '11' : '7';
 176      }
 177  
 178      // The input
 179      input
 180        .addClass('minicolors-input')
 181        .data('minicolors-initialized', false)
 182        .data('minicolors-settings', settings)
 183        .prop('size', size)
 184        .wrap(minicolors)
 185        .after(
 186          '<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
 187                  '<div class="minicolors-slider minicolors-sprite">' +
 188                    '<div class="minicolors-picker"></div>' +
 189                  '</div>' +
 190                  '<div class="minicolors-opacity-slider minicolors-sprite">' +
 191                    '<div class="minicolors-picker"></div>' +
 192                  '</div>' +
 193                  '<div class="minicolors-grid minicolors-sprite">' +
 194                    '<div class="minicolors-grid-inner"></div>' +
 195                    '<div class="minicolors-picker"><div></div></div>' +
 196                  '</div>' +
 197                '</div>'
 198        );
 199  
 200      // The swatch
 201      if(!settings.inline) {
 202        input.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>');
 203        input.next('.minicolors-input-swatch').on('click', function(event) {
 204          event.preventDefault();
 205          input.trigger('focus');
 206        });
 207      }
 208  
 209      // Prevent text selection in IE
 210      panel = input.parent().find('.minicolors-panel');
 211      panel.on('selectstart', function() { return false; }).end();
 212  
 213      // Swatches
 214      if(settings.swatches && settings.swatches.length !== 0) {
 215        panel.addClass('minicolors-with-swatches');
 216        swatches = $('<ul class="minicolors-swatches"></ul>')
 217          .appendTo(panel);
 218        for(i = 0; i < settings.swatches.length; ++i) {
 219          // allow for custom objects as swatches
 220          if(typeof settings.swatches[i] === 'object') {
 221            name = settings.swatches[i].name;
 222            swatch = settings.swatches[i].color;
 223          } else {
 224            name = '';
 225            swatch = settings.swatches[i];
 226          }
 227          swatchString = swatch;
 228          swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true));
 229          $('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>')
 230            .attr("title", name)
 231            .appendTo(swatches)
 232            .data('swatch-color', swatchString)
 233            .find('.minicolors-swatch-color')
 234            .css({
 235              backgroundColor: ((swatchString !== 'transparent') ? rgb2hex(swatch) : 'transparent'),
 236              opacity: String(swatch.a)
 237            });
 238          settings.swatches[i] = swatch;
 239        }
 240      }
 241  
 242      // Inline controls
 243      if(settings.inline) input.parent().addClass('minicolors-inline');
 244  
 245      updateFromInput(input, false);
 246  
 247      input.data('minicolors-initialized', true);
 248    }
 249  
 250    // Returns the input back to its original state
 251    function destroy(input) {
 252      var minicolors = input.parent();
 253  
 254      // Revert the input element
 255      input
 256        .removeData('minicolors-initialized')
 257        .removeData('minicolors-settings')
 258        .removeProp('size')
 259        .removeClass('minicolors-input');
 260  
 261      // Remove the wrap and destroy whatever remains
 262      minicolors.before(input).remove();
 263    }
 264  
 265    // Shows the specified dropdown panel
 266    function show(input) {
 267      var minicolors = input.parent();
 268      var panel = minicolors.find('.minicolors-panel');
 269      var settings = input.data('minicolors-settings');
 270  
 271      // Do nothing if uninitialized, disabled, inline, or already open
 272      if(
 273        !input.data('minicolors-initialized') ||
 274        input.prop('disabled') ||
 275        minicolors.hasClass('minicolors-inline') ||
 276        minicolors.hasClass('minicolors-focus')
 277      ) return;
 278  
 279      hide();
 280  
 281      minicolors.addClass('minicolors-focus');
 282      if (panel.animate) {
 283        panel
 284          .stop(true, true)
 285          .fadeIn(settings.showSpeed, function () {
 286            if (settings.show) settings.show.call(input.get(0));
 287          });
 288      } else {
 289        panel.show();
 290        if (settings.show) settings.show.call(input.get(0));
 291      }
 292    }
 293  
 294    // Hides all dropdown panels
 295    function hide() {
 296      $('.minicolors-focus').each(function() {
 297        var minicolors = $(this);
 298        var input = minicolors.find('.minicolors-input');
 299        var panel = minicolors.find('.minicolors-panel');
 300        var settings = input.data('minicolors-settings');
 301  
 302        if (panel.animate) {
 303          panel.fadeOut(settings.hideSpeed, function () {
 304            if (settings.hide) settings.hide.call(input.get(0));
 305            minicolors.removeClass('minicolors-focus');
 306          });
 307        } else {
 308          panel.hide();
 309          if (settings.hide) settings.hide.call(input.get(0));
 310          minicolors.removeClass('minicolors-focus');
 311        }
 312      });
 313    }
 314  
 315    // Moves the selected picker
 316    function move(target, event, animate) {
 317      var input = target.parents('.minicolors').find('.minicolors-input');
 318      var settings = input.data('minicolors-settings');
 319      var picker = target.find('[class$=-picker]');
 320      var offsetX = target.offset().left;
 321      var offsetY = target.offset().top;
 322      var x = Math.round(event.pageX - offsetX);
 323      var y = Math.round(event.pageY - offsetY);
 324      var duration = animate ? settings.animationSpeed : 0;
 325      var wx, wy, r, phi, styles;
 326  
 327      // Touch support
 328      if(event.originalEvent.changedTouches) {
 329        x = event.originalEvent.changedTouches[0].pageX - offsetX;
 330        y = event.originalEvent.changedTouches[0].pageY - offsetY;
 331      }
 332  
 333      // Constrain picker to its container
 334      if(x < 0) x = 0;
 335      if(y < 0) y = 0;
 336      if(x > target.width()) x = target.width();
 337      if(y > target.height()) y = target.height();
 338  
 339      // Constrain color wheel values to the wheel
 340      if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) {
 341        wx = 75 - x;
 342        wy = 75 - y;
 343        r = Math.sqrt(wx * wx + wy * wy);
 344        phi = Math.atan2(wy, wx);
 345        if(phi < 0) phi += Math.PI * 2;
 346        if(r > 75) {
 347          r = 75;
 348          x = 75 - (75 * Math.cos(phi));
 349          y = 75 - (75 * Math.sin(phi));
 350        }
 351        x = Math.round(x);
 352        y = Math.round(y);
 353      }
 354  
 355      // Move the picker
 356      styles = {
 357        top: y + 'px'
 358      };
 359      if(target.is('.minicolors-grid')) {
 360        styles.left = x + 'px';
 361      }
 362      if (picker.animate) {
 363        picker
 364          .stop(true)
 365          .animate(styles, duration, settings.animationEasing, function() {
 366            updateFromControl(input, target);
 367          });
 368      } else {
 369        picker
 370          .css(styles);
 371        updateFromControl(input, target);
 372      }
 373    }
 374  
 375    // Sets the input based on the color picker values
 376    function updateFromControl(input, target) {
 377  
 378      function getCoords(picker, container) {
 379        var left, top;
 380        if(!picker.length || !container) return null;
 381        left = picker.offset().left;
 382        top = picker.offset().top;
 383  
 384        return {
 385          x: left - container.offset().left + (picker.outerWidth() / 2),
 386          y: top - container.offset().top + (picker.outerHeight() / 2)
 387        };
 388      }
 389  
 390      var hue, saturation, brightness, x, y, r, phi;
 391      var hex = input.val();
 392      var opacity = input.attr('data-opacity');
 393  
 394      // Helpful references
 395      var minicolors = input.parent();
 396      var settings = input.data('minicolors-settings');
 397      var swatch = minicolors.find('.minicolors-input-swatch');
 398  
 399      // Panel objects
 400      var grid = minicolors.find('.minicolors-grid');
 401      var slider = minicolors.find('.minicolors-slider');
 402      var opacitySlider = minicolors.find('.minicolors-opacity-slider');
 403  
 404      // Picker objects
 405      var gridPicker = grid.find('[class$=-picker]');
 406      var sliderPicker = slider.find('[class$=-picker]');
 407      var opacityPicker = opacitySlider.find('[class$=-picker]');
 408  
 409      // Picker positions
 410      var gridPos = getCoords(gridPicker, grid);
 411      var sliderPos = getCoords(sliderPicker, slider);
 412      var opacityPos = getCoords(opacityPicker, opacitySlider);
 413  
 414      // Handle colors
 415      if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) {
 416  
 417        // Determine HSB values
 418        switch(settings.control) {
 419          case 'wheel':
 420            // Calculate hue, saturation, and brightness
 421            x = (grid.width() / 2) - gridPos.x;
 422            y = (grid.height() / 2) - gridPos.y;
 423            r = Math.sqrt(x * x + y * y);
 424            phi = Math.atan2(y, x);
 425            if(phi < 0) phi += Math.PI * 2;
 426            if(r > 75) {
 427              r = 75;
 428              gridPos.x = 69 - (75 * Math.cos(phi));
 429              gridPos.y = 69 - (75 * Math.sin(phi));
 430            }
 431            saturation = keepWithin(r / 0.75, 0, 100);
 432            hue = keepWithin(phi * 180 / Math.PI, 0, 360);
 433            brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
 434            hex = hsb2hex({
 435              h: hue,
 436              s: saturation,
 437              b: brightness
 438            });
 439  
 440            // Update UI
 441            slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
 442            break;
 443  
 444          case 'saturation':
 445            // Calculate hue, saturation, and brightness
 446            hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
 447            saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
 448            brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
 449            hex = hsb2hex({
 450              h: hue,
 451              s: saturation,
 452              b: brightness
 453            });
 454  
 455            // Update UI
 456            slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
 457            minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
 458            break;
 459  
 460          case 'brightness':
 461            // Calculate hue, saturation, and brightness
 462            hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
 463            saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
 464            brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
 465            hex = hsb2hex({
 466              h: hue,
 467              s: saturation,
 468              b: brightness
 469            });
 470  
 471            // Update UI
 472            slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
 473            minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
 474            break;
 475  
 476          default:
 477            // Calculate hue, saturation, and brightness
 478            hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
 479            saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
 480            brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
 481            hex = hsb2hex({
 482              h: hue,
 483              s: saturation,
 484              b: brightness
 485            });
 486  
 487            // Update UI
 488            grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
 489            break;
 490        }
 491  
 492        // Handle opacity
 493        if(settings.opacity) {
 494          opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
 495        } else {
 496          opacity = 1;
 497        }
 498  
 499        updateInput(input, hex, opacity);
 500      }
 501      else {
 502        // Set swatch color
 503        swatch.find('span').css({
 504          backgroundColor: hex,
 505          opacity: String(opacity)
 506        });
 507  
 508        // Handle change event
 509        doChange(input, hex, opacity);
 510      }
 511    }
 512  
 513    // Sets the value of the input and does the appropriate conversions
 514    // to respect settings, also updates the swatch
 515    function updateInput(input, value, opacity) {
 516      var rgb;
 517  
 518      // Helpful references
 519      var minicolors = input.parent();
 520      var settings = input.data('minicolors-settings');
 521      var swatch = minicolors.find('.minicolors-input-swatch');
 522  
 523      if(settings.opacity) input.attr('data-opacity', opacity);
 524  
 525      // Set color string
 526      if(settings.format === 'rgb') {
 527        // Returns RGB(A) string
 528  
 529        // Checks for input format and does the conversion
 530        if(isRgb(value)) {
 531          rgb = parseRgb(value, true);
 532        }
 533        else {
 534          rgb = hex2rgb(parseHex(value, true));
 535        }
 536  
 537        opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
 538        if(isNaN(opacity) || !settings.opacity) opacity = 1;
 539  
 540        if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {
 541          // Set RGBA string if alpha
 542          value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
 543        } else {
 544          // Set RGB string (alpha = 1)
 545          value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
 546        }
 547      } else {
 548        // Returns hex color
 549  
 550        // Checks for input format and does the conversion
 551        if(isRgb(value)) {
 552          value = rgbString2hex(value);
 553        }
 554  
 555        value = convertCase(value, settings.letterCase);
 556      }
 557  
 558      // Update value from picker
 559      input.val(value);
 560  
 561      // Set swatch color
 562      swatch.find('span').css({
 563        backgroundColor: value,
 564        opacity: String(opacity)
 565      });
 566  
 567      // Handle change event
 568      doChange(input, value, opacity);
 569    }
 570  
 571    // Sets the color picker values from the input
 572    function updateFromInput(input, preserveInputValue) {
 573      var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi;
 574  
 575      // Helpful references
 576      var minicolors = input.parent();
 577      var settings = input.data('minicolors-settings');
 578      var swatch = minicolors.find('.minicolors-input-swatch');
 579  
 580      // Panel objects
 581      var grid = minicolors.find('.minicolors-grid');
 582      var slider = minicolors.find('.minicolors-slider');
 583      var opacitySlider = minicolors.find('.minicolors-opacity-slider');
 584  
 585      // Picker objects
 586      var gridPicker = grid.find('[class$=-picker]');
 587      var sliderPicker = slider.find('[class$=-picker]');
 588      var opacityPicker = opacitySlider.find('[class$=-picker]');
 589  
 590      // Determine hex/HSB values
 591      if(isRgb(input.val())) {
 592        // If input value is a rgb(a) string, convert it to hex color and update opacity
 593        hex = rgbString2hex(input.val());
 594        alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1);
 595        if(alpha) {
 596          input.attr('data-opacity', alpha);
 597        }
 598      } else {
 599        hex = convertCase(parseHex(input.val(), true), settings.letterCase);
 600      }
 601  
 602      if(!hex){
 603        hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase);
 604      }
 605      hsb = hex2hsb(hex);
 606  
 607      // Get array of lowercase keywords
 608      keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
 609        return a.toLowerCase().trim();
 610      });
 611  
 612      // Set color string
 613      if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
 614        value = convertCase(input.val());
 615      } else {
 616        value = isRgb(input.val()) ? parseRgb(input.val()) : hex;
 617      }
 618  
 619      // Update input value
 620      if(!preserveInputValue) input.val(value);
 621  
 622      // Determine opacity value
 623      if(settings.opacity) {
 624        // Get from data-opacity attribute and keep within 0-1 range
 625        opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
 626        if(isNaN(opacity)) opacity = 1;
 627        input.attr('data-opacity', opacity);
 628        swatch.find('span').css('opacity', String(opacity));
 629  
 630        // Set opacity picker position
 631        y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
 632        opacityPicker.css('top', y + 'px');
 633      }
 634  
 635      // Set opacity to zero if input value is transparent
 636      if(input.val().toLowerCase() === 'transparent') {
 637        swatch.find('span').css('opacity', String(0));
 638      }
 639  
 640      // Update swatch
 641      swatch.find('span').css('backgroundColor', hex);
 642  
 643      // Determine picker locations
 644      switch(settings.control) {
 645        case 'wheel':
 646          // Set grid position
 647          r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);
 648          phi = hsb.h * Math.PI / 180;
 649          x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
 650          y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
 651          gridPicker.css({
 652            top: y + 'px',
 653            left: x + 'px'
 654          });
 655  
 656          // Set slider position
 657          y = 150 - (hsb.b / (100 / grid.height()));
 658          if(hex === '') y = 0;
 659          sliderPicker.css('top', y + 'px');
 660          
 661          // Update panel color
 662          slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
 663          break;
 664  
 665        case 'saturation':
 666          // Set grid position
 667          x = keepWithin((5 * hsb.h) / 12, 0, 150);
 668          y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
 669          gridPicker.css({
 670            top: y + 'px',
 671            left: x + 'px'
 672          });
 673  
 674          // Set slider position
 675          y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());
 676          sliderPicker.css('top', y + 'px');
 677  
 678          // Update UI
 679          slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
 680          minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
 681          break;
 682  
 683        case 'brightness':
 684          // Set grid position
 685          x = keepWithin((5 * hsb.h) / 12, 0, 150);
 686          y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
 687          gridPicker.css({
 688            top: y + 'px',
 689            left: x + 'px'
 690          });
 691  
 692          // Set slider position
 693          y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());
 694          sliderPicker.css('top', y + 'px');
 695  
 696          // Update UI
 697          slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
 698          minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));
 699          break;
 700  
 701        default:
 702          // Set grid position
 703          x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());
 704          y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
 705          gridPicker.css({
 706            top: y + 'px',
 707            left: x + 'px'
 708          });
 709  
 710          // Set slider position
 711          y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());
 712          sliderPicker.css('top', y + 'px');
 713  
 714          // Update panel color
 715          grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));
 716          break;
 717      }
 718  
 719      // Fire change event, but only if minicolors is fully initialized
 720      if(input.data('minicolors-initialized')) {
 721        doChange(input, value, opacity);
 722      }
 723    }
 724  
 725    // Runs the change and changeDelay callbacks
 726    function doChange(input, value, opacity) {
 727      var settings = input.data('minicolors-settings');
 728      var lastChange = input.data('minicolors-lastChange');
 729      var obj, sel, i;
 730  
 731      // Only run if it actually changed
 732      if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) {
 733  
 734        // Remember last-changed value
 735        input.data('minicolors-lastChange', {
 736          value: value,
 737          opacity: opacity
 738        });
 739  
 740        // Check and select applicable swatch
 741        if(settings.swatches && settings.swatches.length !== 0) {
 742          if(!isRgb(value)) {
 743            obj = hex2rgb(value);
 744          }
 745          else {
 746            obj = parseRgb(value, true);
 747          }
 748          sel = -1;
 749          for(i = 0; i < settings.swatches.length; ++i) {
 750            if(obj.r === settings.swatches[i].r && obj.g === settings.swatches[i].g && obj.b === settings.swatches[i].b && obj.a === settings.swatches[i].a) {
 751              sel = i;
 752              break;
 753            }
 754          }
 755  
 756          input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');
 757          if(sel !== -1) {
 758            input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
 759          }
 760        }
 761  
 762        // Fire change event
 763        if(settings.change) {
 764          if(settings.changeDelay) {
 765            // Call after a delay
 766            clearTimeout(input.data('minicolors-changeTimeout'));
 767            input.data('minicolors-changeTimeout', setTimeout(function() {
 768              settings.change.call(input.get(0), value, opacity);
 769            }, settings.changeDelay));
 770          } else {
 771            // Call immediately
 772            settings.change.call(input.get(0), value, opacity);
 773          }
 774        }
 775        input.trigger('change').trigger('input');
 776      }
 777    }
 778  
 779    // Generates an RGB(A) object based on the input's value
 780    function rgbObject(input) {
 781      var rgb,
 782        opacity = $(input).attr('data-opacity');
 783      if( isRgb($(input).val()) ) {
 784        rgb = parseRgb($(input).val(), true);
 785      } else {
 786        var hex = parseHex($(input).val(), true);
 787        rgb = hex2rgb(hex);
 788      }
 789      if( !rgb ) return null;
 790      if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
 791      return rgb;
 792    }
 793  
 794    // Generates an RGB(A) string based on the input's value
 795    function rgbString(input, alpha) {
 796      var rgb,
 797        opacity = $(input).attr('data-opacity');
 798      if( isRgb($(input).val()) ) {
 799        rgb = parseRgb($(input).val(), true);
 800      } else {
 801        var hex = parseHex($(input).val(), true);
 802        rgb = hex2rgb(hex);
 803      }
 804      if( !rgb ) return null;
 805      if( opacity === undefined ) opacity = 1;
 806      if( alpha ) {
 807        return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
 808      } else {
 809        return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
 810      }
 811    }
 812  
 813    // Converts to the letter case specified in settings
 814    function convertCase(string, letterCase) {
 815      return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
 816    }
 817  
 818    // Parses a string and returns a valid hex string when possible
 819    function parseHex(string, expand) {
 820      string = string.replace(/^#/g, '');
 821      if(!string.match(/^[A-F0-9]{3,6}/ig)) return '';
 822      if(string.length !== 3 && string.length !== 6) return '';
 823      if(string.length === 3 && expand) {
 824        string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
 825      }
 826      return '#' + string;
 827    }
 828  
 829    // Parses a string and returns a valid RGB(A) string when possible
 830    function parseRgb(string, obj) {
 831      var values = string.replace(/[^\d,.]/g, '');
 832      var rgba = values.split(',');
 833  
 834      rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255);
 835      rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255);
 836      rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255);
 837      if(rgba[3] !== undefined) {
 838        rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1);
 839      }
 840  
 841      // Return RGBA object
 842      if( obj ) {
 843        if (rgba[3] !== undefined) {
 844          return {
 845            r: rgba[0],
 846            g: rgba[1],
 847            b: rgba[2],
 848            a: rgba[3]
 849          };
 850        } else {
 851          return {
 852            r: rgba[0],
 853            g: rgba[1],
 854            b: rgba[2]
 855          };
 856        }
 857      }
 858  
 859      // Return RGBA string
 860      if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) {
 861        return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')';
 862      } else {
 863        return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')';
 864      }
 865  
 866    }
 867  
 868    // Parses a string and returns a valid color string when possible
 869    function parseInput(string, expand) {
 870      if(isRgb(string)) {
 871        // Returns a valid rgb(a) string
 872        return parseRgb(string);
 873      } else {
 874        return parseHex(string, expand);
 875      }
 876    }
 877  
 878    // Keeps value within min and max
 879    function keepWithin(value, min, max) {
 880      if(value < min) value = min;
 881      if(value > max) value = max;
 882      return value;
 883    }
 884  
 885    // Checks if a string is a valid RGB(A) string
 886    function isRgb(string) {
 887      var rgb = string.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 888      return (rgb && rgb.length === 4) ? true : false;
 889    }
 890  
 891    // Function to get alpha from a RGB(A) string
 892    function getAlpha(rgba) {
 893      rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i);
 894      return (rgba && rgba.length === 6) ? rgba[4] : '1';
 895    }
 896  
 897    // Converts an HSB object to an RGB object
 898    function hsb2rgb(hsb) {
 899      var rgb = {};
 900      var h = Math.round(hsb.h);
 901      var s = Math.round(hsb.s * 255 / 100);
 902      var v = Math.round(hsb.b * 255 / 100);
 903      if(s === 0) {
 904        rgb.r = rgb.g = rgb.b = v;
 905      } else {
 906        var t1 = v;
 907        var t2 = (255 - s) * v / 255;
 908        var t3 = (t1 - t2) * (h % 60) / 60;
 909        if(h === 360) h = 0;
 910        if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
 911        else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
 912        else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
 913        else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
 914        else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
 915        else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
 916        else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
 917      }
 918      return {
 919        r: Math.round(rgb.r),
 920        g: Math.round(rgb.g),
 921        b: Math.round(rgb.b)
 922      };
 923    }
 924  
 925    // Converts an RGB string to a hex string
 926    function rgbString2hex(rgb){
 927      rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 928      return (rgb && rgb.length === 4) ? '#' +
 929        ('0' + parseInt(rgb[1],10).toString(16)).slice(-2) +
 930        ('0' + parseInt(rgb[2],10).toString(16)).slice(-2) +
 931        ('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
 932    }
 933  
 934    // Converts an RGB object to a hex string
 935    function rgb2hex(rgb) {
 936      var hex = [
 937        rgb.r.toString(16),
 938        rgb.g.toString(16),
 939        rgb.b.toString(16)
 940      ];
 941      $.each(hex, function(nr, val) {
 942        if(val.length === 1) hex[nr] = '0' + val;
 943      });
 944      return '#' + hex.join('');
 945    }
 946  
 947    // Converts an HSB object to a hex string
 948    function hsb2hex(hsb) {
 949      return rgb2hex(hsb2rgb(hsb));
 950    }
 951  
 952    // Converts a hex string to an HSB object
 953    function hex2hsb(hex) {
 954      var hsb = rgb2hsb(hex2rgb(hex));
 955      if(hsb.s === 0) hsb.h = 360;
 956      return hsb;
 957    }
 958  
 959    // Converts an RGB object to an HSB object
 960    function rgb2hsb(rgb) {
 961      var hsb = { h: 0, s: 0, b: 0 };
 962      var min = Math.min(rgb.r, rgb.g, rgb.b);
 963      var max = Math.max(rgb.r, rgb.g, rgb.b);
 964      var delta = max - min;
 965      hsb.b = max;
 966      hsb.s = max !== 0 ? 255 * delta / max : 0;
 967      if(hsb.s !== 0) {
 968        if(rgb.r === max) {
 969          hsb.h = (rgb.g - rgb.b) / delta;
 970        } else if(rgb.g === max) {
 971          hsb.h = 2 + (rgb.b - rgb.r) / delta;
 972        } else {
 973          hsb.h = 4 + (rgb.r - rgb.g) / delta;
 974        }
 975      } else {
 976        hsb.h = -1;
 977      }
 978      hsb.h *= 60;
 979      if(hsb.h < 0) {
 980        hsb.h += 360;
 981      }
 982      hsb.s *= 100/255;
 983      hsb.b *= 100/255;
 984      return hsb;
 985    }
 986  
 987    // Converts a hex string to an RGB object
 988    function hex2rgb(hex) {
 989      hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
 990      return {
 991        r: hex >> 16,
 992        g: (hex & 0x00FF00) >> 8,
 993        b: (hex & 0x0000FF)
 994      };
 995    }
 996  
 997    // Handle events
 998    $([document])
 999      // Hide on clicks outside of the control
1000      .on('mousedown.minicolors touchstart.minicolors', function(event) {
1001        if(!$(event.target).parents().add(event.target).hasClass('minicolors')) {
1002          hide();
1003        }
1004      })
1005      // Start moving
1006      .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
1007        var target = $(this);
1008        event.preventDefault();
1009        $(event.delegateTarget).data('minicolors-target', target);
1010        move(target, event, true);
1011      })
1012      // Move pickers
1013      .on('mousemove.minicolors touchmove.minicolors', function(event) {
1014        var target = $(event.delegateTarget).data('minicolors-target');
1015        if(target) move(target, event);
1016      })
1017      // Stop moving
1018      .on('mouseup.minicolors touchend.minicolors', function() {
1019        $(this).removeData('minicolors-target');
1020      })
1021      // Selected a swatch
1022      .on('click.minicolors', '.minicolors-swatches li', function(event) {
1023        event.preventDefault();
1024        var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color');
1025        updateInput(input, color, getAlpha(color));
1026        updateFromInput(input);
1027      })
1028      // Show panel when swatch is clicked
1029      .on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) {
1030        var input = $(this).parent().find('.minicolors-input');
1031        event.preventDefault();
1032        show(input);
1033      })
1034      // Show on focus
1035      .on('focus.minicolors', '.minicolors-input', function() {
1036        var input = $(this);
1037        if(!input.data('minicolors-initialized')) return;
1038        show(input);
1039      })
1040      // Update value on blur
1041      .on('blur.minicolors', '.minicolors-input', function() {
1042        var input = $(this);
1043        var settings = input.data('minicolors-settings');
1044        var keywords;
1045        var hex;
1046        var rgba;
1047        var swatchOpacity;
1048        var value;
1049  
1050        if(!input.data('minicolors-initialized')) return;
1051  
1052        // Get array of lowercase keywords
1053        keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
1054          return a.toLowerCase().trim();
1055        });
1056  
1057        // Set color string
1058        if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
1059          value = input.val();
1060        } else {
1061          // Get RGBA values for easy conversion
1062          if(isRgb(input.val())) {
1063            rgba = parseRgb(input.val(), true);
1064          } else {
1065            hex = parseHex(input.val(), true);
1066            rgba = hex ? hex2rgb(hex) : null;
1067          }
1068  
1069          // Convert to format
1070          if(rgba === null) {
1071            value = settings.defaultValue;
1072          } else if(settings.format === 'rgb') {
1073            value = settings.opacity ?
1074              parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') :
1075              parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')');
1076          } else {
1077            value = rgb2hex(rgba);
1078          }
1079        }
1080  
1081        // Update swatch opacity
1082        swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1;
1083        if(value.toLowerCase() === 'transparent') swatchOpacity = 0;
1084        input
1085          .closest('.minicolors')
1086          .find('.minicolors-input-swatch > span')
1087          .css('opacity', String(swatchOpacity));
1088  
1089        // Set input value
1090        input.val(value);
1091  
1092        // Is it blank?
1093        if(input.val() === '') input.val(parseInput(settings.defaultValue, true));
1094  
1095        // Adjust case
1096        input.val(convertCase(input.val(), settings.letterCase));
1097  
1098      })
1099      // Handle keypresses
1100      .on('keydown.minicolors', '.minicolors-input', function(event) {
1101        var input = $(this);
1102        if(!input.data('minicolors-initialized')) return;
1103        switch(event.which) {
1104          case 9: // tab
1105            hide();
1106            break;
1107          case 13: // enter
1108          case 27: // esc
1109            hide();
1110            input.blur();
1111            break;
1112        }
1113      })
1114      // Update on keyup
1115      .on('keyup.minicolors', '.minicolors-input', function() {
1116        var input = $(this);
1117        if(!input.data('minicolors-initialized')) return;
1118        updateFromInput(input, true);
1119      })
1120      // Update on paste
1121      .on('paste.minicolors', '.minicolors-input', function() {
1122        var input = $(this);
1123        if(!input.data('minicolors-initialized')) return;
1124        setTimeout(function() {
1125          updateFromInput(input, true);
1126        }, 1);
1127      });
1128  }));