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 * Draggable control for setting a page margin. | 9 * Draggable control for setting a page margin. |
10 * @param {!print_preview.ticket_items.CustomMarginsOrientation} orientation | 10 * @param {!print_preview.ticket_items.CustomMarginsOrientation} orientation |
(...skipping 201 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
212 /** @return {number} Current position of the margin control in points. */ | 212 /** @return {number} Current position of the margin control in points. */ |
213 getPositionInPts: function() { | 213 getPositionInPts: function() { |
214 return this.positionInPts_; | 214 return this.positionInPts_; |
215 }, | 215 }, |
216 | 216 |
217 /** | 217 /** |
218 * @param {number} posInPts New position of the margin control in points. | 218 * @param {number} posInPts New position of the margin control in points. |
219 */ | 219 */ |
220 setPositionInPts: function(posInPts) { | 220 setPositionInPts: function(posInPts) { |
221 this.positionInPts_ = posInPts; | 221 this.positionInPts_ = posInPts; |
222 var orientationEnum = | 222 var orientationEnum = print_preview.ticket_items.CustomMarginsOrientation; |
223 print_preview.ticket_items.CustomMarginsOrientation; | |
224 var x = this.translateTransform_.x; | 223 var x = this.translateTransform_.x; |
225 var y = this.translateTransform_.y; | 224 var y = this.translateTransform_.y; |
226 var width = null, height = null; | 225 var width = null, height = null; |
227 if (this.orientation_ == orientationEnum.TOP) { | 226 if (this.orientation_ == orientationEnum.TOP) { |
228 y = this.scaleTransform_ * posInPts + this.translateTransform_.y - | 227 y = this.scaleTransform_ * posInPts + this.translateTransform_.y - |
229 MarginControl.RADIUS_; | 228 MarginControl.RADIUS_; |
230 width = this.scaleTransform_ * this.pageSize_.width; | 229 width = this.scaleTransform_ * this.pageSize_.width; |
231 } else if (this.orientation_ == orientationEnum.RIGHT) { | 230 } else if (this.orientation_ == orientationEnum.RIGHT) { |
232 x = this.scaleTransform_ * (this.pageSize_.width - posInPts) + | 231 x = this.scaleTransform_ * (this.pageSize_.width - posInPts) + |
233 this.translateTransform_.x - MarginControl.RADIUS_; | 232 this.translateTransform_.x - MarginControl.RADIUS_; |
(...skipping 29 matching lines...) Expand all Loading... |
263 } | 262 } |
264 }, | 263 }, |
265 | 264 |
266 /** | 265 /** |
267 * Converts a value in pixels to points. | 266 * Converts a value in pixels to points. |
268 * @param {number} pixels Pixel value to convert. | 267 * @param {number} pixels Pixel value to convert. |
269 * @return {number} Given value expressed in points. | 268 * @return {number} Given value expressed in points. |
270 */ | 269 */ |
271 convertPixelsToPts: function(pixels) { | 270 convertPixelsToPts: function(pixels) { |
272 var pts; | 271 var pts; |
273 var orientationEnum = | 272 var orientationEnum = print_preview.ticket_items.CustomMarginsOrientation; |
274 print_preview.ticket_items.CustomMarginsOrientation; | |
275 if (this.orientation_ == orientationEnum.TOP) { | 273 if (this.orientation_ == orientationEnum.TOP) { |
276 pts = pixels - this.translateTransform_.y + MarginControl.RADIUS_; | 274 pts = pixels - this.translateTransform_.y + MarginControl.RADIUS_; |
277 pts /= this.scaleTransform_; | 275 pts /= this.scaleTransform_; |
278 } else if (this.orientation_ == orientationEnum.RIGHT) { | 276 } else if (this.orientation_ == orientationEnum.RIGHT) { |
279 pts = pixels - this.translateTransform_.x + MarginControl.RADIUS_; | 277 pts = pixels - this.translateTransform_.x + MarginControl.RADIUS_; |
280 pts /= this.scaleTransform_; | 278 pts /= this.scaleTransform_; |
281 pts = this.pageSize_.width - pts; | 279 pts = this.pageSize_.width - pts; |
282 } else if (this.orientation_ == orientationEnum.BOTTOM) { | 280 } else if (this.orientation_ == orientationEnum.BOTTOM) { |
283 pts = pixels - this.translateTransform_.y + MarginControl.RADIUS_; | 281 pts = pixels - this.translateTransform_.y + MarginControl.RADIUS_; |
284 pts /= this.scaleTransform_; | 282 pts /= this.scaleTransform_; |
(...skipping 15 matching lines...) Expand all Loading... |
300 translateMouseToPositionInPixels: function(mousePosition) { | 298 translateMouseToPositionInPixels: function(mousePosition) { |
301 return new print_preview.Coordinate2d( | 299 return new print_preview.Coordinate2d( |
302 mousePosition.x - this.mouseStartPositionInPixels_.x + | 300 mousePosition.x - this.mouseStartPositionInPixels_.x + |
303 this.marginStartPositionInPixels_.x, | 301 this.marginStartPositionInPixels_.x, |
304 mousePosition.y - this.mouseStartPositionInPixels_.y + | 302 mousePosition.y - this.mouseStartPositionInPixels_.y + |
305 this.marginStartPositionInPixels_.y); | 303 this.marginStartPositionInPixels_.y); |
306 }, | 304 }, |
307 | 305 |
308 /** @override */ | 306 /** @override */ |
309 createDom: function() { | 307 createDom: function() { |
310 this.setElementInternal(this.cloneTemplateInternal( | 308 this.setElementInternal( |
311 'margin-control-template')); | 309 this.cloneTemplateInternal('margin-control-template')); |
312 this.getElement().classList.add('margin-control-' + this.orientation_); | 310 this.getElement().classList.add('margin-control-' + this.orientation_); |
313 this.textbox_ = this.getElement().getElementsByClassName( | 311 this.textbox_ = this.getElement().getElementsByClassName( |
314 MarginControl.Classes_.TEXTBOX)[0]; | 312 MarginControl.Classes_.TEXTBOX)[0]; |
315 this.textbox_.setAttribute( | 313 this.textbox_.setAttribute( |
316 'aria-label', loadTimeData.getString(this.orientation_)); | 314 'aria-label', loadTimeData.getString(this.orientation_)); |
317 this.marginLineEl_ = this.getElement().getElementsByClassName( | 315 this.marginLineEl_ = this.getElement().getElementsByClassName( |
318 MarginControl.Classes_.LINE)[0]; | 316 MarginControl.Classes_.LINE)[0]; |
319 }, | 317 }, |
320 | 318 |
321 /** @override */ | 319 /** @override */ |
322 enterDocument: function() { | 320 enterDocument: function() { |
323 print_preview.Component.prototype.enterDocument.call(this); | 321 print_preview.Component.prototype.enterDocument.call(this); |
324 this.tracker.add( | 322 this.tracker.add( |
325 this.getElement(), 'mousedown', this.onMouseDown_.bind(this)); | 323 this.getElement(), 'mousedown', this.onMouseDown_.bind(this)); |
326 this.tracker.add( | 324 this.tracker.add( |
327 this.getElement(), | 325 this.getElement(), 'transitionend', this.onTransitionEnd_.bind(this)); |
328 'transitionend', | |
329 this.onTransitionEnd_.bind(this)); | |
330 assert(this.textbox_); | 326 assert(this.textbox_); |
331 this.tracker.add( | 327 this.tracker.add(this.textbox_, 'input', this.onTextboxInput_.bind(this)); |
332 this.textbox_, 'input', this.onTextboxInput_.bind(this)); | |
333 this.tracker.add( | 328 this.tracker.add( |
334 this.textbox_, 'keydown', this.onTextboxKeyDown_.bind(this)); | 329 this.textbox_, 'keydown', this.onTextboxKeyDown_.bind(this)); |
335 this.tracker.add( | 330 this.tracker.add( |
336 this.textbox_, 'focus', this.setIsFocused_.bind(this, true)); | 331 this.textbox_, 'focus', this.setIsFocused_.bind(this, true)); |
337 this.tracker.add(this.textbox_, 'blur', this.onTexboxBlur_.bind(this)); | 332 this.tracker.add(this.textbox_, 'blur', this.onTexboxBlur_.bind(this)); |
338 }, | 333 }, |
339 | 334 |
340 /** @override */ | 335 /** @override */ |
341 exitDocument: function() { | 336 exitDocument: function() { |
342 print_preview.Component.prototype.exitDocument.call(this); | 337 print_preview.Component.prototype.exitDocument.call(this); |
(...skipping 19 matching lines...) Expand all Loading... |
362 previewArea.scrollLeft = 0; | 357 previewArea.scrollLeft = 0; |
363 } | 358 } |
364 }, | 359 }, |
365 | 360 |
366 /** | 361 /** |
367 * Called whenever a mousedown event occurs on the component. | 362 * Called whenever a mousedown event occurs on the component. |
368 * @param {MouseEvent} event The event that occured. | 363 * @param {MouseEvent} event The event that occured. |
369 * @private | 364 * @private |
370 */ | 365 */ |
371 onMouseDown_: function(event) { | 366 onMouseDown_: function(event) { |
372 if (!this.textbox_.disabled && | 367 if (!this.textbox_.disabled && event.button == 0 && |
373 event.button == 0 && | |
374 (event.target == this.getElement() || | 368 (event.target == this.getElement() || |
375 event.target == this.marginLineEl_)) { | 369 event.target == this.marginLineEl_)) { |
376 this.mouseStartPositionInPixels_ = | 370 this.mouseStartPositionInPixels_ = |
377 new print_preview.Coordinate2d(event.x, event.y); | 371 new print_preview.Coordinate2d(event.x, event.y); |
378 this.marginStartPositionInPixels_ = new print_preview.Coordinate2d( | 372 this.marginStartPositionInPixels_ = new print_preview.Coordinate2d( |
379 this.getElement().offsetLeft, this.getElement().offsetTop); | 373 this.getElement().offsetLeft, this.getElement().offsetTop); |
380 this.setIsInError(false); | 374 this.setIsInError(false); |
381 cr.dispatchSimpleEvent(this, MarginControl.EventType.DRAG_START); | 375 cr.dispatchSimpleEvent(this, MarginControl.EventType.DRAG_START); |
382 } | 376 } |
383 }, | 377 }, |
384 | 378 |
385 /** | 379 /** |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
442 if (this.textTimeout_) { | 436 if (this.textTimeout_) { |
443 clearTimeout(this.textTimeout_); | 437 clearTimeout(this.textTimeout_); |
444 this.textTimeout_ = null; | 438 this.textTimeout_ = null; |
445 } | 439 } |
446 this.setIsFocused_(false); | 440 this.setIsFocused_(false); |
447 cr.dispatchSimpleEvent(this, MarginControl.EventType.TEXT_CHANGE); | 441 cr.dispatchSimpleEvent(this, MarginControl.EventType.TEXT_CHANGE); |
448 } | 442 } |
449 }; | 443 }; |
450 | 444 |
451 // Export | 445 // Export |
452 return { | 446 return {MarginControl: MarginControl}; |
453 MarginControl: MarginControl | |
454 }; | |
455 }); | 447 }); |
OLD | NEW |