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 /** | 8 function MarginsUI() { |
9 * @constructor | |
10 * This class represents a margin line and a textbox corresponding to that | |
11 * margin. | |
12 */ | |
13 function MarginsUIPair(groupName) { | |
14 this.line_ = new print_preview.MarginLine(groupName); | |
15 this.box_ = new print_preview.MarginTextbox(groupName); | |
16 } | |
17 | |
18 MarginsUIPair.prototype = { | |
19 __proto__: MarginsUIPair.prototype, | |
20 | |
21 /** | |
22 * Updates the state. | |
23 */ | |
24 update: function(marginsRectangle, value, valueLimit, keepDisplayedValue) { | |
25 this.line_.update(marginsRectangle); | |
26 this.box_.update(marginsRectangle, value, valueLimit, keepDisplayedValue); | |
27 }, | |
28 | |
29 /** | |
30 * Draws |this| based on the state. | |
31 */ | |
32 draw: function() { | |
33 this.line_.draw(); | |
34 this.box_.draw(); | |
35 } | |
36 }; | |
37 | |
38 function MarginsUI(parentNode) { | |
39 var marginsUI = document.createElement('div'); | 9 var marginsUI = document.createElement('div'); |
40 marginsUI.__proto__ = MarginsUI.prototype; | 10 marginsUI.__proto__ = MarginsUI.prototype; |
41 marginsUI.id = 'customized-margins'; | 11 marginsUI.id = 'customized-margins'; |
42 | 12 |
43 marginsUI.topPair_ = new MarginsUIPair( | 13 // @type {print_preview.MarginsUIPair} The object corresponding to the top |
14 // margin. | |
15 marginsUI.topPair_ = new print_preview.MarginsUIPair( | |
44 print_preview.MarginSettings.TOP_GROUP); | 16 print_preview.MarginSettings.TOP_GROUP); |
45 marginsUI.leftPair_ = new MarginsUIPair( | 17 // @type {print_preview.MarginsUIPair} The object corresponding to the left |
18 // margin. | |
19 marginsUI.leftPair_ = new print_preview.MarginsUIPair( | |
46 print_preview.MarginSettings.LEFT_GROUP); | 20 print_preview.MarginSettings.LEFT_GROUP); |
47 marginsUI.rightPair_ = new MarginsUIPair( | 21 // @type {print_preview.MarginsUIPair} The object corresponding to the right |
22 // margin. | |
23 marginsUI.rightPair_ = new print_preview.MarginsUIPair( | |
48 print_preview.MarginSettings.RIGHT_GROUP); | 24 print_preview.MarginSettings.RIGHT_GROUP); |
49 marginsUI.bottomPair_ = new MarginsUIPair( | 25 // @type {print_preview.MarginsUIPair} The object corresponding to the |
26 // bottom margin. | |
27 marginsUI.bottomPair_ = new print_preview.MarginsUIPair( | |
50 print_preview.MarginSettings.BOTTOM_GROUP); | 28 print_preview.MarginSettings.BOTTOM_GROUP); |
51 parentNode.appendChild(marginsUI); | |
52 | 29 |
53 var uiPairs = marginsUI.pairsAsList; | 30 var uiPairs = marginsUI.pairsAsList; |
54 for (var i = 0; i < uiPairs.length; i++) { | 31 for (var i = 0; i < uiPairs.length; i++) |
55 marginsUI.appendChild(uiPairs[i].line_); | 32 marginsUI.appendChild(uiPairs[i]); |
56 marginsUI.appendChild(uiPairs[i].box_); | 33 |
57 } | 34 // @type {print_preview.MarginsUIPair} The object that is being dragged. |
35 // null if no drag session is in progress. | |
36 marginsUI.lastClickedMarginsUIPair = null; | |
37 | |
38 // @type {EventTracker} Used to keep track of certain event listeners. | |
39 marginsUI.eventTracker = new EventTracker(); | |
40 | |
41 marginsUI.addEventListeners_(); | |
58 return marginsUI; | 42 return marginsUI; |
59 } | 43 } |
60 | 44 |
45 /** | |
46 * @param {print_preview.Point} point The point with respect to the top left | |
47 * corner of the webpage. | |
48 * @return {print_preview.Point} The point with respect to the top left corner | |
49 * of the plugin area. | |
50 */ | |
51 MarginsUI.convert = function(point) { | |
52 var mainview = $('mainview'); | |
53 return new print_preview.Point(point.x - mainview.offsetLeft, | |
54 point.y - mainview.offsetTop); | |
55 } | |
56 | |
61 MarginsUI.prototype = { | 57 MarginsUI.prototype = { |
62 __proto__: HTMLDivElement.prototype, | 58 __proto__: HTMLDivElement.prototype, |
63 | 59 |
64 /** | 60 /** |
65 * Adds an observer for |MarginsMayHaveChanged| event. | 61 * Adds an observer for |MarginsMayHaveChanged| event. |
66 * @param {function} func A callback function to be called when | 62 * @param {function} func A callback function to be called when |
67 * |MarginsMayHaveChanged| event occurs. | 63 * |MarginsMayHaveChanged| event occurs. |
68 */ | 64 */ |
69 addObserver: function(func) { | 65 addObserver: function(func) { |
70 var uiPairs = this.pairsAsList; | 66 var uiPairs = this.pairsAsList; |
71 for (var i = 0; i < uiPairs.length; i++) | 67 for (var i = 0; i < uiPairs.length; i++) |
72 uiPairs[i].box_.addEventListener('MarginsMayHaveChanged', func); | 68 uiPairs[i].box_.addEventListener('MarginsMayHaveChanged', func); |
73 }, | 69 }, |
74 | 70 |
75 /** | 71 /** |
76 * @return {array} An array including all |MarginUIPair| objects. | 72 * @return {array} An array including all |MarginUIPair| objects. |
77 */ | 73 */ |
78 get pairsAsList() { | 74 get pairsAsList() { |
79 return [this.topPair_, this.leftPair_, this.rightPair_, this.bottomPair_]; | 75 return [this.topPair_, this.leftPair_, this.rightPair_, this.bottomPair_]; |
80 }, | 76 }, |
81 | 77 |
82 /** | 78 /** |
83 * Updates the state of the margins UI. | 79 * Updates the state of the margins UI. |
84 * @param {print_preview.Rect} | 80 * @param {print_preview.Rect} |
85 * @param {Margins} marginValues | 81 * @param {Margins} marginValues |
86 * @param {array} valueLimits | 82 * @param {array} valueLimits |
87 */ | 83 */ |
88 update: function(marginsRectangle, marginValues, valueLimits, | 84 update: function(marginsRectangle, marginValues, valueLimits, |
89 keepDisplayedValue) { | 85 keepDisplayedValue, valueLimitsInPercent) { |
90 var uiPairs = this.pairsAsList; | 86 var uiPairs = this.pairsAsList; |
91 var order = ['top', 'left', 'right', 'bottom']; | 87 var order = ['top', 'left', 'right', 'bottom']; |
92 for (var i = 0; i < uiPairs.length; i++) { | 88 for (var i = 0; i < uiPairs.length; i++) { |
93 uiPairs[i].update(marginsRectangle, | 89 uiPairs[i].update(marginsRectangle, |
94 marginValues[order[i]], | 90 marginValues[order[i]], |
95 valueLimits[i], | 91 valueLimits[i], |
96 keepDisplayedValue); | 92 keepDisplayedValue, |
93 valueLimitsInPercent[i]); | |
97 } | 94 } |
98 }, | 95 }, |
99 | 96 |
100 /** | 97 /** |
101 * Draws |this| based on the latest state. | 98 * Draws |this| based on the latest state. |
102 */ | 99 */ |
103 draw: function() { | 100 draw: function() { |
104 this.applyClippingMask_(); | 101 this.applyClippingMask_(); |
105 this.pairsAsList.forEach(function(pair) { pair.draw(); }); | 102 this.pairsAsList.forEach(function(pair) { pair.draw(); }); |
106 }, | 103 }, |
(...skipping 13 matching lines...) Expand all Loading... | |
120 }, | 117 }, |
121 | 118 |
122 /** | 119 /** |
123 * Applies a clipping mask on |this| so that it does not paint on top of the | 120 * Applies a clipping mask on |this| so that it does not paint on top of the |
124 * scrollbars (if any). | 121 * scrollbars (if any). |
125 */ | 122 */ |
126 applyClippingMask_: function() { | 123 applyClippingMask_: function() { |
127 var bottom = previewArea.height; | 124 var bottom = previewArea.height; |
128 var right = previewArea.width; | 125 var right = previewArea.width; |
129 this.style.clip = "rect(0, " + right + "px, " + bottom + "px, 0)"; | 126 this.style.clip = "rect(0, " + right + "px, " + bottom + "px, 0)"; |
130 } | 127 }, |
128 | |
129 /** | |
130 * Adds event listeners for various events. | |
131 * @private | |
132 */ | |
133 addEventListeners_: function() { | |
134 var uiPairs = this.pairsAsList; | |
135 for (var i = 0; i < uiPairs.length; i++) { | |
136 uiPairs[i].addEventListener('MarginsLineMouseDown', | |
137 this.onMarginLineMouseDown.bind(this)); | |
138 } | |
139 // After snapping to min/max the MarginUIPair might not receive the | |
140 // mouseup event since it is not under the mouse pointer, so it is handled | |
141 // here. | |
142 window.document.addEventListener('mouseup', | |
143 this.onMarginLineMouseUp.bind(this)); | |
144 }, | |
145 | |
146 /** | |
147 * Executes when a "MarginLineMouseDown" event occurs. | |
148 * @param {cr.Event} e The event that triggered this listener. | |
149 */ | |
150 onMarginLineMouseDown: function(e) { | |
151 this.lastClickedMarginsUIPair = e.target; | |
152 this.bringToFront(this.lastClickedMarginsUIPair); | |
153 // Note: Capturing mouse events at a higher level in the DOM than |this|, | |
154 // so that the plugin can still receive mouse events. | |
155 this.eventTracker.add( | |
156 window.document, 'mousemove', this.onMouseMove_.bind(this), false); | |
157 }, | |
158 | |
159 /** | |
160 * Executes when a "MarginLineMouseUp" event occurs. | |
161 * @param {cr.Event} e The event that triggered this listener. | |
162 */ | |
163 onMarginLineMouseUp: function(e) { | |
164 if (this.lastClickedMarginsUIPair == null) | |
165 return; | |
166 this.lastClickedMarginsUIPair.box_.onBlur_(); | |
167 this.lastClickedMarginsUIPair = null; | |
168 this.eventTracker.remove(window.document, 'mousemove'); | |
169 }, | |
170 | |
171 /** | |
172 * Brings |uiPair| in front of the other pairs. | |
Evan Stade
2011/10/14 21:58:36
a note about why this is necessary would be helpfu
dpapad
2011/10/14 23:14:38
Done.
| |
173 * @param {print_preview.MarginsUIPair} uiPair The pair to bring in front. | |
174 */ | |
175 bringToFront: function(uiPair) { | |
176 this.pairsAsList.forEach(function(pair) { pair.style.zIndex = 0; }); | |
Evan Stade
2011/10/14 21:58:36
instead of editing style from js, apply a CSS clas
dpapad
2011/10/14 23:14:38
Done.
| |
177 uiPair.style.zIndex = 10; | |
178 }, | |
179 | |
180 /** | |
181 * Executes when a mousemove event occurs. | |
182 * @param {MouseEvent} e The event that triggered this listener. | |
183 */ | |
184 onMouseMove_: function(e) { | |
185 var point = MarginsUI.convert(new print_preview.Point(e.x, e.y)); | |
186 | |
187 var dragEvent = new cr.Event('DragEvent'); | |
188 dragEvent.dragDelta = | |
189 this.lastClickedMarginsUIPair.getDragDisplacementFrom(point); | |
190 dragEvent.destinationPoint = point; | |
191 this.dispatchEvent(dragEvent); | |
192 }, | |
131 }; | 193 }; |
132 | 194 |
133 return { | 195 return { |
134 MarginsUI: MarginsUI | 196 MarginsUI: MarginsUI |
135 }; | 197 }; |
136 }); | 198 }); |
OLD | NEW |