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 function MarginTextbox(groupName) { |
| 9 var box = document.createElement('input'); |
| 10 box.__proto__ = MarginTextbox.prototype; |
| 11 box.setAttribute('type', 'text'); |
| 12 box.setAttribute('class', MarginTextbox.CSS_CLASS_MARGIN_TEXTBOX); |
| 13 box.setAttribute('margin-group', groupName); |
| 14 box.isValid = true; |
| 15 box.timerId_ = null; |
| 16 box.value = '0'; |
| 17 box.lastValidValue = '0'; |
| 18 box.marginsRectangle_ = null; |
| 19 box.valueLimit = null; |
| 20 |
| 21 box.addEventListeners_(); |
| 22 return box; |
| 23 } |
| 24 |
| 25 MarginTextbox.CSS_CLASS_MARGIN_TEXTBOX = 'margin-box'; |
| 26 MarginTextbox.MARGIN_BOX_HEIGHT = 15; |
| 27 MarginTextbox.MARGIN_BOX_VERTICAL_PADDING = 5; |
| 28 MarginTextbox.MARGIN_BOX_WIDTH = 40; |
| 29 MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING = 10; |
| 30 |
| 31 // Keycode for the "Escape" key. |
| 32 MarginTextbox.ESCAPE_KEYCODE = 27; |
| 33 // Keycode for the "Enter" key. |
| 34 MarginTextbox.ENTER_KEYCODE = 13; |
| 35 |
| 36 MarginTextbox.convertPointsToInchesText = function(toConvert) { |
| 37 var inInches = |
| 38 print_preview.MarginSettings.convertPointsToInches(toConvert); |
| 39 return inInches.toFixed(2) + '"'; |
| 40 }; |
| 41 |
| 42 /** |
| 43 * @return {number} The total height of a margin textbox (including padding). |
| 44 */ |
| 45 MarginTextbox.totalHeight = function() { |
| 46 return MarginTextbox.MARGIN_BOX_HEIGHT + |
| 47 2 * MarginTextbox.MARGIN_BOX_VERTICAL_PADDING; |
| 48 } |
| 49 |
| 50 /** |
| 51 * @return {number} The total width of a margin textbox (including padding). |
| 52 */ |
| 53 MarginTextbox.totalWidth = function() { |
| 54 return MarginTextbox.MARGIN_BOX_WIDTH + |
| 55 2 * MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING; |
| 56 } |
| 57 |
| 58 MarginTextbox.prototype = { |
| 59 __proto__: HTMLInputElement.prototype, |
| 60 |
| 61 /** |
| 62 * Updates the state of |this|. |
| 63 * @param {print_preview.Rect} marginsRectangle A rectangle describing the |
| 64 * margins in percentages. |
| 65 * @param {number} value The margin value in points. |
| 66 * @param {number} valueLimit The upper allowed value for the margin. |
| 67 * @param {boolean} keepDisplayedValue True if the currently displayed value |
| 68 * should not be updated. |
| 69 */ |
| 70 update: function(marginsRectangle, value, valueLimit, keepDisplayedValue) { |
| 71 this.marginsRectangle_ = marginsRectangle; |
| 72 this.lastValidValue = MarginTextbox.convertPointsToInchesText(value); |
| 73 if (!keepDisplayedValue) |
| 74 this.value = this.lastValidValue; |
| 75 this.valueLimit = valueLimit; |
| 76 this.validate(); |
| 77 }, |
| 78 |
| 79 get margin() { |
| 80 return print_preview.extractMarginValue(this.value); |
| 81 }, |
| 82 |
| 83 /** |
| 84 * Updates |this.isValid|. |
| 85 */ |
| 86 validate: function() { |
| 87 this.isValid = print_preview.isMarginTextValid(this.value, |
| 88 this.valueLimit); |
| 89 }, |
| 90 |
| 91 /** |
| 92 * Updates the background color depending on |isValid| by adding/removing |
| 93 * the appropriate CSS class. |
| 94 * @param {boolean} isValid True if the margin is valid. |
| 95 */ |
| 96 updateColor: function() { |
| 97 this.isValid ? this.classList.remove('invalid') : |
| 98 this.classList.add('invalid'); |
| 99 }, |
| 100 |
| 101 /** |
| 102 * Draws this textbox. |
| 103 */ |
| 104 draw: function() { |
| 105 var topLeft = this.getCoordinates_(); |
| 106 var totalWidth = previewArea.pdfPlugin_.offsetWidth; |
| 107 var totalHeight = previewArea.pdfPlugin_.offsetHeight; |
| 108 |
| 109 this.style.left = Math.round(topLeft.x * totalWidth) + 'px'; |
| 110 this.style.top = Math.round(topLeft.y * totalHeight) + 'px'; |
| 111 this.updateColor(); |
| 112 }, |
| 113 |
| 114 /** |
| 115 * @private |
| 116 * @return {boolean} True if |this| refers to the top margin. |
| 117 */ |
| 118 isTop_: function() { |
| 119 return this.getAttribute('margin-group') == |
| 120 print_preview.MarginSettings.TOP_GROUP_NAME; |
| 121 }, |
| 122 |
| 123 /** |
| 124 * @private |
| 125 * @return {boolean} True if |this| refers to the bottom margin. |
| 126 */ |
| 127 isBottom_: function() { |
| 128 return this.getAttribute('margin-group') == |
| 129 print_preview.MarginSettings.BOTTOM_GROUP_NAME; |
| 130 }, |
| 131 |
| 132 /** |
| 133 * @private |
| 134 * @return {boolean} True if |this| refers to the left margin. |
| 135 */ |
| 136 isLeft_: function() { |
| 137 return this.getAttribute('margin-group') == |
| 138 print_preview.MarginSettings.LEFT_GROUP_NAME; |
| 139 }, |
| 140 |
| 141 /** |
| 142 * @private |
| 143 * @return {boolean} True if |this| refers to the bottom margin. |
| 144 */ |
| 145 isRight_: function() { |
| 146 return this.getAttribute('margin-group') == |
| 147 print_preview.MarginSettings.RIGHT_GROUP_NAME; |
| 148 }, |
| 149 |
| 150 /** |
| 151 * Calculates the coordinates where |this| should be displayed. |
| 152 * @private |
| 153 * @return {print_preview.Point} The coordinates (in percent) where |this| |
| 154 * should be drawn relative to the upper left corner of the plugin. |
| 155 */ |
| 156 getCoordinates_: function() { |
| 157 var point = new print_preview.Point(0,0); |
| 158 var totalWidth = previewArea.pdfPlugin_.offsetWidth; |
| 159 var totalHeight = previewArea.pdfPlugin_.offsetHeight; |
| 160 |
| 161 if (this.isTop_()) { |
| 162 point.x = this.marginsRectangle_.x + |
| 163 this.marginsRectangle_.width / 2 - |
| 164 (MarginTextbox.totalWidth() / 2) / totalWidth; |
| 165 point.y = this.marginsRectangle_.y; |
| 166 } else if (this.isBottom_()) { |
| 167 point.x = this.marginsRectangle_.x + |
| 168 this.marginsRectangle_.width / 2 - |
| 169 (MarginTextbox.totalWidth() / 2) / totalWidth; |
| 170 point.y = this.marginsRectangle_.y + this.marginsRectangle_.height - |
| 171 (MarginTextbox.totalHeight() / totalHeight); |
| 172 } else if (this.isRight_()) { |
| 173 point.x = this.marginsRectangle_.x + this.marginsRectangle_.width - |
| 174 (MarginTextbox.totalWidth() / totalWidth); |
| 175 point.y = this.marginsRectangle_.y + this.marginsRectangle_.height / 2 - |
| 176 (MarginTextbox.totalHeight() / 2) / totalHeight; |
| 177 } else if (this.isLeft_()) { |
| 178 point.x = this.marginsRectangle_.x; |
| 179 point.y = this.marginsRectangle_.y + this.marginsRectangle_.height / 2 - |
| 180 (MarginTextbox.totalHeight() / 2) / totalHeight; |
| 181 } |
| 182 return point; |
| 183 }, |
| 184 |
| 185 /** |
| 186 * Adds event listeners for various events. |
| 187 * @private |
| 188 */ |
| 189 addEventListeners_: function() { |
| 190 this.oninput = this.resetTimer_.bind(this); |
| 191 this.onblur = this.onBlur_.bind(this); |
| 192 this.onkeypress = this.onKeyPressed_.bind(this); |
| 193 this.onkeyup = this.onKeyUp_.bind(this); |
| 194 }, |
| 195 |
| 196 /** |
| 197 * Listener executing whenever a blur event occurs. |
| 198 * @private |
| 199 */ |
| 200 onBlur_: function() { |
| 201 clearTimeout(this.timerId_); |
| 202 this.validate(); |
| 203 if (!this.isValid) { |
| 204 this.value = this.lastValidValue; |
| 205 this.validate(); |
| 206 } |
| 207 this.updateColor(); |
| 208 cr.dispatchSimpleEvent(document, 'updateSummary'); |
| 209 cr.dispatchSimpleEvent(document, 'updatePrintButton'); |
| 210 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); |
| 211 }, |
| 212 |
| 213 /** |
| 214 * Listener executing whenever a keypressed event occurs. Note: Only the |
| 215 * "Enter" key event is handled. The "Escape" key does not result in such |
| 216 * event, therefor it is handled by |this.onKeyUp_|. |
| 217 * @param {KeyboardEvent} e The event that triggered this listener. |
| 218 * @private |
| 219 */ |
| 220 onKeyPressed_: function(e) { |
| 221 if (e.keyCode == MarginTextbox.ENTER_KEYCODE) { |
| 222 this.blur(); |
| 223 } |
| 224 }, |
| 225 |
| 226 /** |
| 227 * Listener executing whenever a keyup event occurs. Note: Only the "Escape" |
| 228 * key event is handled. |
| 229 * @param {KeyboardEvent} e The event that triggered this listener. |
| 230 * @private |
| 231 */ |
| 232 onKeyUp_: function(e) { |
| 233 if (e.keyCode == MarginTextbox.ESCAPE_KEYCODE) { |
| 234 this.value = this.lastValidValue; |
| 235 this.validate(); |
| 236 this.updateColor(); |
| 237 cr.dispatchSimpleEvent(document, 'updateSummary'); |
| 238 cr.dispatchSimpleEvent(document, 'updatePrintButton'); |
| 239 } |
| 240 }, |
| 241 |
| 242 /** |
| 243 * Resetting the timer used to detect when the user stops typing in order |
| 244 * to update the print preview. |
| 245 * @private |
| 246 */ |
| 247 resetTimer_: function() { |
| 248 clearTimeout(this.timerId_); |
| 249 this.timerId_ = window.setTimeout( |
| 250 this.onTextValueMayHaveChanged_.bind(this), 500); |
| 251 }, |
| 252 |
| 253 /** |
| 254 * Listener executing whenever the user stops typing. |
| 255 * @private |
| 256 */ |
| 257 onTextValueMayHaveChanged_: function() { |
| 258 this.validate(); |
| 259 this.updateColor(); |
| 260 cr.dispatchSimpleEvent(document, 'updateSummary'); |
| 261 cr.dispatchSimpleEvent(document, 'updatePrintButton'); |
| 262 |
| 263 if (!this.isValid) |
| 264 return; |
| 265 cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged'); |
| 266 } |
| 267 |
| 268 }; |
| 269 |
| 270 return { |
| 271 MarginTextbox: MarginTextbox |
| 272 }; |
| 273 }); |
OLD | NEW |