spontaneous 0.1.0.alpha1

data/application/js/field_types/string_field.js

@@ -0,0 +1,185 @@
+// console.log('Loading StringField...')
+Spontaneous.FieldTypes.StringField = (function($, S) {
+	var dom = S.Dom;
+	var StringFieldConflictView = new JS.Class({
+		initialize: function(dialogue, conflict) {
+			this.dialogue = dialogue;
+			this.conflict = conflict;
+			this.server_version = conflict.version;
+			this.values = conflict.values;
+			this.differ = new S.Diff();
+		},
+		panel: function() {
+			var labels = dom.div('.string-field-conflict.labels.differences'), outer = dom.div(), diff_outer = dom.div('.string-field-conflict.changes.differences'), local_diff = dom.div('.original.diff'), computed_diff = dom.div('.final.diff');
+			var local_diff_label = dom.div('.diff').text("Changes made by other person");
+			var final_diff_label = dom.div('.diff').text("Their changes merged with yours");
+			var server_change = this.diff(this.values.local_original, this.values.server_original);
+			var local_change = this.diff(this.values.local_original, this.values.local_edited);
+			var merge = this.differ.patch_apply(local_change.patches, this.values.server_original);
+			var merge_change = this.diff(this.values.local_original, merge[0]);
+			var local_mods = this.differ.diff_prettyHtml(server_change.diff);
+			var merge_mods = this.differ.diff_prettyHtml(merge_change.diff);
+
+			local_diff.append(local_mods).click(function() {
+				this.useValue(this.values.server_original);
+				local_diff.add(computed_diff).removeClass('selected');
+				local_diff.addClass('selected');
+			}.bind(this));
+
+			computed_diff.append(merge_mods).click(function() {
+				this.useValue(merge[0]);
+				local_diff.add(computed_diff).removeClass('selected');
+				computed_diff.addClass('selected');
+			}.bind(this));
+
+			labels.append(local_diff_label, final_diff_label);
+			diff_outer.append(local_diff, computed_diff);
+			outer.append(labels, diff_outer);
+			return outer;
+		},
+
+		diff: function(original, edited) {
+			var diff = this.differ.diff_main(original, edited, false);
+			this.differ.diff_cleanupSemantic(diff);
+			var patches = this.differ.patch_make(original, edited, diff);
+			return {
+				diff: diff,
+				patches: patches
+			};
+		},
+		useValue: function(value) {
+			this.use_value = value;
+			this.dialogue.resolve_value(this.conflict, value);
+		}
+	});
+
+	var StringField = new JS.Class({
+		include: Spontaneous.Properties,
+
+		initialize: function(owner, data) {
+			this.content = owner;
+			this.name = data.name;
+			var content_type = owner.type();
+			this.type = content_type.field_prototypes[this.name];
+			this.title = this.type.title;
+			this.update(data);
+		},
+		uid: function() {
+			return this.content.uid() + '['+this.name+']';
+		},
+		set_value: function(new_value) {
+		},
+
+		unload: function() {
+		},
+		update: function(values) {
+			this.data = values;
+			this.set('value', values.processed_value);
+			this.set('unprocessed_value', values.unprocessed_value);
+		},
+		preview: function() {
+			return this.get('value')
+		},
+		activate: function(el) {
+			el.find('a[href^="/"]').click(function() {
+				S.Location.load_path($(this).attr('href'));
+				return false;
+			});
+		},
+		value: function() {
+			return this.get('value');
+		},
+		unprocessed_value: function() {
+			return this.data.unprocessed_value;
+		},
+		is_image: function() {
+			return false;
+		},
+		is_file: function() {
+			return false;
+		},
+
+		id: function() {
+			return this.content.id();
+		},
+		css_id: function() {
+			return 'field-'+this.name+'-'+this.id();
+		},
+		form_name: function() {
+			return this.input_name('unprocessed_value');
+		},
+		version_name: function() {
+			return this.input_name('version');
+		},
+		input_name: function(name) {
+			return 'field['+this.schema_id()+']['+name+']';
+		},
+		schema_id: function() {
+			return this.type.schema_id;
+		},
+		version: function() {
+			return this.data.version;
+		},
+		set_version: function(version) {
+			this.data.version = version;
+		},
+		label: function() {
+			return this.title;
+		},
+		input: function() {
+			if (!this._input) {
+				this._input = dom.input(dom.id(this.css_id()), {'type':'text', 'name':this.form_name(), 'value':this.unprocessed_value()})
+			}
+			return this._input;
+		},
+
+		edited_value: function() {
+			return this.input().val();
+		},
+		is_modified: function() {
+			// always returns true because the ui value will always be sent and would override the server
+			// version in the case of a conflict
+			return true;
+		},
+		original_value: function() {
+			return this.unprocessed_value();
+		},
+		set_edited_value: function(value) {
+			this.input().val(value);
+		},
+		cancel_edit: function() {
+		},
+		close_edit: function() {
+			this._input = null;
+			this._version_input = null;
+		},
+		edit: function() {
+			return this.input();
+		},
+		toolbar: function() {
+			return false;
+		},
+		footer: function() {
+			return false;
+		},
+		focus: function() {
+			this.input().focus().select();
+		},
+		// true for fields with a text input
+		accepts_focus: true,
+		on_focus: function() {
+			this.input().parents('.field').first().addClass('focus');
+		},
+		on_blur: function() {
+			this.input().parents('.field').first().removeClass('focus');
+		},
+		conflict_view: function(dialogue, conflict) {
+			return new StringFieldConflictView(dialogue, conflict);
+		}
+	});
+
+	StringField.ConflictView = StringFieldConflictView;
+
+	return StringField;
+})(jQuery, Spontaneous);
+

