spontaneous 0.1.0.alpha1

data/application/js/views/box_view.js

@@ -0,0 +1,229 @@
+// console.log('Loading BoxView...')
+
+Spontaneous.Views.BoxView = (function($, S) {
+	var dom = S.Dom;
+
+	var BoxView = new JS.Class(Spontaneous.Views.View, {
+		include: Spontaneous.Properties,
+
+		initialize: function(box, dom_container) {
+			this.callSuper(box);
+			this.box = box;
+			this.dom_container = dom_container;
+			this.box.bind('entry_added', this.insert_entry.bind(this));
+		},
+
+		name: function() {
+			return this.box.name();
+		},
+		schema_id: function() {
+			return this.box.schema_id();
+		},
+
+		activate: function() {
+			$('> .slot-content', this.dom_container).hide();
+			this.panel().show();
+		},
+
+
+		mouseover: function() {
+			if (this.fields_preview) {
+				this.fields_preview.addClass('hover');
+			}
+		},
+		mouseout: function() {
+			if (this.fields_preview) {
+				this.fields_preview.removeClass('hover');
+			}
+		},
+
+		panel: function() {
+			if (!this._panel) {
+				// var panel = $(dom.div, {'class': 'slot-content'});
+				var panel = dom.div('.slot-content');
+				if (this.box.has_fields()) {
+					var w = dom.div('.box-fields');
+					var fields = new Spontaneous.FieldPreview(this, '');
+					var fields_preview = fields.panel();
+					fields_preview.prepend(dom.div('.overlay'))
+					var preview_area = this.create_edit_wrapper(fields_preview);
+
+					w.append(preview_area);
+					panel.append(w);
+					this.fields_preview = fields_preview;
+				}
+
+				var allowed = this.box.allowed_types();
+				// var allowed_bar = $(dom.div, {'class':'slot-addable'});
+				var allowed_bar = dom.div('.slot-addable');
+				var dropper = allowed_bar;
+				var drop = function(event) {
+					dropper.removeClass('drop-active').addClass('uploading');
+					// var progress_outer = $(dom.div, {'class':'drop-upload-outer'});
+					// var progress_inner = $(dom.div, {'class':'drop-upload-inner'}).css('width', 0);
+					// progress_outer.append(progress_inner);
+					// dropper.append(progress_outer);
+					// this.progress_bar = progress_inner;
+					event.stopPropagation();
+					event.preventDefault();
+					var files = event.dataTransfer.files;
+					if (files.length > 0) {
+						S.UploadManager.wrap(this, files);
+					}
+					return false;
+				}.bind(this);
+
+				var drag_enter = function(event) {
+					// var files = event.originalEvent.dataTransfer.files;
+					// console.log(event.originalEvent.dataTransfer, files)
+					$(this).addClass('drop-active');
+					event.stopPropagation();
+					event.preventDefault();
+					return false;
+				}.bind(dropper);
+
+				var drag_over = function(event) {
+					event.stopPropagation();
+					event.preventDefault();
+					return false;
+				}.bind(dropper);
+
+				var drag_leave = function(event) {
+					$(this).removeClass('drop-active');
+					event.stopPropagation();
+					event.preventDefault();
+					return false;
+				}.bind(dropper);
+
+				dropper.get(0).addEventListener('drop', drop, true);
+				dropper.bind('dragenter', drag_enter).bind('dragover', drag_over).bind('dragleave', drag_leave);
+
+				var _box = this;
+				$.each(allowed, function(i, type) {
+					var a = dom.a().text(type.title), add_allowed;
+					if (type.is_alias()) {
+						a.addClass('alias')
+						add_allowed = function(type) {
+							var d = new Spontaneous.AddAliasDialogue(_box, type);
+							d.open();
+						}.bind(_box, type);
+					} else {
+						add_allowed = function(type) {
+							this.add_content(type, 0);
+						}.bind(_box, type);
+					}
+					a.click(add_allowed);
+					allowed_bar.append(a)
+				});
+				allowed_bar.append(dom.span('.down'));
+				panel.append(allowed_bar);
+				// var entries = $(dom.div, {'class':'slot-entries'});
+				var entries = dom.div('.slot-entries');
+				// panel.append();
+				for (var i = 0, ee = this.entries(), ii = ee.length;i < ii; i++) {
+					var entry = ee[i];
+					entries.append(this.claim_entry(entry));
+				}
+				entries.sortable({
+					items:'> .'+this.entry_class(),
+					handle: '.title-bar',
+					axis:'y',
+					distance: 5,
+					tolerance: 'pointer',
+					scrollSpeed: 40,
+					containment: 'parent',
+					stop: function(event, ui) {
+						this.re_sort(ui.item);
+					}.bind(this)
+				})
+				panel.append(entries);
+				panel.hide();
+				this.dom_container.append(panel)
+				this._panel = panel;
+				this._entry_container = entries;
+			}
+			return this._panel;
+		},
+		re_sort: function(item) {
+			var order = this._entry_container.sortable('toArray'), css_id = item.attr('id'), position = 0;
+			for (var i = 0, ii = order.length; i < ii; i++) {
+				if (order[i] === css_id) { position = i; break; }
+			}
+			var id = css_id.split('-')[1], entry;
+
+			for (var i = 0, entries = this.entries(), ii = entries.length; i < ii; i++) {
+				if (entries[i].id() == id) { entry = entries[i]; break; }
+			}
+			entry.reposition(position, function(entry) {
+				this.sorted(entry)
+			}.bind(this));
+		},
+		sorted: function(entry) {
+		},
+		upload_complete: function(values) {
+			this.box.entry_added(values);
+		},
+		upload_progress: function(position, total) {
+		},
+		entries: function() {
+			var entries = [];
+			for (var i = 0, ee = this.box.entries(), ii = ee.length;i < ii; i++) {
+				var entry = ee[i];
+				entries.push(this.view_for_entry(entry));
+			}
+			return entries;
+		}.cache(),
+
+		view_for_entry: function(entry) {
+			var view_class = S.Views.PieceView, view, panel;
+			if (entry.is_page()) {
+				view_class = S.Views.PagePieceView;
+			}
+			view = new view_class(entry);
+			return view;
+		},
+		claim_entry: function(entry) {
+			var div = entry.panel();
+			return div.attr('id', this.entry_id(entry)).addClass(this.entry_class());
+		},
+
+		entry_id: function(entry) {
+			return "entry-" + entry.content.id();
+		},
+
+		entry_class: function() {
+			return 'container-'+this.box.schema_id();
+		},
+
+		save_path: function() {
+			return ['/savebox', this.id()].join('/');
+		},
+
+		add_content: function(content_type, position) {
+			this.box.add_entry(content_type, position);
+		},
+
+		add_alias: function(target_id, type) {
+			this.box.add_alias(target_id, type);
+		},
+
+		insert_entry: function(entry, position) {
+			this.trigger('entry_added', entry);
+			var entries = this.entries(), w = this.entry_wrappers(), e = this.view_for_entry(entry), h = this.claim_entry(e);
+			entries.splice(position, 0, e);
+			if (w.length > 0) {
+				this.entry_wrappers().slice(position, position+1).before(h);
+			} else {
+				this._entry_container.append(h);
+			}
+			h.hide().appear();
+		},
+		entry_wrappers: function() {
+			return this._entry_container.find('> .'+this.entry_class())
+		}
+	});
+
+	return BoxView;
+
+})(jQuery, Spontaneous);
+

