spontaneous 0.1.0.alpha1 → 0.2.0.alpha1

data/application/js/add_alias_dialogue.js

@@ -3,10 +3,11 @@ Spontaneous.AddAliasDialogue = (function($, S) {
 	var dom = S.Dom, Dialogue = Spontaneous.Dialogue;
 
 	var AddAliasDialogue = new JS.Class(Dialogue, {
-		initialize: function(box_view, type) {
+		initialize: function(box_view, type, position) {
 			this.box_view = box_view;
 			this.box_view.bind('entry_added', this.alias_added.bind(this))
 			this.type = type;
+			this.insert_position = position;
 		},
 		title: function() {
 			return 'Add alias to “' + this.box_view.name() + '”';
@@ -22,7 +23,7 @@ Spontaneous.AddAliasDialogue = (function($, S) {
 		},
 		add_alias: function() {
 			if (this.target) {
-				this.box_view.add_alias(this.target.id, this.type)
+				this.box_view.add_alias(this.target.id, this.type, this.insert_position);
 			}
 		},
 		alias_added: function() {
@@ -31,20 +32,29 @@ Spontaneous.AddAliasDialogue = (function($, S) {
 		select_target: function(target) {
 			this.target = target;
 		},
+		box_owner: function() {
+			return this.box_view.box.container;
+		},
+		box: function() {
+			return this.box_view.box;
+		},
 		body: function() {
-			var editing = dom.div('#add-alias-dialogue'), outer = dom.div(), instructions = dom.p('.instructions'),
-				targets = this.targets, __dialogue = this;
-			instructions.html("Choose a target:")
-			editing.append(instructions, outer)
-			Spontaneous.Ajax.get(['/targets', this.type.schema_id].join('/'), this.targets_loaded.bind(this));
+			var editing = dom.div('#add-alias-dialogue')
+				, outer = dom.div()
+				, instructions = dom.p('.instructions')
+				, __dialogue = this;
+			instructions.html("Choose a target:");
+			editing.append(instructions, outer);
+			Spontaneous.Ajax.get(['/targets', this.type.schema_id, this.box().id()].join('/'), this.targets_loaded.bind(this));
 			this._outer = outer;
 			return editing;
 		},
+
 		targets_loaded: function(targets) {
 			var outer = this._outer, __dialogue = this;
 			this.targets = targets;
 			$.each(targets, function(i, target) {
-				var d = dom.div('.type').text(target.title).click(function() {
+				var d = dom.div('.type').html(target.title).click(function() {
 					$('.type', outer).removeClass('selected');
 					__dialogue.select_target(target);
 					$(this).addClass('selected');;

data/application/js/ajax.js

@@ -37,7 +37,7 @@ Spontaneous.Ajax = (function($, S) {
 			};
 			post_data = $.extend(post_data, this.api_access_key());
 			$.ajax({
-				'url': this.request_url(url),
+				'url': this.request_url(url, true),
 				'type': 'post',
 				'data': post_data,
 				'success': success,

data/application/js/authentication.js

@@ -10,7 +10,14 @@ Spontaneous.Auth = (function($, S) {
 				localStorage.setItem(this.key(site), key);
 			},
 			load: function(site) {
-				return localStorage.getItem(this.key(site));
+				return localStorage.getItem(this.key(site)) || this.loadAutoLogin();
+			},
+			loadAutoLogin: function() {
+				if (!this._autoLoginKey) {
+					console.warn("Using auto login key for user", "'"+S.auto_login+"'");
+					this._autoLoginKey = S.user_key;
+				}
+				return this._autoLoginKey;
 			},
 			remove: function(site) {
 				localStorage.removeItem(this.key(site));

data/application/js/box.js

@@ -8,6 +8,12 @@ Spontaneous.Box = (function($, S) {
 		initialize: function(content, container) {
 			this.callSuper(content);
 			this.container = container;
+			var box = this;
+			$.each(this.entries(), function(index, entry) {
+				entry.bind('destroyed', function(entry) {
+					box.entry_removed(entry);
+				});
+			});
 		},
 
 		name: function() {
@@ -36,7 +42,7 @@ Spontaneous.Box = (function($, S) {
 		mouseover: function() {
 			if (this.fields_preview) {
 				this.fields_preview.addClass('hover');
-			}
+			};
 		},
 		mouseout: function() {
 			if (this.fields_preview) {
@@ -75,22 +81,46 @@ Spontaneous.Box = (function($, S) {
 		},
 
 		add_entry: function(type, position) {
-			Spontaneous.Ajax.post(['/add', this.id(), type.schema_id].join('/'), {}, this.entry_added.bind(this));
+			Spontaneous.Ajax.post(['/add', this.id(), type.schema_id].join('/'), {position: position}, this.entry_added.bind(this));
 		},
 
-		add_alias: function(alias_target_id, type) {
-			S.Ajax.post(["/alias", this.id()].join("/"), {'alias_id':type.schema_id, 'target_id':alias_target_id}, this.entry_added.bind(this));
+		add_alias: function(alias_target_id, type, position) {
+			S.Ajax.post(["/alias", this.id()].join("/"), {'alias_id':type.schema_id, 'target_id':alias_target_id, 'position':position}, this.entry_added.bind(this));
 		},
 
 		entry_added: function(result) {
-			var position = result.position, e = result.entry, entry = this.wrap_entry(e);
-			this.content.entries.splice(position, 0, e);
-			this.entries().splice(position, 0, entry);
+			var box = this
+			,position = result.position
+			, e = result.entry
+			, entry = this.wrap_entry(e);
+
+			entry.bind('destroyed', function(entry) {
+				box.entry_removed(entry);
+		 	});
+			if (position === -1) {
+				this.content.entries.push(e);
+				this.entries().push(entry);
+			} else {
+				this.content.entries.splice(position, 0, e);
+				this.entries().splice(position, 0, entry);
+			}
 			var page = S.Editing.get('page');
 			page.trigger('entry_added', entry, position);
 			this.trigger('entry_added', entry, position);
 		},
 
+		entry_removed: function(entry) {
+			var entries = this.entries(), position = 0;
+			for (var i = 0, ii = entries.length; i < ii; i++) {
+				if (entries[i].id() == entry.id()) {
+					position = i;
+					break;
+				}
+			}
+			entries.splice(position, 1);
+			this.trigger('entry_removed', entry);
+		},
+
 		save_path: function() {
 			return ['/savebox', this.id()].join('/');
 		},

data/application/js/box_container.js

@@ -8,7 +8,7 @@ Spontaneous.BoxContainer = (function($, S) {
 		initialize: function(content, wrap_id) {
 			this.callSuper(content);
 			this.wrap_id = wrap_id;
-			this.box_content_container = dom.div();
+			this.box_content_container = dom.div('.slot-content-wrapper');
 		},
 
 		panel: function() {

data/application/js/compatibility.js

@@ -7,6 +7,10 @@
 
 // many thanks to modernizer for working a lot of this out
 // should probably just use it instead...
+// this does two things:
+// 1. Check that the current browser supports the core HTML5 feature set,
+// 2. Regularise access to the various APIs, removing vendor prefixes and providing the spec defined methods
+// 3. Add some useful CSS-visible attributes to the HTML element
 (function() {
 	var _window = window, _document = document;
 	var prefixes = ' -webkit- -moz- -o- -ms- -khtml- '.split(' ');
@@ -126,6 +130,9 @@
 			throw "Local Storage not supported"
 		}
 
+		var b = _document.documentElement;
+		b.setAttribute('data-useragent',  navigator.userAgent);
+		b.setAttribute('data-platform', navigator.platform );
 	} catch (e) {
 		_window.location.href = "/@spontaneous/unsupported?msg=" + _window.encodeURI(e);
 	}

data/application/js/content.js

@@ -33,6 +33,10 @@ Spontaneous.Content = (function($, S) {
 			return S.Types.type(this.content.type);
 		}.cache(),
 
+		slug: function() {
+			return this.content.slug;
+		},
+
 		constantize: function(type) {
 			var parts = type.split(/\./), obj = window;
 			for (var i = 0, ii = parts.length; i < ii; i++) {
@@ -46,6 +50,9 @@ Spontaneous.Content = (function($, S) {
 			$.each(this.entries(), function(i, e) { e.unload(); });
 		},
 
+		has_fields: function() {
+			return this.field_list().length > 0;
+		},
 		field_list: function() {
 			var type = this.type(), prototypes = type.field_prototypes, names = type.field_names;
 			var fields = this.fields(), list = [];

data/application/js/content_area.js

@@ -37,6 +37,10 @@ Spontaneous.ContentArea = (function($, S) {
 		},
 		goto_page: function(page) {
 			this.current().goto_page(page);
+		},
+		scroll_to_bottom: function(duration, delay) {
+
+			this.wrap.delay(delay || 0).animate({ scrollTop:this.wrap[0].scrollHeight }, (duration || 1000));
 		}
 	});
 	return ContentArea;

data/application/js/edit_panel.js

@@ -27,9 +27,7 @@ Spontaneous.EditPanel = (function($, S) {
 
 		save: function() {
 			var fields = this.parent_view.field_list();
-			console.log('save', fields)
 			S.Ajax.test_field_versions(this.parent_view, fields, this.upload_values.bind(this), this.upload_conflict.bind(this));
-
 			return false;
 		},
 
@@ -129,13 +127,14 @@ Spontaneous.EditPanel = (function($, S) {
 				if (class_name) { toolbar.addClass(class_name); }
 				return toolbar;
 			};
-			var editing = dom.form(['.editing-panel', this.parent_view.depth_class()], {'enctype':'multipart/form-data', 'method':'post'})
+			var editing = dom.form(['.editing-panel', this.parent_view.depth_class()], {'enctype':'multipart/form-data', 'accept-charset':'UTF-8', 'method':'post'})
 			var toolbar = get_toolbar();
 			var outer = dom.div('.editing-fields');
 			var text_field_wrap = dom.div('.field-group.text');
 			var image_field_wrap = dom.div('.field-group.image');
 			var text_fields = this.parent_view.text_fields();
 			var submit = dom.input({'type':'submit'});
+			var __dialogue = this;
 			editing.append(toolbar);
 			for (var i = 0, ii = text_fields.length; i < ii; i++) {
 				var field = text_fields[i];
@@ -148,7 +147,7 @@ Spontaneous.EditPanel = (function($, S) {
 
 			for (var i = 0, ii = image_fields.length; i < ii; i++) {
 				var field = image_fields[i];
-				image_field_wrap.append(this.field_edit(field));
+				image_field_wrap.append(this.field_edit(field).click(function() { __dialogue.field_focus(this); }));
 			}
 			if (image_fields.length > 0) {
 				outer.append(image_field_wrap);
@@ -157,16 +156,20 @@ Spontaneous.EditPanel = (function($, S) {
 			editing.append(outer);
 			editing.append(dom.div('.clear'));
 			editing.append(get_toolbar('bottom'));
-			__dialogue = this;
 			// activate the highlighting
 			$('input, textarea', editing).focus(function() {
 				__dialogue.field_focus(this);
 			}).blur(function() {
-				// $(this).parents('.field').first().removeClass('focus');
+				__dialogue.field_blur(this);
 			});
 			editing.submit(this.save.bind(this));
 			this.form = editing;
-			$(':input', this.form).add(document).bind('keydown.savedialog', function(event) {
+			$(':input', this.form).keydown(function(event) {
+				if (event.keyCode === 9) { // TAB
+					__dialogue.tab_to_next(this, event.shiftKey);
+					return false;
+				}
+			}).add(document).bind('keydown.savedialog', function(event) {
 				var s_key = 83, esc_key = 27;
 				if ((event.ctrlKey || event.metaKey) && event.keyCode === s_key) {
 					this.save();
@@ -179,6 +182,21 @@ Spontaneous.EditPanel = (function($, S) {
 			}.bind(this));
 			return this.form;
 		},
+		tab_to_next: function(input, upwards) {
+			var active_field = $(input).data('field')
+			, text_fields = this.parent_view.text_fields(), position = 0, next_position, next_field
+			, direction = upwards ? -1 : 1;
+			for (var i = 0, ii = text_fields.length; i < ii; i++) {
+				if (text_fields[i] === active_field) {
+					position = i;
+					break;
+				}
+			}
+			next_position = (position + direction) % text_fields.length;
+			if (next_position === -1) { next_position = text_fields.length - 1; }
+			next_field = text_fields[next_position];
+			next_field.input().focus();
+		},
 		on_show: function(focus_field) {
 			if (!focus_field || !(focus_field['focus']) || !focus_field.accepts_focus) { focus_field = null; }
 			var focus_field = focus_field || this.parent_view.text_fields()[0];
@@ -187,23 +205,31 @@ Spontaneous.EditPanel = (function($, S) {
 			}
 		},
 		field_focus: function(input) {
-			var text_fields = this.parent_view.text_fields(), active_field = false;
-			for (var i = 0, ii = text_fields.length; i < ii; i++) {
-				var field = text_fields[i];
-				if (field.input()[0] === input) {
-					active_field = field;
-					break;
-				}
-			}
+			var active_field = $(input).data('field')
 			if (active_field === this.active_field) { return; }
-			if (this.active_field) {
-				this.active_field.on_blur();
-			}
 			if (active_field) {
 				this.active_field = active_field;
 				this.active_field.on_focus();
 			}
 		},
+		field_blur: function(input) {
+			var active_field = $(input).data('field')
+			if (active_field) {
+				active_field.on_blur();
+			}
+			if (active_field === this.active_field) {
+				this.active_field = null;
+		 	}
+		},
+		field_from_input: function(input_element) {
+			var text_fields = this.parent_view.text_fields(), active_field = false;
+			for (var i = 0, ii = text_fields.length; i < ii; i++) {
+				var field = text_fields[i];
+				if (field.input()[0] === input_element) {
+					return field;
+				}
+			}
+		},
 		field_edit: function(field) {
 			var d = dom.div('.field');
 			// d.append($(dom.label, {'class':'name', 'for':field.css_id()}).html(field.label()));

data/application/js/editing.js

@@ -25,12 +25,24 @@ Spontaneous.Editing = (function($, S) {
 			var page = this.get('page');
 			if (page) { page.unload(); }
 			page = new Page(page_data);
+			page.watch('path', this.path_updated.bind(this));
 			view = new S.Views.PageView(page);
 			this.container.empty();
 			this.container.append(view.panel());
 			this.set('page', page);
 			this.container.fadeIn(300);
 		},
+		path_updated: function(path) {
+			this.set('path', path);
+		},
+		path: function() {
+			var path = this.get('path');
+			if (path) {
+				return path;
+			} else {
+				return this.get('page').get('path');
+			}
+		},
 		hide: function() {
 			this.container.hide();
 		},

data/application/js/event_source.js

@@ -0,0 +1,17 @@
+// console.log("Loading TopBar...")
+
+Spontaneous.EventSource = (function($, S) {
+	var EventSource = new JS.Singleton({
+		eventSource: function() {
+			if (!this._eventSource) {
+				this._eventSource = new window.EventSource(S.Ajax.request_url('/events', true));
+			}
+			return this._eventSource;
+		},
+
+		addEventListener: function(event, callback) {
+			this.eventSource().addEventListener(event, callback);
+		}
+	});
+	return EventSource;
+})(jQuery, Spontaneous);

data/application/js/extensions.js

@@ -89,6 +89,8 @@ function $A(iterable) {
 		}
 	};
 
+	$.fn.appear.height_change_duration = height_change_duration;
+
 	$.fn.disappear = function(callback) {
 		var $this = this;
 		this.animate({'opacity':0}, {

data/application/js/field_types/file_field.js

@@ -14,7 +14,8 @@ Spontaneous.FieldTypes.FileField = (function($, S) {
 			Spontaneous.UploadManager.unregister(this);
 		},
 		upload_complete: function(values) {
-			console.log('upload complete', values)
+			console.log('FileField#upload_complete', values)
+			this.set('value', values.processed_value);
 			this.set_version(values.version);
 			this.selected_files = null;
 			this.disable_progress();

data/application/js/field_types/image_field.js

@@ -50,9 +50,6 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 			return this._progress_bar;
 		},
 
-		upload_complete: function(values) {
-			this.callSuper(values);
-		},
 
 		upload_progress: function(position, total) {
 			this.spinner().stop();
@@ -62,26 +59,26 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 
 		preview: function() {
 			Spontaneous.UploadManager.register(this);
+			var value = this.get('value').original, src = value.src, img = null, dim = 45;
 
-			var value = this.get('value'), img = null, dim = 45;
-
-			if (value === "") {
+			if (src === "") {
 				img = dom.img('.missing-image', {'src':'/@spontaneous/static/px.gif'});
 			} else {
-				img = dom.img({'src':value});
+				img = dom.img();
+				img.load(function() {
+					var r = this.width/this.height, $this = $(this), h = $this.height(), dh = 0;
+					if (r >= 1 && h <= dim) { // landscape -- fit image vertically
+						var dh = (dim - h)/2;
+					}
+					$this.css('top', dom.px(dh));
+				});
+				img.attr({'src':src});
 			}
 
 			img.error(function() {
 				$(this).addClass('missing');
 			});
 
-			img.load(function() {
-				var r = this.width/this.height, $this = $(this), h = $this.height(), dh = 0;
-				if (r >= 1 && h <= dim) { // landscape -- fit image vertically
-					var dh = (dim - h)/2;
-				}
-				$this.css('top', dom.px(dh));
-			});
 			this.image = img;
 
 			var outer = dom.div('.image-outer');
@@ -152,7 +149,6 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 			S.UploadManager.replace(this, file);
 		},
 		upload_conflict: function(conflict_data) {
-			console.log('conflicted_fields', conflict_data)
 			var dialogue = new S.ConflictedFieldDialogue(this, conflict_data);
 			dialogue.open();
 		},
@@ -182,26 +178,20 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 			return this._spinner;
 		},
 		upload_complete: function(values) {
+
 			this.callSuper(values)
 			if (values) {
-				console.log('upload complete', values)
-				this.set('value', values.src);
+				var value = this.value().original;
 				if (this.image) {
 					var img = new Image()
 					img.onload = function() {
-						this.image.attr('src', values.src);
+						this.image.attr('src', value.src);
 					}.bind(this);
-					img.src = values.src;
+					img.src = value.src;
 				}
 			}
 		},
-		// upload_progress: function(position, total) {
-		// 	this.progress_bar.css('width', ((position/total)*100) + '%');
-		// 	if (position === total) {
-		// 		this.drop_target.removeClass('uploading')
-		// 		this.progress_bar.parent().remove();
-		// 	}
-		// },
+
 		width: function() {
 			if (this.data.values && this.data.values.original) {
 				return this.data.values.original.width;
@@ -215,21 +205,18 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 			return 0;
 		},
 		edit: function() {
-			var wrap = dom.div({'style':'position:relative;'});
-			var src = this.value();
-			var img = dom.img({'src':src}).load(function() {
-				// doesn't work because it returns the size of the HTML element
-				// (as constrained by CSS)
-				// rather than the size of the source image
-				// set_dimensions(this.width, this.height);
-				if (this.width >= this.height) {
-					wrap.addClass('landscape');
-				} else {
-					wrap.removeClass('landscape');
-				}
-			});
+			var wrap = dom.div({'style':'position:relative;'}),
+				value = this.value().original,
+				src = value.src,
+				img = dom.img({'src':src}),
+				info, sizes, filename_info, filesize_info, dimensions_info;
+
+			if (value.width >= value.height) {
+				wrap.addClass('landscape');
+			} else {
+				wrap.removeClass('landscape');
+			}
 
-			var info, sizes, filesize_info, dimensions_info;
 			info = dom.div('.info');
 			sizes = dom.div('.sizes');
 			filename_info = dom.div('.filename');
@@ -249,7 +236,9 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 
 			var set_info = function(filename, filesize, width, height) {
 				filename_info.text(filename);
-				filesize_info.text(parseFloat(filesize, 10).to_filesize());
+				if (filesize) {
+					filesize_info.text(parseFloat(filesize, 10).to_filesize());
+				}
 				set_dimensions(width, height);
 			};
 
@@ -282,8 +271,6 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 			var dropper = dom.div('.image-drop').click(onclick);
 
 			var actions = dom.div('.actions');
-			var attr = this.data.values.original;
-			// var change = $(dom.a, {'class':'button change'}).text('Change').click(onclick);
 			// var clear = dom.a('.button.clear').text('Clear');
 			actions.append(input)//.append(clear);
 			wrap.append(dropper);
@@ -323,9 +310,9 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 
 			wrap.append(img, actions, info);
 
-			if (attr) {
-				var s = attr.src.split('/'), filename = s[s.length - 1];
-				set_info(filename, attr.filesize, attr.width, attr.height);
+			if (value) {
+				var s = value.src.split('/'), filename = s[s.length - 1];
+				set_info(filename, value.filesize, value.width, value.height);
 			}
 			this.preview_img = img;
 			return wrap;
@@ -335,13 +322,13 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 			return this.input().val();
 		},
 		cancel_edit: function() {
-			this.image.attr('src', this.get('value'));
+			this.image.attr('src', this.original_value().src);
 		},
 		conflict_view: function(dialogue, conflict) {
 			return new ImageFieldConflictView(dialogue, conflict);
 		},
 		original_value: function() {
-			return this.value();
+			return this.value().original;
 		},
 		edited_value: function() {
 			return this._edited_value;