Gallery.app: Add shortcut keys for zooming in the slide mode.

ui/file_manager/gallery/js/image_editor/viewport.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 /**
  * Viewport class controls the way the image is displayed (scale, offset etc).
  * @constructor
  */
@@ skipping 12 matching lines @@
    */
   this.screenBounds_ = new Rect();
 
   /**
    * Scale from the full resolution image to the screen displayed image. This is
    * not zoom operated by users.
    * @type {number}
    * @private
    */
   this.scale_ = 1;
+
+  /**
+   * Index of zoom ratio. 0 is "zoom ratio = 1".
+   * @type {number}
+   * @private
+   */
+  this.zoomIndex_ = 0;
+
+  /**
+   * Zoom ratio specified by user operations.
+   * @type {number}
+   * @private
+   */
+  this.zoom_ = 1;
+
   this.offsetX_ = 0;
   this.offsetY_ = 0;
 
   this.generation_ = 0;
 
   this.update();
 }
 
 /**
+ * Zoom ratios.
+ *
+ * @type {Object.<string, number>}
+ * @const
+ */
+Viewport.ZOOM_RATIOS = Object.freeze({
+  '3': 3,
+  '2': 2,
+  '1': 1.5,
+  '0': 1,
+  '-1': 0.75,
+  '-2': 0.5,
+  '-3': 0.25
+});
+
+/**
  * @param {number} width Image width.
  * @param {number} height Image height.
  */
 Viewport.prototype.setImageSize = function(width, height) {
   this.imageBounds_ = new Rect(width, height);
   this.invalidateCaches();
 };
 
 /**
  * @param {number} width Screen width.
  * @param {number} height Screen height.
  */
 Viewport.prototype.setScreenSize = function(width, height) {
   this.screenBounds_ = new Rect(width, height);
   this.invalidateCaches();
 };
 
 /**
+ * Sets the new zoom ratio.
+ * @param {number} zoomIndex New zoom index.
+ */
+Viewport.prototype.setZoomIndex = function(zoomIndex) {
+  // Ignore the invalid zoomIndex.
+  if (!Viewport.ZOOM_RATIOS[zoomIndex.toString()])
+    return;
+
+  this.zoomIndex_ = zoomIndex;
+  this.zoom_ = Viewport.ZOOM_RATIOS[zoomIndex];
+  this.invalidateCaches();
+};
+
+/**
+ * Returns the current zoom index.
+ * @return {number} Zoon index.
+ */
+Viewport.prototype.getZoomIndex = function() {
+  return this.zoomIndex_;
+};
+
+/**
  * Set the size by an HTML element.
  *
  * @param {HTMLElement} frame The element acting as the "screen".
  */
 Viewport.prototype.sizeByFrame = function(frame) {
   this.setScreenSize(frame.clientWidth, frame.clientHeight);
 };
 
 /**
  * Set the size and scale to fit an HTML element.
@@ skipping 311 matching lines @@
     this.screenClipped_.top = this.imageOnScreen_.top;
     this.screenClipped_.height = this.imageOnScreen_.height;
   }
 };
 
 /**
  * Obtains CSS transformation for the screen image.
  * @return {string} Transformation description.
  */
 Viewport.prototype.getTransformation = function() {
-  return 'scale(' + (1 / window.devicePixelRatio) + ')';
+  return 'scale(' + (1 / window.devicePixelRatio * this.zoom_) + ')';
 };
 
 /**
  * Obtains shift CSS transformation for the screen image.
  * @param {number} dx Amount of shift.
  * @return {string} Transformation description.
  */
 Viewport.prototype.getShiftTransformation = function(dx) {
   return 'translateX(' + dx + 'px) ' + this.getTransformation();
 };
@@ skipping 65 matching lines @@
   var screenWidth = this.screenBounds_.width;
   var screenHeight = this.screenBounds_.height;
   var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2;
   var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2;
   return [
     'translate(' + dx + 'px,' + dy + 'px)',
     'scale(' + scaleX + ',' + scaleY + ')',
     this.getTransformation()
   ].join(' ');
 };