Gallery: Add the offset feature in the slide mode.

ui/file_manager/gallery/js/slide_mode.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';
 
 /**
  * Slide mode displays a single image and has a set of controls to navigate
  * between the images and to edit an image.
  *
@@ skipping 31 matching lines @@
   // Unique numeric key, incremented per each load attempt used to discard
   // old attempts. This can happen especially when changing selection fast or
   // Internet connection is slow.
   this.currentUniqueKey_ = 0;
 
   this.initListeners_();
   this.initDom_();
 }
 
 /**
- * SlideMode extends cr.EventTarget.
- */
-SlideMode.prototype.__proto__ = cr.EventTarget.prototype;
-
-/**
  * List of available editor modes.
  * @type {Array.<ImageEditor.Mode>}
+ * @const
  */
-SlideMode.editorModes = [
+SlideMode.EDITOR_MODES = Object.freeze([
   new ImageEditor.Mode.InstantAutofix(),
   new ImageEditor.Mode.Crop(),
   new ImageEditor.Mode.Exposure(),
   new ImageEditor.Mode.OneClick(
       'rotate_left', 'GALLERY_ROTATE_LEFT', new Command.Rotate(-1)),
   new ImageEditor.Mode.OneClick(
       'rotate_right', 'GALLERY_ROTATE_RIGHT', new Command.Rotate(1))
-];
+]);
+
+/**
+ * Map of the key identifier and offset delta.
+ * @type {Object.<string, Array.<number>})
+ * @const
+ */
+SlideMode.KEY_OFFSET_MAP = Object.freeze({
+  'Up': Object.freeze([0, 20]),
+  'Down': Object.freeze([0, -20]),
+  'Left': Object.freeze([20, 0]),
+  'Right': Object.freeze([-20, 0])
+});
+
+/**
+ * SlideMode extends cr.EventTarget.
+ */
+SlideMode.prototype.__proto__ = cr.EventTarget.prototype;
 
 /**
  * @return {string} Mode name.
  */
 SlideMode.prototype.getName = function() { return 'slide'; };
 
 /**
  * @return {string} Mode title.
  */
 SlideMode.prototype.getTitle = function() { return 'GALLERY_SLIDE'; };
