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 316 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 = {
+          'Up': [0, 10], 'Down': [0, -10], 'Left': [10, 0], 'Right': [-10, 0]

[mtomasz, 2014/07/17 07:51:16]

nit: How about moving 10 to a constant?
nit: How about making delta a function like: getShiftDeltaForKey()? WDYT?
nit: Shall we multiply the offset with the scale? When the zoom is large, moving
by 10 pixels is very tedious. WDYT?

[hirono, 2014/07/18 04:57:26]

I made the offset map constant.
Done.

+        }[keyID];
+        this.viewport_.setOffset(
+            this.viewport_.getOffsetX() + delta[0],
+            this.viewport_.getOffsetY() + delta[1],
+            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();
+      }

[mtomasz, 2014/07/17 07:51:16]

nit: break; at the end for consistency?

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