| OLD | NEW |
|---|
| (Empty) |
| 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 | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 cr.define('print_preview', function() { | |
| 6 'use 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 {HTMLDivElement} The line representing the margin. | |
| 27 marginsUIPair.line_ = document.createElement('div'); | |
| 28 marginsUIPair.line_.className = 'margin-line'; | |
| 29 // @type {print_preview.MarginTextbox} The textbox corresponding to this | |
| 30 // margin. | |
| 31 marginsUIPair.box_ = new print_preview.MarginTextbox(groupName); | |
| 32 // @type {{x: number, y: number}} The point where mousedown occured within | |
| 33 // the draggable area with respect the top-left corner of |this|. | |
| 34 marginsUIPair.mousePointerOffset = null; | |
| 35 // @type {{x: number, y:number}} The position of the origin before any | |
| 36 // dragging in progress occured. | |
| 37 marginsUIPair.originBeforeDragging = null; | |
| 38 | |
| 39 marginsUIPair.appendChild(marginsUIPair.line_); | |
| 40 marginsUIPair.appendChild(marginsUIPair.box_); | |
| 41 | |
| 42 marginsUIPair.addEventListeners_(); | |
| 43 return marginsUIPair; | |
| 44 } | |
| 45 | |
| 46 MarginsUIPair.CSS_CLASS = 'margins-ui-pair'; | |
| 47 // Width of the clickable region around each margin line in screen pixels. | |
| 48 MarginsUIPair.CLICKABLE_REGION = 20; | |
| 49 | |
| 50 MarginsUIPair.prototype = { | |
| 51 __proto__: HTMLDivElement.prototype, | |
| 52 | |
| 53 /** | |
| 54 * Updates the state. | |
| 55 */ | |
| 56 update: function(marginsRectangle, value, valueLimit, keepDisplayedValue, | |
| 57 valueLimitInPercent) { | |
| 58 this.marginsRectangle = marginsRectangle; | |
| 59 this.valueLimitInPercent = valueLimitInPercent; | |
| 60 this.rectangle = this.getCoordinates_(this.marginsRectangle); | |
| 61 this.box_.update(value, valueLimit, keepDisplayedValue); | |
| 62 }, | |
| 63 | |
| 64 /** | |
| 65 * Draws |this| based on the state. | |
| 66 */ | |
| 67 draw: function() { | |
| 68 this.drawDraggableArea_(); | |
| 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 * @param {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, customEvents.MARGIN_LINE_MOUSE_DOWN); | |
| 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_SMALL) | |
| 237 this.snapToMinValue_(); | |
| 238 else if (validity == print_preview.marginValidationStates.TOO_BIG) | |
| 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 |
|---|
Chromium Code Reviews
Issue 10108001:
Refactor print preview web ui (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src