spontaneous 0.2.0.beta1 → 0.2.0.beta2

data/application/js/top_bar.js

@@ -1,23 +1,177 @@
 // console.log("Loading TopBar...")
 
 Spontaneous.TopBar = (function($, S) {
-	var dom = S.Dom;
+	var dom = S.Dom, Ajax = S.Ajax;
 
-	var RootNode = function(page) {
+	var disableParent = function(el) {
+		el.hover(function() {
+			$(this).parent().addClass("disabled");
+		}, function() {
+			$(this).parent().removeClass("disabled");
+		});
+		return el;
+	};
+
+	var slugComparator = function(a, b) {
+		var at = a.slug, bt = b.slug;
+		if (at > bt) { return  1; }
+		if (at < bt) { return -1; }
+		return 0;
+	};
+
+	var RootBrowser = new JS.Class(Spontaneous.PopoverView, {
+		initialize: function(roots) {
+			this.roots = roots;
+		},
+		width: function() { return 300; },
+		title: function() { return "Choose Root"; },
+		view:  function() {
+			var self = this, w = dom.div('#navigation-page-browser.pop-root-browser'), list = dom.div(".pages"), roots = this.roots.roots;
+			var click = function(page_id) {
+				return function() { self.close(); S.Location.load_id(page_id); };
+			};
+			for (var key in roots) {
+				if (roots.hasOwnProperty(key)) {
+					var r = dom.div(".page").text(key).click(click(roots[key]));
+					list.append(r);
+				}
+			}
+			frame.append(list);
+			this.wrapper = w;
+			return w;
+		}
+	});
+
+	var PageBrowser = new JS.Class(Spontaneous.PopoverView, {
+		initialize: function(origin, pages) {
+			this.origin = origin;
+			this.pages = pages;
+		},
+		width: function() { return 300; },
+		title: function() { return "Go to Page"; },
+		view:  function() {
+			var self = this, w = dom.div('#navigation-page-browser.pop-root-browser')
+			, list = dom.div(".pages")
+			, frame = dom.div(".frame")
+			, searchArea = dom.div(".search")
+			, searchInput = dom.input({type: "search", placeholder:"Search"});
+			searchArea.append(searchInput);
+			searchInput.bind("change keyup search", self.updateSearch.bind(self, searchInput));
+			self.wrapper = w;
+			self.list = list;
+			frame.append(list);
+			w.append(searchArea, frame)
+			this.loadPages();
+			return w;
+		},
+		updateSearch: function(input) {
+			if (!this.pages) { return; }
+
+			var self = this, boxes = {}, query = input.val(), search = new RegExp(query, "i");
+			// need to bubble up the event if the query is identical as this event
+			// is also triggered on input blur when a page is clicked.
+			if (query === this.query) {
+				return true;
+			}
+
+			this.query = query;
+			if (query === "") {
+				self.listPages(this.pages);
+				return;
+			}
+			$.each(self.pages, function(boxname, pages) {
+				var box = [];
+				for (var i = 0, ii = pages.length; i < ii; i++) {
+					var page = pages[i];
+					if (search.test(page.slug) || search.test(page.title)) {
+						box.push(page);
+					}
+				}
+				if (box.length > 0) {
+					boxes[boxname] = box;
+				}
+			});
+			self.listPages(boxes, query);
+		},
+		clearList: function() {
+			this.list.empty();
+		},
+		loadPages: function() {
+			if (this.pages) {
+				this.listPages(this.pages);
+			} else {
+				var path = ["/map", this.origin.id].join("/")
+				S.Location.retrieve(path, this.pagesLoaded.bind(this));
+			}
+		},
+		pagesLoaded: function(pages) {
+			this.pages = pages.generation;
+			this.listPages(pages.generation);
+		},
+		listPages: function(generation, filter) {
+			var self = this, origin = self.origin, load_page = function(p) {
+				return function() {
+					self.close();
+					S.Location.load_id(p.id);
+				}
+			};
+			self.clearList();
+			if (Object.keys(generation).length === 0) {
+				var msg = filter ? "No matches for ‘"+filter+"’" : "No pages";
+				self.list.append(dom.h3().text(msg))
+				return;
+			}
+			$.each(generation, function(boxname, pages) {
+				pages.sort(slugComparator);
+				var box = dom.div(".box").append(dom.h4().text(boxname));
+				for (var i = 0, ii = pages.length; i < ii; i++) {
+					var p = pages[i], page = dom.div(".page").text(p.slug).data('page', p);
+					if (origin && p.id === origin.id) {
+						page.addClass("current");
+					}
+					page.click(load_page(p));
+					box.append(page);
+				}
+				self.list.append(box);
+			});
+		}
+	});
+
+	var RootNode = function(page, roots) {
 		this.page = page;
+		this.roots = roots;
 		this.id = page.id;
 		this.url = page.url;
-		this.title = S.site_domain;
-	}
+		this.title = this.title(); //page.title; //S.site_domain;
+	};
 	RootNode.prototype = {
+		title: function() {
+			var roots = this.roots.roots;
+
+			for (var key in roots) {
+				if (roots.hasOwnProperty(key)) {
+					if (roots[key] === this.id) { return key; }
+				}
+			}
+			return S.site_domain;
+		},
 		element: function() {
-			var li = dom.li('.root');
+			var self = this, li = dom.li('.root');
 			var link = dom.a({'href': this.url}).text(this.title).data('page', this.page);
+			if (Object.keys(this.roots.roots).length === 1) {
+				li.addClass("singluar");
+			} else {
+				li.click(function(event) {
+					var browser = new RootBrowser(self.roots);
+					Spontaneous.Popover.open(event, browser);
+				});
+			}
 			link.click(function() {
 				var page = $(this).data('page');
 				S.Location.load_id(page.id);
 				return false;
 			});
+			disableParent(link);
 			li.append(link);
 			this.link = link;
 			return li;
@@ -25,7 +179,7 @@ Spontaneous.TopBar = (function($, S) {
 		set_title: function(new_title) {
 			this.link.text(new_title);
 		}
-	}
+	};
 
 	var AncestorNode = function(page) {
 		this.page = page;
@@ -35,12 +189,21 @@ Spontaneous.TopBar = (function($, S) {
 	};
 	AncestorNode.prototype = {
 		element: function() {
-			var link = dom.li().append($('<a/>').data('page', this.page).click(function() {
+			var page = this.page, li = dom.li(), link = $('<a/>').data('page', page).click(function() {
 				var page = $(this).data('page');
 				S.Location.load_id(page.id);
-			}).text(this.title));
+				return false;
+			}).text(this.title);
 
-			return link;
+			disableParent(link);
+			li.append(link);
+
+			li.click(function() {
+				var browser = new PageBrowser(page);
+				Spontaneous.Popover.open(event, browser);
+			});
+
+			return li;
 		}
 	};
 	var CurrentNode = function(page) {
@@ -50,164 +213,115 @@ Spontaneous.TopBar = (function($, S) {
 		self.path = page.path;
 		self.title = page.slug;
 		self.pages = page.generation;
-	}
+	};
 
 	CurrentNode.prototype = {
 		element: function() {
 			var self = this
 			, li = dom.li()
-			, select = dom.select()
-			, comparator = function(a, b) {
-				var at = a.slug, bt = b.slug;
-				if (at > bt) { return 1; }
-				if (at < bt) { return -1; }
-				return 0;
-			};
-			select.change(function() {
-				var page = $(this.options[this.selectedIndex]).data('page');
-				S.Location.load_id(page.id);
-				return false;
+			, link = dom.a().text(self.title);
+			li.click(function(event) {
+				var browser = new PageBrowser(self.page, self.pages);
+				Spontaneous.Popover.open(event, browser);
 			});
-
-			$.each(this.pages, function(boxname, pages) {
-				pages.sort(comparator);
-				var optgroup = dom.optgroup().attr('label', boxname);
-				for (var i = 0, ii = pages.length; i < ii; i++) {
-					var p = pages[i],
-					option = dom.option({'value': p.id, 'selected':(p.id == self.id) }).text(p.slug).data('page', p);
-					if (p.id === self.id) {
-						self.title_option = option;
-					}
-					optgroup.append(option);
-				};
-				select.append(optgroup);
-			});
-			li.append(select);
+			li.append(link);
+			this.title_element = link;
 			return li;
 		},
 		set_title: function(new_title) {
-			this.title_option.text(new_title);
+			this.title_element.text(new_title);
 		}
-	}
+	};
 
-	var ChildrenNode = function(children) {
-		this.children = children;
-	}
+	var ChildrenNode = function(origin) {
+		this.origin = origin;
+	};
 
 	ChildrenNode.prototype = {
 		element: function() {
-			var li = dom.li('.children')
-			, select = dom.select('.unselected')
-			, children = this.children;
+			var self = this, li = dom.li('.children'), link = dom.a('.unselected'), children = this.children;
 			this.li = li;
-			this.select = select;
-			this.status = dom.option().text(this.status_text());
-			select.append(this.status);
-			select.change(function() {
-				var p = $(this.options[this.selectedIndex]).data('page');
-				if (p) {
-					S.Location.load_id(p.id());
-				}
-				return false;
+			this.link = link.text(this.status_text());
+			li.append(link);
+			li.click(function(event) {
+				var browser = new PageBrowser(self.origin, self.children());
+				Spontaneous.Popover.open(event, browser);
 			});
+			return li;
+		}.cache(),
+
+		each: function(block) {
+			var self = this, children = this.origin.children;
 			for (var boxname in children) {
 				if (children.hasOwnProperty(boxname)) {
-					var optgroup = this.optgroup(boxname), cc = this.sort_children(children[boxname]);
-					for (var i = 0, ii = cc.length; i < ii; i++) {
-						var p = cc[i];
-						optgroup.append(this.option_for_entry(p));
-					};
-					select.append(optgroup)
+					for (var i = 0, box = children[boxname], ii = box.length; i < ii; ++i) {
+						block(box[i])
+					}
 				}
 			}
-			li.append(select);
-			return li;
-		}.cache(),
-
-		sort_children: function(children) {
-			var comparator = function(a, b) {
-				var at = a.slug(), bt = b.slug();
-				if (at > bt) { return 1; }
-				if (at < bt) { return -1; }
-				return 0;
-			};
-			return children.sort(comparator);
+		},
+		children: function() {
+			return this.origin.children;
 		},
 
 		status_text: function() {
-			var children = this.children, count = 0;
+			var children = this.origin.children, count = 0;
 			for (var boxname in children) {
 				if (children.hasOwnProperty(boxname)) { count += children[boxname].length; }
 			}
 			if (count === 0) {
-				this.select.hide();
+				this.li.hide();
 			} else {
-				this.select.show();
+				this.li.show();
 			}
 			return '('+(count)+' page'+(count === 1 ? '' : 's')+')';
 		},
-		optgroup: function(boxname) {
-			return dom.optgroup().attr('label', boxname);
-		},
-		option_for_entry: function(p) {
-			var opt = dom.option({'value': p.id()}).text(p.slug()).data('page', p);
-			if (p.watch) {
-				p.watch('slug', function(value) {
-					opt.text(value);
-				}.bind(this));
-			}
-			return opt;
-		},
 		update_status: function() {
-			this.status.text(this.status_text());
-			return this.status;
+			this.link.text(this.status_text());
+			return this.link;
 		},
 		add_page: function(page, position) {
 			var self = this
-			, option = self.option_for_entry(page)
 			, container = page.container
 			, name = container.name()
-			, children = self.children
-			, optgroup = self.select.find('optgroup[label="'+name+'"]')
-			if (optgroup.length === 0) {
-				optgroup = this.optgroup(name);
-				this.select.append(optgroup);
-			}
-			optgroup.prepend(option);
-			// since the navigation lists are ordered differently from the entries, it's
-			// difficult to insert into the right position
-			// TODO: re-sort the this.children entries and use this list to find the position in the select
+			, children = self.origin.children
+			, box = children[name];
 
-			// happens when we're adding the first item
-			if (!children[name]) { children[name] = []; }
-
-			if (position === -1) {
-				children[name].push(page)
-			} else {
-				children[name].splice(position, 0, page)
+			if (!box) {
+				box = [];
+				self.origin.children[name] = box;
 			}
+			// make the new entry as much like the originals as possible
+			var entry = {
+				id: page.id(),
+				children: 0,
+				slug: page.slug(),
+				title: page.title(),
+				type_id: page.content.type_id
+			};
+			box.push(entry);
 			self.update_status();
 		},
 
 		remove_page: function(page) {
 			var self = this
+			, children = self.origin.children
 			, container = page.container.name()
+			, page_id = page.id()
 			, index = (function(children) {
 				for (var boxname in children) {
 					if (children.hasOwnProperty(boxname)) {
 						var cc = children[boxname];
 						for (var i = 0, ii = cc.length; i < ii; i++) {
-							if (cc[i].id() === page.id()) { return i; };
+							if (cc[i].id === page_id) { return i; }
 						}
 					}
 				}
-			}(self.children))
-			, optgroup = this.select.find('optgroup[label="'+container+'"]');
-			optgroup.find('option[value="'+page.id()+'"]').remove();
-			this.children[container].splice(index, 1);
-			this.update_status();
+			}(children));
+			children[container].splice(index, 1);
+			self.update_status();
 		}
-	}
+	};
 
 	var PublishButton = new JS.Class({
 		rapid_check: 2000,
@@ -216,31 +330,20 @@ Spontaneous.TopBar = (function($, S) {
 			this.status = false;
 			this.disabled = true;
 			this.set_interval(this.normal_check);
-			// this.check_status();
 			var update_status = this.update_status.bind(this);
 			S.EventSource.addEventListener('publish_progress', function(event) {
-				update_status($.parseJSON(event.data))
+				update_status($.parseJSON(event.data));
 			});
 		},
 		user_loaded: function(user) {
-			console.log("user loaded", user)
 			if (user.can_publish()) {
 				this.disabled = false;
 				this.button().removeClass("disabled").fadeIn();
 			}
 		},
-		check_status: function() {
-			S.Ajax.get('/publish/status', this.status_recieved.bind(this));
-		},
-		status_recieved: function(status, response_code) {
-			if (response_code === 'success' && status != this.status) {
-				this.update_status(status);
-			}
-			window.setTimeout(this.check_status.bind(this), this.timer_interval);
-		},
 		update_status: function(status) {
 			if (status === null || status === '') { return; }
-			var state = status.state, progress = status.progress
+			var state = status.state, progress = status.progress;
 			// if (this.in_progress && (state == this.current_action && progress == this.current_progress)) { return; }
 			this.current_action = state;
 			this.current_progress = progress;
@@ -250,11 +353,11 @@ Spontaneous.TopBar = (function($, S) {
 					this.progress().stop();
 					// this.set_interval(this.normal_check);
 					this.set_label("Publish");
-					this.button().switchClass('progress', '')
+					this.button().switchClass('progress', '');
 					this.current_action = this.current_progress = null;
 				// }
 				if (state === 'error') {
-					alert('There was a problem publishing: ' + progress)
+					alert('There was a problem publishing: ' + progress);
 				}
 			} else {
 				this.publishing_state();
@@ -297,7 +400,7 @@ Spontaneous.TopBar = (function($, S) {
 					}
 				}.bind(this));
 			}
-			return this._button
+			return this._button;
 		},
 		progress: function() {
 			if (!this._progress) {
@@ -341,37 +444,28 @@ Spontaneous.TopBar = (function($, S) {
 				self.wrap.append(self.location);
 				self.wrap.append(self.publish_button.button());
 				self.wrap.append(self.mode_switch);
-				S.User.watch("user", function(user) { self.publish_button.user_loaded(user);  })
+				S.User.watch("user", function(user) { self.publish_button.user_loaded(user);  });
 			}
 			return self.wrap;
 		},
-		location_loaded: function(location) {
-			var children = {};
-
-			for (var boxname in location.children) {
-				if (location.children.hasOwnProperty(boxname)) {
-					children[boxname] = [];
-					for (var i = 0, cc = location.children[boxname], ii = cc.length; i < ii; i++) {
-						children[boxname].push(new LocationChildProxy(cc[i]));
-					}
-				}
-			}
-			var children_node = new ChildrenNode(children);
-			this.location.append(children_node.element());
-			this.children_node = children_node;
+		roots: function(roots) {
+			this.roots = roots;
 		},
-		page_loaded: function(page) {
+		location_loaded: function(location) {
 			var self = this;
-			if (self.children_node) {
-				self.children_node.element().remove();
-			}
-			var children_node = new ChildrenNode(page.children());
+			var children_node = new ChildrenNode(location);
 			self.location.append(children_node.element());
+			self.children_node = children_node;
+		},
+		page_loaded: function(page) {
+			var self = this, children_node = self.children_node;
+
 			page.bind('entry_added', function(entry, position) {
 				if (entry.is_page()) {
 					children_node.add_page(entry, position);
 				}
 			});
+
 			page.bind('removed_entry', function(entry) {
 				if (entry.is_page()) {
 					children_node.remove_page(entry);
@@ -387,43 +481,41 @@ Spontaneous.TopBar = (function($, S) {
 			page.title_field().watch('value', function(title) {
 				Spontaneous.set_browser_title(title);
 			});
-
-			self.children_node = children_node;
 		},
 		update_navigation: function(location) {
 			var nodes = [];
 			// var location = this.get('location');
 			var $location_bar = this.location;
 			var ancestors = location.ancestors.slice(0);
-			var root, is_root = false, root_node, children_node, current_node;
+			var i, node, root, is_root = false, root_node, children_node, current_node;
 			if (ancestors.length === 0) {
 				root = location;
 				is_root = true;
 			} else {
 				root = ancestors.shift();
 			}
-			root_node = new RootNode(root);
+			root_node = new RootNode(root, this.roots);
 			nodes.push(root_node);
-			for (var i=0, ii=ancestors.length; i < ii; i++) {
+			for (i=0, ii=ancestors.length; i < ii; i++) {
 				var page = ancestors[i];
-				var node = new AncestorNode(page)
+				node = new AncestorNode(page);
 				nodes.push(node);
-			};
+			}
 			if (!is_root) {
-				current_node = new CurrentNode(location)
+				current_node = new CurrentNode(location);
 				nodes.push(current_node);
 			} else {
 				current_node = root_node;
 			}
 			$('li', $location_bar).remove();
-			var children_node;
+
 			if (location.children.length > 0) {
 				//  children_node = new ChildrenNode(location.children);
 				// $location_bar.append(children_node.element())
 			}
-			for (var i = 0, ii = nodes.length; i < ii; i++) {
-				var node = nodes[i];
-				$location_bar.append(node.element())
+			for (i = 0, ii = nodes.length; i < ii; i++) {
+				node = nodes[i];
+				$location_bar.append(node.element());
 			}
 			this.navigation_current = current_node;
 		},
@@ -447,12 +539,12 @@ Spontaneous.TopBar = (function($, S) {
 		},
 		panel: function() {
 			var self = this;
-			this.wrap = dom.div("#service-navigation")
+			this.wrap = dom.div("#service-navigation");
 			var title = dom.h2().text(this.service.title);
 			var close = dom.a(".button").text("Close").click(function() {
 				S.Services.close();
-			})
-			this.wrap.append(title, close)
+			});
+			this.wrap.append(title, close);
 			return this.wrap;
 		}
 	});
@@ -462,8 +554,8 @@ Spontaneous.TopBar = (function($, S) {
 		panel: function() {
 			this.wrap = dom.div('#top');
 			// this.icon = dom.div('#spontaneous-root');
-			this.icon = this.rootMenu()
-			this.holder = dom.div('#service-outer')
+			this.icon = this.rootMenu();
+			this.holder = dom.div('#service-outer');
 			this.navigationView = new CMSNavigationView();
 			this.serviceStation = dom.div("#service-inner");
 			this.holder.append(this.navigationView.panel(), this.serviceStation);
@@ -479,10 +571,11 @@ Spontaneous.TopBar = (function($, S) {
 			});
 			return li.append(dom.span());
 		},
-		init: function() {
+		init: function(metadata) {
 			if (!this.get('mode')) {
 				this.set('mode', S.ContentArea.mode);
 			}
+			this.navigationView.roots(metadata.roots)
 			S.Editing.watch('page', this.page_loaded.bind(this));
 			S.Location.watch('location', this.location_loaded.bind(this));
 		},
@@ -502,7 +595,7 @@ Spontaneous.TopBar = (function($, S) {
 			this.navigationView.publishing_started();
 		},
 		location_changed: function(new_location) {
-			Spontaneous.set_browser_title(new_location.title)
+			Spontaneous.set_browser_title(new_location.title);
 			this.set('location', new_location);
 			this.navigationView.update_navigation(new_location);
 			this.page_loaded = function(page) {
@@ -520,12 +613,12 @@ Spontaneous.TopBar = (function($, S) {
 		},
 		set_mode: function(mode) {
 			this.set('mode', mode);
-			this.navigationView.mode_set(mode)
+			this.navigationView.mode_set(mode);
 		},
 		showService: function(service) {
 			this.navigationView.hide();
 			this.serviceView = new ServiceNavigationView(service);
-			this.serviceStation.empty().append(this.serviceView.panel())
+			this.serviceStation.empty().append(this.serviceView.panel());
 		},
 		showNavigationView: function() {
 			this.serviceStation.empty();
@@ -533,6 +626,4 @@ Spontaneous.TopBar = (function($, S) {
 		}
 	});
 	return TopBar;
-})(jQuery, Spontaneous);
-
-
+}(jQuery, Spontaneous));

data/application/js/upload.js

@@ -34,13 +34,20 @@ Spontaneous.Upload = (function($, S) {
 			if (this.target_version) {
 				form.append('version', this.target_version);
 			}
-			this.post("/file/replace/"+this.target_id, form);
+			this.put("/file/"+this.target_id, form);
 		},
 
 		post: function(url, form_data) {
-			this.xhr = new XMLHttpRequest();
+			this.request("POST", url, form_data)
+		},
+		put: function(url, form_data) {
+			this.request("PUT", url, form_data)
+		},
+		request: function(verb, url, form_data) {
+			this.xhr = S.Ajax.authenticatedRequest();
 			this.upload = this.xhr.upload;
-			this.xhr.open("POST", this.namespaced_path(url), true);
+			this.xhr.open(verb, this.namespaced_path(url), true);
+			// S.Ajax.authenticateRequest(this.xhr);
 			this.upload.onprogress = this.onprogress.bind(this);
 			this.upload.onload = this.onload.bind(this);
 			this.upload.onloadend = this.onloadend.bind(this);
@@ -48,9 +55,9 @@ Spontaneous.Upload = (function($, S) {
 			this.xhr.onreadystatechange = this.onreadystatechange.bind(this);
 			this.started = (new Date()).valueOf();
 			this.xhr.send(form_data);
-		},
+			},
 		namespaced_path: function(path) {
-			return S.Ajax.request_url(path, true);
+			return S.Ajax.request_url(path);
 		},
 		// While loading and sending data.
 		onprogress: function(event) {