scratch – Blame information for rev 95
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
84 | office | 1 | DrawingBoard.Control.Size = DrawingBoard.Control.extend({ |
2 | |||
3 | name: 'size', |
||
4 | |||
5 | defaults: { |
||
6 | type: "auto", |
||
7 | dropdownValues: [1, 3, 6, 10, 20, 30, 40, 50], |
||
8 | min: 1, |
||
9 | max: 50 |
||
10 | }, |
||
11 | |||
12 | types: ['dropdown', 'range'], |
||
13 | |||
14 | initialize: function() { |
||
15 | if (this.opts.type == "auto") |
||
16 | this.opts.type = this._iHasRangeInput() ? 'range' : 'dropdown'; |
||
17 | var tpl = $.inArray(this.opts.type, this.types) > -1 ? this['_' + this.opts.type + 'Template']() : false; |
||
18 | if (!tpl) return false; |
||
19 | |||
20 | this.val = this.board.opts.size; |
||
21 | |||
22 | this.$el.append( $( tpl ) ); |
||
23 | this.$el.attr('data-drawing-board-type', this.opts.type); |
||
24 | this.updateView(); |
||
25 | |||
26 | var that = this; |
||
27 | |||
28 | if (this.opts.type == "range") { |
||
29 | this.$el.on('change', '.drawing-board-control-size-range-input', function(e) { |
||
30 | that.val = $(this).val(); |
||
31 | that.updateView(); |
||
32 | |||
33 | that.board.ev.trigger('size:changed', that.val); |
||
34 | |||
35 | e.preventDefault(); |
||
36 | }); |
||
37 | } |
||
38 | |||
39 | if (this.opts.type == "dropdown") { |
||
40 | this.$el.on('click', '.drawing-board-control-size-dropdown-current', $.proxy(function(e) { |
||
41 | this.$el.find('.drawing-board-control-size-dropdown').toggleClass('drawing-board-utils-hidden'); |
||
42 | }, this)); |
||
43 | |||
44 | this.$el.on('click', '[data-size]', function(e) { |
||
45 | that.val = parseInt($(this).attr('data-size'), 0); |
||
46 | that.updateView(); |
||
47 | |||
48 | that.board.ev.trigger('size:changed', that.val); |
||
49 | |||
50 | e.preventDefault(); |
||
51 | }); |
||
52 | } |
||
53 | }, |
||
54 | |||
55 | _rangeTemplate: function() { |
||
56 | var tpl = '<div class="drawing-board-control-inner" title="{{size}}">' + |
||
57 | '<input type="range" min="{{min}}" max="{{max}}" value="{{size}}" step="1" class="drawing-board-control-size-range-input">' + |
||
58 | '<span class="drawing-board-control-size-range-current"></span>' + |
||
59 | '</div>'; |
||
60 | return DrawingBoard.Utils.tpl(tpl, { |
||
61 | min: this.opts.min, |
||
62 | max: this.opts.max, |
||
63 | size: this.board.opts.size |
||
64 | }); |
||
65 | }, |
||
66 | |||
67 | _dropdownTemplate: function() { |
||
68 | var tpl = '<div class="drawing-board-control-inner" title="{{size}}">' + |
||
69 | '<div class="drawing-board-control-size-dropdown-current"><span></span></div>' + |
||
70 | '<ul class="drawing-board-control-size-dropdown">'; |
||
71 | $.each(this.opts.dropdownValues, function(i, size) { |
||
72 | tpl += DrawingBoard.Utils.tpl( |
||
73 | '<li data-size="{{size}}"><span style="width: {{size}}px; height: {{size}}px; border-radius: {{size}}px;"></span></li>', |
||
74 | { size: size } |
||
75 | ); |
||
76 | }); |
||
77 | tpl += '</ul></div>'; |
||
78 | return tpl; |
||
79 | }, |
||
80 | |||
81 | onBoardReset: function(opts) { |
||
82 | this.updateView(); |
||
83 | }, |
||
84 | |||
85 | updateView: function() { |
||
86 | var val = this.val; |
||
87 | this.board.ctx.lineWidth = val; |
||
88 | |||
89 | this.$el.find('.drawing-board-control-size-range-current, .drawing-board-control-size-dropdown-current span').css({ |
||
90 | width: val + 'px', |
||
91 | height: val + 'px', |
||
92 | borderRadius: val + 'px', |
||
93 | marginLeft: -1*val/2 + 'px', |
||
94 | marginTop: -1*val/2 + 'px' |
||
95 | }); |
||
96 | |||
97 | this.$el.find('.drawing-board-control-inner').attr('title', val); |
||
98 | |||
99 | if (this.opts.type == 'dropdown') { |
||
100 | var closest = null; |
||
101 | $.each(this.opts.dropdownValues, function(i, size) { |
||
102 | if (closest === null || Math.abs(size - val) < Math.abs(closest - val)) |
||
103 | closest = size; |
||
104 | }); |
||
105 | this.$el.find('.drawing-board-control-size-dropdown').addClass('drawing-board-utils-hidden'); |
||
106 | } |
||
107 | }, |
||
108 | |||
109 | _iHasRangeInput: function() { |
||
110 | var inputElem = document.createElement('input'), |
||
111 | smile = ':)', |
||
112 | docElement = document.documentElement, |
||
113 | inputElemType = 'range', |
||
114 | available; |
||
115 | inputElem.setAttribute('type', inputElemType); |
||
116 | available = inputElem.type !== 'text'; |
||
117 | inputElem.value = smile; |
||
118 | inputElem.style.cssText = 'position:absolute;visibility:hidden;'; |
||
119 | if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) { |
||
120 | docElement.appendChild(inputElem); |
||
121 | defaultView = document.defaultView; |
||
122 | available = defaultView.getComputedStyle && |
||
123 | defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' && |
||
124 | (inputElem.offsetHeight !== 0); |
||
125 | docElement.removeChild(inputElem); |
||
126 | } |
||
127 | return !!available; |
||
128 | } |
||
129 | }); |