      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