application/js/page_browser.js
// console.log("Loading PageBrowser...");
Spontaneous.PageBrowser = (function($, S) {
var dom = S.Dom
, flattenPageList = function(pageList) {
var pages = []
, comparator = function(a, b) {
var at = a.title, bt = b.title;
if (at > bt) { return 1; }
if (at < bt) { return -1; }
return 0;
};
$.each(pageList, function(key, list) { pages = pages.concat(list); });
pages.sort(comparator);
return pages;
};
var PageBrowser = new JS.Class(Spontaneous.PopoverView, {
initialize: function(origin) {
origin = String(origin || '');
if (/^\//.test(origin)) {
this.origin = origin || '/';
this.selected = this.origin;
} else {
this.selected = false;
this.origin = '/';
}
this.page_list = this.origin_list();
this.ancestor_list = this.origin_ancestors();
},
origin_list: function() {
return function(location) {
return flattenPageList(location.generation);
};
},
children_list: function() {
return function(location) {
return flattenPageList(location.children);
};
},
origin_ancestors: function() {
return function(location) {
return location.ancestors;
};
},
children_ancestors: function() {
return function(location) {
return location.ancestors.concat(location);
};
},
get_page_list: function() {
var path;
if (typeof this.origin === 'string') {
path = '/map/path' + this.origin;
} else {
path = '/map/' + this.origin.id;
}
S.Location.retrieve(path, this.page_list_loaded.bind(this));
},
view: function() {
var wrapper = dom.div('.page-browser'), table = dom.div('.page-list');
ancestors = dom.div('.page-ancestors');
wrapper.append(ancestors).append(table);
this.wrapper = wrapper;
this.table = table;
this.ancestors = ancestors;
this.get_page_list();
return wrapper;
},
page_list_loaded: function(page_list, xhr) {
this.table.empty();
this.location = page_list;
this.manager.page_list_loaded(this);
var g = this.page_list(this.location), table = this.table;
for (var i = 0, ii = g.length; i < ii; i++) {
var page = g[i];
table.append(this.get_entry(page));
}
this.ancestors.empty();
var _browser = this, list = dom.ul(), ancestors = this.ancestor_list(this.location);
this.depth = ancestors.length;
var click = function(p) {
return function(event) {
_browser.ancestor_selected(p);
return false;
};
};
for (i = 0, ii = ancestors.length; i < ii; i++) {
var a = ancestors[i], li = dom.li().append(dom.a().text(a.title)).append(dom.span().text('/')).click(click(a));
list.append(li);
}
if (ancestors.length === 0) {
list.append(dom.li().append(dom.a().text('Choose a page...')));
}
this.ancestors.append(list);
},
get_entry: function(page) {
var _browser = this, selected = function(p) {
return function() {
_browser.page_selected(p);
$(this).addClass('active');
};
};
var next_click = function() {
_browser.next_level(page);
return false;
};
var row = dom.div('.page').click(selected(page)), title = dom.a().text(page.title);
if (page.children > 0) {
var next = dom.span();
next.click(next_click);
row.append(next);
}
row.append(title);
if (this.selected && (page.path === this.selected)) {
row.addClass('active');
}
return row;
},
ancestor_selected: function(page) {
this.page_list = this.origin_list();
this.ancestor_list = this.origin_ancestors();
this.origin = page;
this.get_page_list();
},
next_level: function(page) {
this.page_list = this.children_list();
this.ancestor_list = this.children_ancestors();
this.origin = page;
this.get_page_list();
// this.manager.next_level(page);
},
page_selected: function(page) {
var table = this.table;
$('.page', table).removeClass('active');
this.selected = page.path;
this.manager.page_selected(page);
},
title: function() {
return 'Choose Page';
},
width: function() {
return 400;
}
// position_from_event: function(event) {
// return {top: event.clientX, left: event.clientY};
// },
});
return PageBrowser;
})(jQuery, Spontaneous);