JSDoc: Source: color-editor.js

# Source: color-editor.js

    /**
     * SlickGrid color editor and formatter.
     *
     * @module SlickGridColors
     */
    define([
        'jquery',
        'underscore',
        'view',
        'viewcontroller',
        'spectrum'
    ],
    function($, _, DecompositionView, ViewControllers, spectrum) {

      /**
       *
       * @class ColorEditor
       *
       * This class represents a color editor defined by the SlickGrid
       * project.
       *
       * Note, this object is heavily based on classes in slick.editors.js and in
       * the documentation that can be found [here](https://github.com/mleibman/
       * SlickGrid/wiki/Writing-custom-cell-editors).
       *
       * Also see ColorFormatter, a function in charge of formatting colors for the
       * SlickGrid object.
       *
       * @param {object} args Arguments passed by SlickGrid.
       *
       * @constructs ColorEditor
       * @alias module:SlickGridColors.ColorEditor
       *
       */
      function ColorEditor(args) {
        var $input;
        var defaultValue;
        var scope = this;

        this.init = function() {
          // make the background look exactly the same when the color is being
          // edited
          $(args.container).css('background-color', '#eeeeee');

          $input = $("<div class='colorbox'></div>");
          $input.css('background-color', args.item.value);
          $input.appendTo(args.container);
          $input.spectrum({
            color: args.item.color,
            showInput: true,
            allowEmpty: false,
            showPalette: false,
            showInitial: true,
            clickoutFiresChange: true,
            className: 'full-spectrum',
            preferredFormat: 'hex6',

            /* On change callback */
            change: function(color) {
              $input.css('background-color', color.toHexString());

              // commit the changes as soon as a new color is selected
              // http://stackoverflow.com/a/15513516/379593
              Slick.GlobalEditorLock.commitCurrentEdit();
            }
          });
        };

        this.destroy = function() {
          $input.spectrum('hide');
          $input.spectrum('destroy');
          $input.remove();
        };

        this.focus = function() {
          $input.spectrum('show');
        };

        this.isValueChanged = function() {
          return $input.spectrum('get').toHexString() !== defaultValue;
        };

        this.serializeValue = function() {
          return $input.spectrum('get').toHexString();
        };

        this.loadValue = function(item) {
          defaultValue = item[args.column.field];
          $input.spectrum('set', defaultValue);
        };

        this.applyValue = function(item, state) {
          item[args.column.field] = state;
        };

        this.validate = function() {
          return {valid: true, msg: null};
        };

        this.hide = function() {
          $input.spectrum('hide');
        };

        this.show = function() {
          $input.spectrum('show');
        };

        this.position = function(cellBox) {
          $input.spectrum('reflow');
        };

        this.init();
      }

      /**
       *
       * Function to format colors for the SlickGrid object.
       *
       * This formatter is heavily based in the examples found in
       * slick.formattters.js and is only intended to be used with ColorFormatter.
       *
       * @param {integer} row SlickGrid row.
       * @param {integer} cell SlickGrid cell.
       * @param {integer|string|bool} value The value in the row.
       * @param {object} columnDef SlickGrid column definition.
       * @param {object} dataContext Data model of the SlickGrid object.
       *
       * @return {string} String with a div where the background color is set as
       * the value that's passed in.
       *
       * @alias module:SlickGridColors.ColorFormatter
       *
       */
      function ColorFormatter(row, cell, value, columnDef, dataContext) {
        return "<div class='colorbox' style='background-color:" + value +
               ";'></div>";
      }

      return {'ColorEditor': ColorEditor, 'ColorFormatter': ColorFormatter};
    });