Basic first pass at click to view galleries.

horde · May 5, 2014 · 14a820d · 14a820d
1 parent d455084
commit 14a820d
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 12 deletions.
diff --git a/ansel/js/ansel.js b/ansel/js/ansel.js
@@ -22,6 +22,7 @@ AnselCore =
     effectDur: 0.4,
     inScrollHandler: false,
     perPage: 10,
+    galleries: null,
 
     /**
      * The location that was open before the current location.
@@ -223,7 +224,7 @@ AnselCore =
                     container: 'anselViewGalleries',
                     perPage: this.perPage
                 });
-                this.galleryLayout.galleries = $H(Ansel.galleries).values();
+                this.galleryLayout.galleries = this.galleries.values();
                 this.galleryLayout.resize();
             }
             break;
@@ -246,6 +247,11 @@ AnselCore =
     {
     },
 
+    onGalleryClick: function(e)
+    {
+        this.loadGallery(e.memo.gid);
+    },
+
     listImagesCallback: function(r)
     {
         this.imageLayout = this.imageLayout || new AnselLayout({
@@ -339,6 +345,17 @@ AnselCore =
      */
     loadGallery: function(gallery)
     {
+        HordeCore.doAction('getGallery',
+            { id: gallery },
+            { callback: this.getGalleryCallback.bind(this) }
+        );
+    },
+
+    getGalleryCallback: function(r)
+    {
+        console.log(r);
+        this.galleryLayout.reset();
+        this.galleryLayout.addImages(r.imgs);
     },
 
     /**
@@ -545,9 +562,7 @@ AnselCore =
             return;
         }
 
-        var elt = e.element(),
-            orig = e.element(),
-            id, tmp, calendar;
+        var elt = e.element(), id;
 
         while (Object.isElement(elt)) {
             id = elt.readAttribute('id');
@@ -567,11 +582,9 @@ AnselCore =
             //return
             }
 
-            // if (elt.hasClassName()) {
-            // //return
-            // } else if () {
-            // //return
-            // }
+            if (elt.hasClassName('ansel-tile-gallery')) {
+                this.loadGallery();
+            }
 
             elt = elt.up();
         }
@@ -807,13 +820,16 @@ AnselCore =
         document.observe('keyup', AnselCore.keyupHandler.bindAsEventListener(AnselCore));
         document.observe('click', AnselCore.clickHandler.bindAsEventListener(AnselCore));
         document.observe('dblclick', AnselCore.clickHandler.bindAsEventListener(AnselCore, true));
+        // Custom events
+        $('anselViewGalleries').observe('AnselLayout:galleryClick', this.onGalleryClick.bindAsEventListener(this));
 
+        // For now, start by loading the current user's galleris.
         HordeCore.doAction('listGalleries', {}, { callback: this.initialize.bind(this, tmp) });
     },
 
     initialize: function(location, r)
     {
-        Ansel.galleries = r;
+        this.galleries = $H(r);
 
         // //$('anselLoadingGalleries').hide();
         this.initialized = true;

diff --git a/ansel/js/layout.js b/ansel/js/layout.js
@@ -44,6 +44,12 @@
  *                           the current length of the images array and y is
  *                           the current size of the galleries hash.
  *
+ *      - AnselLayout:galleryClick  Fired when a gallery tile is clicked on.
+ *                                  Memo contains an object with the gallery id
+ *                                  in the 'gid' property.
+ *
+ *
+ *
  *
  * Copyright 2014 Horde LLC (http://www.horde.org/)
  *
@@ -90,13 +96,40 @@ AnselLayout = Class.create({
 
         Element.observe(window, 'resize', this.onResize.bindAsEventListener(this));
         this.opts.parent.observe('scroll', this.onScroll.bindAsEventListener(this));
+        this.opts.parent.observe('click', this.clickHandler.bindAsEventListener(this));
+    },
+
+    clickHandler: function(e)
+    {
+        if (e.isRightClick() || typeof e.element != 'function') {
+            return;
+        }
+
+        var elt = e.element(), id;
+        while (Object.isElement(elt)) {
+            // Caution, this only works if the element has definitely only a
+            // single CSS class.
+            switch (elt.className) {
+            //return
+            }
+
+            if (elt.hasClassName('ansel-tile-gallery')) {
+                this.opts.parent.fire('AnselLayout:galleryClick', { gid: elt.retrieve('gid') });
+                e.stop();
+                return;
+            }
+
+            elt = elt.up();
+        }
+
     },
 
     reset: function()
     {
         this.opts.container.select(this.opts.rowSelector).each(function(r) {
-            r.update();
+            r.remove();
         }.bind(this));
+        this.images = this.galleries = [];
     },
 
     // Prepare an array of images by calculating the initial scaled width.
@@ -209,7 +242,7 @@ AnselLayout = Class.create({
 
         target = new Element('span', {
             class: 'ansel-tile-target ansel-tile-gallery'
-        });
+        }).store({ gid: g.id });
 
         //@TODO Escape filename
         sub = g.ct + " " + Ansel.text['images'] + " " + g.cs + " " + Ansel.text['subgalleries'];

diff --git a/ansel/themes/default/dynamic/screen.css b/ansel/themes/default/dynamic/screen.css
@@ -63,6 +63,7 @@
 }
 
 #anselViewGalleries {
+    height: 100%;
     position: relative;
     float: left;
     display: inline-block;