src/extensions/default/InlineColorEditor/ColorEditor.js
function ColorEditor($parent, color, callback, swatches) {
        // Create the DOM structure, filling in localized strings via Mustache
        this.$element = $(Mustache.render(ColorEditorTemplate, Strings));
        $parent.append(this.$element);

        this._callback = callback;

        this._handleKeydown = this._handleKeydown.bind(this);
        this._handleOpacityKeydown = this._handleOpacityKeydown.bind(this);
        this._handleHslKeydown = this._handleHslKeydown.bind(this);
        this._handleHueKeydown = this._handleHueKeydown.bind(this);
        this._handleSelectionKeydown = this._handleSelectionKeydown.bind(this);
        this._handleOpacityDrag = this._handleOpacityDrag.bind(this);
        this._handleHueDrag = this._handleHueDrag.bind(this);
        this._handleSelectionFieldDrag = this._handleSelectionFieldDrag.bind(this);

        this._originalColor = color;
        this._color = checkSetFormat(color);

        this._redoColor = null;
        this._isUpperCase = PreferencesManager.get("uppercaseColors");
        PreferencesManager.on("change", "uppercaseColors", function () {
            this._isUpperCase = PreferencesManager.get("uppercaseColors");
        }.bind(this));

        this.$colorValue = this.$element.find(".color-value");
        this.$buttonList = this.$element.find("ul.button-bar");
        this.$rgbaButton = this.$element.find(".rgba");
        this.$hexButton = this.$element.find(".hex");
        this.$hslButton = this.$element.find(".hsla");
        this.$0xButton = this.$element.find(".0x");
        this.$currentColor = this.$element.find(".current-color");
        this.$originalColor = this.$element.find(".original-color");
        this.$selection = this.$element.find(".color-selection-field");
        this.$selectionBase = this.$element.find(".color-selection-field .selector-base");
        this.$hueBase = this.$element.find(".hue-slider .selector-base");
        this.$opacityGradient = this.$element.find(".opacity-gradient");
        this.$hueSlider = this.$element.find(".hue-slider");
        this.$hueSelector = this.$element.find(".hue-slider .selector-base");
        this.$opacitySlider = this.$element.find(".opacity-slider");
        this.$opacitySelector = this.$element.find(".opacity-slider .selector-base");
        this.$swatches = this.$element.find(".swatches");

        // Create quick-access color swatches
        this._addSwatches(swatches);

        // Attach event listeners to main UI elements
        this._addListeners();

        // Initially selected color
        this.$originalColor.css("background-color", checkSetFormat(this._originalColor));
        
        this._commitColor(color);   
    }
function ColorEditor($parent, color, callback, swatches) {
        // Create the DOM structure, filling in localized strings via Mustache
        this.$element = $(Mustache.render(ColorEditorTemplate, Strings));
        $parent.append(this.$element);

        this._callback = callback;

        this._handleKeydown = this._handleKeydown.bind(this);
        this._handleOpacityKeydown = this._handleOpacityKeydown.bind(this);
        this._handleHslKeydown = this._handleHslKeydown.bind(this);
        this._handleHueKeydown = this._handleHueKeydown.bind(this);
        this._handleSelectionKeydown = this._handleSelectionKeydown.bind(this);
        this._handleOpacityDrag = this._handleOpacityDrag.bind(this);
        this._handleHueDrag = this._handleHueDrag.bind(this);
        this._handleSelectionFieldDrag = this._handleSelectionFieldDrag.bind(this);

        this._originalColor = color;
        this._color = checkSetFormat(color);

        this._redoColor = null;
        this._isUpperCase = PreferencesManager.get("uppercaseColors");
        PreferencesManager.on("change", "uppercaseColors", function () {
            this._isUpperCase = PreferencesManager.get("uppercaseColors");
        }.bind(this));

        this.$colorValue = this.$element.find(".color-value");
        this.$buttonList = this.$element.find("ul.button-bar");
        this.$rgbaButton = this.$element.find(".rgba");
        this.$hexButton = this.$element.find(".hex");
        this.$hslButton = this.$element.find(".hsla");
        this.$0xButton = this.$element.find(".0x");
        this.$currentColor = this.$element.find(".current-color");
        this.$originalColor = this.$element.find(".original-color");
        this.$selection = this.$element.find(".color-selection-field");
        this.$selectionBase = this.$element.find(".color-selection-field .selector-base");
        this.$hueBase = this.$element.find(".hue-slider .selector-base");
        this.$opacityGradient = this.$element.find(".opacity-gradient");
        this.$hueSlider = this.$element.find(".hue-slider");
        this.$hueSelector = this.$element.find(".hue-slider .selector-base");
        this.$opacitySlider = this.$element.find(".opacity-slider");
        this.$opacitySelector = this.$element.find(".opacity-slider .selector-base");
        this.$swatches = this.$element.find(".swatches");

        // Create quick-access color swatches
        this._addSwatches(swatches);

        // Attach event listeners to main UI elements
        this._addListeners();

        // Initially selected color
        this.$originalColor.css("background-color", checkSetFormat(this._originalColor));
        
        this._commitColor(color);   
    }
