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 MarginLine(groupName) { | 8 function MarginLine(groupName) { |
9 var line = document.createElement('div'); | 9 var line = document.createElement('div'); |
10 line.__proto__ = MarginLine.prototype; | 10 line.__proto__ = MarginLine.prototype; |
11 line.className = MarginLine.CSS_CLASS_DRAGGABLE_AREA; | 11 line.className = MarginLine.CSS_CLASS_MARGIN_LINE; |
| 12 |
12 // @type {string} Specifies which margin this line refers to. | 13 // @type {string} Specifies which margin this line refers to. |
13 line.marginGroup = groupName; | 14 line.marginGroup = groupName; |
14 // @type {print_preview.Rect} A rectangle describing the values of all | |
15 // margins. | |
16 line.rectangle = null; | |
17 // @type {HTMLDivElement} The dotted line representing the margin. | |
18 line.visibleLine = document.createElement('div'); | |
19 line.visibleLine.className = MarginLine.CSS_CLASS_MARGIN_LINE; | |
20 | 15 |
21 line.appendChild(line.visibleLine); | |
22 return line; | 16 return line; |
23 } | 17 } |
24 | 18 |
25 MarginLine.CSS_CLASS_MARGIN_LINE = 'margin-line'; | 19 MarginLine.CSS_CLASS_MARGIN_LINE = 'margin-line'; |
26 MarginLine.CSS_CLASS_DRAGGABLE_AREA = 'draggable-area'; | |
27 // Width of the clickable region around each margin line in screen pixels. | |
28 MarginLine.CLICKABLE_REGION = 20; | |
29 | 20 |
30 MarginLine.prototype = { | 21 MarginLine.prototype = { |
31 __proto__: HTMLDivElement.prototype, | 22 __proto__: HTMLDivElement.prototype, |
32 | 23 |
33 update: function(marginsRectangle) { | 24 /** |
34 this.rectangle = this.getCoordinates_(marginsRectangle); | 25 * Draws a dotted line representing the margin. |
| 26 */ |
| 27 draw: function() { |
| 28 var rectangle = this.getCoordinates_(); |
| 29 this.style.left = 100 * rectangle.x + '%'; |
| 30 this.style.top = 100 * rectangle.y + '%'; |
| 31 this.style.width = 100 * rectangle.width + '%'; |
| 32 this.style.height = 100 * rectangle.height + '%'; |
35 }, | 33 }, |
36 | 34 |
37 /** | 35 /** |
38 * Draws |this| on screen. Essentially two divs are being drawn, the drag | 36 * Calculates the coordinates and size of the margin line in percentages, |
39 * control area (invisible) and the dotted margin line (visible). | 37 * with respect to parent element. |
40 */ | |
41 draw: function() { | |
42 this.drawDraggableArea_(); | |
43 this.drawDottedLine_(); | |
44 }, | |
45 | |
46 /** | |
47 * Draws the dotted line representing the margin. | |
48 * @private | |
49 */ | |
50 drawDottedLine_ : function() { | |
51 var rectangle = this.getVisibleLineCoordinates_(); | |
52 this.visibleLine.style.left = 100 * rectangle.x + '%'; | |
53 this.visibleLine.style.top = 100 * rectangle.y + '%'; | |
54 this.visibleLine.style.width = 100 * rectangle.width + '%'; | |
55 this.visibleLine.style.height = 100 * rectangle.height + '%'; | |
56 }, | |
57 | |
58 /** | |
59 * Draws the area the draggable area (not visible). | |
60 * @private | |
61 */ | |
62 drawDraggableArea_: function() { | |
63 var width = previewArea.pdfPlugin_.offsetWidth; | |
64 var height = previewArea.pdfPlugin_.offsetHeight; | |
65 | |
66 this.style.left = Math.round(this.rectangle.x * width) + 'px'; | |
67 this.style.top = Math.round(this.rectangle.y * height) + 'px'; | |
68 this.style.width = Math.round(this.rectangle.width * width) + 'px'; | |
69 this.style.height = Math.round(this.rectangle.height * height) + 'px'; | |
70 }, | |
71 | |
72 /** | |
73 * Calculates the coordinates and size of |this|. | |
74 * @param {print_preview.Rect} marginsRectangle A rectangle describing the | |
75 * selected margins values in percentages. | |
76 * @private | |
77 */ | |
78 getCoordinates_: function(marginsRectangle) { | |
79 var pageLocation = previewArea.getPageLocationNormalized(); | |
80 var totalWidth = previewArea.pdfPlugin_.offsetWidth; | |
81 var totalHeight = previewArea.pdfPlugin_.offsetHeight; | |
82 var offsetY = (MarginLine.CLICKABLE_REGION / 2) / totalHeight; | |
83 var offsetX = (MarginLine.CLICKABLE_REGION / 2) / totalWidth; | |
84 | |
85 if (this.isTop_()) { | |
86 var lineCoordinates = new print_preview.Rect( | |
87 pageLocation.x, | |
88 marginsRectangle.y - offsetY, | |
89 pageLocation.width, | |
90 MarginLine.CLICKABLE_REGION / totalHeight); | |
91 } else if (this.isBottom_()) { | |
92 var lineCoordinates = new print_preview.Rect( | |
93 pageLocation.x, | |
94 marginsRectangle.bottom - offsetY, | |
95 pageLocation.width, | |
96 MarginLine.CLICKABLE_REGION / totalHeight); | |
97 } else if (this.isRight_()) { | |
98 var lineCoordinates = new print_preview.Rect( | |
99 marginsRectangle.right - offsetX, | |
100 pageLocation.y, | |
101 MarginLine.CLICKABLE_REGION / totalWidth, | |
102 pageLocation.height); | |
103 } else if (this.isLeft_()) { | |
104 var lineCoordinates = new print_preview.Rect( | |
105 marginsRectangle.x - offsetX, | |
106 pageLocation.y, | |
107 MarginLine.CLICKABLE_REGION / totalWidth, | |
108 pageLocation.height); | |
109 } | |
110 return lineCoordinates; | |
111 }, | |
112 | |
113 /** | |
114 * Calculates the coordinates in percentages and size of the visible margin | |
115 * line, with respect to |this| div element. | |
116 * @return {print_preview.Rect} A rectangle describing the position of the | 38 * @return {print_preview.Rect} A rectangle describing the position of the |
117 * visible line in percentages. | 39 * visible line in percentages. |
118 * @private | 40 * @private |
119 */ | 41 */ |
120 getVisibleLineCoordinates_: function() { | 42 getCoordinates_: function() { |
121 if (this.isHorizontal_()) | 43 if (this.isHorizontal_()) |
122 var innerMarginsRect = new print_preview.Rect(0, 0.5, 1, 0); | 44 var innerMarginsRect = new print_preview.Rect(0, 0.5, 1, 0); |
123 else if (this.isVertical_()) | 45 else if (this.isVertical_()) |
124 var innerMarginsRect = new print_preview.Rect(0.5, 0, 0, 1); | 46 var innerMarginsRect = new print_preview.Rect(0.5, 0, 0, 1); |
125 return innerMarginsRect; | 47 return innerMarginsRect; |
126 }, | 48 }, |
127 | 49 |
128 /** | 50 /** |
129 * @return {boolean} True if |this| refers to the top margin. | 51 * @return {boolean} True if |this| refers to the top margin. |
130 * @private | 52 * @private |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
172 isVertical_: function() { | 94 isVertical_: function() { |
173 return this.isLeft_() || this.isRight_(); | 95 return this.isLeft_() || this.isRight_(); |
174 }, | 96 }, |
175 | 97 |
176 }; | 98 }; |
177 | 99 |
178 return { | 100 return { |
179 MarginLine: MarginLine | 101 MarginLine: MarginLine |
180 }; | 102 }; |
181 }); | 103 }); |
OLD | NEW |