/
arrow_configuration_view.js
112 lines (91 loc) · 3.17 KB
/
arrow_configuration_view.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
// create global CSSArrowPlease if it doesn't exist
if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
(function (G) {
/**
@class ArrowConfigurationView
@constructor
**/
var ArrowConfigurationView = function () {
this.init.apply(this, arguments);
};
ArrowConfigurationView.prototype = {
init: function (options) {
this.container = options.container;
this.model = options.model;
this._attachEvents();
},
/**
@method render
@chainable
**/
render: function () {
this._setDefaults();
return this;
},
/**
@method _setDetaults
@description update the view with the model defaults
**/
_setDefaults: function () {
var container = this.container,
model = this.model;
container.find('.position').val( model.get('position') );
container.find('.size').val( model.get('size') );
container.find('.base_color').val( model.get('color') );
container.find('.border_width').val( model.get('borderWidth') );
container.find('.border_color').val( model.get('borderColor') );
},
/**
@method _attachEvents
@description attaches dom events
@protected
**/
_attachEvents: function () {
var _updateModelProxy = $.proxy( this._updateModel, this),
_updateInputProxy = $.proxy( this._updateInput, this),
container = this.container,
selectors = [ { classname: '.position', keyboard_interactive: false },
{ classname: '.size', keyboard_interactive: true },
{ classname: '.base_color', keyboard_interactive: false },
{ classname: '.border_width', keyboard_interactive: true },
{ classname: '.border_color', keyboard_interactive: false }
];
$.each(selectors, function (i, selector) {
container.delegate(selector.classname, 'change', _updateModelProxy);
if (selector.keyboard_interactive) {
container.delegate(selector.classname, 'keydown', _updateInputProxy);
}
});
},
_updateModel: function (ev) {
var target = $(ev.currentTarget),
val = target.val(),
attr;
if (target.hasClass('border_width')) {
attr = 'borderWidth';
}
else if (target.hasClass('border_color')) {
attr = 'borderColor';
}
else if (target.hasClass('base_color')) {
attr = 'color';
}
else {
attr = target.attr('class');
}
if (attr === 'borderWidth' || attr === 'size') val = parseInt(val, 10);
this.model.set(attr, val);
},
_updateInput: function (ev) {
if (ev.keyCode != 38 && ev.keyCode != 40) return;
var target = $(ev.currentTarget),
val = parseInt(target.val()),
increment = ev.keyCode == 38 ? 1 : -1,
multiply = ev.shiftKey ? 10 : 1
target.val(val + increment * multiply);
this._updateModel(ev)
}
};
// Expose public api
G.ArrowConfigurationView = ArrowConfigurationView;
}(window.CSSArrowPlease));