data/application/js/image.js

@@ -0,0 +1,72 @@
+
+// Useful wrapper around image fields
+Spontaneous.Image = (function($, S) {
+	var dom = Spontaneous.Dom;
+	var Image = new JS.Class({
+		initialize: function(field) {
+			this.field = field;
+		},
+		fit: function(width, height) {
+			if (this.is_empty()) {
+				return dom.span();
+			}
+			var dim = this.fit_dimensions(width, height);
+			return dom.img({'src':this.src()}).attr('width',dim.width).attr('height',dim.height);
+		},
+		fit_dimensions: function(width, height) {
+			var ratio = 1.0;
+			if (this.is_landscape()) {
+				if (this.width() > width) {
+					ratio = width/this.width();
+				}
+			} else {
+				if (this.height() > height) {
+					ratio = height/this.height();
+				}
+			}
+			return {'width':(this.width() * ratio), 'height':(this.height() * ratio)};
+		},
+		fit_dimensions_inverse: function(width, height) {
+			var ratio = 1.0;
+			if (this.is_portrait()) {
+				if (this.width() > width) {
+					ratio = width/this.width();
+				}
+			} else {
+				if (this.height() > height) {
+					ratio = height/this.height();
+				}
+			}
+			return {'width':(this.width() * ratio), 'height':(this.height() * ratio)};
+		},
+		icon: function(width, height) {
+			if (this.is_empty()) {
+				return dom.span();
+			}
+			var dim = this.fit_dimensions_inverse(width, height), wrap = dom.div('.icon-wrap', {'width':dom.px(width), 'height':dom.px(height)});
+			wrap.append(dom.img({'src':this.src()}).css({'left':dom.px((width - dim.width)/2), 'top':dom.px((height - dim.height)/2)}).attr('width',dim.width).attr('height',dim.height));
+			return wrap;
+		},
+		src: function() {
+			return this.field.attributes.original.src;
+		},
+		width: function() {
+			if (this.is_empty()) { return 0; }
+			return this.field.attributes.original.width;
+		},
+		height: function() {
+			if (this.is_empty()) { return 0; }
+			return this.field.attributes.original.height;
+		},
+		is_landscape: function() {
+			return this.width() >= this.height();
+		},
+		is_portrait: function() {
+			return this.height() > this.width();
+		},
+		is_empty: function() {
+			return !this.field.attributes.original;
+		}
+	});
+	return Image;
+}());

data/application/js/init.js

@@ -0,0 +1,34 @@
+// console.log("Loading Init...");
+
+
+Spontaneous.Init = (function($, S) {
+
+	return function() {
+
+		var location = S.Location, top_bar = S.TopBar, content_area = S.ContentArea, b = S.Dom.body();
+
+		location.watch('location', top_bar.location_changed.bind(top_bar));
+		location.watch('location', content_area.location_changed.bind(content_area));
+
+		top_bar.watch('mode',       content_area.display.bind(content_area));
+		top_bar.watch('mode',       location.view_mode_changed.bind(location));
+
+		S.Editing.watch('page', location.page_loaded.bind(location));
+
+		b.append(top_bar.panel());
+		b.append(content_area.init());
+		b.append(S.StatusBar.init());
+
+		S.User.load();
+
+		S.Types.init(function() {
+			location.init(function() {
+				top_bar.init();
+			});
+		});
+
+
+
+
+	};
+}(jQuery, Spontaneous));

data/application/js/load.js

@@ -0,0 +1,4 @@
+// console.log("Initialising...");
+
+jQuery(Spontaneous.Init);
+

data/application/js/location.js

