spontaneous 0.2.0.alpha2 → 0.2.0.alpha3

data/application/js/top_bar.js

@@ -44,51 +44,45 @@ Spontaneous.TopBar = (function($, S) {
 		}
 	};
 	var CurrentNode = function(page) {
-		this.page = page;
-		this.id = page.id;
-		this.path = page.path;
-		this.title = page.slug;
-		this.pages = page.generation.sort(function(p1, p2) {
-			var a = p1.title, b = p2.title;
-			if (a == b) return 0;
-			return (a < b ? -1 : 1);
-		});
-		for (var i = 0, ii = this.pages.length; i < ii; i++) {
-			var p = this.pages[i];
-			if (p.id === this.id) {
-				this.selected = i;
-				break;
-			}
-		}
+		var self = this;
+		self.page = page;
+		self.id = page.id;
+		self.path = page.path;
+		self.title = page.slug;
+		self.pages = page.generation;
 	}
 
 	CurrentNode.prototype = {
 		element: function() {
-			var li = dom.li();
-			var select = dom.select();
+			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;
 			});
-			for (var i = 0, ii = this.pages.length; i < ii; i++) {
-				var p = this.pages[i],
-				option = dom.option({'value': p.id, 'selected':(i == this.selected) }).text(p.slug).data('page', p);
-				if (p.id === this.id) {
-					this.title_option = option;
-				}
-				select.append(option);
-			};
+
+			$.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);
-			// select.hide();
-			// var link = $(dom.li).append($('<a/>').data('page', this.page).click(function() {
-			// 	// var page = $(this).data('page');
-			// 	// S.Location.load_id(page.id);
-			// 	select.toggle().trigger('click');
-			// }).text(this.title));
-			//
-			// link.append(select);
-			// return link;
 			return li;
 		},
 		set_title: function(new_title) {
@@ -102,11 +96,13 @@ Spontaneous.TopBar = (function($, S) {
 
 	ChildrenNode.prototype = {
 		element: function() {
-			var li = dom.li('.children');
-			var select = dom.select('.unselected');
+			var li = dom.li('.children')
+			, select = dom.select('.unselected')
+			, children = this.children;
 			this.li = li;
 			this.select = select;
-			select.append(dom.option().text(this.status_text()));
+			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) {
@@ -114,21 +110,44 @@ Spontaneous.TopBar = (function($, S) {
 				}
 				return false;
 			});
-			for (var i = 0, ii = this.children.length; i < ii; i++) {
-				var p = this.children[i];
-				select.append(this.option_for_entry(p));
-			};
+			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)
+				}
+			}
 			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);
+		},
+
 		status_text: function() {
-			if (this.children.length === 0) {
+			var children = this.children, count = 0;
+			for (var boxname in children) {
+				if (children.hasOwnProperty(boxname)) { count += children[boxname].length; }
+			}
+			if (count === 0) {
 				this.select.hide();
 			} else {
 				this.select.show();
 			}
-			return '('+(this.children.length)+' pages)';
+			return '('+(count)+' pages)';
+		},
+		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);
@@ -140,35 +159,53 @@ Spontaneous.TopBar = (function($, S) {
 			return opt;
 		},
 		update_status: function() {
-			var first = this.select.find('option:first-child');
-			first.text(this.status_text());
-			return first;
+			this.status.text(this.status_text());
+			return this.status;
 		},
 		add_page: function(page, position) {
-			var option = this.option_for_entry(page);
+			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
+
+			// happens when we're adding the first item
+			if (!children[name]) { children[name] = []; }
+
 			if (position === -1) {
-				this.children.push(page)
-				this.select.append(option);
+				children[name].push(page)
 			} else {
-				this.children.splice(0, 0, page)
-				var first = this.update_status();
-				first.after(option);
+				children[name].splice(position, 0, page)
 			}
+			self.update_status();
 		},
 
 		remove_page: function(page) {
-			var index = 0;
-			for (var i = 0, ii = this.children.length; i < ii; i++) {
-				if (this.children[i].id() === page.id()) { index = i; break; };
-			}
-			this.children.splice(index, 1);
-			this.update_status();
-			var options = this.select.find('option:gt(0)'), remove;
-			options.each(function() {
-				if ($(this).data('page').id() === page.id()) {
-					$(this).remove();
+			var self = this
+			, container = page.container.name()
+			, 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; };
+						}
+					}
 				}
-			});
+			}(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();
 		}
 	}
 
