Source: shape-editor.js

  1. /**
  2.  * SlickGrid shape editor and formatter.
  3.  *
  4.  * @module SlickGridShapes
  5.  */
  6. define([
  7.     'jquery',
  8.     'underscore',
  9.     'view',
  10.     'viewcontroller',
  11.     'shapes'
  12. ],
  13. function($, _, DecompositionView, ViewControllers, shapes) {
  15.   /**
  16.    * @class ShapeEditor
  17.    *
  18.    * This class represents a dropdown editor defined by the SlickGrid project.
  19.    *
  20.    * Note, this object is heavily based on classes in slick.editors.js and in
  21.    * the documentation that can be found [here](https://github.com/mleibman/
  22.    * SlickGrid/wiki/Writing-custom-cell-editors)
  23.    *
  24.    * Also see ShapeFormatter, a function in charge of formatting a dropdown for
  25.    * the SlickGrid object.
  26.    *
  27.    * @param {Object} args Arguments passed by SlickGrid.
  28.    * @alias module:SlickGridShapes.ShapeEditor
  29.    */
  30.   function ShapeEditor(args) {
  31.     var $input;
  32.     var defaultValue;
  33.     var scope = this;
  35.     this.init = function() {
  36.       $input = shapes.$shapesDropdown;
  37.       $input.appendTo(args.container);
  38.       $input.on('change', function() {
  39.         // commit the changes as soon as a new shape is selected
  40.         // https://stackoverflow.com/a/35768360/379593
  41.         args.grid.getEditorLock().commitCurrentEdit();
  42.         args.grid.resetActiveCell();
  43.       });
  44.     };
  46.     this.destroy = function() {
  47.       $input.remove();
  48.     };
  50.     this.focus = function() {
  51.       $input.focus();
  52.     };
  54.     this.focusout = function() {
  55.       $input.focusout();
  56.     };
  58.     this.isValueChanged = function() {
  59.       return $input.val() !== defaultValue;
  60.     };
  62.     this.serializeValue = function() {
  63.       return $input.val();
  64.     };
  66.     this.loadValue = function(item) {
  67.       defaultValue = item[args.column.field];
  68.       $input.val(defaultValue);
  69.       $input[0].defaultValue = defaultValue;
  70.       $input.select();
  71.     };
  73.     this.applyValue = function(item, state) {
  74.       item[args.column.field] = state;
  75.     };
  77.     this.validate = function() {
  78.       return {valid: true, msg: null};
  79.     };
  81.     this.init();
  82.   }
  85.   /**
  86.    *
  87.    * Function to format shape dropdown for the SlickGrid object.
  88.    *
  89.    * This formatter is heavily based in the examples found in
  90.    * [slick.formattters.js](https://github.com/6pac/SlickGrid/blob/master/
  91.    * slick.formatters.js).
  92.    *
  93.    * @param {Object} row SlickGrid row.
  94.    * @param {Object} cell SlickGrid cell.
  95.    * @param {string} value the value in the row.
  96.    * @param {Objecy} columnDef SlickGrid column definition.
  97.    * @param {Object} dataContext data model of the SlickGrid object
  98.    *
  99.    * @return {string} The HTML of the div and value
  100.    * @function ShapeFormatter
  101.    */
  102.   function ShapeFormatter(row, cell, value, columnDef, dataContext) {
  103.     return '<div style="text-align:center;cursor:pointer;">' + value + '</div>';
  104.   }
  106.   return {'ShapeEditor': ShapeEditor, 'ShapeFormatter': ShapeFormatter};
  107. });