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 {{x: number, y: number}} point The point with respect to the top |
| 47 * left corner of the webpage. |
| 48 * @return {{x: number: y: number}} The point with respect to the top left |
| 49 * corner of the plugin area. |
| 50 */ |
| 51 MarginsUI.convert = function(point) { |
| 52 var mainview = $('mainview'); |
| 53 return { x: point.x - mainview.offsetLeft, |
| 54 y: 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.onMouseUp(); |
| 167 this.lastClickedMarginsUIPair = null; |
| 168 this.eventTracker.remove(window.document, 'mousemove'); |
| 169 }, |
| 170 |
| 171 /** |
| 172 * Brings |uiPair| in front of the other pairs. Used to make sure that the |
| 173 * dragged pair is visible when overlapping with a not dragged pair. |
| 174 * @param {print_preview.MarginsUIPair} uiPair The pair to bring in front. |
| 175 */ |
| 176 bringToFront: function(uiPair) { |
| 177 this.pairsAsList.forEach(function(pair) { |
| 178 pair.classList.remove('dragging'); |
| 179 }); |
| 180 uiPair.classList.add('dragging'); |
| 181 }, |
| 182 |
| 183 /** |
| 184 * Executes when a mousemove event occurs. |
| 185 * @param {MouseEvent} e The event that triggered this listener. |
| 186 */ |
| 187 onMouseMove_: function(e) { |
| 188 var point = MarginsUI.convert({ x: e.x, y: e.y }); |
| 189 |
| 190 var dragEvent = new cr.Event('DragEvent'); |
| 191 dragEvent.dragDelta = |
| 192 this.lastClickedMarginsUIPair.getDragDisplacementFrom(point); |
| 193 dragEvent.destinationPoint = point; |
| 194 this.dispatchEvent(dragEvent); |
| 195 }, |
131 }; | 196 }; |
132 | 197 |
133 return { | 198 return { |
134 MarginsUI: MarginsUI | 199 MarginsUI: MarginsUI |
135 }; | 200 }; |
136 }); | 201 }); |
OLD | NEW |