JSDoc: Source: scale-editor.js

# Source: scale-editor.js

    /**
     * SlickGrid shape editor and formatter.
     *
     * @module SlickGridScale
     */
    define([
        'jquery',
        'underscore',
        'view',
        'viewcontroller'
    ],
    function($, _, DecompositionView, ViewControllers) {
      /**
       *
       * @class Scale
       *
       * This class represents a range 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]{@link
       * https://github.com/mleibman/SlickGrid/wiki/Writing-custom-cell-editors}.
       *
       * @param {Object} args Arguments passed by SlickGrid.
       * @alias module:SlickGridScale.ScaleEditor
       */
      function ScaleEditor(args) {
        /**
         * Node containing the jQuery slider
         * @type {Node}
         */
        var $input;
        /**
         * Node containing the parent div holding the slider info
         * @type {Node}
         */
        var $parentDiv;
        /**
         * Node containing the textbox for showing the slider value
         * @type {Node}
         */
        var $viewval;
        /**
         * Initial value of the cell being edited.
         * @type {Float}
         */
        var defaultValue;
        var scope = this;

        /* @constructor */
        this.init = function() {
          var pos = args.grid.getActiveCell();
          var metaColPos = args.grid.getCellNodeBox(pos.row, pos.cell + 1);
          var barLength = metaColPos.right - metaColPos.left - 10;
          $parentDiv = $('<div style="flat:left;position:absolute;height:30px;' +
                         'width:' + barLength + 'px;z-index:1000">');
          $viewval = $('<input type="text" value="' + args.item.value +
                       '" readonly  style="border:0;width:25px;">');
          var $sliderDiv = $('<div style="width:' + barLength +
                             'px;display:inline-block;' +
                             'background-color:rgb(238, 238, 238)">');
          $input = $sliderDiv.slider({
            range: 'max',
            min: 0.1,
            max: 5.0,
            value: args.item.value,
            step: 0.1,
            slide: function(event, ui) {
              $viewval.val(ui.value);
              args.item.value = ui.value;
            },
            stop: function(event, ui) {
              // commit the changes as soon as a new scale is selected
              // http://stackoverflow.com/a/15513516/379593
              Slick.GlobalEditorLock.commitCurrentEdit();
            }
          });
          $sliderDiv.appendTo($parentDiv);
          $viewval.appendTo(args.container);

          // Calculate the position for the parent div and add it to the view
          var container = $(args.container);
          $parentDiv.css('top', '5px');
          $parentDiv.css('left', container.width() + 5);
          $parentDiv.appendTo(args.container);
        };

        this.destroy = function() {
          $parentDiv.remove();
        };

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

        this.focusout = function() {
          $input.focusout();
        };

        this.isValueChanged = function() {
          return $viewval.val() !== defaultValue;
        };

        this.serializeValue = function() {
          return $viewval.val();
        };

        this.loadValue = function(item) {
          defaultValue = item[args.column.field];
          $input.val(defaultValue);
        };

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

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

        this.init();
      }

      return {'ScaleEditor': ScaleEditor};
    });