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