Subgallery navigation, other misc stuff:

Add initial subgallery navigation, layout tweaks, start experimenting
with a custom jquerymobile data-theme ('h' for horde) basically just
to get a dark background for the thumbnails while maintaining the rest
of the horde-wide usage of data-theme 'a'.

diff --git a/ansel/js/mobile.js b/ansel/js/mobile.js
index d0173a6..7594bab 100644 (file)
--- a/ansel/js/mobile.js
+++ b/ansel/js/mobile.js
@@ -16,27 +16,41 @@ var AnselMobile = {
     currentGallery: null,
 
     /**
+     * Currently loaded image thumbnails
+     */
+    //imgs: [],
+
+    /**
      * Build a gallery list
+     *
+     * @param object gs  A hash of the galleries
+     * @param string c   The CSS class to use for the ul
+     *
+     * @return a ul dom object
      */
-    buildGalleryList: function(galleries)
+    buildGalleryList: function(gs, c)
     {
+        if (!c) {
+            c = 'anselgalleries';
+        }
         var list = $('<ul>')
-            .addClass('anselGalleryList')
-            .attr({ 'data-role': 'listview' }), item;
-        $('#anselgallerylist ul').detach();
-        $.each(galleries, function(k, g) {
-            var item = $('<li>').attr({ 'class': 'ansel-gallery', 'ansel-gallery-id': g.id });
-            item.append($('<img>').attr({ src: g.ki }));
+            .addClass(c)
+            .attr({'data-role': 'listview'}), item;
+        $.each(gs, function(k, g) {
+            var item = $('<li>').attr({ 'ansel-gallery-id': g.id }).addClass('ansel-gallery');
+            item.append($('<img>').attr({ src: g.ki }).addClass('ui-li-icon'));
             item.append($('<h3>').append($('<a>').attr({ href: '#' }).text(g.n)));
             item.append($('<p>').text(g.d));
             list.append(item);
         });
 
-        $('#anselgallerylist').append(list);
+        return list;
     },
 
     /**
      * Load the specified gallery
+     *
+     * @param integer id  The gallery id to return
      */
     toGallery: function(id)
     {
@@ -45,24 +59,57 @@ var AnselMobile = {
 
     /**
      * Callback for after a gallery is loaded.
+     *
+     * @param object r  The response object
      */
     galleryLoaded: function(r)
     {
         // TODO: error checks, build any subgallery lists etc...
-        if (r.id == AnselMobile.currentGallery) {
+        if ($.mobile.currentPage != 'galleryview' &&
+            AnselMobile.currentGallery && (r.id == AnselMobile.currentGallery)) {
+
             $.mobile.changePage('galleryview', 'slide', false, true);
             return;
         }
+
+        //AnselMobile.imgs = r.imgs;
         AnselMobile.currentGallery = r.id;
-        $('#thumbs').text('');
+
+        $('.anselgalleries').replaceWith(AnselMobile.buildGalleryList(r.sg).listview());
         $('#galleryview h1').text(r.n);
-        $.mobile.changePage('galleryview', 'slide', false, true);
+        if ($.mobile.activePage.attr('id') != 'galleryview') {
+            $.mobile.changePage('galleryview', 'slide', false, true);
+        }
+        $('#thumbs').empty();
         $.each(r.imgs, function(k, i) {
-            var img = $('<li>').append($('<img>').attr({ src: i.url }));
+            var img = $('<li>').addClass('anselthumb').append($('<a>').attr({ 'href': '#' }).append($('<img>').attr({ src: i.url })));
             $('#thumbs').append(img);
         });
+        AnselMobile.centerGrid();
     },
-    
+
+    /**
+     * Utility function to attempt to center the thumbnail grid
+     *
+     * Logic unabashedly borrowed from:
+     *  http://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/
+     */
+    centerGrid: function()
+    {
+               if ($('.anselthumb').size() > 0) {
+                       var perRow = Math.floor($(window).width() / 80);
+                       var left = Math.floor(($(window).width() - (perRow * 80)) / 2);
+                       $('.anselthumb').each(function(i) {
+                               var $this = $(this);
+                               if (i % perRow == 0) {
+                                       $this.css('margin-left', left + 'px');
+                               } else {
+                                       $this.css('margin-left', '0px');
+                               }
+                       });
+               }
+    },
+
     /**
      * Global click handler
      *
@@ -105,7 +152,13 @@ var AnselMobile = {
         $('body').bind('swiperight', AnselMobile.handleSwipe);
 
         // Todo, eventually move to mobile callback so page reloads work etc...
-        AnselMobile.buildGalleryList(Ansel.conf.galleries);
+        $('#anselgallerylist').append(AnselMobile.buildGalleryList(Ansel.conf.galleries, 'anselgallerylist'));
+
+        // We need to recenter the thumbnail grid, and (eventually) try to
+        // resize the main image if it's  being shown.
+        $(window).bind('resize', function() {
+            AnselMobile.centerGrid();
+        });
     }
 };
 $(AnselMobile.onDocumentReady);
\ No newline at end of file

diff --git a/ansel/templates/mobile/gallery.html.php b/ansel/templates/mobile/gallery.html.php
index 45f31a4..4e46fd9 100644 (file)
--- a/ansel/templates/mobile/gallery.html.php
+++ b/ansel/templates/mobile/gallery.html.php
@@ -1,8 +1,9 @@
-<div data-role="page" data-theme="b" id="galleryview">
+<div data-role="page" data-theme="h" id="galleryview">
   <div data-role="header">
     <h1></h1>
   </div>
-  <div id="anselgalleryview" data-role="content" class="ui-body">
+  <div id="anselgalleryview">
+   <ul class="anselgalleries" data-role="listview"></ul>
    <ul id="thumbs" class="thumbView"></ul>
   </div>
 </div>
\ No newline at end of file

diff --git a/ansel/themes/default/mobile.css b/ansel/themes/default/mobile.css
index 480488c..f42218b 100644 (file)
--- a/ansel/themes/default/mobile.css
+++ b/ansel/themes/default/mobile.css
@@ -1,32 +1,60 @@
-ul.thumbView{
-    list-style:none;
-    margin:0px;
-    border:none;
+/* Custom 'h' theme (based on 'b' with a black background */
+.ui-bar-h { border: 1px solid #456f9a; background: #5e87b0; color: #fff; font-weight: bold; text-shadow: 0 -1px 1px #254f7a; background-image: -moz-linear-gradient(top, #81a8ce, #5e87b0); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #81a8ce),color-stop(1, #5e87b0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#81a8ce', EndColorStr='#5e87b0')"; }
+.ui-bar-h, .ui-bar-b input, .ui-bar-b select, .ui-bar-b textarea, .ui-bar-b button { font-family: Helvetica, Arial, sans-serif; }
+.ui-bar-h .ui-link-inherit { color: #fff; }
+.ui-bar-h .ui-link { color: #7cc4e7; font-weight: bold; }
+
+.ui-body-h { border: 1px solid #2A2A2A; background: #222222; color: #fff; text-shadow: 0 1px 0 #000; font-weight: normal; background-image: -moz-linear-gradient(top, #666666, #222222); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #666666),color-stop(1, #222222)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#222222)')"; }
+.ui-body-h, .ui-body-h input, .ui-body-h select, .ui-body-h textarea, .ui-body-h button { font-family: Helvetica, Arial, sans-serif; }
+.ui-body-h .ui-link-inherit { color: #fff; }
+.ui-body-h .ui-link { color: #2489CE; font-weight: bold; }
+.ui-br { border-bottom: 1px solid rgba(130,130,130,.3); }
+
+.ui-btn-up-h { border: 1px solid #145072; background: #2567ab; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #145072; text-decoration: none; background-image: -moz-linear-gradient(top, #4e89c5, #2567ab); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5f9cc5),color-stop(1, #396b9e)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4e89c5', EndColorStr='#2567ab')"; }
+.ui-btn-up-h a.ui-link-inherit { color: #fff; }
+.ui-btn-hover-h { border: 1px solid #00516e; background: #4b88b6; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #014D68; background-image: -moz-linear-gradient(top, #72b0d4, #4b88b6); text-decoration: none; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #72b0d4),color-stop(1, #4b88b6)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#72b0d4', EndColorStr='#4b88b6')"; }
+.ui-btn-hover-h a.ui-link-inherit { color: #fff; }
+.ui-btn-down-h { border: 1px solid #225377; background: #4e89c5; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #396b9e, #4e89c5); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #396b9e),color-stop(1, #4e89c5)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#396b9e', EndColorStr='#4e89c5')"; }
+.ui-btn-down-h a.ui-link-inherit { color: #fff; }
+.ui-btn-up-h, .ui-btn-hover-h, .ui-btn-down-h { font-family: Helvetica, Arial, sans-serif; }
+
+ul.thumbView {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+    border: none;
 }
 ul.thumbView li {
-    float:left;
-    position:relative;
-    width:80px;
-    height:80px;
-    border:none;
-    margin:0px;
-    padding:0px;
-    background:transparent;
-    line-height:80px;
-    overflow:visible;
+    float: left;
+    position: relative;
+    width: 80px;
+    height: 80px;
+    border: none;
+    margin: 0px;
+    padding: 0px;
+    background: transparent;
+    line-height: 80px;
+    overflow: visible;
 }
 ul.thumbView li a {
-    height:80px;
-    margin:0;
-    padding:0;
-    width:80px;
-    text-align:center;
-    vertical-align:middle;
-    display:table-cell;
-    overflow:visible;
+    height: 80px;
+    margin: 0;
+    padding: 0;
+    width: 80px;
+    text-align: center;
+    vertical-align: middle;
+    display: table-cell;
+    overflow: visible;
 }
-ul.thumbView li a img{
-    border:none;
-    vertical-align:middle;
-    -webkit-box-shadow:2px 2px 8px #000;
+ul.thumbView li a img {
+    border: none;
+    vertical-align: middle;
+    -webkit-box-shadow: 2px 2px 8px #000;
+}
+
+li.ansel-gallery h3 {
+    margin-left: 20px
+}
+li.ansel-gallery p {
+    margin-left: 25px;
 }