Make the navigation links on the image view actually do something.

horde · Dec 15, 2015 · 87d7683 · 87d7683
1 parent 4a6479d
commit 87d7683
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 6 deletions.
diff --git a/ansel/js/imageview.js b/ansel/js/imageview.js
@@ -33,23 +33,27 @@ AnselImageView = Class.create({
     rightdiv: null,
     currentImage: null,
     keyHandler: null,
+    clickHandler: null,
 
     initialize: function(opts)
     {
         this.opts = Object.extend({
             mainClass: 'ansel-imageview-image',
             barClass: 'ansel-imageview-bar',
-            closeClass: 'ansel-imageview-close'
+            nextClass: 'ansel-imageview-next',
+            prevClass: 'ansel-imageview-prev',
+            closeId: 'imageviewclose'
         }, opts);
 
         this.buildDomSturcture();
         Element.observe(window, 'resize', this.onResize.bindAsEventListener(this));
         this.keyHandler = this.keyboardAction.bind(this);
+        this.clickHandler = this.clickAction.bind(this);
     },
 
     buildDomSturcture: function()
     {
-        var close = new Element('a' , { class: this.opts.closeClass }).update('[close]');
+        var close = $('imageviewclose');
 
         this.main = $('imageviewmain');
         this.imagediv = $('imageviewimage');
@@ -110,10 +114,12 @@ AnselImageView = Class.create({
 
     enableKeyboardNav: function() {
         document.observe('keydown', this.keyHandler);
+        document.observe('click', this.clickHandler);
     },
 
     disableKeyboardNav: function() {
        document.stopObserving('keydown', this.keyHandler);
+       document.stopObserving('click', this.clickHandler);
     },
 
     keyboardAction: function(e) {
@@ -129,19 +135,47 @@ AnselImageView = Class.create({
         }
 
         key = String.fromCharCode(keycode).toLowerCase();
-        if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
+        if (key.match(/x|o|c/) || (keycode == escapeKey)) { // close lightbox
             this.disableKeyboardNav();
             $(this.opts.container).fire('AnselImageView:close');
-        } else if ((key == 'p') || (keycode == 37)){ // display previous image
+        } else if ((key == 'p') || (keycode == 37)) { // display previous image
             this.disableKeyboardNav();
             $(this.opts.container).fire('AnselImageView:previous');
-        } else if ((key == 'n') || (keycode == 39)){ // display next image
+        } else if ((key == 'n') || (keycode == 39)) { // display next image
             this.disableKeyboardNav();
             $(this.opts.container).fire('AnselImageView:next');
         }
         this.inKeyHandler = false;
     },
 
+    clickAction: function(e)
+    {
+        if (this.inClickHandler) {
+            return;
+        }
+        if (e.isRightClick() || typeof e.element != 'function') {
+            return;
+        }
+        this.inClickHandler = true;
+        var elt = e.element(), id;
+        while (Object.isElement(elt)) {
+            if (elt.hasClassName(this.opts.nextClass)) {
+                this.disableKeyboardNav();
+                $(this.opts.container).fire('AnselImageView:next');
+                e.stop();
+                this.inClickHandler = false;
+                return;
+            } else if (elt.hasClassName(this.opts.prevClass)) {
+                this.disableKeyboardNav();
+                $(this.opts.container).fire('AnselImageView:previous');
+                e.stop();
+                this.inClickHandler = false;
+                return;
+            }
+            elt = elt.up();
+        }
+    },
+
     onResize: function()
     {
         var h = window.innerHeight, w = window.innerWidth;

diff --git a/ansel/templates/dynamic/index.inc b/ansel/templates/dynamic/index.inc
@@ -60,7 +60,13 @@
         <!-- Image view overlay -->
         <div id="anselViewImage" style="display:none;">
           <div id="imageviewmain" class="ansel-imageview-main">
-            <div id="topbar" class="ansel-imageview-topbar">[breadcrumbs][left][right]</div>
+            <div id="topbar" class="ansel-imageview-topbar">
+             <?php echo Horde_Themes_Image::tag('nav/left-grey.png', array('alt' => _("Previous"), 'attr' => array('class' => 'ansel-imageview-prev'))) ?>
+             <?php //echo Horde_Themes_Image::tag('expand.png', array('alt' => _("Play"))) ?>
+             <?php //echo Horde_Themes_Image::tag('expand.png', array('alt' => _("Pause"))) ?>
+             <?php echo Horde_Themes_Image::tag('nav/right-grey.png', array('alt' => _("Next"), 'attr' => array('class' => 'ansel-imageview-next'))) ?>
+             <a id="imageviewclose" class="ansel-imageview-close"><?php echo Horde_Themes_Image::tag('close.png', array('alt' => _("Close"))) ?></a>
+            </div>
             <div id="imageviewimage" class="ansel-imageview-image"></div>
             <div id = "bottombar" class="ansel-imageview-bar">
               <div id="AnselViewImageData"></div>