@@ -177,6 +214,7 @@ Spontaneous.TopBar = (function($, S) {
 		normal_check: 10000,
 		initialize: function() {
 			this.status = false;
+			this.disabled = true;
 			this.set_interval(this.normal_check);
 			// this.check_status();
 			var update_status = this.update_status.bind(this);
@@ -184,7 +222,13 @@ Spontaneous.TopBar = (function($, S) {
 				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));
 		},
@@ -214,7 +258,9 @@ Spontaneous.TopBar = (function($, S) {
 				}
 			} else {
 				this.publishing_state();
-				if (state === 'rendering') {
+				// don't turn off intermediate and replace it with an empty progress dial
+				// by making sure our progress is > 0 before switching to progress view
+				if ((progress !== "*")) {
 					this.progress().update(progress);
 				} else {
 					this.progress().indeterminate();
@@ -243,10 +289,10 @@ Spontaneous.TopBar = (function($, S) {
 			if (!this._button) {
 				this._progress_container = dom.span('#publish-progress');
 				this._label = dom.span();
-				this._button = dom.a('#open-publish').append(this._progress_container).append(this._label);
+				this._button = dom.a('#open-publish.disabled').append(this._progress_container).append(this._label).hide();
 				this.set_label("Publish");
 				this._button.click(function() {
-					if (!this.in_progress) {
+					if (!this.disabled && !this.in_progress) {
 						S.Publishing.open_dialogue();
 					}
 				}.bind(this));
@@ -274,104 +320,79 @@ Spontaneous.TopBar = (function($, S) {
 		id: function() { return this.child.id; },
 		title: function() { return this.child.title; },
 		slug: function() { return this.child.slug; }
-	})
-	var TopBar = new JS.Singleton({
-		include: Spontaneous.Properties,
-		location: "/",
-		panel: function() {
-			this.wrap = dom.div('#top');
-			this.location = dom.ul('#navigation');
-			this.location.append(dom.li().append(dom.a()))
-			this.mode_switch = dom.a('#switch-mode').
-				text(this.opposite_mode(S.ContentArea.mode)).
-				click(function() {
-					S.TopBar.toggle_modes();
-			});
-			this.publish_button = new PublishButton();
-			this.wrap.append(this.location);
-			this.wrap.append(this.publish_button.button());
-			this.wrap.append(this.mode_switch);
-			return this.wrap;
+	});
+
+	var CMSNavigationView = new JS.Class({
+		initialize: function() {
+
 		},
-		init: function() {
-			if (!this.get('mode')) {
-				this.set('mode', S.ContentArea.mode);
+		panel: function() {
+			var self = this;
+			if (!self.wrap) {
+				self.wrap = dom.div("#cms-navigation-view");
+				self.location = dom.ul('#navigation');
+				self.mode_switch = dom.a('#switch-mode').
+					text(S.TopBar.opposite_mode(S.ContentArea.mode)).
+					click(function() {
+						S.TopBar.toggle_modes();
+					});
+
+				self.publish_button = new PublishButton();
+				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.Editing.watch('page', this.page_loaded.bind(this));
-			S.Location.watch('location', this.location_loaded.bind(this));
+			return self.wrap;
 		},
 		location_loaded: function(location) {
-			// clear the loaded page so that it forces a reload of the nav when we switch back to edit mode
-			this.set('page', undefined);
-			var children = [];
-			for (var i = 0, cc = location.children, ii = cc.length; i < ii; i++) {
-				children.push(new LocationChildProxy(cc[i]));
+			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;
 		},
 		page_loaded: function(page) {
-			var loaded_page = this.get('page'), loaded_id = (loaded_page ? loaded_page.id() : undefined);
-			if (page && (page.id() !== loaded_id)) {
-				if (this.children_node) {
-					this.children_node.element().remove();
+			var self = this;
+			if (self.children_node) {
+				self.children_node.element().remove();
+			}
+			var children_node = new ChildrenNode(page.children());
+			self.location.append(children_node.element());
+			page.bind('entry_added', function(entry, position) {
+				if (entry.is_page()) {
+					children_node.add_page(entry, position);
 				}
-				this.set('page', page);
-				var children_node = new ChildrenNode(page.children());
-				this.location.append(children_node.element());
-				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);
-					}
-				});
+			});
+			page.bind('removed_entry', function(entry) {
+				if (entry.is_page()) {
+					children_node.remove_page(entry);
+				}
+			});
 
-				page.watch('slug', function(title) {
-					this.navigation_current.set_title(title);
-				}.bind(this));
+			page.watch('slug', function(title) {
+				self.navigation_current.set_title(title);
+			});
 
-				page.title_field().watch('value', function(title) {
-					this.set_browser_title(title);
-				}.bind(this));
+			page.title_field().watch('value', function(title) {
+				Spontaneous.set_browser_title(title);
+			});
 
-				this.children_node = children_node;
-			}
+			self.children_node = children_node;
 		},
-		set_mode: function(mode) {
-			this.set('mode', mode);
-			this.mode_switch.text(this.opposite_mode(mode));
-		},
-		toggle_modes: function() {
-			this.set_mode(this.opposite_mode(this.get('mode')));
-		},
-		opposite_mode: function(to_mode) {
-			if (to_mode === 'preview') {
-				return 'edit';
-			} else if (to_mode === 'edit') {
-				return 'preview';
-			}
-		},
-		publishing_started: function() {
-			this.publish_button.publishing_started();
-		},
-		set_browser_title: function(page_title) {
-			document.title = S.site_domain + " | Editing: '"+page_title+"'";
-		},
-		location_changed: function(new_location) {
-			this.set_browser_title(new_location.title)
-			this.set('location', new_location);
-			this.update_navigation();
-		},
-		update_navigation: function() {
+		update_navigation: function(location) {
 			var nodes = [];
-			var location = this.get('location');
+			// var location = this.get('location');
 			var $location_bar = this.location;
-			var ancestors = location.ancestors;
+			var ancestors = location.ancestors.slice(0);
 			var root, is_root = false, root_node, children_node, current_node;
 			if (ancestors.length === 0) {
 				root = location;
@@ -392,7 +413,7 @@ Spontaneous.TopBar = (function($, S) {
 			} else {
 				current_node = root_node;
 			}
-			$('li:gt(0)', $location_bar).remove();
+			$('li', $location_bar).remove();
 			var children_node;
 			if (location.children.length > 0) {
 				//  children_node = new ChildrenNode(location.children);
@@ -403,8 +424,110 @@ Spontaneous.TopBar = (function($, S) {
 				$location_bar.append(node.element())
 			}
 			this.navigation_current = current_node;
+		},
+		publishing_started: function() {
+			this.publish_button.publishing_started();
+		},
+		mode_set: function(mode) {
+			this.mode_switch.text(S.TopBar.opposite_mode(mode));
+		},
+		hide: function() {
+			this.wrap.hide();
+		},
+		show: function() {
+			this.wrap.show();
+		}
+	});
+
+	var ServiceNavigationView = new JS.Class({
+		initialize: function(service) {
+			this.service = service;
+		},
+		panel: function() {
+			var self = this;
+			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)
+			return this.wrap;
+		}
+	});
+	var TopBar = new JS.Singleton({
+		include: Spontaneous.Properties,
+		location: "/",
+		panel: function() {
+			this.wrap = dom.div('#top');
+			// this.icon = dom.div('#spontaneous-root');
+			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);
+			this.wrap.append(this.icon, this.holder);
+			return this.wrap;
+		},
+		rootMenu: function() {
+			var li = dom.div('#spontaneous-root').click(function(event) {
+				$(this).addClass("active"); // no easy way to remove this
+				Spontaneous.Popover.open(event, new Spontaneous.RootMenuView(function() {
+					li.removeClass("active");
+				}));
+			});
+			return li.append(dom.span());
+		},
+		init: function() {
+			if (!this.get('mode')) {
+				this.set('mode', S.ContentArea.mode);
+			}
+			S.Editing.watch('page', this.page_loaded.bind(this));
+			S.Location.watch('location', this.location_loaded.bind(this));
+		},
+		location_loaded: function(location) {
+			// clear the loaded page so that it forces a reload of the nav when we switch back to edit mode
+			this.set('page', undefined);
+			this.navigationView.location_loaded(location);
+		},
+		page_loaded: function(page) {
+			var loaded_page = this.get('page'), loaded_id = (loaded_page ? loaded_page.id() : undefined);
+			if (page && (page.id() !== loaded_id)) {
+				this.set('page', page);
+				this.navigationView.page_loaded(page);
+			}
+		},
+		publishing_started: function() {
+			this.navigationView.publishing_started();
+		},
+		location_changed: function(new_location) {
+			Spontaneous.set_browser_title(new_location.title)
+			this.set('location', new_location);
+			this.navigationView.update_navigation(new_location);
 			this.page_loaded = function(page) {
 			};
+		},
+		toggle_modes: function() {
+			this.set_mode(this.opposite_mode(this.get('mode')));
+		},
+		opposite_mode: function(to_mode) {
+			if (to_mode === 'preview') {
+				return 'edit';
+			} else if (to_mode === 'edit') {
+				return 'preview';
+			}
+		},
+		set_mode: function(mode) {
+			this.set('mode', mode);
+			this.navigationView.mode_set(mode)
+		},
+		showService: function(service) {
+			this.navigationView.hide();
+			this.serviceView = new ServiceNavigationView(service);
+			this.serviceStation.empty().append(this.serviceView.panel())
+		},
+		showNavigationView: function() {
+			this.serviceStation.empty();
+			this.navigationView.show();
 		}
 	});
 	return TopBar;

data/application/js/types.js

@@ -1,7 +1,10 @@
 // console.log('Loading Types...');
 
 Spontaneous.Types = (function($, S) {
-	var ajax = S.Ajax, type_map = {};
+	var ajax = S.Ajax
+	, user = S.User
+	, type_map = {};
+
 	var BoxPrototype = new JS.Class({
 		initialize: function(type_data) {
 			this.data = type_data;
@@ -25,6 +28,7 @@ Spontaneous.Types = (function($, S) {
 			return types;
 		}
 	});
+
 	var Type = new JS.Class({
 		initialize: function(type_data) {
 			this.data = type_data;
@@ -68,24 +72,25 @@ Spontaneous.Types = (function($, S) {
 		},
 		edit_url: function() {
 			return S.editor_protocol + "://open?url=file://"+this.data.source;
+		},
+		display_title: function(content) {
+			var t = this.title;
+			if (user.is_developer()) {
+				t += "/" + content.id();
+			}
+			return t;
 		}
 	});
 	var Types = new JS.Singleton({
 		include: Spontaneous.Properties,
-		init: function(callback) {
-			var done = (function(callback) {
-				return function(data) {
-					var types = {};
-					for (id in data) {
-						if (data.hasOwnProperty(id)) {
-							types[id] = new Type(data[id]);
-						}
-					}
-					Spontaneous.Types.set('types', types);
-					if (callback) { callback.call(type_map); };
-				};
-			})(callback)
-			ajax.get('/types', done);
+		loaded: function(typeData) {
+			var types = {};
+			for (id in typeData) {
+				if (typeData.hasOwnProperty(id)) {
+					types[id] = new Type(typeData[id]);
+				}
+			}
+			Spontaneous.Types.set('types', types);
 		},
 		type: function(id) {
 			return this.get('types')[id];

data/application/js/upload.js

@@ -17,8 +17,7 @@ Spontaneous.Upload = (function($, S) {
 			this.failure_count = 0;
 			this.file = file;
 			this.insert_position = insert_position;
-			console.log('upload insert at', insert_position)
-			this.name = this.file.fileName;
+			this.name = File.filename(this.file);
 			this._total = this.file.size;
 			this.upload_id = upload_id++;
 		},

data/application/js/user.js

@@ -1,6 +1,8 @@
 // console.log('Loading User...')
 
 Spontaneous.User = (function($, S) {
+	var ajax = S.Ajax;
+
 	var User = new JS.Class({
 		initialize: function(user_data) {
 			this.attrs = user_data;
@@ -16,22 +18,34 @@ Spontaneous.User = (function($, S) {
 		},
 		is_developer: function() {
 			return this.attrs.developer;
+		},
+		is_admin: function() {
+			return this.attrs.admin;
+		},
+		can_publish: function() {
+			return this.attrs.can_publish;
 		}
 	});
 
 	var instance = new JS.Singleton({
 		include: Spontaneous.Properties,
-		load: function() {
-			S.Ajax.get('/user', this.loaded.bind(this));
-		},
+
 		loaded: function(user_data) {
 			this.user = new User(user_data);
 			this.set('user', this.user);
 		},
+		logout: function() {
+			ajax.post("/logout", {}, function() {
+				// S.Ajax.unauthorized();
+			});
+			S.Auth.Key.remove(S.site_id);
+		},
 		name: function() { return this.user.name(); },
 		email: function() { return this.user.email(); },
 		login: function() { return this.user.login(); },
-		is_developer: function() { return this.user.is_developer(); }
+		is_developer: function() { return this.user.is_developer(); },
+		is_admin: function() { return this.user.is_admin(); },
+		can_publish: function() { return this.user.can_publish(); }
 	});
 	return instance;
 }(jQuery, Spontaneous));