data/application/js/views/page_piece_view.js

@@ -0,0 +1,45 @@
+// console.log('Loading PageEntry...')
+
+Spontaneous.Views.PagePieceView = (function($, S) {
+	var dom = S.Dom;
+
+	var PagePieceView = new JS.Class(Spontaneous.Views.PieceView, {
+		// will eventually overwrite panel()
+		panel: function() {
+			var wrapper = dom.div(['entry-wrap page no-boxes', this.depth_class(), this.visibility_class()])
+			var contents = dom.div('.entry-contents');
+			var inside = dom.div('.entry-inner');
+			var outline = dom.div('.white-bg').mouseover(this.mouseover.bind(this)).mouseout(this.mouseout.bind(this)).click(this.edit.bind(this))
+			inside.append(outline)
+			contents.append(this.title_bar(contents));
+			if (this.content.type().is_alias()) {
+				contents.append(this.alias_target_panel());
+			}
+
+			contents.append(this.page_title_panel());
+			var entry = dom.div('.entry');
+			var fields = new Spontaneous.FieldPreview(this, '');
+			var fields_panel = fields.panel();
+			entry.append(fields_panel);
+			inside.append(entry);
+			var preview_area = this.create_edit_wrapper(inside);
+			contents.append(preview_area);
+			wrapper.append(contents, dom.div('.entry-spacer'));
+			this.wrapper = wrapper;
+			this.outline = outline;
+			this.fields_preview = fields_panel;
+			return wrapper;
+		},
+		page_title_panel: function() {
+			var wrapper = dom.div('.page-title'),
+			__content = this,
+			title = dom.a().text(this.content.title()).click(function() {
+				S.Location.load_id(__content.id());
+			});
+			this.content.title_field().watch('value', function(t) { title.text(t); }.bind(this));
+			wrapper.append(title);
+			return wrapper;
+		}
+	});
+	return PagePieceView;
+}(jQuery, Spontaneous));

