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 |
71 /** | 60 /** |
| 61 * @type {number} The margin value currently in the textbox. |
| 62 */ |
| 63 get margin() { |
| 64 return print_preview.extractMarginValue(this.value); |
| 65 }, |
| 66 |
| 67 /** |
72 * Updates the state of |this|. | 68 * 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. | 69 * @param {number} value The margin value in points. |
76 * @param {number} valueLimit The upper allowed value for the margin. | 70 * @param {number} valueLimit The upper allowed value for the margin. |
77 * @param {boolean} keepDisplayedValue True if the currently displayed value | 71 * @param {boolean} keepDisplayedValue True if the currently displayed value |
78 * should not be updated. | 72 * should not be updated. |
79 */ | 73 */ |
80 update: function(marginsRectangle, value, valueLimit, keepDisplayedValue) { | 74 update: function(value, valueLimit, keepDisplayedValue) { |
81 this.marginsRectangle_ = marginsRectangle; | |
82 this.lastValidValueInPoints = value; | 75 this.lastValidValueInPoints = value; |
83 if (!keepDisplayedValue) { | 76 if (!keepDisplayedValue) { |
84 this.value = MarginTextbox.convertPointsToInchesText( | 77 this.value = print_preview.convertPointsToInchesText( |
85 this.lastValidValueInPoints); | 78 this.lastValidValueInPoints); |
86 } | 79 } |
87 | 80 |
88 this.valueLimit = valueLimit; | 81 this.valueLimit = valueLimit; |
89 this.validate(); | 82 this.validate(); |
90 }, | 83 }, |
91 | 84 |
92 get margin() { | 85 /** |
93 return print_preview.extractMarginValue(this.value); | 86 * Updates |this| while dragging is in progress. |
| 87 * @param {number} dragDeltaInPoints The difference in points between the |
| 88 * margin value before dragging started and now. |
| 89 */ |
| 90 updateWhileDragging: function(dragDeltaInPoints) { |
| 91 var validity = this.validateDelta(dragDeltaInPoints); |
| 92 |
| 93 if (validity == print_preview.marginValidationStates.WITHIN_RANGE) { |
| 94 this.value = print_preview.convertPointsToInchesText( |
| 95 this.lastValidValueInPoints + dragDeltaInPoints); |
| 96 } else if (validity == print_preview.marginValidationStates.TOO_SMALL) { |
| 97 this.value = print_preview.convertPointsToInchesText(0); |
| 98 } else if (validity == print_preview.marginValidationStates.TOO_HIGH) { |
| 99 this.value = print_preview.convertPointsToInchesText(this.valueLimit); |
| 100 } |
| 101 |
| 102 this.validate(); |
| 103 this.updateColor(); |
| 104 }, |
| 105 |
| 106 /** |
| 107 * @param {number} dragDeltaInPoints The difference in points between the |
| 108 * margin value before dragging started and now. |
| 109 * @return {number} An appropriate value from enum |marginValidationStates|. |
| 110 */ |
| 111 validateDelta: function(dragDeltaInPoints) { |
| 112 var newValue = this.lastValidValueInPoints + dragDeltaInPoints; |
| 113 return print_preview.validateMarginValue(newValue, this.valueLimit); |
94 }, | 114 }, |
95 | 115 |
96 /** | 116 /** |
97 * Updates |this.isValid|. | 117 * Updates |this.isValid|. |
98 */ | 118 */ |
99 validate: function() { | 119 validate: function() { |
100 this.isValid = print_preview.isMarginTextValid(this.value, | 120 this.isValid = |
101 this.valueLimit); | 121 print_preview.validateMarginText(this.value, this.valueLimit) == |
| 122 print_preview.marginValidationStates.WITHIN_RANGE; |
102 if (this.isValid) | 123 if (this.isValid) |
103 this.value = MarginTextbox.convertInchesToInchesText(this.margin); | 124 this.value = print_preview.convertInchesToInchesText(this.margin); |
104 }, | 125 }, |
105 | 126 |
106 /** | 127 /** |
107 * Updates the background color depending on |isValid| by adding/removing | 128 * Updates the background color depending on |isValid| by adding/removing |
108 * the appropriate CSS class. | 129 * the appropriate CSS class. |
109 * @param {boolean} isValid True if the margin is valid. | 130 * @param {boolean} isValid True if the margin is valid. |
110 */ | 131 */ |
111 updateColor: function() { | 132 updateColor: function() { |
112 this.isValid ? this.classList.remove('invalid') : | 133 this.isValid ? this.classList.remove('invalid') : |
113 this.classList.add('invalid'); | 134 this.classList.add('invalid'); |
114 }, | 135 }, |
115 | 136 |
116 /** | 137 /** |
117 * Draws this textbox. | 138 * Draws this textbox. |
118 */ | 139 */ |
119 draw: function() { | 140 draw: function() { |
120 var topLeft = this.getCoordinates_(); | |
121 var totalWidth = previewArea.pdfPlugin_.offsetWidth; | |
122 var totalHeight = previewArea.pdfPlugin_.offsetHeight; | |
123 | |
124 this.style.left = Math.round(topLeft.x * totalWidth) + 'px'; | |
125 this.style.top = Math.round(topLeft.y * totalHeight) + 'px'; | |
126 this.updateColor(); | 141 this.updateColor(); |
127 }, | 142 }, |
128 | 143 |
129 /** | 144 /** |
130 * @return {boolean} True if |this| refers to the top margin. | 145 * @return {boolean} True if |this| refers to the top margin. |
131 * @private | 146 * @private |
132 */ | 147 */ |
133 isTop_: function() { | 148 isTop_: function() { |
134 return this.marginGroup == print_preview.MarginSettings.TOP_GROUP; | 149 return this.marginGroup == print_preview.MarginSettings.TOP_GROUP; |
135 }, | 150 }, |
(...skipping 16 matching lines...) Expand all Loading... |
152 | 167 |
153 /** | 168 /** |
154 * @return {boolean} True if |this| refers to the bottom margin. | 169 * @return {boolean} True if |this| refers to the bottom margin. |
155 * @private | 170 * @private |
156 */ | 171 */ |
157 isRight_: function() { | 172 isRight_: function() { |
158 return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP; | 173 return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP; |
159 }, | 174 }, |
160 | 175 |
161 /** | 176 /** |
162 * Calculates the coordinates where |this| should be displayed. | |
163 * @return {{x: number, y: number}} The coordinates (in percent) where | |
164 * |this| should be drawn relative to the upper left corner of the | |
165 * plugin. | |
166 * @private | |
167 */ | |
168 getCoordinates_: function() { | |
169 var x = 0, y = 0; | |
170 var totalWidth = previewArea.pdfPlugin_.offsetWidth; | |
171 var totalHeight = previewArea.pdfPlugin_.offsetHeight; | |
172 var offsetY = (MarginTextbox.totalHeight() / 2) / totalHeight; | |
173 var offsetX = (MarginTextbox.totalWidth() / 2) / totalWidth; | |
174 | |
175 if (this.isTop_()) { | |
176 x = this.marginsRectangle_.middleX - offsetX; | |
177 y = this.marginsRectangle_.y; | |
178 } else if (this.isBottom_()) { | |
179 x = this.marginsRectangle_.middleX - offsetX; | |
180 y = this.marginsRectangle_.bottom - 2 * offsetY; | |
181 } else if (this.isRight_()) { | |
182 x = this.marginsRectangle_.right - 2 * offsetX; | |
183 y = this.marginsRectangle_.middleY - offsetY; | |
184 } else if (this.isLeft_()) { | |
185 x = this.marginsRectangle_.x; | |
186 y = this.marginsRectangle_.middleY - offsetY; | |
187 } | |
188 | |
189 return { x: x, y: y }; | |
190 }, | |
191 | |
192 /** | |
193 * Adds event listeners for various events. | 177 * Adds event listeners for various events. |
194 * @private | 178 * @private |
195 */ | 179 */ |
196 addEventListeners_: function() { | 180 addEventListeners_: function() { |
197 this.oninput = this.resetTimer_.bind(this); | 181 this.oninput = this.resetTimer_.bind(this); |
198 this.onblur = this.onBlur_.bind(this); | 182 this.onblur = this.onBlur_.bind(this); |
199 this.onkeypress = this.onKeyPressed_.bind(this); | 183 this.onkeypress = this.onKeyPressed_.bind(this); |
200 this.onkeyup = this.onKeyUp_.bind(this); | 184 this.onkeyup = this.onKeyUp_.bind(this); |
201 }, | 185 }, |
202 | 186 |
203 /** | 187 /** |
204 * Executes whenever a blur event occurs. | 188 * Executes whenever a blur event occurs. |
205 * @private | 189 * @private |
206 */ | 190 */ |
207 onBlur_: function() { | 191 onBlur_: function() { |
208 clearTimeout(this.timerId_); | 192 clearTimeout(this.timerId_); |
209 this.validate(); | 193 this.validate(); |
210 if (!this.isValid) { | 194 if (!this.isValid) { |
211 this.value = MarginTextbox.convertPointsToInchesText( | 195 this.value = print_preview.convertPointsToInchesText( |
212 this.lastValidValueInPoints); | 196 this.lastValidValueInPoints); |
213 this.validate(); | 197 this.validate(); |
214 } | 198 } |
215 | 199 |
216 this.updateColor(); | 200 this.updateColor(); |
217 cr.dispatchSimpleEvent(document, 'updateSummary'); | 201 cr.dispatchSimpleEvent(document, 'updateSummary'); |
218 cr.dispatchSimpleEvent(document, 'updatePrintButton'); | 202 cr.dispatchSimpleEvent(document, 'updatePrintButton'); |
219 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); | 203 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); |
220 }, | 204 }, |
221 | 205 |
(...skipping 10 matching lines...) Expand all Loading... |
232 }, | 216 }, |
233 | 217 |
234 /** | 218 /** |
235 * Executes whenever a keyup event occurs. Note: Only the "Escape" | 219 * Executes whenever a keyup event occurs. Note: Only the "Escape" |
236 * key event is handled. | 220 * key event is handled. |
237 * @param {KeyboardEvent} e The event that triggered this listener. | 221 * @param {KeyboardEvent} e The event that triggered this listener. |
238 * @private | 222 * @private |
239 */ | 223 */ |
240 onKeyUp_: function(e) { | 224 onKeyUp_: function(e) { |
241 if (e.keyCode == MarginTextbox.ESCAPE_KEYCODE) { | 225 if (e.keyCode == MarginTextbox.ESCAPE_KEYCODE) { |
242 this.value = MarginTextbox.convertPointsToInchesText( | 226 this.value = print_preview.convertPointsToInchesText( |
243 this.lastValidValueInPoints); | 227 this.lastValidValueInPoints); |
244 this.validate(); | 228 this.validate(); |
245 this.updateColor(); | 229 this.updateColor(); |
246 cr.dispatchSimpleEvent(document, 'updateSummary'); | 230 cr.dispatchSimpleEvent(document, 'updateSummary'); |
247 cr.dispatchSimpleEvent(document, 'updatePrintButton'); | 231 cr.dispatchSimpleEvent(document, 'updatePrintButton'); |
248 } | 232 } |
249 }, | 233 }, |
250 | 234 |
251 /** | 235 /** |
252 * Resetting the timer used to detect when the user stops typing in order | 236 * Resetting the timer used to detect when the user stops typing in order |
253 * to update the print preview. | 237 * to update the print preview. |
254 * @private | 238 * @private |
255 */ | 239 */ |
256 resetTimer_: function() { | 240 resetTimer_: function() { |
257 clearTimeout(this.timerId_); | 241 clearTimeout(this.timerId_); |
258 this.timerId_ = window.setTimeout( | 242 this.timerId_ = window.setTimeout( |
259 this.onTextValueMayHaveChanged_.bind(this), 500); | 243 this.onTextValueMayHaveChanged.bind(this), 500); |
260 }, | 244 }, |
261 | 245 |
262 /** | 246 /** |
263 * Executes whenever the user stops typing. | 247 * Executes whenever the user stops typing or when a drag session associated |
264 * @private | 248 * with |this| ends. |
265 */ | 249 */ |
266 onTextValueMayHaveChanged_: function() { | 250 onTextValueMayHaveChanged: function() { |
267 this.validate(); | 251 this.validate(); |
268 this.updateColor(); | 252 this.updateColor(); |
269 cr.dispatchSimpleEvent(document, 'updateSummary'); | 253 cr.dispatchSimpleEvent(document, 'updateSummary'); |
270 cr.dispatchSimpleEvent(document, 'updatePrintButton'); | 254 cr.dispatchSimpleEvent(document, 'updatePrintButton'); |
271 | 255 |
272 if (!this.isValid) | 256 if (!this.isValid) |
273 return; | 257 return; |
274 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); | 258 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); |
275 } | 259 } |
276 | 260 |
277 }; | 261 }; |
278 | 262 |
279 return { | 263 return { |
280 MarginTextbox: MarginTextbox | 264 MarginTextbox: MarginTextbox |
281 }; | 265 }; |
282 }); | 266 }); |
OLD | NEW |