Skip to content

Commit

Permalink
Parse location and navigate accordingly, track history.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrubinsk
mrubinsk committed May 6, 2014
1 parent 4c36697 commit c113238
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 107 deletions.
169 changes: 76 additions & 93 deletions ansel/js/ansel.js
View file
Expand Up @@ -22,7 +22,6 @@ AnselCore =
effectDur: 0.4,
inScrollHandler: false,
perPage: 10,
galleries: null,

/**
* The location that was open before the current location.
Expand Down Expand Up @@ -81,41 +80,33 @@ AnselCore =

// Navigate to a view or subview
// fullloc - the main view (me, groups, etc...)
// data - the subview (images, galleries etc...) If omitted, images
// is assumed (for now - should maybe be galleries?)
// data - An object containing additional data used:
// - subview
// - gid
//
//
go: function(fullloc, data)
{
var subview;

if (!data) {
data = 'images';
}
// All the "normal-ish" views can be displayed using the same
// main layout container, but rememer what we are actually requesting.
switch (data) {
case 'images':
case 'tags':
subview = 'images';
break;
default:
subview = data;
}
if (!this.initialized) {
this.go.bind(this, fullloc, data).defer();
return;
}

var locParts = fullloc.split(':');
var loc = locParts.shift();
var subview = locParts.shift();

if (!data) {
data = locParts.shift();
}
if (this.viewLoading.size()) {
this.viewLoading.push([ fullloc, subview ]);
return;
}

var locParts = fullloc.split(':');
var loc = locParts.shift();

// Same location, and subview - exit.
if (this.openLocation && this.openLocation == fullloc) {
if (this.subview && data == this.subview) {
if (this.subview && !data && subview == this.subview) {
return;
} else {
this.closeView(loc, subview);
Expand All @@ -136,17 +127,16 @@ AnselCore =
case 'subscribed':
var locCap = loc.capitalize();
$('anselNav' + locCap).addClassName('horde-subnavi-active');
$('anselMenu' + data.capitalize()).up().addClassName('horde-active');
$('anselMenu' + subview.capitalize()).up().addClassName('horde-active');
switch (loc) {
case 'me':
this.addHistory(fullloc);
this.view = loc;
this.subview = data;
this.subview = subview;
$('anselView' + subview.capitalize()).appear({
duration: this.effectDur,
queue: 'end',
afterFinish: function() {
this.updateView(loc, subview);
this.updateView(loc, subview, data);
this.loadNextView();
}.bind(this)
});
Expand Down Expand Up @@ -199,33 +189,32 @@ AnselCore =
* @param string view The view that's rebuilt.
* @param mixed data Any additional data that might be required.
*/
updateView: function(view, data)
updateView: function(view, subview, data)
{
switch (view) {
case 'me':
switch (data) {
switch (subview) {
case 'images':
$('anselViewImages').observe('AnselLayout:scroll', this.onImageScroll.bindAsEventListener(this));
$('anselViewGalleries').stopObserving('AnselLayout:scroll', this.onGalleryScroll.bindAsEventListener(this));
// @TODO. Sniff out if the view/subview has changed or not.
if (!this.imageLayout) {
HordeCore.doAction(
'listImages',
{ view: 'me', start: 0, count: this.perPage },
{ callback: this.listImagesCallback.bind(this) }
);
}
this.addHistory(view + ':' + subview);
HordeCore.doAction(
'listImages',
{ view: 'me', start: 0, count: this.perPage },
{ callback: this.listImagesCallback.bind(this) }
);
break;

case 'galleries':
$('anselViewImages').stopObserving('AnselLayout:scroll', this.onImageScroll.bindAsEventListener(this));
$('anselViewGalleries').observe('AnselLayout:scroll', this.onGalleryScroll.bindAsEventListener(this));
this.galleryLayout = this.galleryLayout || new AnselLayout({
container: 'anselViewGalleries',
perPage: this.perPage
});
this.galleryLayout.galleries = this.galleries.values();
this.galleryLayout.resize();
if (data) {
this.addHistory(view + ':' + subview + ':' + data);
this.loadGallery(data);
} else {
this.addHistory(view + ':' + subview );
HordeCore.doAction('listGalleries', {}, { callback: this.listGalleriesCallback.bind(this) });
}
}
break;
}
Expand All @@ -249,19 +238,21 @@ AnselCore =

onGalleryClick: function(e)
{
this.loadGallery(e.memo.gid);
this.go(this.view + ':' + this.subview, e.memo.gid);
},

listImagesCallback: function(r)
{
this.imageLayout = this.imageLayout || new AnselLayout({
container: 'anselViewImages',
perPage: this.perPage
});
this.imageLayout.addImages(r);
this.inScrollHandler = false;
},

listGalleriesCallback: function(r)
{
this.galleryLayout.galleries = $H(r).values();
this.galleryLayout.resize();
},

/**
* Sets the browser title of the calendar views.
*
Expand Down Expand Up @@ -295,19 +286,19 @@ AnselCore =
if (a) {
a.up().removeClassName('horde-active');
}
})
});

//if (this.view && this.view != loc) {
if (this.subview && this.subview != subview) {
$('anselView' + this.subview.capitalize()).fade({
duration: this.effectDur,
queue: 'end'
});
// AnselLayout.reset();
}
// this.view = null;
// this.subview = null;
//}
$('anselView' + this.subview.capitalize()).fade({
duration: this.effectDur,
queue: 'end',
afterFinish: function() {
if (subview == 'galleries') {
this.galleryLayout.reset();
} else if (subview == 'images') {
this.imageLayout.reset();
}
}.bind(this)
});
},

/**
Expand Down Expand Up @@ -424,10 +415,10 @@ AnselCore =

switch (id) {
case 'anselMenuImages':
this.go(this.view, 'images');
this.go(this.view + ':images');
return;
case 'anselMenuGalleries':
this.go(this.view, 'galleries');
this.go(this.view + ':galleries');
return;
}

Expand All @@ -437,10 +428,6 @@ AnselCore =
//return
}

if (elt.hasClassName('ansel-tile-gallery')) {
this.loadGallery();
}

elt = elt.up();
}
// Workaround Firebug bug.
Expand Down Expand Up @@ -660,10 +647,6 @@ AnselCore =
if (!tmp.empty() && tmp.startsWith('#')) {
tmp = (tmp.length == 1) ? '' : tmp.substring(1);
}
if (tmp.empty()) {
this.updateView(this.date, Ansel.conf.login_view);
// $('anselView' + Ansel.conf.login_view.capitalize()).show();
}

RedBox.onDisplay = function() {
this.redBoxLoading = false;
Expand All @@ -675,39 +658,39 @@ 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) });
this.initialize(tmp);
},

initialize: function(location, r)
initialize: function(location)
{
this.galleries = $H(r);

// //$('anselLoadingGalleries').hide();
this.initialized = true;
this.imageLayout = new AnselLayout({
container: 'anselViewImages',
perPage: this.perPage
});

/* TEMP HACK */
this.go('me', 'galleries');
//Element.observe(window, 'resize', AnselLayout.onResize);
this.galleryLayout = new AnselLayout({
container: 'anselViewGalleries',
perPage: this.perPage
});

this.initialized = true;

// /* Initialize the starting page. */
// if (!location.empty()) {
// this.go(decodeURIComponent(location));
// } else {
// this.go(Ansel.conf.login_view);
// }
/* Initialize the starting page. */
if (!location.empty()) {
this.go(decodeURIComponent(location));
} else {
this.go('me:galleries');
}

// /* Start polling. */
// new PeriodicalExecuter(function()
// {
// HordeCore.doAction('poll');
// },
// 60
// );
/* Start polling. */
new PeriodicalExecuter(function()
{
HordeCore.doAction('poll');
},
60
);
}

};
Expand Down
19 changes: 5 additions & 14 deletions ansel/js/layout.js
View file
Expand Up @@ -77,6 +77,8 @@ AnselLayout = Class.create({

moreAvailable: true,

baseView: null,

initialize: function(opts)
{
this.opts = Object.extend({
Expand Down Expand Up @@ -107,21 +109,13 @@ AnselLayout = Class.create({

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()
Expand All @@ -130,6 +124,7 @@ AnselLayout = Class.create({
r.remove();
}.bind(this));
this.images = this.galleries = [];
this.lastWidth = null;
},

// Prepare an array of images by calculating the initial scaled width.
Expand Down Expand Up @@ -209,11 +204,10 @@ AnselLayout = Class.create({
class: 'ansel-tile-target'
});

// @TODO Escape filename
// @TODO: Probably need to generalize the photo.screen to a url.
meta = new Element('div', {
class: 'ansel-tile-meta'
}).update(new Element('div', { class: 'ansel-tile-title' }).update(photo.fn));
}).update(new Element('div', { class: 'ansel-tile-title' }).update(photo.fn.escapeHTML()));

img = new Element('img', {
class: 'ansel-photo',
Expand Down Expand Up @@ -244,12 +238,10 @@ AnselLayout = Class.create({
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'];

meta = new Element('div', {
class: 'ansel-tile-meta'
}).insert(new Element('div', { class: 'ansel-tile-title' }).update(g.n))
}).insert(new Element('div', { class: 'ansel-tile-title' }).update(g.n.escapeHTML()))
.insert(new Element('div', { class: 'ansel-tile-stats' }).update(sub));

img = new Element('img', {
Expand Down Expand Up @@ -352,7 +344,6 @@ AnselLayout = Class.create({
// gallery tiles we decided to show.
while (totalNumber < totalCntRow && (totalNumber + baseLine) < this.galleries.length) {
var newwt = Math.floor(scaledWidths[baseLine + totalNumber] * ratio);

totalWidth += newwt;
tile = this.buildGalleryTile(this.galleries[baseLine + totalNumber], ratio, newht, newwt);
d_row.insert(tile);
Expand Down

0 comments on commit c113238

Please sign in to comment.