data/application/js/views/page_view.js

@@ -0,0 +1,238 @@
+// console.log('Loading Page...')
+
+Spontaneous.Views.PageView = (function($, S) {
+	var dom = S.Dom, user = S.User;
+
+	var FunctionBar = function(page) {
+		this.page = page;
+	};
+	FunctionBar.prototype = {
+		panel: function() {
+			this.panel = dom.div('#page-info');
+			this.title = $('<h1/>');
+			this.set_title();
+			this.panel.append(this.title);
+			var path_wrap = dom.div('.path');
+
+			this.page.title_field().watch('value', function(t) {
+				this.set_title(t);
+			}.bind(this));
+
+			var path_text = dom.h3('.path').text(this.page.get('path')).click(function() {
+				if (this.page.get('path') !== '/') {
+					this.open_url_editor();
+				}
+			}.bind(this));
+			path_wrap.append(path_text);
+
+
+			if (user.is_developer()) {
+				var uid_text = dom.h3('.developer.uid' + (!this.page.content.uid ? '.missing' : '')).text('#' + (this.page.content.uid || "----")).click(function() {
+					this.open_uid_editor();
+				}.bind(this));
+				var dev_desc = dom.h3('.developer').append(dom.a().attr('href', this.page.developer_edit_url()).text(this.page.developer_description()));
+				path_wrap.append(uid_text, dev_desc);
+			}
+
+			path_wrap.append(dom.div('.edit'));
+
+			this.page.watch('path', function(path) {
+				path_text.text(path);
+			}.bind(this));
+
+			this.panel.append(path_wrap);
+			this.path_wrap = path_wrap
+			return this.panel;
+		},
+		set_title: function(title) {
+			title = title || this.page.title();
+			this.title.text(title);
+			if (this.page.content.hidden) {
+				this.title.append(dom.span().text(' (hidden)'));
+			}
+		},
+		unavailable_loaded: function(response) {
+			var u = {};
+			for (var i = 0, ii = response.length; i < ii; i++) {
+				u[response[i]] = true;
+			}
+			this.unavailable = u;
+		},
+		open_uid_editor: function() {
+			this.panel.animate({'height': '+=14'}, 200, function() {
+				var view = $('h3', this.panel), edit = $('.edit', this.panel);
+				view.hide();
+				edit.hide().empty();
+				var input = dom.input({'type':'text', 'autofocus':'autofocus'}).val(this.page.content.uid).select();
+				var input_and_error = dom.div('.input-error.uid-input');
+				var hash = dom.div('.hash').text('#');
+				var label = dom.label().text('UID');
+				var submit = function() {
+					this.save_uid(input.val());
+				}.bind(this);
+				input_and_error.append(hash, input);
+				edit.append(label, input_and_error);
+				edit.append(dom.a('.button.save').text('Save').click(submit));
+				edit.append(dom.a('.button.cancel').text('Cancel').click(this.close.bind(this)));
+				input.keyup(function(event) {
+					if (event.keyCode === 13) {
+						submit();
+					} else {
+						var v = input.val();
+						// do some basic cleanup -- proper cleanup is done on the server-side
+						v = v.toLowerCase().replace(/['"]/g, '');
+						v = v.replace(/[^a-z0-9_]/g, '_').replace(/(\_+|\s+)/g, '_').replace(/(^\-)/, '');
+						input.val(v);
+					}
+				}.bind(this)).keydown(function(event) {
+					if (event.keyCode === 27) { this.close(); }
+				}.bind(this));
+				edit.fadeIn(200);
+			}.bind(this));
+		},
+		save_uid: function(uid) {
+			Spontaneous.Ajax.post('/uid/'+this.page.id(), {'uid':uid}, this.uid_save_complete.bind(this));
+		},
+		uid_save_complete: function(response, status, xhr) {
+			if (status === 'success') {
+				var view = $('h3.uid', this.panel), edit = $('.edit', this.panel), uid = (response.uid == "" ? "----" : response.uid);
+				// nasty but the value is only used for display
+				this.page.content.uid = response.uid;
+				view.text('#'+uid);
+				this.close();
+			}
+		},
+		open_url_editor: function() {
+			this.unavailable = false;
+			Spontaneous.Ajax.get(['/slug', this.page.id(), 'unavailable'].join('/'), this.unavailable_loaded.bind(this));
+			this.panel.animate({'height': '+=14'}, 200, function() {
+				var view = $('h3', this.panel), edit = $('.edit', this.panel);
+				view.hide();
+				edit.hide().empty();
+				var path = [""], parts = this.page.get('path').split('/'), slug = parts.pop();
+				parts.shift(); // remove empty entry caused by leading '/'
+				edit.append(dom.span().text('/'))
+				for (var i = 0, ii = parts.length; i < ii; i++) {
+					var p = parts[i];
+					path.push(p)
+					edit.append(dom.a('.path').text(p).attr('href', path.join('/')).click(function() {
+						S.Location.load_path($(this).attr('href'));
+						return false;
+					}));
+					edit.append(dom.span().text('/'));
+				}
+				var input_and_error = dom.span('.input-error');
+				var input = dom.input({'type':'text', 'autofocus':'autofocus'}).val(slug).select();
+				var error = dom.span().text('Duplicate URL').hide();
+				input_and_error.append(input);
+				input_and_error.append(error);
+				edit.append(input_and_error);
+				var submit = function() {
+					this.save(input.val());
+				}.bind(this);
+				edit.append(dom.a('.button.save').text('Save').click(submit));
+				edit.append(dom.a('.button.cancel').text('Cancel').click(this.close.bind(this)));
+				input.keyup(function(event) {
+					if (event.keyCode === 13) {
+						submit();
+					} else {
+						var v = this.input.val();
+						// do some basic cleanup -- proper cleanup is done on the server-side
+						v = v.toLowerCase().replace(/['"]/g, '').replace(/\&/, 'and');
+						v = v.replace(/[^\w0-9+]/g, '-').replace(/(\-+|\s+)/g, '-').replace(/(^\-)/, '');
+						this.input.val(v);
+						if (v === '') {
+								this.show_path_error('Invalid URL');
+						} else {
+							if (this.unavailable[v]) {
+								this.show_path_error();
+							} else {
+								this.hide_path_error();
+							}
+						}
+					}
+				}.bind(this)).keydown(function(event) {
+					if (event.keyCode === 27) { this.close(); }
+				}.bind(this));
+				this.input = input;
+				this.error = error;
+				edit.fadeIn(200);
+			}.bind(this));
+		},
+		show_path_error: function(error_text) {
+			error_text = (error_text || "Duplicate URL");
+			this.error.text(error_text).fadeIn(100);
+			this.input.addClass('error');
+		},
+		hide_path_error: function(error_text) {
+			this.error.fadeOut(100);
+			if (this.input.hasClass('error')) { this.input.removeClass('error'); }
+		},
+		save: function(slug) {
+			Spontaneous.Ajax.post('/slug/'+this.page.id(), {'slug':slug}, this.save_complete.bind(this));
+		},
+
+		save_complete: function(response, status, xhr) {
+			if (status === 'success') {
+				this.hide_path_error();
+				var view = $('h3.path', this.panel), edit = $('.edit', this.panel);
+				this.page.set('path', response.path);
+				view.text(response.path);
+				this.close();
+				// HACK: see preview.js (Preview.display)
+				Spontaneous.Location.set('path', this.page.get('path'))
+			} else {
+				if (xhr.status === 409) { // duplicate path
+					this.show_path_error();
+				}
+				if (xhr.status === 406) { // empty path
+					this.show_path_error('Invalid URL');
+				}
+			}
+		},
+		close: function() {
+			var view = $('h3', this.panel), edit = $('.edit', this.panel);
+			view.show();
+			edit.hide();
+			this.panel.animate({'height': '-=14'}, 200)
+		}
+	};
+	var PageView = new JS.Class(Spontaneous.Views.View, {
+		initialize: function(page) {
+			this.page = page;
+			this.callSuper(page);
+		},
+
+		panel: function() {
+			this.panel = dom.div('#page-content');
+			this.panel.append(new FunctionBar(this.page).panel());
+
+			var fields = dom.div('#page-fields')
+			var fp = new Spontaneous.FieldPreview(this, '');
+			var p = fp.panel();
+			p.prepend(dom.div('.overlay'))
+
+			var preview_area = this.create_edit_wrapper(p);
+			fields.append(preview_area)
+			this.panel.append(fields);
+			this.panel.append(new Spontaneous.BoxContainer(this.page, 'page-slots').panel());
+			this.fields_preview = p;
+			return this.panel;
+		},
+		mouseover: function() {
+			if (this.fields_preview) {
+				this.fields_preview.addClass('hover');
+			}
+		},
+		mouseout: function() {
+			if (this.fields_preview) {
+				this.fields_preview.removeClass('hover');
+			}
+		},
+		depth: function() {
+			return this.page.depth();
+		}
+	});
+
+	return PageView;
+}(jQuery, Spontaneous));

data/application/js/views/piece_view.js

@@ -0,0 +1,178 @@
+// console.log('Loading PieceView...')
+
+Spontaneous.Views.PieceView = (function($, S) {
+	var dom = S.Dom, user = S.User;
+	var debug = 0;
+
+	var ConfirmDeletePopup = new JS.Class(Spontaneous.PopoverView, {
+		initialize: function(parent_view) {
+			this.parent_view = parent_view;
+		},
+		width: function() {
+			return 208;
+		},
+		align: 'right',
+		has_navigation: false,
+		close_text: function() {
+			return false;
+		},
+		title: function() {
+			return "Delete this " + (this.parent_view.content.is_page() ? "Page?" : "Piece?");
+		},
+		position_from_event: function(event) {
+			return this.position_from_element(event);
+		},
+		view: function() {
+			var __entry = this.parent_view;
+			var w = dom.div('#popover-delete').click(function() {
+				__entry.cancel_destroy();
+				return false;
+			});
+
+			var ok = dom.a('.ok').text("Delete").click(function() {
+				__entry.destroy();
+				return false;
+			});
+			var cancel = dom.a('.cancel').text("Cancel");
+			w.append(cancel, ok)
+			return w;
+		}
+	});
+
+	var PieceView = new JS.Class(S.Views.View, {
+		initialize: function(content, container) {
+			this.callSuper(content);
+			this.container = container;
+		},
+		panel: function() {
+			var wrapper = dom.div(['entry-wrap', this.depth_class(), this.visibility_class(), this.boxes_class()])
+			var contents = dom.div('.entry-contents');
+			var inside = dom.div('.entry-inner');
+			var outline = dom.div('.white-bg').mouseover(this.mouseover.bind(this)).mouseout(this.mouseout.bind(this)).click(this.edit.bind(this))
+			inside.append(outline)
+			if (this.content.depth() < 4) {
+				inside.append(dom.div('.grey-bg'));
+			}
+
+			contents.append(this.title_bar(contents));
+			if (this.content.type().is_alias()) {
+				contents.append(this.alias_target_panel());
+			}
+			// this.dialogue_box = $(dom.div, {'class':'dialogue', 'style':'display: none'});
+			// contents.append(this.dialogue_box);
+			var entry = dom.div('.entry');
+			var fields = new Spontaneous.FieldPreview(this, '');
+			if (fields.has_fields()) {
+				var fields_panel = fields.panel();
+				entry.append(fields_panel);
+			}
+			var box_container = new Spontaneous.BoxContainer(this.content);
+			inside.append(entry);
+			inside.append(box_container.panel());
+			var preview_area = this.create_edit_wrapper(inside);
+			contents.append(preview_area);
+			wrapper.append(contents, dom.div('.entry-spacer'));
+			this.wrapper = wrapper;
+			this.outline = outline;
+			this.fields_preview = fields_panel;
+			return wrapper;
+		},
+
+		alias_target_panel: function() {
+			var content = this.content,
+			wrap = dom.div('.alias-target'),
+			icon = content.alias_icon,
+			click = function() { S.Location.load_id(content.target().id); },
+			title = dom.a().text(content.content.alias_title).click(click);
+
+
+			if (icon) {
+				var img = new Spontaneous.Image(icon);
+				wrap.append(img.icon(60, 60).click(click))
+			}
+
+			return wrap.append(title)
+		},
+		title_bar: function(wrapper) {
+			if (!this._title_bar) {
+				var label = user.is_developer() ? dom.a('.developer.source').attr('href', this.content.developer_edit_url()).text(this.content.developer_description()) : (this.content.type().title);
+				var title_bar = dom.div('.title-bar').append(label);
+				var actions = dom.div('.actions', {'xstyle':'display: none'});
+				var destroy = dom.a('.delete');
+				var visibility = dom.a('.visibility');
+				actions.append(destroy);
+				actions.append(visibility);
+				title_bar.append(actions);
+				var _hide_pause;
+				// wrapper.mouseenter(function() {
+				// 	if (_hide_pause) { window.clearTimeout(_hide_pause); }
+				// 	actions.slideDown(50);
+				// }).mouseleave(function() {
+				// 	_hide_pause = window.setTimeout(function() { actions.slideUp(100) }, 200);
+				// });
+				destroy.click(this.confirm_destroy.bind(this));
+				this.content.watch('hidden', this.visibility_changed.bind(this));
+				visibility.click(this.toggle_visibility.bind(this));
+				this._title_bar = title_bar;
+			}
+			return this._title_bar;
+		},
+		reposition: function(position, callback) {
+			this.content.bind('repositioned', callback);
+			this.content.reposition(position);
+		},
+		toggle_visibility: function() {
+			this.content.toggle_visibility();
+		},
+		visibility_changed: function(hidden) {
+			var duration = 200;
+			this.wrapper.removeClass('visible hidden');
+			if (hidden) {
+				this.wrapper.switchClass('visible', 'hidden', duration);
+			} else {
+				this.wrapper.switchClass('hidden', 'visible', duration);
+			}
+		},
+		mouseover: function() {
+			this.outline.addClass('active');
+			if (this.fields_preview) {
+				this.fields_preview.addClass('hover');
+			}
+		},
+		mouseout: function() {
+			this.outline.removeClass('active');
+			if (this.fields_preview) {
+				this.fields_preview.removeClass('hover');
+			}
+		},
+		confirm_destroy: function() {
+			if (this._dialogue && !this._dialogue.is_open) { this.close_destroy_dialogue(); }
+			if (!this._dialogue) {
+				this._dialogue = Spontaneous.Popover.open(event, new ConfirmDeletePopup(this));
+			} else {
+				this.close_destroy_dialogue();
+			}
+		},
+		destroy: function() {
+			this.close_destroy_dialogue();
+			this.content.bind('destroyed', this.destroyed.bind(this));
+			this.content.destroy();
+		},
+		cancel_destroy: function() {
+			this.close_destroy_dialogue();
+		},
+		close_destroy_dialogue: function() {
+			if (this._dialogue) {
+				this._dialogue.close();
+				this._dialogue = null;
+			}
+		},
+		destroyed: function() {
+			this.wrapper.disappear(function() {
+				this.wrapper.remove();
+			}.bind(this));
+		}
+	});
+	return PieceView;
+}(jQuery, Spontaneous));
+