function ColorEditor ( $parent , color , callback , swatches ) { // Create the DOM structure, filling in localized strings via Mustache this . $element = $ ( Mustache . render ( ColorEditorTemplate , Strings ) ) ; $parent . append ( this . $element ) ; this . _callback = callback ; this . _handleKeydown = this . _handleKeydown . bind ( this ) ; this . _handleOpacityKeydown = this . _handleOpacityKeydown . bind ( this ) ; this . _handleHslKeydown = this . _handleHslKeydown . bind ( this ) ; this . _handleHueKeydown = this . _handleHueKeydown . bind ( this ) ; this . _handleSelectionKeydown = this . _handleSelectionKeydown . bind ( this ) ; this . _handleOpacityDrag = this . _handleOpacityDrag . bind ( this ) ; this . _handleHueDrag = this . _handleHueDrag . bind ( this ) ; this . _handleSelectionFieldDrag = this . _handleSelectionFieldDrag . bind ( this ) ; this . _originalColor = color ; this . _color = checkSetFormat ( color ) ; this . _redoColor = null ; this . _isUpperCase = PreferencesManager . get ( "uppercaseColors" ) ; PreferencesManager . on ( "change" , "uppercaseColors" , function ( ) { this . _isUpperCase = PreferencesManager . get ( "uppercaseColors" ) ; } . bind ( this ) ) ; this . $colorValue = this . $element . find ( ".color-value" ) ; this . $buttonList = this . $element . find ( "ul.button-bar" ) ; this . $rgbaButton = this . $element . find ( ".rgba" ) ; this . $hexButton = this . $element . find ( ".hex" ) ; this . $hslButton = this . $element . find ( ".hsla" ) ; this . $0xButton = this . $element . find ( ".0x" ) ; this . $currentColor = this . $element . find ( ".current-color" ) ; this . $originalColor = this . $element . find ( ".original-color" ) ; this . $selection = this . $element . find ( ".color-selection-field" ) ; this . $selectionBase = this . $element . find ( ".color-selection-field .selector-base" ) ; this . $hueBase = this . $element . find ( ".hue-slider .selector-base" ) ; this . $opacityGradient = this . $element . find ( ".opacity-gradient" ) ; this . $hueSlider = this . $element . find ( ".hue-slider" ) ; this . $hueSelector = this . $element . find ( ".hue-slider .selector-base" ) ; this . $opacitySlider = this . $element . find ( ".opacity-slider" ) ; this . $opacitySelector = this . $element . find ( ".opacity-slider .selector-base" ) ; this . $swatches = this . $element . find ( ".swatches" ) ; // Create quick-access color swatches this . _addSwatches ( swatches ) ; // Attach event listeners to main UI elements this . _addListeners ( ) ; // Initially selected color this . $originalColor . css ( "background-color" , checkSetFormat ( this . _originalColor ) ) ; this . _commitColor ( color ) ; }
Color picker control; may be used standalone or within an InlineColorEditor inline widget.
@param {!jQuery} $parent  DOM node into which to append the root of the color picker UI
@param {!string} color  Initially selected color
@param {!function(string)} callback  Called whenever selected color changes
@param {!Array.<{value:string, count:number}>} swatches  Quick-access color swatches to include in UI
Color picker control ; may be used standalone or within an InlineColorEditor inline widget .