@@ skipping 130 matching lines @@
   this.editor_ = new ImageEditor(
       this.viewport_,
       this.imageView_,
       this.prompt_,
       {
         root: this.container_,
         image: this.imageContainer_,
         toolbar: this.editBarMain_,
         mode: this.editBarModeWrapper_
       },
-      SlideMode.editorModes,
+      SlideMode.EDITOR_MODES,
       this.displayStringFunction_,
       this.onToolsVisibilityChanged_.bind(this));
 
   this.editor_.getBuffer().addOverlay(
       new SwipeOverlay(this.advanceManually.bind(this)));
 };
 
 /**
  * Load items, display the selected item.
  * @param {Rect} zoomFromRect Rectangle for zoom effect.
@@ skipping 97 matching lines @@
       this.dataModel_.removeEventListener('splice', this.onSpliceBound_);
       this.dataModel_.removeEventListener('content', this.onContentBound_);
       this.ribbon_.disable();
       this.active_ = false;
       if (this.savedSelection_)
         this.selectionModel_.selectedIndexes = this.savedSelection_;
       this.unloadImage_(zoomToRect);
       callback();
     }.bind(this);
 
-  this.viewport_.setZoomIndex(0);
+  this.viewport_.resetView();
   if (this.getItemCount_() === 0) {
     this.showErrorBanner_(false);
     commitDone();
   } else {
     this.commitItem_(commitDone);
   }
 
   // Disable the slide-mode only buttons when leaving.
   this.editButton_.setAttribute('disabled', '');
   this.printButton_.setAttribute('disabled', '');
@@ skipping 491 matching lines @@
       if (!this.printButton_.hasAttribute('disabled'))
         this.print_();
       break;
 
     case 'U+0045':  // 'e' toggles the editor.
       if (!this.editButton_.hasAttribute('disabled'))
         this.toggleEditor(event);
       break;
 
     case 'U+001B':  // Escape
-      if (!this.isEditing())
+      if (this.isEditing()) {
+        this.toggleEditor(event);
+      } else if (this.viewport_.getZoomIndex() !== 0) {
+        this.viewport_.resetView();
+        this.imageView_.applyViewportChange();
+      } else {
         return false;  // Not handled.
-      this.toggleEditor(event);
+      }
       break;
 
     case 'Home':
       this.selectFirst();
       break;
     case 'End':
       this.selectLast();
       break;
     case 'Up':
     case 'Down':
     case 'Left':
     case 'Right':
+      if (!this.isEditing() && this.viewport_.getZoomIndex() !== 0) {
+        var delta = SlideMode.KEY_OFFSET_MAP[keyID];
+        this.viewport_.setOffset(
+            ~~(this.viewport_.getOffsetX() +
+               delta[0] * this.viewport_.getZoom()),
+            ~~(this.viewport_.getOffsetY() +
+               delta[1] * this.viewport_.getZoom()),
+            true);
+        this.imageView_.applyViewportChange();
+      } else {
+        this.advanceWithKeyboard(keyID);
+      }
+      break;
     case 'MediaNextTrack':
     case 'MediaPreviousTrack':
       this.advanceWithKeyboard(keyID);
       break;
 
     case 'Ctrl-U+00BB':  // Ctrl+'=' zoom in.
       if (!this.isEditing()) {
         this.viewport_.setZoomIndex(this.viewport_.getZoomIndex() + 1);
         this.imageView_.applyViewportChange();
       }
       break;
 
     case 'Ctrl-U+00BD':  // Ctrl+'-' zoom out.
       if (!this.isEditing()) {
         this.viewport_.setZoomIndex(this.viewport_.getZoomIndex() - 1);
         this.imageView_.applyViewportChange();
       }
       break;
+
+    case 'Ctrl-U+0030': // Ctrl+'0' zoom reset.
+      if (!this.isEditing()) {
+        this.viewport_.resetView();
+        this.imageView_.applyViewportChange();
+      }
+      break;
   }
 
   return true;
 };
 
 /**
  * Resize handler.
  * @private
  */
 SlideMode.prototype.onResize_ = function() {
@@ skipping 147 matching lines @@
   return this.container_.hasAttribute('slideshow');
 };
 
 /**
  * Start the slideshow.
  * @param {number=} opt_interval First interval in ms.
  * @param {Event=} opt_event Event.
  */
 SlideMode.prototype.startSlideshow = function(opt_interval, opt_event) {
   // Reset zoom.
-  this.viewport_.setZoomIndex(0);
+  this.viewport_.resetView();
   this.imageView_.applyViewportChange();
 
   // Set the attribute early to prevent the toolbar from flashing when
   // the slideshow is being started from the mosaic view.
   this.container_.setAttribute('slideshow', 'playing');
 
   if (this.active_) {
     this.stopEditing_();
   } else {
     // We are in the Mosaic mode. Toggle the mode but remember to return.
@@ skipping 134 matching lines @@
     this.toggleMode_(this.toggleEditor.bind(this));
     return;
   }
 
   this.stopSlideshow_();
 
   ImageUtil.setAttribute(this.container_, 'editing', !this.isEditing());
 
   if (this.isEditing()) { // isEditing has just been flipped to a new value.
     // Reset zoom.
-    this.viewport_.setZoomIndex(0);
+    this.viewport_.resetView();
     this.imageView_.applyViewportChange();
     if (this.context_.readonlyDirName) {
       this.editor_.getPrompt().showAt(
           'top', 'GALLERY_READONLY_WARNING', 0, this.context_.readonlyDirName);
     }
   } else {
     this.editor_.getPrompt().hide();
     this.editor_.leaveModeGently();
   }
 };
@@ skipping 77 matching lines @@
       done = true;
     }
   }.bind(this);
 };
 
 /**
  * If the user touched the image and moved the finger more than SWIPE_THRESHOLD
  * horizontally it's considered as a swipe gesture (change the current image).
  */
 SwipeOverlay.SWIPE_THRESHOLD = 100;