/
scale-editor.js
124 lines (112 loc) · 3.3 KB
/
scale-editor.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/**
* 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};
});