| 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 |