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

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

Issue 8351048: Print Preview: Making margin selection sticky (part 2/2) (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Updating PrintPreviewWebUITests Created 9 years, 1 month 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
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 'use strict'; 6 'use strict';
7 7
8 /** 8 /**
9 * Creates a Margins object that holds four margin values. The units in which 9 * Creates a Margins object that holds four margin values. The units in which
10 * the values are expressed can be any numeric value. 10 * the values are expressed can be any numeric value.
(...skipping 30 matching lines...) Expand all
41 */ 41 */
42 isEqual: function(rhs) { 42 isEqual: function(rhs) {
43 return this[MarginSettings.TOP_GROUP] === rhs[MarginSettings.TOP_GROUP] && 43 return this[MarginSettings.TOP_GROUP] === rhs[MarginSettings.TOP_GROUP] &&
44 this[MarginSettings.LEFT_GROUP] === rhs[MarginSettings.LEFT_GROUP] && 44 this[MarginSettings.LEFT_GROUP] === rhs[MarginSettings.LEFT_GROUP] &&
45 this[MarginSettings.RIGHT_GROUP] === 45 this[MarginSettings.RIGHT_GROUP] ===
46 rhs[MarginSettings.RIGHT_GROUP] && 46 rhs[MarginSettings.RIGHT_GROUP] &&
47 this[MarginSettings.BOTTOM_GROUP] === 47 this[MarginSettings.BOTTOM_GROUP] ===
48 rhs[MarginSettings.BOTTOM_GROUP]; 48 rhs[MarginSettings.BOTTOM_GROUP];
49 }, 49 },
50 50
51 /** 51 clone: function() {
52 * Copies the four margin values from |rhs|. 52 return new Margins(this[MarginSettings.TOP_GROUP],
53 * @param {Margins} rhs The Margins object values to be used. 53 this[MarginSettings.LEFT_GROUP],
54 */ 54 this[MarginSettings.RIGHT_GROUP],
55 copy: function(rhs) { 55 this[MarginSettings.BOTTOM_GROUP]);
56 this[MarginSettings.TOP_GROUP] = rhs[MarginSettings.TOP_GROUP];
57 this[MarginSettings.LEFT_GROUP] = rhs[MarginSettings.LEFT_GROUP];
58 this[MarginSettings.RIGHT_GROUP] = rhs[MarginSettings.RIGHT_GROUP];
59 this[MarginSettings.BOTTOM_GROUP] = rhs[MarginSettings.BOTTOM_GROUP];
60 }, 56 },
61 57
62 /** 58 /**
63 * Helper method returning an array of the string indices used for accessing 59 * Helper method returning an array of the string indices used for accessing
64 * all margins. 60 * all margins.
65 * @return {array} An array of string indices. 61 * @return {array} An array of string indices.
66 * @private 62 * @private
67 */ 63 */
68 indicesAsArray_: function() { 64 indicesAsArray_: function() {
69 return [MarginSettings.LEFT_GROUP, MarginSettings.TOP_GROUP, 65 return [MarginSettings.LEFT_GROUP, MarginSettings.TOP_GROUP,
(...skipping 16 matching lines...) Expand all
86 }; 82 };
87 83
88 /** 84 /**
89 * @constructor 85 * @constructor
90 * Class describing the layout of the page. 86 * Class describing the layout of the page.
91 */ 87 */
92 function PageLayout(width, height, left, top, right, bottom) { 88 function PageLayout(width, height, left, top, right, bottom) {
93 this.contentWidth_ = width; 89 this.contentWidth_ = width;
94 this.contentHeight_ = height; 90 this.contentHeight_ = height;
95 this.margins_ = new Margins(left, top, right, bottom); 91 this.margins_ = new Margins(left, top, right, bottom);
92 this.margins_.roundToLocaleUnits();
96 } 93 }
97 94
98 PageLayout.prototype = { 95 PageLayout.prototype = {
99 /** 96 /**
100 * @type {number} The width of the page. 97 * @type {number} The width of the page.
101 */ 98 */
102 get pageWidth() { 99 get pageWidth() {
103 return this.margins_.left + this.margins_.right + this.contentWidth_; 100 return this.margins_.left + this.margins_.right + this.contentWidth_;
104 }, 101 },
105 102
106 /** 103 /**
107 * @type {number} The height of the page. 104 * @type {number} The height of the page.
108 */ 105 */
109 get pageHeight() { 106 get pageHeight() {
110 return this.margins_.top + this.margins_.bottom + this.contentHeight_; 107 return this.margins_.top + this.margins_.bottom + this.contentHeight_;
111 } 108 }
112 }; 109 };
113 110
114 /** 111 /**
115 * Creates a MarginSettings object. This object encapsulates all settings and 112 * Creates a MarginSettings object. This object encapsulates all settings and
116 * logic related to the margins mode. 113 * logic related to the margins mode.
117 * @constructor 114 * @constructor
118 */ 115 */
119 function MarginSettings() { 116 function MarginSettings() {
120 this.marginsOption_ = $('margins-option'); 117 this.marginsOption_ = $('margins-option');
121 this.marginList_ = $('margin-list'); 118 this.marginList_ = $('margin-list');
122 this.marginsUI_ = null; 119 this.marginsUI_ = null;
123 120
124 // Holds the custom margin values in points (if set). 121 // Holds the custom margin values in points (if set).
125 this.customMargins_ = new Margins(-1, -1, -1, -1); 122 this.customMargins_ = null;
126 // Holds the previous custom margin values in points. 123 // Holds the previous custom margin values in points.
127 this.previousCustomMargins_ = new Margins(-1, -1, -1, -1); 124 this.previousCustomMargins_ = null;
128 // Holds the width of the page in points. 125 // Holds the width of the page in points.
129 this.pageWidth_ = -1; 126 this.pageWidth_ = -1;
130 // Holds the height of the page in points. 127 // Holds the height of the page in points.
131 this.pageHeight_ = -1; 128 this.pageHeight_ = -1;
132 // The last selected margin option. 129 // @type {boolean} True if the margins UI should be diplayed when the next
133 this.lastSelectedOption_ = MarginSettings.MARGINS_VALUE_DEFAULT; 130 // |customEvents.PDF_LOADED| event occurs.
134 131 this.forceMarginsUIOnPDFLoad_ = false;
135 // Holds the currently updated default page layout values. 132 // Holds the currently updated default page layout values.
136 this.currentDefaultPageLayout = null; 133 this.currentDefaultPageLayout = null;
137 // Holds the default page layout values when the custom margins was last
138 // selected.
139 this.previousDefaultPageLayout_ = null;
140 134
141 // True if the margins UI should be shown regardless of mouse position. 135 // True if the margins UI should be shown regardless of mouse position.
142 this.forceDisplayingMarginLines_ = true; 136 this.forceDisplayingMarginLines_ = true;
143 137
144 // @type {EventTracker} Used to keep track of certain event listeners. 138 // @type {EventTracker} Used to keep track of certain event listeners.
145 this.eventTracker_ = new EventTracker(); 139 this.eventTracker_ = new EventTracker();
146 140
147 this.addEventListeners_(); 141 this.addEventListeners_();
148 } 142 }
149 143
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after
196 get customMargins() { 190 get customMargins() {
197 var margins = {}; 191 var margins = {};
198 margins.marginLeft = this.customMargins_.left; 192 margins.marginLeft = this.customMargins_.left;
199 margins.marginTop = this.customMargins_.top; 193 margins.marginTop = this.customMargins_.top;
200 margins.marginRight = this.customMargins_.right; 194 margins.marginRight = this.customMargins_.right;
201 margins.marginBottom = this.customMargins_.bottom; 195 margins.marginBottom = this.customMargins_.bottom;
202 return margins; 196 return margins;
203 }, 197 },
204 198
205 /** 199 /**
200 * Sets |this.customMargins_| according to |margins|.
201 * @param {{marginLeft: number, marginTop: number, marginRight: number,
202 * marginBottom: number}} margins An object holding the four margin
203 * values.
204 */
205 set customMargins(margins) {
206 this.customMargins_.left = margins.marginLeft;
207 this.customMargins_.top = margins.marginTop;
208 this.customMargins_.right = margins.marginRight;
209 this.customMargins_.bottom = margins.marginBottom;
210 },
211
212 /**
206 * @return {number} The value of the selected margin option. 213 * @return {number} The value of the selected margin option.
207 */ 214 */
208 get selectedMarginsValue() { 215 get selectedMarginsValue() {
209 var val = this.marginList_.options[this.marginList_.selectedIndex].value; 216 var val = this.marginList_.options[this.marginList_.selectedIndex].value;
210 return parseInt(val, 10); 217 return parseInt(val, 10);
211 }, 218 },
212 219
213 /** 220 /**
214 * Sets the current margin selection to |lastUsedMarginsType|. 221 * Sets the current margin selection to |lastUsedMarginType|.
215 * @param {number} lastUsedMarginsType An integer value identifying a margin 222 * @param {number} lastUsedMarginType An integer value identifying a margin
216 * type according to MarginType enum in printing/print_job_constants.h. 223 * type according to MarginType enum in printing/print_job_constants.h.
224 * @param {Object} lastUsedCustomMargins The last used custom margins. If
225 * custom margins have not been used before
226 * |margin{Top|Bottom|Left|Right}| attributes are missing.
217 */ 227 */
218 setLastUsedMarginsType: function(lastUsedMarginsType) { 228 setLastUsedMargins: function(lastUsedMarginsSettings) {
229 var lastUsedMarginsType = lastUsedMarginsSettings['marginsType']
230 this.forceMarginsUIOnPDFLoad_ =
231 lastUsedMarginsType == MarginSettings.MARGINS_VALUE_CUSTOM;
219 this.marginList_.selectedIndex = 232 this.marginList_.selectedIndex =
220 this.getMarginOptionIndexByValue_(lastUsedMarginsType); 233 this.getMarginOptionIndexByValue_(lastUsedMarginsType);
234 if (lastUsedMarginsSettings.hasOwnProperty('marginTop') &&
235 lastUsedMarginsSettings.hasOwnProperty('marginBottom') &&
236 lastUsedMarginsSettings.hasOwnProperty('marginRight') &&
237 lastUsedMarginsSettings.hasOwnProperty('marginLeft')) {
238 this.customMargins_ = new Margins(-1, -1, -1 , -1);
239 this.customMargins = lastUsedMarginsSettings;
240 }
221 }, 241 },
222 242
223 /** 243 /**
224 * @return {number} The total width of the plugin in points. 244 * @return {number} The total width of the plugin in points.
225 */ 245 */
226 get totalWidthInPoints() { 246 get totalWidthInPoints() {
227 var pageInformation = previewArea.pageLocationNormalized; 247 var pageInformation = previewArea.pageLocationNormalized;
228 return this.pageWidth_ / pageInformation.width; 248 return this.pageWidth_ / pageInformation.width;
229 }, 249 },
230 250
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
283 }, 303 },
284 304
285 /** 305 /**
286 * If the custom margin values have changed then request a new preview based 306 * If the custom margin values have changed then request a new preview based
287 * on the newly set margins. 307 * on the newly set margins.
288 * @private 308 * @private
289 */ 309 */
290 requestPreviewIfNeeded_: function() { 310 requestPreviewIfNeeded_: function() {
291 if (!this.areMarginSettingsValid()) 311 if (!this.areMarginSettingsValid())
292 return; 312 return;
293 if (this.customMargins_.isEqual(this.previousCustomMargins_)) 313
314 if (this.previousCustomMargins_ &&
vandebo (ex-Chrome) 2011/11/10 18:39:14 Can you incorporate this check into the isEqual fu
dpapad 2011/11/10 20:04:01 Done.
315 this.customMargins_.isEqual(this.previousCustomMargins_))
294 return; 316 return;
295 this.previousCustomMargins_.copy(this.customMargins_); 317
318 this.previousCustomMargins_ = this.customMargins_.clone();
296 setDefaultValuesAndRegeneratePreview(false); 319 setDefaultValuesAndRegeneratePreview(false);
297 }, 320 },
298 321
299 /** 322 /**
300 * Listener executed when the mouse is over the sidebar. If the custom 323 * Listener executed when the mouse is over the sidebar. If the custom
301 * margin lines are displayed, then, it fades them out. 324 * margin lines are displayed, then, it fades them out.
302 * @private 325 * @private
303 */ 326 */
304 onSidebarMouseOver_: function(e) { 327 onSidebarMouseOver_: function(e) {
328 $('mainview').onmouseover = this.onMainviewMouseOver_.bind(this);
329 $('navbar-container').onmouseover = null;
305 if (!this.forceDisplayingMarginLines_) 330 if (!this.forceDisplayingMarginLines_)
306 this.marginsUI.hide(false); 331 this.marginsUI.hide(false);
307 }, 332 },
308 333
309 /** 334 /**
310 * Listener executed when the mouse is over the main view. If the custom 335 * Listener executed when the mouse is over the main view. If the custom
311 * margin lines are hidden, then, it fades them in. 336 * margin lines are hidden, then, it fades them in.
312 * @private 337 * @private
313 */ 338 */
314 onMainviewMouseOver_: function() { 339 onMainviewMouseOver_: function() {
340 $('mainview').onmouseover = null;
341 $('navbar-container').onmouseover = this.onSidebarMouseOver_.bind(this);
315 this.forceDisplayingMarginLines_ = false; 342 this.forceDisplayingMarginLines_ = false;
316 this.marginsUI.show(); 343 this.marginsUI.show();
317 }, 344 },
318 345
319 /** 346 /**
320 * Adds listeners to all margin related controls. 347 * Adds listeners to all margin related controls.
321 * @private 348 * @private
322 */ 349 */
323 addEventListeners_: function() { 350 addEventListeners_: function() {
324 this.marginList_.onchange = this.onMarginsChanged_.bind(this); 351 this.marginList_.onchange = this.onMarginsChanged_.bind(this);
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
361 return dragDelta * this.totalHeightInPoints; 388 return dragDelta * this.totalHeightInPoints;
362 } else { 389 } else {
363 return dragDelta * this.totalWidthInPoints; 390 return dragDelta * this.totalWidthInPoints;
364 } 391 }
365 }, 392 },
366 393
367 /** 394 /**
368 * @return {boolean} True if the margin settings are valid. 395 * @return {boolean} True if the margin settings are valid.
369 */ 396 */
370 areMarginSettingsValid: function() { 397 areMarginSettingsValid: function() {
371 if (this.marginsUI_ == null) 398 if (!this.isCustomMarginsSelected() || !this.marginsUI_)
372 return true; 399 return true;
373 400
374 var pairs = this.marginsUI.pairsAsList; 401 var pairs = this.marginsUI.pairsAsList;
375 return pairs.every(function(pair) { return pair.box_.isValid; }); 402 return pairs.every(function(pair) { return pair.box_.isValid; });
376 }, 403 },
377 404
378 /** 405 /**
379 * Calculates the maximum allowable value of the selected margin text for 406 * Calculates the maximum allowable value of the selected margin text for
380 * every margin. 407 * every margin.
381 * @return {array} The maximum allowable value in points in order top, left, 408 * @return {array} The maximum allowable value in points in order top, left,
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after
467 false); 494 false);
468 this.eventTracker_.add(document, customEvents.MARGIN_TEXTBOX_FOCUSED, 495 this.eventTracker_.add(document, customEvents.MARGIN_TEXTBOX_FOCUSED,
469 this.onMarginTextboxFocused_.bind(this), false); 496 this.onMarginTextboxFocused_.bind(this), false);
470 }, 497 },
471 498
472 /** 499 /**
473 * Removes the event listeners associated with the custom margins option. 500 * Removes the event listeners associated with the custom margins option.
474 * @private 501 * @private
475 */ 502 */
476 removeCustomMarginEventListeners_: function() { 503 removeCustomMarginEventListeners_: function() {
504 if (!this.marginsUI_)
505 return;
477 $('mainview').onmouseover = null; 506 $('mainview').onmouseover = null;
478 $('navbar-container').onmouseover = null; 507 $('navbar-container').onmouseover = null;
479 this.eventTracker_.remove(this.marginsUI, customEvents.MARGIN_LINE_DRAG); 508 this.eventTracker_.remove(this.marginsUI, customEvents.MARGIN_LINE_DRAG);
480 this.eventTracker_.remove(document, customEvents.MARGIN_TEXTBOX_FOCUSED); 509 this.eventTracker_.remove(document, customEvents.MARGIN_TEXTBOX_FOCUSED);
481 this.marginsUI.hide(true); 510 this.marginsUI.hide(true);
482 }, 511 },
483 512
484 /** 513 /**
485 * Updates |this.marginsUI| depending on the specified margins and the 514 * Updates |this.marginsUI| depending on the specified margins and the
486 * position of the page within the plugin. 515 * position of the page within the plugin.
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
525 * Executes when user selects a different margin option, ie, 554 * Executes when user selects a different margin option, ie,
526 * |this.marginList_.selectedIndex| is changed. 555 * |this.marginList_.selectedIndex| is changed.
527 * @private 556 * @private
528 */ 557 */
529 onMarginsChanged_: function() { 558 onMarginsChanged_: function() {
530 if (this.isDefaultMarginsSelected() || this.isMinimumMarginsSelected() || 559 if (this.isDefaultMarginsSelected() || this.isMinimumMarginsSelected() ||
531 this.isNoMarginsSelected()) 560 this.isNoMarginsSelected())
532 this.onDefaultMinimumNoMarginsSelected_(); 561 this.onDefaultMinimumNoMarginsSelected_();
533 else if (this.isCustomMarginsSelected()) 562 else if (this.isCustomMarginsSelected())
534 this.onCustomMarginsSelected_(); 563 this.onCustomMarginsSelected_();
535
536 this.lastSelectedOption_ = this.selectedMarginsValue;
537 }, 564 },
538 565
539 /** 566 /**
540 * Executes when the default or minimum or no margins option is selected. 567 * Executes when the default or minimum or no margins option is selected.
541 * @private 568 * @private
542 */ 569 */
543 onDefaultMinimumNoMarginsSelected_: function() { 570 onDefaultMinimumNoMarginsSelected_: function() {
544 this.removeCustomMarginEventListeners_(); 571 this.removeCustomMarginEventListeners_();
545 this.forceDisplayingMarginLines_ = true; 572 this.forceDisplayingMarginLines_ = true;
573 this.previousCustomMargins_ = null;
546 setDefaultValuesAndRegeneratePreview(false); 574 setDefaultValuesAndRegeneratePreview(false);
547 }, 575 },
548 576
549 /** 577 /**
550 * Executes when the custom margins option is selected. 578 * Executes when the custom margins option is selected.
551 * @private 579 * @private
552 */ 580 */
553 onCustomMarginsSelected_: function() { 581 onCustomMarginsSelected_: function() {
554 this.addCustomMarginEventListeners_(); 582 var customMarginsNotSpecified = !this.customMargins_;
583 this.updatePageData_();
555 584
556 this.customMargins_ = this.currentDefaultPageLayout.margins_; 585 if (customMarginsNotSpecified) {
557 this.customMargins_.roundToLocaleUnits(); 586 this.previousCustomMargins_ = this.customMargins_.clone();
558 this.previousCustomMargins_.copy(this.customMargins_); 587 this.drawCustomMarginsUI_();
559 588 this.addCustomMarginEventListeners_();
560 if (this.previousDefaultPageLayout_ != this.currentDefaultPageLayout) { 589 this.marginsUI.show();
561 this.pageWidth_ = this.currentDefaultPageLayout.pageWidth; 590 } else {
562 this.pageHeight_ = this.currentDefaultPageLayout.pageHeight; 591 this.forceMarginsUIOnPDFLoad_ = true;
592 this.requestPreviewIfNeeded_();
563 } 593 }
564
565 this.previousDefaultPageLayout_ = this.currentDefaultPageLayout;
566 this.drawCustomMarginsUI_();
567 this.marginsUI.show();
568 }, 594 },
569 595
570 /** 596 /**
571 * Calculates the coordinates of the four margin lines. These are the 597 * Calculates the coordinates of the four margin lines. These are the
572 * coordinates where the margin lines should be displayed. The coordinates 598 * coordinates where the margin lines should be displayed. The coordinates
573 * are expressed in terms of percentages with respect to the total width 599 * are expressed in terms of percentages with respect to the total width
574 * and height of the plugin. 600 * and height of the plugin.
575 * @return {print_preview.Rect} A rectnangle that describes the position of 601 * @return {print_preview.Rect} A rectnangle that describes the position of
576 * the four margin lines. 602 * the four margin lines.
577 * @private 603 * @private
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
620 * If custom margins is the currently selected option then change to the 646 * If custom margins is the currently selected option then change to the
621 * default margins option. 647 * default margins option.
622 * @private 648 * @private
623 */ 649 */
624 resetMarginsIfNeeded: function() { 650 resetMarginsIfNeeded: function() {
625 if (this.isCustomMarginsSelected()) { 651 if (this.isCustomMarginsSelected()) {
626 this.marginList_.options[ 652 this.marginList_.options[
627 MarginSettings.OPTION_INDEX_DEFAULT].selected = true; 653 MarginSettings.OPTION_INDEX_DEFAULT].selected = true;
628 this.removeCustomMarginEventListeners_(); 654 this.removeCustomMarginEventListeners_();
629 this.forceDisplayingMarginLines_ = true; 655 this.forceDisplayingMarginLines_ = true;
630 this.lastSelectedOption_ = MarginSettings.MARGINS_VALUE_DEFAULT; 656 this.customMargins_ = null;
657 this.previousCustomMargins_ = null;
631 } 658 }
632 }, 659 },
633 660
634 /** 661 /**
635 * Executes when a |customEvents.PDF_LOADED| event occurs. 662 * Executes when a |customEvents.PDF_LOADED| event occurs.
636 * @private 663 * @private
637 */ 664 */
638 onPDFLoaded_: function() { 665 onPDFLoaded_: function() {
639 if (!previewModifiable) 666 if (!previewModifiable) {
640 fadeOutOption(this.marginsOption_); 667 fadeOutOption(this.marginsOption_);
668 return;
669 }
670
671 if (this.forceMarginsUIOnPDFLoad_) {
672 this.updatePageData_();
673 this.drawCustomMarginsUI_();
674 this.addCustomMarginEventListeners_();
675 this.marginsUI.show();
676 this.forceMarginsUIOnPDFLoad_ = false;
677 }
678 },
679
680 /**
681 * Updates |this.customMargins_|, |this.pageWidth_|, |this.pageHeight_|.
682 * @private
683 */
684 updatePageData_: function() {
685 if (!this.customMargins_)
686 this.customMargins_ = this.currentDefaultPageLayout.margins_.clone();
687
688 this.pageWidth_ = this.currentDefaultPageLayout.pageWidth;
689 this.pageHeight_ = this.currentDefaultPageLayout.pageHeight;
641 } 690 }
642 }; 691 };
643 692
644 return { 693 return {
645 MarginSettings: MarginSettings, 694 MarginSettings: MarginSettings,
646 PageLayout: PageLayout, 695 PageLayout: PageLayout,
647 setNumberFormatAndMeasurementSystem:
648 MarginSettings.setNumberFormatAndMeasurementSystem,
649 }; 696 };
650 }); 697 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698