From: Michael J. Rubinsky <mrubinsk@horde.org>
Date: Sat, 8 Jan 2011 00:29:38 +0000 (-0500)
Subject: Add next/prev links for non-swipable devices.
X-Git-Url: https://git.internetallee.de/?a=commitdiff_plain;h=3dd522cbf063c2d52aeac8c069d41f6edcb96549;p=horde.git

Add next/prev links for non-swipable devices.

Also, standardize a bit on id names
---

diff --git a/ansel/js/mobile.js b/ansel/js/mobile.js
index e1bada30a..a2f32d8e6 100644
--- a/ansel/js/mobile.js
+++ b/ansel/js/mobile.js
@@ -83,12 +83,12 @@ var AnselMobile = {
     toImage: function(index)
     {
         var i = $('<img>').attr({ 'src': ((AnselMobile.currentGallery.tiny) ? 'http://i.tinysrc.mobi/' : '') + AnselMobile.currentImages[index].screen });
-        
+
         AnselMobile.currentImage = index;
         $('#anselimageview').empty();
         $('#anselimageview').append(i);
         $('#imageview h1').text(AnselMobile.currentImages[index].fn)
-        $('#imagebackbutton .ui-btn-text').text(AnselMobile.currentGallery.n);
+        $('#ansel-image-back .ui-btn-text').text(AnselMobile.currentGallery.n);
 
         if ($.mobile.activePage.attr('id') != 'imageview') {
             $.mobile.changePage('imageview', 'slide', false, true);
@@ -127,11 +127,11 @@ var AnselMobile = {
             $.mobile.changePage('galleryview', 'slide', false, true);
         }
         if (r.p) {
-            $('#gallerybackbutton .ui-btn-text').text(r.pn);
-            $('#gallerybackbutton').attr({ 'action': 'gallery', 'gallery-id': r.p });
+            $('#ansel-gallery-back .ui-btn-text').text(r.pn);
+            $('#ansel-gallery-back').attr({ 'action': 'gallery', 'gallery-id': r.p });
         } else {
-            $('#gallerybackbutton .ui-btn-text').text($.mobile.page.prototype.options.backBtnText);
-            $('#gallerybackbutton').attr({ 'action': 'home', 'gallery-id': null });
+            $('#ansel-gallery-back .ui-btn-text').text($.mobile.page.prototype.options.backBtnText);
+            $('#ansel-gallery-back').attr({ 'action': 'home', 'gallery-id': null });
         }
         AnselMobile.centerGrid();
     },
@@ -167,26 +167,34 @@ var AnselMobile = {
         var elt = $(e.target), id;
 
         while (elt && elt != window.document && elt.parent().length) {
-
             // Navigate to a gallery
             if (elt.hasClass('ansel-gallery')) {
                 AnselMobile.toGallery(elt.attr('ansel-gallery-id'));
-            }
-
-            if (elt.attr('image-key')) {
+                return;
+            } else if (elt.attr('image-key')) {
                 AnselMobile.toImage(elt.attr('image-key'));
+                return;
             }
-            if (elt.attr('id') == 'gallerybackbutton') {
-                switch (elt.attr('action')) {
-                case 'home':
-                    $.mobile.changePage('gallerylist', 'slide', true, true);
-                    break;
-                case 'gallery':
-                    AnselMobile.toGallery(elt.attr('gallery-id'));
-                }
-            }
-            if (elt.attr('id') == 'imagebackbutton') {
-                window.history.back();
+
+            switch (elt.attr('id')) {
+                case 'ansel-image-prev':
+                    AnselMobile.prevImage();
+                    return;
+                case 'ansel-image-next':
+                    AnselMobile.nextImage();
+                    return;
+                case 'ansel-gallery-back':
+                    switch (elt.attr('action')) {
+                    case 'home':
+                        $.mobile.changePage('gallerylist', 'slide', true, true);
+                        break;
+                    case 'gallery':
+                        AnselMobile.toGallery(elt.attr('gallery-id'));
+                    }
+                    return;
+                case 'ansel-image-back':
+                    window.history.back();
+                    return;
             }
             elt = elt.parent();
         }
@@ -202,15 +210,26 @@ var AnselMobile = {
             return;
         }
         if (map.type == 'swipeleft') {
-            AnselMobile.currentImage++;
-            if (AnselMobile.currentImage >= AnselMobile.currentImages.length) {
-                AnselMobile.currentImage = 0;
-            }
+            AnselMobile.nextImage();
         } else if (map.type == 'swiperight') {
-            AnselMobile.currentImage--;
-            if (AnselMobile.currentImage < 0) {
-                AnselMobile.currentImage = AnselMobile.currentImages.length - 1;
-            }
+            AnselMobile.prevImage();
+        }
+    },
+
+    nextImage: function()
+    {
+        AnselMobile.currentImage++;
+        if (AnselMobile.currentImage >= AnselMobile.currentImages.length) {
+            AnselMobile.currentImage = 0;
+        }
+        AnselMobile.toImage(AnselMobile.currentImage);
+    },
+
+    prevImage: function()
+    {
+        AnselMobile.currentImage--;
+        if (AnselMobile.currentImage < 0) {
+            AnselMobile.currentImage = AnselMobile.currentImages.length - 1;
         }
         AnselMobile.toImage(AnselMobile.currentImage);
     },
diff --git a/ansel/templates/mobile/gallery.html.php b/ansel/templates/mobile/gallery.html.php
index bfa434ef0..56731ca2d 100644
--- a/ansel/templates/mobile/gallery.html.php
+++ b/ansel/templates/mobile/gallery.html.php
@@ -1,6 +1,6 @@
 <div data-role="page" data-theme="h" id="galleryview">
   <div data-role="header">
-    <a data-role="button" data-icon="arrow-l" href="#" id="gallerybackbutton"></a>
+    <a data-role="button" data-icon="arrow-l" href="#" id="ansel-gallery-back"></a>
     <h1></h1>
   </div>
   <div id="anselgalleryview">
diff --git a/ansel/templates/mobile/image.html.php b/ansel/templates/mobile/image.html.php
index 2c6f27c80..71d039130 100644
--- a/ansel/templates/mobile/image.html.php
+++ b/ansel/templates/mobile/image.html.php
@@ -1,7 +1,13 @@
 <div data-role="page" data-theme="h" id="imageview">
   <div data-role="header">
-    <a data-role="button" data-icon="arrow-l" href="#" id="imagebackbutton"></a>
+    <a data-role="button" data-icon="arrow-l" href="#" id="ansel-image-back"></a>
     <h1></h1>
   </div>
   <div id="anselimageview"></div>
+  <div data-role="footer" class="ui-bar">
+    <div data-role="controlgroup" data-type="horizontal">
+      <a href="#" id="ansel-image-prev" data-role="button" data-icon="arrow-l"><?php echo _("Previous") ?></a>
+      <a href="#" id="ansel-image-next" data-role="button" data-icon="arrow-r"><?php echo _("Next") ?></a>
+    </div>
+  </div>
 </div>
\ No newline at end of file