OLD | NEW |
---|---|
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 cr.define('print_preview', function() { | 5 cr.define('print_preview', function() { |
6 'strict'; | 6 'strict'; |
7 | 7 |
8 function MarginTextbox(groupName) { | 8 function MarginTextbox(groupName) { |
9 var box = document.createElement('input'); | 9 var box = document.createElement('input'); |
10 box.__proto__ = MarginTextbox.prototype; | 10 box.__proto__ = MarginTextbox.prototype; |
11 box.setAttribute('type', 'text'); | 11 box.setAttribute('type', 'text'); |
12 box.className = MarginTextbox.CSS_CLASS_MARGIN_TEXTBOX; | 12 box.className = MarginTextbox.CSS_CLASS_MARGIN_TEXTBOX; |
13 box.value = '0'; | 13 box.value = '0'; |
14 | 14 |
15 // @type {string} Specifies which margin this line refers to. | 15 // @type {string} Specifies which margin this line refers to. |
16 box.marginGroup = groupName; | 16 box.marginGroup = groupName; |
17 // @type {boolean} True if the displayed value is valid. | 17 // @type {boolean} True if the displayed value is valid. |
18 box.isValid = true; | 18 box.isValid = true; |
19 // @type {number} Timer used to detect when the user stops typing. | 19 // @type {number} Timer used to detect when the user stops typing. |
20 box.timerId_ = null; | 20 box.timerId_ = null; |
21 // @type {number} The last valid value in points. | 21 // @type {number} The last valid value in points. |
22 box.lastValidValueInPoints = 0; | 22 box.lastValidValueInPoints = 0; |
23 // @type {print_preview.Rect} A rectangle describing the four margins. | |
24 box.marginsRectangle_ = null; | |
25 // @type {number} The upper allowed limit for the corresponding margin. | 23 // @type {number} The upper allowed limit for the corresponding margin. |
26 box.valueLimit = null; | 24 box.valueLimit = null; |
27 | 25 |
28 box.addEventListeners_(); | 26 box.addEventListeners_(); |
29 return box; | 27 return box; |
30 } | 28 } |
31 | 29 |
32 MarginTextbox.CSS_CLASS_MARGIN_TEXTBOX = 'margin-box'; | 30 MarginTextbox.CSS_CLASS_MARGIN_TEXTBOX = 'margin-box'; |
33 MarginTextbox.MARGIN_BOX_HEIGHT = 15; | 31 MarginTextbox.MARGIN_BOX_HEIGHT = 15; |
34 MarginTextbox.MARGIN_BOX_VERTICAL_PADDING = 5; | 32 MarginTextbox.MARGIN_BOX_VERTICAL_PADDING = 5; |
35 MarginTextbox.MARGIN_BOX_WIDTH = 40; | 33 MarginTextbox.MARGIN_BOX_WIDTH = 40; |
36 MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING = 10; | 34 MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING = 10; |
37 | 35 |
38 // Keycode for the "Escape" key. | 36 // Keycode for the "Escape" key. |
39 MarginTextbox.ESCAPE_KEYCODE = 27; | 37 MarginTextbox.ESCAPE_KEYCODE = 27; |
40 // Keycode for the "Enter" key. | 38 // Keycode for the "Enter" key. |
41 MarginTextbox.ENTER_KEYCODE = 13; | 39 MarginTextbox.ENTER_KEYCODE = 13; |
42 | 40 |
43 MarginTextbox.convertPointsToInchesText = function(toConvert) { | |
44 var inInches = convertPointsToInches(toConvert); | |
45 return MarginTextbox.convertInchesToInchesText(inInches); | |
46 }; | |
47 | |
48 MarginTextbox.convertInchesToInchesText = function(toConvert) { | |
49 return toConvert.toFixed(2) + '"'; | |
50 }; | |
51 | |
52 /** | 41 /** |
53 * @return {number} The total height of a margin textbox (including padding). | 42 * @return {number} The total height of a margin textbox (including padding). |
54 */ | 43 */ |
55 MarginTextbox.totalHeight = function() { | 44 MarginTextbox.totalHeight = function() { |
56 return MarginTextbox.MARGIN_BOX_HEIGHT + | 45 return MarginTextbox.MARGIN_BOX_HEIGHT + |
57 2 * MarginTextbox.MARGIN_BOX_VERTICAL_PADDING; | 46 2 * MarginTextbox.MARGIN_BOX_VERTICAL_PADDING; |
58 } | 47 } |
59 | 48 |
60 /** | 49 /** |
61 * @return {number} The total width of a margin textbox (including padding). | 50 * @return {number} The total width of a margin textbox (including padding). |
62 */ | 51 */ |
63 MarginTextbox.totalWidth = function() { | 52 MarginTextbox.totalWidth = function() { |
64 return MarginTextbox.MARGIN_BOX_WIDTH + | 53 return MarginTextbox.MARGIN_BOX_WIDTH + |
65 2 * MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING; | 54 2 * MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING; |
66 } | 55 } |
67 | 56 |
68 MarginTextbox.prototype = { | 57 MarginTextbox.prototype = { |
69 __proto__: HTMLInputElement.prototype, | 58 __proto__: HTMLInputElement.prototype, |
70 | 59 |
60 get margin() { | |
61 return print_preview.extractMarginValue(this.value); | |
62 }, | |
63 | |
71 /** | 64 /** |
72 * Updates the state of |this|. | 65 * Updates the state of |this|. |
73 * @param {print_preview.Rect} marginsRectangle A rectangle describing the | |
74 * margins in percentages. | |
75 * @param {number} value The margin value in points. | 66 * @param {number} value The margin value in points. |
76 * @param {number} valueLimit The upper allowed value for the margin. | 67 * @param {number} valueLimit The upper allowed value for the margin. |
77 * @param {boolean} keepDisplayedValue True if the currently displayed value | 68 * @param {boolean} keepDisplayedValue True if the currently displayed value |
78 * should not be updated. | 69 * should not be updated. |
79 */ | 70 */ |
80 update: function(marginsRectangle, value, valueLimit, keepDisplayedValue) { | 71 update: function(value, valueLimit, keepDisplayedValue) { |
81 this.marginsRectangle_ = marginsRectangle; | |
82 this.lastValidValueInPoints = value; | 72 this.lastValidValueInPoints = value; |
83 if (!keepDisplayedValue) { | 73 if (!keepDisplayedValue) { |
84 this.value = MarginTextbox.convertPointsToInchesText( | 74 this.value = print_preview.convertPointsToInchesText( |
85 this.lastValidValueInPoints); | 75 this.lastValidValueInPoints); |
86 } | 76 } |
87 | 77 |
88 this.valueLimit = valueLimit; | 78 this.valueLimit = valueLimit; |
89 this.validate(); | 79 this.validate(); |
90 }, | 80 }, |
91 | 81 |
92 get margin() { | 82 /** |
93 return print_preview.extractMarginValue(this.value); | 83 * Updates |this| while dragging is in progress. |
84 * @param {number} dragDeltaInPoints The difference in points between the | |
85 * margin value before dragging started and now. | |
86 */ | |
87 updateWhileDragging: function(dragDeltaInPoints) { | |
88 var validity = this.validateDelta(dragDeltaInPoints); | |
89 | |
90 if (validity == 0) { | |
91 this.value = print_preview.convertPointsToInchesText( | |
92 this.lastValidValueInPoints + dragDeltaInPoints); | |
93 } else if (validity == -1) { | |
94 this.value = print_preview.convertPointsToInchesText(0); | |
95 } else if (validity == 1) { | |
96 this.value = print_preview.convertPointsToInchesText(this.valueLimit); | |
97 } | |
98 | |
99 this.validate(); | |
100 this.updateColor(); | |
101 }, | |
102 | |
103 /** | |
104 * @param {number} dragDeltaInPoints The difference in points between the | |
105 * margin value before dragging started and now. | |
106 * @return {number} 0 if applying |dragDeltaInPoints| results in a valid | |
107 * margin value, -1 if resulting value is lower than minimum allowed, 1 | |
108 * if larger than maximum allowed. | |
109 */ | |
110 validateDelta: function(dragDeltaInPoints) { | |
111 var newValue = this.lastValidValueInPoints + dragDeltaInPoints; | |
112 return print_preview.validateMarginValue(newValue, this.valueLimit); | |
94 }, | 113 }, |
95 | 114 |
96 /** | 115 /** |
97 * Updates |this.isValid|. | 116 * Updates |this.isValid|. |
98 */ | 117 */ |
99 validate: function() { | 118 validate: function() { |
100 this.isValid = print_preview.isMarginTextValid(this.value, | 119 this.isValid = |
101 this.valueLimit); | 120 print_preview.validateMarginText(this.value, this.valueLimit) == 0; |
102 if (this.isValid) | 121 if (this.isValid) |
103 this.value = MarginTextbox.convertInchesToInchesText(this.margin); | 122 this.value = print_preview.convertInchesToInchesText(this.margin); |
104 }, | 123 }, |
105 | 124 |
106 /** | 125 /** |
107 * Updates the background color depending on |isValid| by adding/removing | 126 * Updates the background color depending on |isValid| by adding/removing |
108 * the appropriate CSS class. | 127 * the appropriate CSS class. |
109 * @param {boolean} isValid True if the margin is valid. | 128 * @param {boolean} isValid True if the margin is valid. |
110 */ | 129 */ |
111 updateColor: function() { | 130 updateColor: function() { |
112 this.isValid ? this.classList.remove('invalid') : | 131 this.isValid ? this.classList.remove('invalid') : |
113 this.classList.add('invalid'); | 132 this.classList.add('invalid'); |
114 }, | 133 }, |
115 | 134 |
116 /** | 135 /** |
117 * Draws this textbox. | 136 * Draws this textbox. |
118 */ | 137 */ |
119 draw: function() { | 138 draw: function() { |
120 var topLeft = this.getCoordinates_(); | 139 var topLeft = this.getCoordinates_(); |
121 var totalWidth = previewArea.pdfPlugin_.offsetWidth; | 140 this.style.left = 100 * topLeft.x + '%'; |
122 var totalHeight = previewArea.pdfPlugin_.offsetHeight; | 141 this.style.top = 100 * topLeft.y + '%'; |
123 | |
124 this.style.left = Math.round(topLeft.x * totalWidth) + 'px'; | |
125 this.style.top = Math.round(topLeft.y * totalHeight) + 'px'; | |
126 this.updateColor(); | 142 this.updateColor(); |
127 }, | 143 }, |
128 | 144 |
129 /** | 145 /** |
130 * @return {boolean} True if |this| refers to the top margin. | 146 * @return {boolean} True if |this| refers to the top margin. |
131 * @private | 147 * @private |
132 */ | 148 */ |
133 isTop_: function() { | 149 isTop_: function() { |
134 return this.marginGroup == print_preview.MarginSettings.TOP_GROUP; | 150 return this.marginGroup == print_preview.MarginSettings.TOP_GROUP; |
135 }, | 151 }, |
(...skipping 17 matching lines...) Expand all Loading... | |
153 /** | 169 /** |
154 * @return {boolean} True if |this| refers to the bottom margin. | 170 * @return {boolean} True if |this| refers to the bottom margin. |
155 * @private | 171 * @private |
156 */ | 172 */ |
157 isRight_: function() { | 173 isRight_: function() { |
158 return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP; | 174 return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP; |
159 }, | 175 }, |
160 | 176 |
161 /** | 177 /** |
162 * Calculates the coordinates where |this| should be displayed. | 178 * Calculates the coordinates where |this| should be displayed. |
163 * @return {{x: number, y: number}} The coordinates (in percent) where | 179 * @return {{print_preview.Point} The coordinates (in percent) where |this| |
164 * |this| should be drawn relative to the upper left corner of the | 180 * should be drawn relative to the upper left corner of the plugin. |
165 * plugin. | |
166 * @private | 181 * @private |
167 */ | 182 */ |
168 getCoordinates_: function() { | 183 getCoordinates_: function() { |
169 var x = 0, y = 0; | 184 var x = 0, y = 0; |
170 var totalWidth = previewArea.pdfPlugin_.offsetWidth; | 185 var offsetX = MarginTextbox.totalWidth() / |
171 var totalHeight = previewArea.pdfPlugin_.offsetHeight; | 186 parseInt(this.parentNode.style.width, 10); |
172 var offsetY = (MarginTextbox.totalHeight() / 2) / totalHeight; | 187 var offsetY = MarginTextbox.totalHeight() / |
173 var offsetX = (MarginTextbox.totalWidth() / 2) / totalWidth; | 188 parseInt(this.parentNode.style.height, 10); |
174 | 189 |
175 if (this.isTop_()) { | 190 if (this.isTop_()) { |
176 x = this.marginsRectangle_.middleX - offsetX; | 191 x = 0.5 - offsetX / 2; |
177 y = this.marginsRectangle_.y; | 192 y = 0.5; |
178 } else if (this.isBottom_()) { | 193 } else if (this.isBottom_()) { |
179 x = this.marginsRectangle_.middleX - offsetX; | 194 x = 0.5 - offsetX / 2; |
180 y = this.marginsRectangle_.bottom - 2 * offsetY; | 195 y = 0.5 - offsetY; |
Evan Stade
2011/10/14 19:04:49
extra space
dpapad
2011/10/14 20:57:58
Done.
| |
181 } else if (this.isRight_()) { | 196 } else if (this.isRight_()) { |
182 x = this.marginsRectangle_.right - 2 * offsetX; | 197 x = 0.5 - offsetX; |
183 y = this.marginsRectangle_.middleY - offsetY; | 198 y = 0.5 - offsetY / 2; |
184 } else if (this.isLeft_()) { | 199 } else if (this.isLeft_()) { |
185 x = this.marginsRectangle_.x; | 200 x = 0.5; |
186 y = this.marginsRectangle_.middleY - offsetY; | 201 y = 0.5 - offsetY / 2; |
187 } | 202 } |
188 | 203 |
189 return { x: x, y: y }; | 204 return new print_preview.Point(x, y); |
190 }, | 205 }, |
191 | 206 |
192 /** | 207 /** |
193 * Adds event listeners for various events. | 208 * Adds event listeners for various events. |
194 * @private | 209 * @private |
195 */ | 210 */ |
196 addEventListeners_: function() { | 211 addEventListeners_: function() { |
197 this.oninput = this.resetTimer_.bind(this); | 212 this.oninput = this.resetTimer_.bind(this); |
198 this.onblur = this.onBlur_.bind(this); | 213 this.onblur = this.onBlur_.bind(this); |
199 this.onkeypress = this.onKeyPressed_.bind(this); | 214 this.onkeypress = this.onKeyPressed_.bind(this); |
200 this.onkeyup = this.onKeyUp_.bind(this); | 215 this.onkeyup = this.onKeyUp_.bind(this); |
201 }, | 216 }, |
202 | 217 |
203 /** | 218 /** |
204 * Executes whenever a blur event occurs. | 219 * Executes whenever a blur event occurs. |
205 * @private | 220 * @private |
206 */ | 221 */ |
207 onBlur_: function() { | 222 onBlur_: function() { |
208 clearTimeout(this.timerId_); | 223 clearTimeout(this.timerId_); |
209 this.validate(); | 224 this.validate(); |
210 if (!this.isValid) { | 225 if (!this.isValid) { |
211 this.value = MarginTextbox.convertPointsToInchesText( | 226 this.value = print_preview.convertPointsToInchesText( |
212 this.lastValidValueInPoints); | 227 this.lastValidValueInPoints); |
213 this.validate(); | 228 this.validate(); |
214 } | 229 } |
215 | 230 |
216 this.updateColor(); | 231 this.updateColor(); |
217 cr.dispatchSimpleEvent(document, 'updateSummary'); | 232 cr.dispatchSimpleEvent(document, 'updateSummary'); |
218 cr.dispatchSimpleEvent(document, 'updatePrintButton'); | 233 cr.dispatchSimpleEvent(document, 'updatePrintButton'); |
219 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); | 234 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); |
220 }, | 235 }, |
221 | 236 |
(...skipping 10 matching lines...) Expand all Loading... | |
232 }, | 247 }, |
233 | 248 |
234 /** | 249 /** |
235 * Executes whenever a keyup event occurs. Note: Only the "Escape" | 250 * Executes whenever a keyup event occurs. Note: Only the "Escape" |
236 * key event is handled. | 251 * key event is handled. |
237 * @param {KeyboardEvent} e The event that triggered this listener. | 252 * @param {KeyboardEvent} e The event that triggered this listener. |
238 * @private | 253 * @private |
239 */ | 254 */ |
240 onKeyUp_: function(e) { | 255 onKeyUp_: function(e) { |
241 if (e.keyCode == MarginTextbox.ESCAPE_KEYCODE) { | 256 if (e.keyCode == MarginTextbox.ESCAPE_KEYCODE) { |
242 this.value = MarginTextbox.convertPointsToInchesText( | 257 this.value = print_preview.convertPointsToInchesText( |
243 this.lastValidValueInPoints); | 258 this.lastValidValueInPoints); |
244 this.validate(); | 259 this.validate(); |
245 this.updateColor(); | 260 this.updateColor(); |
246 cr.dispatchSimpleEvent(document, 'updateSummary'); | 261 cr.dispatchSimpleEvent(document, 'updateSummary'); |
247 cr.dispatchSimpleEvent(document, 'updatePrintButton'); | 262 cr.dispatchSimpleEvent(document, 'updatePrintButton'); |
248 } | 263 } |
249 }, | 264 }, |
250 | 265 |
251 /** | 266 /** |
252 * Resetting the timer used to detect when the user stops typing in order | 267 * Resetting the timer used to detect when the user stops typing in order |
(...skipping 20 matching lines...) Expand all Loading... | |
273 return; | 288 return; |
274 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); | 289 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); |
275 } | 290 } |
276 | 291 |
277 }; | 292 }; |
278 | 293 |
279 return { | 294 return { |
280 MarginTextbox: MarginTextbox | 295 MarginTextbox: MarginTextbox |
281 }; | 296 }; |
282 }); | 297 }); |
OLD | NEW |