scratch – Blame information for rev 84

Subversion Repositories:
Rev:
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 });