| OLD | NEW | 
|---|
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 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 /** | 5 /** | 
| 6  * Slide mode displays a single image and has a set of controls to navigate | 6  * Slide mode displays a single image and has a set of controls to navigate | 
| 7  * between the images and to edit an image. | 7  * between the images and to edit an image. | 
| 8  * | 8  * | 
| 9  * @param {!HTMLElement} container Main container element. | 9  * @param {!HTMLElement} container Main container element. | 
| 10  * @param {!HTMLElement} content Content container element. | 10  * @param {!HTMLElement} content Content container element. | 
| (...skipping 204 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 215   // ---------------------------------------------------------------- | 215   // ---------------------------------------------------------------- | 
| 216   // Initializes the UI. | 216   // Initializes the UI. | 
| 217 | 217 | 
| 218   /** | 218   /** | 
| 219    * Container for displayed image. | 219    * Container for displayed image. | 
| 220    * @type {!HTMLElement} | 220    * @type {!HTMLElement} | 
| 221    * @private | 221    * @private | 
| 222    * @const | 222    * @const | 
| 223    */ | 223    */ | 
| 224   this.imageContainer_ = util.createChild(queryRequiredElement( | 224   this.imageContainer_ = util.createChild(queryRequiredElement( | 
| 225       this.document_, '.content'), 'image-container'); | 225       '.content', this.document_), 'image-container'); | 
| 226 | 226 | 
| 227   this.document_.addEventListener('click', this.onDocumentClick_.bind(this)); | 227   this.document_.addEventListener('click', this.onDocumentClick_.bind(this)); | 
| 228 | 228 | 
| 229   /** | 229   /** | 
| 230    * Overwrite options and info bubble. | 230    * Overwrite options and info bubble. | 
| 231    * @type {!HTMLElement} | 231    * @type {!HTMLElement} | 
| 232    * @private | 232    * @private | 
| 233    * @const | 233    * @const | 
| 234    */ | 234    */ | 
| 235   this.options_ = queryRequiredElement(this.bottomToolbar_, '.options'); | 235   this.options_ = queryRequiredElement('.options', this.bottomToolbar_); | 
| 236 | 236 | 
| 237   /** | 237   /** | 
| 238    * @type {!HTMLElement} | 238    * @type {!HTMLElement} | 
| 239    * @private | 239    * @private | 
| 240    * @const | 240    * @const | 
| 241    */ | 241    */ | 
| 242   this.savedLabel_ = queryRequiredElement(this.options_, '.saved'); | 242   this.savedLabel_ = queryRequiredElement('.saved', this.options_); | 
| 243 | 243 | 
| 244   /** | 244   /** | 
| 245    * @private {!PaperCheckboxElement} | 245    * @private {!PaperCheckboxElement} | 
| 246    * @const | 246    * @const | 
| 247    */ | 247    */ | 
| 248   this.overwriteOriginalCheckbox_ = /** @type {!PaperCheckboxElement} */ | 248   this.overwriteOriginalCheckbox_ = /** @type {!PaperCheckboxElement} */ | 
| 249       (queryRequiredElement(this.options_, '.overwrite-original')); | 249       (queryRequiredElement('.overwrite-original', this.options_)); | 
| 250   this.overwriteOriginalCheckbox_.addEventListener('change', | 250   this.overwriteOriginalCheckbox_.addEventListener('change', | 
| 251       this.onOverwriteOriginalCheckboxChanged_.bind(this)); | 251       this.onOverwriteOriginalCheckboxChanged_.bind(this)); | 
| 252 | 252 | 
| 253   /** | 253   /** | 
| 254    * @private {!FilesToast} | 254    * @private {!FilesToast} | 
| 255    * @const | 255    * @const | 
| 256    */ | 256    */ | 
| 257   this.filesToast_ = /** @type {!FilesToast} */ | 257   this.filesToast_ = /** @type {!FilesToast} */ | 
| 258       (queryRequiredElement(document, 'files-toast')); | 258       (queryRequiredElement('files-toast')); | 
| 259 | 259 | 
| 260   /** | 260   /** | 
| 261    * @private {!HTMLElement} | 261    * @private {!HTMLElement} | 
| 262    * @const | 262    * @const | 
| 263    */ | 263    */ | 
| 264   this.bubble_ = queryRequiredElement(this.bottomToolbar_, '.bubble'); | 264   this.bubble_ = queryRequiredElement('.bubble', this.bottomToolbar_); | 
| 265 | 265 | 
| 266   var bubbleContent = queryRequiredElement(this.bubble_, '.content'); | 266   var bubbleContent = queryRequiredElement('.content', this.bubble_); | 
| 267   // GALLERY_OVERWRITE_BUBBLE contains <br> tag inside message. | 267   // GALLERY_OVERWRITE_BUBBLE contains <br> tag inside message. | 
| 268   bubbleContent.innerHTML = strf('GALLERY_OVERWRITE_BUBBLE'); | 268   bubbleContent.innerHTML = strf('GALLERY_OVERWRITE_BUBBLE'); | 
| 269 | 269 | 
| 270   var bubbleClose = queryRequiredElement(this.bubble_, '.close-x'); | 270   var bubbleClose = queryRequiredElement('.close-x', this.bubble_); | 
| 271   bubbleClose.addEventListener('click', this.onCloseBubble_.bind(this)); | 271   bubbleClose.addEventListener('click', this.onCloseBubble_.bind(this)); | 
| 272 | 272 | 
| 273   /** | 273   /** | 
| 274    * Ribbon and related controls. | 274    * Ribbon and related controls. | 
| 275    * @type {!HTMLElement} | 275    * @type {!HTMLElement} | 
| 276    * @private | 276    * @private | 
| 277    * @const | 277    * @const | 
| 278    */ | 278    */ | 
| 279   this.arrowBox_ = util.createChild(this.container_, 'arrow-box'); | 279   this.arrowBox_ = util.createChild(this.container_, 'arrow-box'); | 
| 280 | 280 | 
| (...skipping 17 matching lines...) Expand all  Loading... | 
| 298       this.arrowBox_, 'arrow right tool dimmable'); | 298       this.arrowBox_, 'arrow right tool dimmable'); | 
| 299   this.arrowRight_.addEventListener('click', | 299   this.arrowRight_.addEventListener('click', | 
| 300       this.advanceManually.bind(this, 1)); | 300       this.advanceManually.bind(this, 1)); | 
| 301   util.createChild(this.arrowRight_); | 301   util.createChild(this.arrowRight_); | 
| 302 | 302 | 
| 303   /** | 303   /** | 
| 304    * @type {!HTMLElement} | 304    * @type {!HTMLElement} | 
| 305    * @private | 305    * @private | 
| 306    * @const | 306    * @const | 
| 307    */ | 307    */ | 
| 308   this.ribbonSpacer_ = queryRequiredElement(this.bottomToolbar_, | 308   this.ribbonSpacer_ = queryRequiredElement('.ribbon-spacer', | 
| 309       '.ribbon-spacer'); | 309       this.bottomToolbar_); | 
| 310 | 310 | 
| 311   /** | 311   /** | 
| 312    * @type {!Ribbon} | 312    * @type {!Ribbon} | 
| 313    * @private | 313    * @private | 
| 314    * @const | 314    * @const | 
| 315    */ | 315    */ | 
| 316   this.ribbon_ = new Ribbon(this.document_, window, this.dataModel_, | 316   this.ribbon_ = new Ribbon(this.document_, window, this.dataModel_, | 
| 317       this.selectionModel_, thumbnailModel); | 317       this.selectionModel_, thumbnailModel); | 
| 318   this.ribbonSpacer_.appendChild(this.ribbon_); | 318   this.ribbonSpacer_.appendChild(this.ribbon_); | 
| 319 | 319 | 
| 320   util.createChild(this.container_, 'spinner'); | 320   util.createChild(this.container_, 'spinner'); | 
| 321 | 321 | 
| 322   /** | 322   /** | 
| 323    * @type {!HTMLElement} | 323    * @type {!HTMLElement} | 
| 324    * @const | 324    * @const | 
| 325    */ | 325    */ | 
| 326   var slideShowButton = queryRequiredElement(this.topToolbar_, | 326   var slideShowButton = queryRequiredElement('paper-button.slideshow', | 
| 327       'paper-button.slideshow'); | 327       this.topToolbar_); | 
| 328   slideShowButton.addEventListener('click', | 328   slideShowButton.addEventListener('click', | 
| 329       this.startSlideshow.bind(this, SlideMode.SLIDESHOW_INTERVAL_FIRST)); | 329       this.startSlideshow.bind(this, SlideMode.SLIDESHOW_INTERVAL_FIRST)); | 
| 330 | 330 | 
| 331   /** | 331   /** | 
| 332    * @type {!HTMLElement} | 332    * @type {!HTMLElement} | 
| 333    * @const | 333    * @const | 
| 334    */ | 334    */ | 
| 335   var slideShowToolbar = util.createChild( | 335   var slideShowToolbar = util.createChild( | 
| 336       this.container_, 'tool slideshow-toolbar'); | 336       this.container_, 'tool slideshow-toolbar'); | 
| 337   util.createChild(slideShowToolbar, 'slideshow-play'). | 337   util.createChild(slideShowToolbar, 'slideshow-play'). | 
| 338       addEventListener('click', this.toggleSlideshowPause_.bind(this)); | 338       addEventListener('click', this.toggleSlideshowPause_.bind(this)); | 
| 339   util.createChild(slideShowToolbar, 'slideshow-end'). | 339   util.createChild(slideShowToolbar, 'slideshow-end'). | 
| 340       addEventListener('click', this.stopSlideshow_.bind(this)); | 340       addEventListener('click', this.stopSlideshow_.bind(this)); | 
| 341 | 341 | 
| 342   // Editor. | 342   // Editor. | 
| 343   /** | 343   /** | 
| 344    * @type {!HTMLElement} | 344    * @type {!HTMLElement} | 
| 345    * @private | 345    * @private | 
| 346    * @const | 346    * @const | 
| 347    */ | 347    */ | 
| 348   this.editButton_ = queryRequiredElement(this.topToolbar_, 'button.edit'); | 348   this.editButton_ = queryRequiredElement('button.edit', this.topToolbar_); | 
| 349   GalleryUtil.decorateMouseFocusHandling(this.editButton_); | 349   GalleryUtil.decorateMouseFocusHandling(this.editButton_); | 
| 350   this.editButton_.addEventListener('click', this.toggleEditor.bind(this)); | 350   this.editButton_.addEventListener('click', this.toggleEditor.bind(this)); | 
| 351 | 351 | 
| 352   /** | 352   /** | 
| 353    * @private {!FilesToggleRipple} | 353    * @private {!FilesToggleRipple} | 
| 354    * @const | 354    * @const | 
| 355    */ | 355    */ | 
| 356   this.editButtonToggleRipple_ = /** @type {!FilesToggleRipple} */ | 356   this.editButtonToggleRipple_ = /** @type {!FilesToggleRipple} */ | 
| 357       (assert(this.editButton_.querySelector('files-toggle-ripple'))); | 357       (assert(this.editButton_.querySelector('files-toggle-ripple'))); | 
| 358 | 358 | 
| 359   /** | 359   /** | 
| 360    * @type {!HTMLElement} | 360    * @type {!HTMLElement} | 
| 361    * @private | 361    * @private | 
| 362    * @const | 362    * @const | 
| 363    */ | 363    */ | 
| 364   this.printButton_ = queryRequiredElement( | 364   this.printButton_ = queryRequiredElement('paper-button.print', | 
| 365       this.topToolbar_, 'paper-button.print'); | 365       this.topToolbar_); | 
| 366   this.printButton_.addEventListener('click', this.print_.bind(this)); | 366   this.printButton_.addEventListener('click', this.print_.bind(this)); | 
| 367 | 367 | 
| 368   /** | 368   /** | 
| 369    * @type {!HTMLElement} | 369    * @type {!HTMLElement} | 
| 370    * @private | 370    * @private | 
| 371    * @const | 371    * @const | 
| 372    */ | 372    */ | 
| 373   this.editBarSpacer_ = queryRequiredElement(this.bottomToolbar_, | 373   this.editBarSpacer_ = queryRequiredElement('.edit-bar-spacer', | 
| 374       '.edit-bar-spacer'); | 374       this.bottomToolbar_); | 
| 375 | 375 | 
| 376   /** | 376   /** | 
| 377    * @type {!HTMLElement} | 377    * @type {!HTMLElement} | 
| 378    * @private | 378    * @private | 
| 379    * @const | 379    * @const | 
| 380    */ | 380    */ | 
| 381   this.editBarMain_ = util.createChild(this.editBarSpacer_, 'edit-main'); | 381   this.editBarMain_ = util.createChild(this.editBarSpacer_, 'edit-main'); | 
| 382 | 382 | 
| 383   /** | 383   /** | 
| 384    * @type {!HTMLElement} | 384    * @type {!HTMLElement} | 
| (...skipping 1542 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 1927   var event = assertInstanceof(event, MouseEvent); | 1927   var event = assertInstanceof(event, MouseEvent); | 
| 1928   var viewport = this.slideMode_.getViewport(); | 1928   var viewport = this.slideMode_.getViewport(); | 
| 1929   if (!this.enabled_ || !viewport.isZoomed()) | 1929   if (!this.enabled_ || !viewport.isZoomed()) | 
| 1930     return; | 1930     return; | 
| 1931   this.stopOperation(); | 1931   this.stopOperation(); | 
| 1932   viewport.setOffset( | 1932   viewport.setOffset( | 
| 1933       viewport.getOffsetX() + event.wheelDeltaX, | 1933       viewport.getOffsetX() + event.wheelDeltaX, | 
| 1934       viewport.getOffsetY() + event.wheelDeltaY); | 1934       viewport.getOffsetY() + event.wheelDeltaY); | 
| 1935   this.slideMode_.applyViewportChange(); | 1935   this.slideMode_.applyViewportChange(); | 
| 1936 }; | 1936 }; | 
| OLD | NEW | 
|---|