From 7e42f18a8705aeb7a6791f11e5338771244a520c Mon Sep 17 00:00:00 2001
From: mbauskar <mbauskar@gmail.com>
Date: Wed, 22 Jun 2016 16:11:39 +0530
Subject: [PATCH] [enhancement] document navigation via up/down arrow keys

---
 frappe/public/js/frappe/list/imageview.js     | 46 ++++++++++++++++++-
 .../js/lib/gallery/js/blueimp-gallery.js      | 16 ++++++-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/frappe/public/js/frappe/list/imageview.js b/frappe/public/js/frappe/list/imageview.js
index c8c7f7883a..a5e1b77246 100644
--- a/frappe/public/js/frappe/list/imageview.js
+++ b/frappe/public/js/frappe/list/imageview.js
@@ -45,7 +45,51 @@ frappe.views.ImageView = Class.extend({
 	},
 
 	render: function(image_list){
-		var gallery = blueimp.Gallery(image_list, this.get_options());
+		this.gallery = null;
+		this.gallery = blueimp.Gallery(image_list, this.get_options());
+		this.setup_navigation();
+	},
+
+	setup_navigation: function(){
+		// extend gallery library to enable document navigation using UP / Down arrow key
+		var me = this;
+		var args = {}
+	
+		$.extend(me.gallery, {
+			nextSlides:function(){
+				args.offset = 1;
+				me.navigate(args)
+			},
+
+			prevSlides:function(){
+				args.offset = -1;
+				me.navigate(args)
+			}
+		});
+	},
+
+	navigate: function(args){
+		var index = 0;
+		var me = this;
+		var last_idx = cur_list.data.length - 1;
+
+		$.each(cur_list.data, function(idx, doc){
+			if(doc.name == me.docname){
+				if(idx == last_idx && args.offset == 1){
+					index = 0
+				} else if(idx == 0 && args.offset == -1) {
+					index = last_idx
+				} else {
+					index = idx + args.offset
+				}
+				me.docname = cur_list.data[index].name;
+				return false;
+			}
+		});
+		this.gallery.close();
+		window.setTimeout(function(){
+			me.get_images(this.doctype, this.docname)
+		}, 500);
 	},
 
 	get_options: function(){
diff --git a/frappe/public/js/lib/gallery/js/blueimp-gallery.js b/frappe/public/js/lib/gallery/js/blueimp-gallery.js
index d7c827d4a9..393d245339 100644
--- a/frappe/public/js/lib/gallery/js/blueimp-gallery.js
+++ b/frappe/public/js/lib/gallery/js/blueimp-gallery.js
@@ -371,6 +371,18 @@
       }
     },
 
+    nextSlides: function() {
+      // next set of images
+      console.log("next slide")
+      this.next()
+    },
+
+    prevSlides: function() {
+      // prev set of images
+      console.log("prev slide")
+      this.prev()
+    },
+
     play: function (time) {
       var that = this
       window.clearTimeout(this.timeout)
@@ -839,7 +851,7 @@
         case 38: // Up
           if (this.options.enableKeyboardNavigation) {
             this.preventDefault(event)
-            console.log("UP Key")
+            this.nextSlides()
           }
           break
         case 39: // Right
@@ -851,7 +863,7 @@
         case 40: // Down
           if (this.options.enableKeyboardNavigation) {
             this.preventDefault(event)
-            console.log("Down Key")
+            this.prevSlides()
           }
           break
       }