OLD | NEW |
(Empty) | |
| 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 |
| 3 // found in the LICENSE file. |
| 4 |
| 5 cr.define('print_preview', function() { |
| 6 'strict'; |
| 7 |
| 8 /** |
| 9 * @constructor |
| 10 * This class represents a margin line and a textbox corresponding to that |
| 11 * margin. |
| 12 */ |
| 13 function MarginsUIPair(groupName) { |
| 14 var marginsUIPair = document.createElement('div'); |
| 15 marginsUIPair.__proto__ = MarginsUIPair.prototype; |
| 16 marginsUIPair.className = MarginsUIPair.CSS_CLASS; |
| 17 // @type {string} Specifies which margin this line refers to. |
| 18 marginsUIPair.marginGroup = groupName; |
| 19 marginsUIPair.classList.add(groupName); |
| 20 |
| 21 // @type {print_preview.Rect} A rectangle describing the dimensions of |
| 22 // the draggable area. |
| 23 marginsUIPair.rectangle = null; |
| 24 // @type {print_preview.Rect} A rectangle describing the four margins. |
| 25 marginsUIPair.marginsRectangle = null; |
| 26 // @type {print_preview.MarginLine} The line representing the margin. |
| 27 marginsUIPair.line_ = new print_preview.MarginLine(groupName); |
| 28 // @type {print_preview.MarginTextbox} The textbox corresponding to this |
| 29 // margin. |
| 30 marginsUIPair.box_ = new print_preview.MarginTextbox(groupName); |
| 31 // @type {{x: number, y: number}} The point where mousedown occured within |
| 32 // the draggable area with respect the top-left corner of |this|. |
| 33 marginsUIPair.mousePointerOffset = null; |
| 34 // @type {{x: number, y:number}} The position of the origin before any |
| 35 // dragging in progress occured. |
| 36 marginsUIPair.originBeforeDragging = null; |
| 37 |
| 38 marginsUIPair.appendChild(marginsUIPair.line_); |
| 39 marginsUIPair.appendChild(marginsUIPair.box_); |
| 40 |
| 41 marginsUIPair.addEventListeners_(); |
| 42 return marginsUIPair; |
| 43 } |
| 44 |
| 45 MarginsUIPair.CSS_CLASS = 'margins-ui-pair'; |
| 46 // Width of the clickable region around each margin line in screen pixels. |
| 47 MarginsUIPair.CLICKABLE_REGION = 20; |
| 48 |
| 49 MarginsUIPair.prototype = { |
| 50 __proto__: HTMLDivElement.prototype, |
| 51 |
| 52 /** |
| 53 * Updates the state. |
| 54 */ |
| 55 update: function(marginsRectangle, value, valueLimit, keepDisplayedValue, |
| 56 valueLimitInPercent) { |
| 57 this.marginsRectangle = marginsRectangle; |
| 58 this.valueLimitInPercent = valueLimitInPercent; |
| 59 this.rectangle = this.getCoordinates_(this.marginsRectangle); |
| 60 this.box_.update(value, valueLimit, keepDisplayedValue); |
| 61 }, |
| 62 |
| 63 /** |
| 64 * Draws |this| based on the state. |
| 65 */ |
| 66 draw: function() { |
| 67 this.drawDraggableArea_(); |
| 68 this.line_.draw(); |
| 69 this.box_.draw(); |
| 70 }, |
| 71 |
| 72 /** |
| 73 * Draws the area that can be clicked in order to start dragging. |
| 74 * @private |
| 75 */ |
| 76 drawDraggableArea_: function() { |
| 77 var width = previewArea.pdfPlugin_.offsetWidth; |
| 78 var height = previewArea.pdfPlugin_.offsetHeight; |
| 79 |
| 80 this.style.left = Math.round(this.rectangle.x * width) + 'px'; |
| 81 this.style.top = Math.round(this.rectangle.y * height) + 'px'; |
| 82 this.style.width = Math.round(this.rectangle.width * width) + 'px'; |
| 83 this.style.height = Math.round(this.rectangle.height * height) + 'px'; |
| 84 }, |
| 85 |
| 86 /** |
| 87 * Calculates the coordinates and size of |this|. |
| 88 * @param {print_preview.Rect} marginsRectangle A rectangle describing the |
| 89 * selected margins values in percentages. |
| 90 * @private |
| 91 */ |
| 92 getCoordinates_: function(marginsRectangle) { |
| 93 var pageLocation = previewArea.pageLocationNormalized; |
| 94 var totalWidth = previewArea.pdfPlugin_.offsetWidth; |
| 95 var totalHeight = previewArea.pdfPlugin_.offsetHeight; |
| 96 var offsetY = (MarginsUIPair.CLICKABLE_REGION / 2) / totalHeight; |
| 97 var offsetX = (MarginsUIPair.CLICKABLE_REGION / 2) / totalWidth; |
| 98 |
| 99 if (this.isTop_()) { |
| 100 var lineCoordinates = new print_preview.Rect( |
| 101 pageLocation.x, |
| 102 marginsRectangle.y - offsetY, |
| 103 pageLocation.width, |
| 104 MarginsUIPair.CLICKABLE_REGION / totalHeight); |
| 105 } else if (this.isBottom_()) { |
| 106 var lineCoordinates = new print_preview.Rect( |
| 107 pageLocation.x, |
| 108 marginsRectangle.bottom - offsetY, |
| 109 pageLocation.width, |
| 110 MarginsUIPair.CLICKABLE_REGION / totalHeight); |
| 111 } else if (this.isRight_()) { |
| 112 var lineCoordinates = new print_preview.Rect( |
| 113 marginsRectangle.right - offsetX, |
| 114 pageLocation.y, |
| 115 MarginsUIPair.CLICKABLE_REGION / totalWidth, |
| 116 pageLocation.height); |
| 117 } else if (this.isLeft_()) { |
| 118 var lineCoordinates = new print_preview.Rect( |
| 119 marginsRectangle.x - offsetX, |
| 120 pageLocation.y, |
| 121 MarginsUIPair.CLICKABLE_REGION / totalWidth, |
| 122 pageLocation.height); |
| 123 } |
| 124 return lineCoordinates; |
| 125 }, |
| 126 |
| 127 /** |
| 128 * @return {boolean} True if |this| refers to the top margin. |
| 129 * @private |
| 130 */ |
| 131 isTop_: function() { |
| 132 return this.marginGroup == print_preview.MarginSettings.TOP_GROUP; |
| 133 }, |
| 134 |
| 135 /** |
| 136 * @return {boolean} True if |this| refers to the bottom margin. |
| 137 * @private |
| 138 */ |
| 139 isBottom_: function() { |
| 140 return this.marginGroup == print_preview.MarginSettings.BOTTOM_GROUP; |
| 141 }, |
| 142 |
| 143 /** |
| 144 * @return {boolean} True if |this| refers to the left margin. |
| 145 * @private |
| 146 */ |
| 147 isLeft_: function() { |
| 148 return this.marginGroup == print_preview.MarginSettings.LEFT_GROUP; |
| 149 }, |
| 150 |
| 151 /** |
| 152 * @return {boolean} True if |this| refers to the bottom margin. |
| 153 * @private |
| 154 */ |
| 155 isRight_: function() { |
| 156 return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP; |
| 157 }, |
| 158 |
| 159 /** |
| 160 * Adds event listeners for events related to dragging. |
| 161 */ |
| 162 addEventListeners_: function() { |
| 163 this.onmousedown = this.onMouseDown_.bind(this); |
| 164 }, |
| 165 |
| 166 /** |
| 167 * Executes whenever a mousedown event occurs on |this| or its child nodes. |
| 168 * @parameter {MouseEvent} e The event that occured. |
| 169 */ |
| 170 onMouseDown_: function(e) { |
| 171 if (e.button != 0) |
| 172 return; |
| 173 if (e.target != this) |
| 174 return; |
| 175 var point = print_preview.MarginsUI.convert({x: e.x, y: e.y}); |
| 176 this.originBeforeDragging = { x: this.offsetLeft, y: this.offsetTop }; |
| 177 this.mousePointerOffset = |
| 178 { x: point.x - this.offsetLeft, y: point.y - this.offsetTop }; |
| 179 cr.dispatchSimpleEvent(this, 'MarginsLineMouseDown'); |
| 180 }, |
| 181 |
| 182 /** |
| 183 * Executes whenever a mouseup event occurs while |this| is dragged. |
| 184 */ |
| 185 onMouseUp: function() { |
| 186 this.box_.onTextValueMayHaveChanged(); |
| 187 }, |
| 188 |
| 189 /** |
| 190 * Moves |this| including all its children to |point|. |
| 191 * @param {{x: number, y: number}} point The point where |this| should be |
| 192 * moved. |
| 193 */ |
| 194 moveTo: function(point) { |
| 195 if (this.isTop_() || this.isBottom_()) |
| 196 this.style.top = point.y - this.mousePointerOffset.y + 'px'; |
| 197 else |
| 198 this.style.left = point.x - this.mousePointerOffset.x + 'px'; |
| 199 }, |
| 200 |
| 201 /** |
| 202 * @param {{x: number, y: number}} rhs The point to compare with. |
| 203 * @return {number} The horizontal or vertical displacement in pixels |
| 204 * between |this.originBeforeDragging| and |rhs|. Note: Bottom margin |
| 205 * grows upwards, right margin grows when going to the left. |
| 206 */ |
| 207 getDragDisplacementFrom: function(rhs) { |
| 208 var dragDisplacement = 0; |
| 209 if (this.isTop_() || this.isBottom_()) { |
| 210 dragDisplacement = (rhs.y - this.originBeforeDragging.y - |
| 211 this.mousePointerOffset.y) / previewArea.height; |
| 212 } else { |
| 213 dragDisplacement = (rhs.x - this.originBeforeDragging.x - |
| 214 this.mousePointerOffset.x) / previewArea.width; |
| 215 } |
| 216 |
| 217 if (this.isBottom_() || this.isRight_()) |
| 218 dragDisplacement *= -1; |
| 219 return dragDisplacement; |
| 220 }, |
| 221 |
| 222 /** |
| 223 * Updates |this| while dragging is in progress. Takes care of rejecting |
| 224 * invalid margin values. |
| 225 * @param {number} dragDeltaInPoints The difference in points between the |
| 226 * currently applied margin and the margin indicated by |
| 227 * |destinationPoint|. |
| 228 * @param {{x: number, y: number}} destinationPoint The point where the |
| 229 * margin line should be drawn if |dragDeltaInPoints| is applied. |
| 230 */ |
| 231 updateWhileDragging: function(dragDeltaInPoints, destinationPoint) { |
| 232 this.box_.updateWhileDragging(dragDeltaInPoints); |
| 233 var validity = this.box_.validateDelta(dragDeltaInPoints); |
| 234 if (validity == print_preview.marginValidationStates.WITHIN_RANGE) |
| 235 this.moveTo(destinationPoint); |
| 236 else if (validity == print_preview.marginValidationStates.TOO_LOW) |
| 237 this.snapToMinValue_(); |
| 238 else if (validity == print_preview.marginValidationStates.TOO_HIGH) |
| 239 this.snapToMaxValue_(); |
| 240 }, |
| 241 |
| 242 /** |
| 243 * Snaps |this| to the minimum allowed margin value (0). Happens whenever |
| 244 * the user drags the margin line to a smaller value than the minimum |
| 245 * allowed. |
| 246 * @private |
| 247 */ |
| 248 snapToMinValue_: function() { |
| 249 var pageInformation = previewArea.pageLocationNormalized; |
| 250 var newMarginsRectangle = this.marginsRectangle.clone(); |
| 251 if (this.isTop_()) { |
| 252 newMarginsRectangle.y = pageInformation.y; |
| 253 } else if (this.isLeft_()) { |
| 254 newMarginsRectangle.x = pageInformation.x; |
| 255 } else if (this.isRight_()) { |
| 256 newMarginsRectangle.x = pageInformation.x; |
| 257 newMarginsRectangle.width = pageInformation.width; |
| 258 } else if (this.isBottom_()) { |
| 259 newMarginsRectangle.y = pageInformation.y; |
| 260 newMarginsRectangle.height = pageInformation.height; |
| 261 } |
| 262 |
| 263 this.rectangle = this.getCoordinates_(newMarginsRectangle); |
| 264 this.drawDraggableArea_(); |
| 265 }, |
| 266 |
| 267 /** |
| 268 * Snaps |this| to the maximum allowed margin value. Happens whenever |
| 269 * the user drags the margin line to a larger value than the maximum |
| 270 * allowed. |
| 271 * @private |
| 272 */ |
| 273 snapToMaxValue_: function() { |
| 274 var newMarginsRectangle = this.marginsRectangle.clone(); |
| 275 |
| 276 if (this.isTop_()) { |
| 277 newMarginsRectangle.y = this.valueLimitInPercent; |
| 278 } else if (this.isLeft_()) { |
| 279 newMarginsRectangle.x = this.valueLimitInPercent; |
| 280 } else if (this.isRight_()) { |
| 281 newMarginsRectangle.x = 0; |
| 282 newMarginsRectangle.width = this.valueLimitInPercent; |
| 283 } else if (this.isBottom_()) { |
| 284 newMarginsRectangle.y = 0; |
| 285 newMarginsRectangle.height = this.valueLimitInPercent; |
| 286 } |
| 287 |
| 288 this.rectangle = this.getCoordinates_(newMarginsRectangle); |
| 289 this.drawDraggableArea_(); |
| 290 }, |
| 291 }; |
| 292 |
| 293 return { |
| 294 MarginsUIPair: MarginsUIPair |
| 295 }; |
| 296 }); |
OLD | NEW |