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) {
 14 
 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;
 34 
 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     };
 45 
 46     this.destroy = function() {
 47       $input.remove();
 48     };
 49 
 50     this.focus = function() {
 51       $input.focus();
 52     };
 53 
 54     this.focusout = function() {
 55       $input.focusout();
 56     };
 57 
 58     this.isValueChanged = function() {
 59       return $input.val() !== defaultValue;
 60     };
 61 
 62     this.serializeValue = function() {
 63       return $input.val();
 64     };
 65 
 66     this.loadValue = function(item) {
 67       defaultValue = item[args.column.field];
 68       $input.val(defaultValue);
 69       $input[0].defaultValue = defaultValue;
 70       $input.select();
 71     };
 72 
 73     this.applyValue = function(item, state) {
 74       item[args.column.field] = state;
 75     };
 76 
 77     this.validate = function() {
 78       return {valid: true, msg: null};
 79     };
 80 
 81     this.init();
 82   }
 83 
 84 
 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   }
105 
106   return {'ShapeEditor': ShapeEditor, 'ShapeFormatter': ShapeFormatter};
107 });
108