@@ -0,0 +1,157 @@
+// console.log("Loading Location...")
+
+Spontaneous.Location = (function($, S) {
+	var ajax = S.Ajax;
+
+	var State = new JS.Class({
+		initialize: function(hash) {
+			this.page_id = false;
+			this.mode = null;
+			if (hash) {
+				this.hash = hash.substr(1);
+				this.parse_hash();
+			}
+		},
+		// make this more sophisticated to deal with more complex state
+		// currently:
+		// #/page_id@view_mode
+		parse_hash: function() {
+			var areas = this.hash.split('@'), path = areas[0], mode = areas[1];
+			var parts = path.split('/')
+			parts.shift();
+			if (parts.length > 0) {
+				this.page_id = parts[0];
+			}
+			this.mode = mode;
+		},
+		restore: function() {
+			if (this.mode) {
+				Spontaneous.Location.view_mode_changed(this.mode)
+				Spontaneous.TopBar.set_mode(this.mode)
+			}
+			if (this.page_id) {
+				Spontaneous.Location.load_id(this.page_id);
+			} else {
+				Spontaneous.Location.load_path('/');
+			}
+		},
+		to_hash: function() {
+			return '#/'+(this.page_id || '') + (this.mode ? ('@' + this.mode) : '');
+		}
+	});
+
+	State.extend({
+		restore: function() {
+			var state = new State(window.location.hash)
+			state.restore();
+		},
+		page: function(location, mode) {
+			var s = new State
+			s.page_id = location.id;
+			s.mode = mode;
+			window.location.hash = s.to_hash();
+		}
+	});
+
+	var Location = new JS.Singleton({
+		include: Spontaneous.Properties,
+		init: function(callback) {
+			var complete = function() {
+				callback();
+				this.location_loaded();
+			}.bind(this);
+			callback();
+			State.restore();
+			$(window).bind('hashchange', State.restore);
+		},
+		page_loaded: function(page) {
+			// page.watch('slot', this, 'slot_changed');
+		},
+		slot_changed: function(slot) {
+			// console.log('Location.slot_changed', slot, slot.uid(), slot.container.id());
+		},
+		view_mode_changed: function(mode) {
+			this.set('view_mode', mode);
+			if (this.get('location')) {
+				this.update_state(this.get('location'), mode);
+			}
+		},
+		load_map: function() {
+		},
+		location_loaded: function(location, status, xhr) {
+			if (status !== 'success') {
+				if (xhr.status === 406) { // Code returned if site is missing a root page
+					var d = new Spontaneous.AddHomeDialogue(Spontaneous.Types.get('types'));
+					d.open();
+				}
+			} else {
+				this.set('location', location);
+				// HACK: see preview.js (Preview.display)
+				this.set('path', location.path);
+				this.update_state(location, this.get('view_mode'));
+			}
+		},
+		update_state: function(location, mode) {
+			State.page(location, mode);
+		},
+		load_id: function(id) {
+			var l = this.location();
+			if (!l || id != l.id) {
+				this.find_id(id);
+			}
+		},
+		load_path: function(path) {
+			this.find_path(path);
+		},
+		url: function() {
+			var l = this.location();
+			return (l ? l.url : "/about");
+		},
+		location: function() {
+			return this.get('location');
+		},
+		update: function(location) {
+			this.set('location', location);
+			this.path_from_url(location.url)
+		},
+		current_path: function() {
+			return this.path_from_url(this.url());
+		},
+		find_path: function(path) {
+			console.log('find_path', this.location(), path)
+			if (this.location() && path === this.location().path) {
+				return this.location();
+			}
+			ajax.get('/location'+path, this.location_loaded.bind(this));
+		},
+		find_id: function(id) {
+			if (this.location() && id === this.location().id) {
+				return this.location();
+			}
+			ajax.get('/map/'+id, this.location_loaded.bind(this));
+		},
+		path_from_url: function(url) {
+			var map = this.get('map'),
+			children = map.children,
+			path = [], i, ii,
+			parts = url.split('/').slice(1), position = 0;
+			// add root to path
+			path.push({selected:0, pages:[ map ], root:true});;
+			while (position < parts.length) {
+				for (i = 0, ii = children.length; i < ii; i++) {
+					var child = children[i], slug = child.url.split('/').slice(-1)[0];
+					if (slug === parts[position]) {
+						path.push({selected:i, pages: children});
+						children = child.children;
+						break;
+					}
+				}
+				position += 1;
+			}
+			return path;
+		}
+	});
+	return Location;
+})(jQuery, Spontaneous);
+
+

data/application/js/login.js

@@ -0,0 +1,53 @@
+(function($) {
+	$(function() {
+		$('#login form input').focus(function() {
+			var $this = $(this);
+			$('span', $this.parent()).addClass('faded');
+		}).blur(function() {
+			var $this = $(this);
+			if ($this.val() === '') {
+				$('span', $this.parent()).removeClass('faded').show();
+			}
+		}).keydown(function() {
+			var $this = $(this);
+			$('span', $this.parent()).hide();
+		}).keyup(function() {
+			var $this = $(this);
+			if ($this.val() === '') {
+				$('span', $this.parent()).show();
+			} else {
+				$('span', $this.parent()).hide();
+			}
+		}).each(function() {
+			var $this = $(this);
+			if ($this.val() !== '') {
+				$('span', $this.parent()).hide();
+			}
+		});
+		$('#login form').submit(function() {
+			var $this = $(this);
+			$.ajax({
+				url: $this.attr('action'),
+				type: "POST",
+				data:$this.serialize(),
+				success: function(data) {
+					if (data.key) {
+						Spontaneous.Auth.Key.save(Spontaneous.site_id, data.key);
+						window.location.href = data.redirect;
+					}
+				},
+				error: function() {
+					$('#failure-message').fadeOut(function() {
+						$('#failed-name').text($('#user-login').val());
+						$(this).fadeIn();
+					});
+					$("#error-message:hidden").slideDown(200);
+				},
+				dataType: 'json'
+			});
+			return false;
+		});
+
+		$('#login form input#user-login').focus();
+	});
+}(jQuery));