Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(55)

Side by Side Diff: chrome/browser/resources/print_preview/margin_textbox.js

Issue 7891016: Print Preview: Adding UI for margin settings. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Adding more documentation. Created 9 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698