OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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 'use strict'; | 6 'use strict'; |
7 | 7 |
8 /** | 8 /** |
9 * UI component used for setting custom print margins. | 9 * UI component used for setting custom print margins. |
10 * @param {!print_preview.DocumentInfo} documentInfo Document data model. | 10 * @param {!print_preview.DocumentInfo} documentInfo Document data model. |
11 * @param {!print_preview.ticket_items.MarginsType} marginsTypeTicketItem | 11 * @param {!print_preview.ticket_items.MarginsType} marginsTypeTicketItem |
12 * Used to read margins type. | 12 * Used to read margins type. |
13 * @param {!print_preview.ticket_items.CustomMargins} customMarginsTicketItem | 13 * @param {!print_preview.ticket_items.CustomMargins} customMarginsTicketItem |
14 * Used to read and write custom margin values. | 14 * Used to read and write custom margin values. |
15 * @param {!print_preview.MeasurementSystem} measurementSystem Used to convert | 15 * @param {!print_preview.MeasurementSystem} measurementSystem Used to convert |
16 * between the system's local units and points. | 16 * between the system's local units and points. |
17 * @param {function(boolean)} dragChangedCallback A function which is called | 17 * @param {function(boolean)} dragChangedCallback A function which is called |
18 * when dragging margins starts or stops. True is passed to the function | 18 * when dragging margins starts or stops. True is passed to the function |
19 * if the margin is currently being dragged and false otherwise. | 19 * if the margin is currently being dragged and false otherwise. |
20 * @constructor | 20 * @constructor |
21 * @extends {print_preview.Component} | 21 * @extends {print_preview.Component} |
22 */ | 22 */ |
23 function MarginControlContainer(documentInfo, marginsTypeTicketItem, | 23 function MarginControlContainer( |
24 customMarginsTicketItem, measurementSystem, | 24 documentInfo, marginsTypeTicketItem, customMarginsTicketItem, |
25 dragChangedCallback) { | 25 measurementSystem, dragChangedCallback) { |
26 print_preview.Component.call(this); | 26 print_preview.Component.call(this); |
27 | 27 |
28 /** | 28 /** |
29 * Document data model. | 29 * Document data model. |
30 * @type {!print_preview.DocumentInfo} | 30 * @type {!print_preview.DocumentInfo} |
31 * @private | 31 * @private |
32 */ | 32 */ |
33 this.documentInfo_ = documentInfo; | 33 this.documentInfo_ = documentInfo; |
34 | 34 |
35 /** | 35 /** |
(...skipping 26 matching lines...) Expand all Loading... |
62 | 62 |
63 /** | 63 /** |
64 * Convenience array that contains all of the margin controls. | 64 * Convenience array that contains all of the margin controls. |
65 * @type {!Object< | 65 * @type {!Object< |
66 * !print_preview.ticket_items.CustomMarginsOrientation, | 66 * !print_preview.ticket_items.CustomMarginsOrientation, |
67 * !print_preview.MarginControl>} | 67 * !print_preview.MarginControl>} |
68 * @private | 68 * @private |
69 */ | 69 */ |
70 this.controls_ = {}; | 70 this.controls_ = {}; |
71 for (var key in print_preview.ticket_items.CustomMarginsOrientation) { | 71 for (var key in print_preview.ticket_items.CustomMarginsOrientation) { |
72 var orientation = print_preview.ticket_items.CustomMarginsOrientation[ | 72 var orientation = |
73 key]; | 73 print_preview.ticket_items.CustomMarginsOrientation[key]; |
74 var control = new print_preview.MarginControl(orientation); | 74 var control = new print_preview.MarginControl(orientation); |
75 this.controls_[orientation] = control; | 75 this.controls_[orientation] = control; |
76 this.addChild(control); | 76 this.addChild(control); |
77 } | 77 } |
78 | 78 |
79 /** | 79 /** |
80 * Margin control currently being dragged. Null if no control is being | 80 * Margin control currently being dragged. Null if no control is being |
81 * dragged. | 81 * dragged. |
82 * @type {print_preview.MarginControl} | 82 * @type {print_preview.MarginControl} |
83 * @private | 83 * @private |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
123 /** | 123 /** |
124 * @param {!print_preview.ticket_items.CustomMarginsOrientation} orientation | 124 * @param {!print_preview.ticket_items.CustomMarginsOrientation} orientation |
125 * Orientation value to test. | 125 * Orientation value to test. |
126 * @return {boolean} Whether the given orientation is TOP or BOTTOM. | 126 * @return {boolean} Whether the given orientation is TOP or BOTTOM. |
127 * @private | 127 * @private |
128 */ | 128 */ |
129 MarginControlContainer.isTopOrBottom_ = function(orientation) { | 129 MarginControlContainer.isTopOrBottom_ = function(orientation) { |
130 return orientation == | 130 return orientation == |
131 print_preview.ticket_items.CustomMarginsOrientation.TOP || | 131 print_preview.ticket_items.CustomMarginsOrientation.TOP || |
132 orientation == | 132 orientation == |
133 print_preview.ticket_items.CustomMarginsOrientation.BOTTOM; | 133 print_preview.ticket_items.CustomMarginsOrientation.BOTTOM; |
134 }; | 134 }; |
135 | 135 |
136 MarginControlContainer.prototype = { | 136 MarginControlContainer.prototype = { |
137 __proto__: print_preview.Component.prototype, | 137 __proto__: print_preview.Component.prototype, |
138 | 138 |
139 /** | 139 /** |
140 * Updates the translation transformation that translates pixel values in | 140 * Updates the translation transformation that translates pixel values in |
141 * the space of the HTML DOM. | 141 * the space of the HTML DOM. |
142 * @param {print_preview.Coordinate2d} translateTransform Updated value of | 142 * @param {print_preview.Coordinate2d} translateTransform Updated value of |
143 * the translation transformation. | 143 * the translation transformation. |
(...skipping 24 matching lines...) Expand all Loading... |
168 * Clips margin controls to the given clip size in pixels. | 168 * Clips margin controls to the given clip size in pixels. |
169 * @param {print_preview.Size} clipSize Size to clip the margin controls to. | 169 * @param {print_preview.Size} clipSize Size to clip the margin controls to. |
170 */ | 170 */ |
171 updateClippingMask: function(clipSize) { | 171 updateClippingMask: function(clipSize) { |
172 if (!clipSize) { | 172 if (!clipSize) { |
173 return; | 173 return; |
174 } | 174 } |
175 this.clippingSize_ = clipSize; | 175 this.clippingSize_ = clipSize; |
176 for (var orientation in this.controls_) { | 176 for (var orientation in this.controls_) { |
177 var el = this.controls_[orientation].getElement(); | 177 var el = this.controls_[orientation].getElement(); |
178 el.style.clip = 'rect(' + | 178 el.style.clip = 'rect(' + (-el.offsetTop) + 'px, ' + |
179 (-el.offsetTop) + 'px, ' + | |
180 (clipSize.width - el.offsetLeft) + 'px, ' + | 179 (clipSize.width - el.offsetLeft) + 'px, ' + |
181 (clipSize.height - el.offsetTop) + 'px, ' + | 180 (clipSize.height - el.offsetTop) + 'px, ' + (-el.offsetLeft) + |
182 (-el.offsetLeft) + 'px)'; | 181 'px)'; |
183 } | 182 } |
184 }, | 183 }, |
185 | 184 |
186 /** Shows the margin controls if the need to be shown. */ | 185 /** Shows the margin controls if the need to be shown. */ |
187 showMarginControlsIfNeeded: function() { | 186 showMarginControlsIfNeeded: function() { |
188 if (this.marginsTypeTicketItem_.getValue() == | 187 if (this.marginsTypeTicketItem_.getValue() == |
189 print_preview.ticket_items.MarginsTypeValue.CUSTOM) { | 188 print_preview.ticket_items.MarginsTypeValue.CUSTOM) { |
190 this.setIsMarginControlsVisible_(true); | 189 this.setIsMarginControlsVisible_(true); |
191 } | 190 } |
192 }, | 191 }, |
193 | 192 |
194 /** @override */ | 193 /** @override */ |
195 enterDocument: function() { | 194 enterDocument: function() { |
196 print_preview.Component.prototype.enterDocument.call(this); | 195 print_preview.Component.prototype.enterDocument.call(this); |
197 | 196 |
198 // We want to respond to mouse up events even beyond the component's | 197 // We want to respond to mouse up events even beyond the component's |
199 // element. | 198 // element. |
200 this.tracker.add(window, 'mouseup', this.onMouseUp_.bind(this)); | 199 this.tracker.add(window, 'mouseup', this.onMouseUp_.bind(this)); |
201 this.tracker.add(window, 'mousemove', this.onMouseMove_.bind(this)); | 200 this.tracker.add(window, 'mousemove', this.onMouseMove_.bind(this)); |
202 this.tracker.add( | 201 this.tracker.add( |
203 this.getElement(), 'mouseover', this.onMouseOver_.bind(this)); | 202 this.getElement(), 'mouseover', this.onMouseOver_.bind(this)); |
204 this.tracker.add( | 203 this.tracker.add( |
205 this.getElement(), 'mouseout', this.onMouseOut_.bind(this)); | 204 this.getElement(), 'mouseout', this.onMouseOut_.bind(this)); |
206 | 205 |
207 this.tracker.add( | 206 this.tracker.add( |
208 this.documentInfo_, | 207 this.documentInfo_, print_preview.DocumentInfo.EventType.CHANGE, |
209 print_preview.DocumentInfo.EventType.CHANGE, | |
210 this.onTicketChange_.bind(this)); | 208 this.onTicketChange_.bind(this)); |
211 this.tracker.add( | 209 this.tracker.add( |
212 this.marginsTypeTicketItem_, | 210 this.marginsTypeTicketItem_, |
213 print_preview.ticket_items.TicketItem.EventType.CHANGE, | 211 print_preview.ticket_items.TicketItem.EventType.CHANGE, |
214 this.onTicketChange_.bind(this)); | 212 this.onTicketChange_.bind(this)); |
215 this.tracker.add( | 213 this.tracker.add( |
216 this.customMarginsTicketItem_, | 214 this.customMarginsTicketItem_, |
217 print_preview.ticket_items.TicketItem.EventType.CHANGE, | 215 print_preview.ticket_items.TicketItem.EventType.CHANGE, |
218 this.onTicketChange_.bind(this)); | 216 this.onTicketChange_.bind(this)); |
219 | 217 |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
254 * to in pixels. | 252 * to in pixels. |
255 * @private | 253 * @private |
256 */ | 254 */ |
257 moveControlWithConstraints_: function(control, posInPixels) { | 255 moveControlWithConstraints_: function(control, posInPixels) { |
258 var newPosInPts; | 256 var newPosInPts; |
259 if (MarginControlContainer.isTopOrBottom_(control.getOrientation())) { | 257 if (MarginControlContainer.isTopOrBottom_(control.getOrientation())) { |
260 newPosInPts = control.convertPixelsToPts(posInPixels.y); | 258 newPosInPts = control.convertPixelsToPts(posInPixels.y); |
261 } else { | 259 } else { |
262 newPosInPts = control.convertPixelsToPts(posInPixels.x); | 260 newPosInPts = control.convertPixelsToPts(posInPixels.x); |
263 } | 261 } |
264 newPosInPts = Math.min(this.customMarginsTicketItem_.getMarginMax( | 262 newPosInPts = Math.min( |
265 control.getOrientation()), | 263 this.customMarginsTicketItem_.getMarginMax(control.getOrientation()), |
266 newPosInPts); | 264 newPosInPts); |
267 newPosInPts = Math.max(0, newPosInPts); | 265 newPosInPts = Math.max(0, newPosInPts); |
268 newPosInPts = Math.round(newPosInPts); | 266 newPosInPts = Math.round(newPosInPts); |
269 control.setPositionInPts(newPosInPts); | 267 control.setPositionInPts(newPosInPts); |
270 control.setTextboxValue(this.serializeValueFromPts_(newPosInPts)); | 268 control.setTextboxValue(this.serializeValueFromPts_(newPosInPts)); |
271 }, | 269 }, |
272 | 270 |
273 /** | 271 /** |
274 * @param {string} value Value to parse to points. E.g. '3.40"' or '200mm'. | 272 * @param {string} value Value to parse to points. E.g. '3.40"' or '200mm'. |
275 * @return {?number} Value in points represented by the input value. | 273 * @return {?number} Value in points represented by the input value. |
276 * @private | 274 * @private |
277 */ | 275 */ |
278 parseValueToPts_: function(value) { | 276 parseValueToPts_: function(value) { |
279 // Removing whitespace anywhere in the string. | 277 // Removing whitespace anywhere in the string. |
280 value = value.replace(/\s*/g, ''); | 278 value = value.replace(/\s*/g, ''); |
281 if (value.length == 0) { | 279 if (value.length == 0) { |
282 return null; | 280 return null; |
283 } | 281 } |
284 var validationRegex = new RegExp('^(^-?)(\\d)+(\\' + | 282 var validationRegex = new RegExp( |
285 this.measurementSystem_.thousandsDelimeter + '\\d{3})*(\\' + | 283 '^(^-?)(\\d)+(\\' + this.measurementSystem_.thousandsDelimeter + |
286 this.measurementSystem_.decimalDelimeter + '\\d*)?' + | 284 '\\d{3})*(\\' + this.measurementSystem_.decimalDelimeter + '\\d*)?' + |
287 '(' + this.measurementSystem_.unitSymbol + ')?$'); | 285 '(' + this.measurementSystem_.unitSymbol + ')?$'); |
288 if (validationRegex.test(value)) { | 286 if (validationRegex.test(value)) { |
289 // Replacing decimal point with the dot symbol in order to use | 287 // Replacing decimal point with the dot symbol in order to use |
290 // parseFloat() properly. | 288 // parseFloat() properly. |
291 var replacementRegex = | 289 var replacementRegex = |
292 new RegExp('\\' + this.measurementSystem_.decimalDelimeter + '{1}'); | 290 new RegExp('\\' + this.measurementSystem_.decimalDelimeter + '{1}'); |
293 value = value.replace(replacementRegex, '.'); | 291 value = value.replace(replacementRegex, '.'); |
294 return this.measurementSystem_.convertToPoints(parseFloat(value)); | 292 return this.measurementSystem_.convertToPoints(parseFloat(value)); |
295 } | 293 } |
296 return null; | 294 return null; |
(...skipping 172 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
469 for (var o in this.controls_) { | 467 for (var o in this.controls_) { |
470 if (control.getOrientation() != o) { | 468 if (control.getOrientation() != o) { |
471 this.controls_[o].setIsEnabled(enableOtherControls); | 469 this.controls_[o].setIsEnabled(enableOtherControls); |
472 } | 470 } |
473 } | 471 } |
474 } | 472 } |
475 } | 473 } |
476 }; | 474 }; |
477 | 475 |
478 // Export | 476 // Export |
479 return { | 477 return {MarginControlContainer: MarginControlContainer}; |
480 MarginControlContainer: MarginControlContainer | |
481 }; | |
482 }); | 478 }); |
OLD | NEW |