spontaneous 0.2.0.alpha2 → 0.2.0.alpha3

data/application/js/compatibility.js

@@ -13,6 +13,7 @@
 // 3. Add some useful CSS-visible attributes to the HTML element
 (function() {
 	var _window = window, _document = document;
+	var testFlexBoxCompatibility = false;
 	var prefixes = ' -webkit- -moz- -o- -ms- -khtml- '.split(' ');
 	try {
 
@@ -26,23 +27,26 @@
 			element.style.cssText = (property + prefixes.join(value + ';' + property)).slice(0, -property.length) + (extra || '');
 		}
 
-		var docElement = _document.documentElement,
-		c = _document.createElement('div'),
-		elem = _document.createElement('div'),
-		w;
 
-		set_prefixed_value_css(c, 'display', 'box', 'width:42px;padding:0;');
-		set_prefixed_property_css(elem, 'box-flex', '1', 'width:10px;');
+		if (testFlexBoxCompatibility) {
+			var docElement = _document.documentElement,
+			c = _document.createElement('div'),
+			elem = _document.createElement('div'),
+			w;
 
-		c.appendChild(elem);
-		docElement.appendChild(c);
-		w = elem.offsetWidth
-		c.removeChild(elem);
-		docElement.removeChild(c);
+			set_prefixed_value_css(c, 'display', 'box', 'width:42px;padding:0;');
+			set_prefixed_property_css(elem, 'box-flex', '1', 'width:10px;');
 
-		if (w !== 42) {
-			// console.error(w)
-			throw (w) + " Flexible Box Model not supported"
+			c.appendChild(elem);
+			docElement.appendChild(c);
+			w = elem.offsetWidth
+			c.removeChild(elem);
+			docElement.removeChild(c);
+
+			if (w !== 42) {
+				// console.error(w)
+				throw (w) + " Flexible Box Model not supported"
+			}
 		}
 
 		///////////////////////////// XHR Uploads
@@ -134,6 +138,6 @@
 		b.setAttribute('data-useragent',  navigator.userAgent);
 		b.setAttribute('data-platform', navigator.platform );
 	} catch (e) {
-		_window.location.href = "/@spontaneous/unsupported?msg=" + _window.encodeURI(e);
+		_window.location.href = "/@spontaneous/unsupported?msg=" + _window.encodeURIComponent(e) + "&useragent=" + _window.encodeURIComponent(_window.navigator.userAgent);
 	}
 }());

data/application/js/content.js

@@ -16,6 +16,7 @@ Spontaneous.Content = (function($, S) {
 		id: function() {
 			return this.content.id;
 		},
+
 		is_page: function() {
 			return this.type().is_page();
 		},
@@ -62,33 +63,25 @@ Spontaneous.Content = (function($, S) {
 			return list;
 		}.cache(),
 
+		// fields that should be listed in the main field column
 		text_fields: function() {
-			var fields = [], all_fields = this.field_list();
-			for (var i = 0, ii = all_fields.length; i < ii; i++) {
-				var f = all_fields[i];
-				if (!f.is_image()) {
-					fields.push(f);
-				}
-			}
-			return fields;
+			return this.filter_fields(function(f) { return !f.is_image(); });
+		},
+		// fields that should be saved as strings
+		string_fields: function() {
+			return this.filter_fields(function(f) { return !f.is_file(); });
 		},
 		image_fields: function() {
-			var fields = [], all_fields = this.field_list();
-			for (var i = 0, ii = all_fields.length; i < ii; i++) {
-				var f = all_fields[i];
-				if (f.is_image()) {
-					fields.push(f);
-				}
-			}
-			return fields;
+			return this.filter_fields(function(f) { return f.is_image(); });
 		},
 		file_fields: function() {
+			return this.filter_fields(function(f) { return f.is_file(); });
+		},
+		filter_fields: function(filter) {
 			var fields = [], all_fields = this.field_list();
 			for (var i = 0, ii = all_fields.length; i < ii; i++) {
 				var f = all_fields[i];
-				if (f.is_file()) {
-					fields.push(f);
-				}
+				if (filter(f)) { fields.push(f); }
 			}
 			return fields;
 		},
@@ -96,22 +89,24 @@ Spontaneous.Content = (function($, S) {
 			var fields = {}, type = this.type(), prototypes = type.field_prototypes;
 
 			for (var i = 0, ii = this.content.fields.length; i < ii; i++) {
-				var f = this.content.fields[i],
-				prototype = prototypes[f.name],
-				type_class = this.constantize(prototype.type)
-				if (!type_class) {
-					console.warn(
-						"Content#fields:",
-						"Field has invalid type", prototype.type,
-						"content_id:", this.content.id,
-						"type:", "'"+type.title+"'",
-						"field_name:", f.name
-					);
-					type_class = Spontaneous.FieldTypes.StringField;
+				var f = this.content.fields[i], prototype, type_class;
+				prototype = prototypes[f.name];
+				if (f && prototype) {
+					type_class = this.constantize(prototype.type);
+					if (!type_class) {
+						console.warn(
+							"Content#fields:",
+							"Field has invalid type", prototype.type,
+							"content_id:", this.content.id,
+							"type:", "'"+type.title+"'",
+							"field_name:", f.name
+						);
+						type_class = Spontaneous.FieldTypes.StringField;
+					}
+					var field = new type_class(this, f);
+					// field.watch('value', this.field_updated.bind(this, field));
+					fields[f.name] = field;
 				}
-				var field = new type_class(this, f);
-				// field.watch('value', this.field_updated.bind(this, field));
-				fields[f.name] = field;
 			};
 			return fields;
 		}.cache(),
@@ -138,7 +133,7 @@ Spontaneous.Content = (function($, S) {
 				var fields = response.fields;
 				for (var i = 0, ii = fields.length; i < ii; i++) {
 					var values = fields[i], field = this.field(values.name);
-					field.update(values);
+					if (field) { field.update(values); }
 				}
 			}
 		},
@@ -208,7 +203,6 @@ Spontaneous.Content = (function($, S) {
 			Spontaneous.Ajax.post(['/toggle', this.content.id].join('/'), {}, this.visibility_toggled.bind(this));
 		},
 		visibility_toggled: function(result) {
-			console.log('visibility_toggled', result)
 			this.set('hidden', result.hidden);
 			// this.trigger('visibility_toggled', result);
 		},
@@ -224,6 +218,15 @@ Spontaneous.Content = (function($, S) {
 		},
 		repositioned: function() {
 			this.trigger('repositioned');
+		},
+		state: function() {
+			return S.State.get(this);
+		},
+		setFieldMetadata: function(field, key, value) {
+			this.state().setFieldMetadata(field, key, value);
+		},
+		getFieldMetadata: function(field, key, value) {
+			return this.state().getFieldMetadata(field, key);
 		}
 	});
 

data/application/js/content_area.js

@@ -5,15 +5,19 @@ Spontaneous.ContentArea = (function($, S) {
 	var ContentArea = new JS.Singleton({
 		include: Spontaneous.Properties,
 
-		wrap: null,
+		inner: null,
 		preview: null,
 		editing: null,
 		mode: 'edit',
 
 		init: function() {
-			this.wrap = dom.div('#content');
-			this.preview = S.Preview.init(this.wrap);
-			this.editing = S.Editing.init(this.wrap);
+			this.wrap  = dom.div("#content-outer");
+			this.metaWrap = dom.div("#content-meta").hide();
+			this.inner = dom.div('#content');
+			this.preview = S.Preview.init(this.inner);
+			this.editing = S.Editing.init(this.inner);
+			this.service = S.Services.init(this.inner);
+			this.wrap.append(this.metaWrap, this.inner);
 			return this.wrap;
 		},
 
@@ -25,14 +29,23 @@ Spontaneous.ContentArea = (function($, S) {
 			this.current().display(S.Location.location());
 		},
 		current: function() {
+			this.exitMeta();
+			// YUK
 			if (this.mode === 'preview') {
 				this.editing.hide();
+				this.service.hide();
 				this.preview.show();
 				return this.preview;
 			} else if (this.mode === 'edit') {
 				this.preview.hide();
+				this.service.hide();
 				this.editing.show();
 				return this.editing;
+			} else if (this.mode === 'service') {
+				this.preview.hide();
+				this.editing.hide();
+				this.service.show();
+				return this.service;
 			}
 		},
 		goto_page: function(page) {
@@ -40,7 +53,42 @@ Spontaneous.ContentArea = (function($, S) {
 		},
 		scroll_to_bottom: function(duration, delay) {
 
-			this.wrap.delay(delay || 0).animate({ scrollTop:this.wrap[0].scrollHeight }, (duration || 1000));
+			this.inner.delay(delay || 0).animate({ scrollTop:this.inner[0].scrollHeight }, (duration || 1000));
+		},
+		showService: function(service) {
+			if (!this.modeBeforeService) {
+				this.modeBeforeService = this.mode;
+			}
+			this.mode = "service";
+			this.current().display(service.url);
+		},
+		hideService: function() {
+			var mode = this.modeBeforeService;
+			this.modeBeforeService = false;
+			this.display(mode);
+		},
+		enterMeta: function(view) {
+			if (this.metaView === view) { return; }
+			this.metaView = view;
+			var outer = this.metaWrap.hide();
+			this.inner.animate({top: "100%"}, 300, function() {
+				if (view && typeof view.show === "function") {
+					view.show(outer);
+				}
+				outer.fadeIn(300);
+			});
+		},
+		exitMeta: function() {
+			if (!this.metaView) { return; }
+			if (typeof this.metaView.detach === "function") {
+				this.metaView.detach();
+			}
+			this.metaView = null;
+			var inner = this.inner, outer = this.metaWrap;
+			inner.animate({top: "0%"}, 300, function() {
+				outer.empty().hide();
+			});
+			outer.fadeOut(300);
 		}
 	});
 	return ContentArea;

data/application/js/dialogue.js

@@ -75,6 +75,9 @@ Spontaneous.Dialogue = (function($, S) {
 			// set to define non-cancel action buttons
 			// for this dialogue
 		},
+		contentsHeight: function() {
+			return null;
+		},
 		cleanup: function() {
 			// over-ride if you need to do anything before the dialogue is closed
 			// (either by cancel or through other actions)
@@ -99,6 +102,7 @@ Spontaneous.Dialogue = (function($, S) {
 		open: function(instance) {
 			if (this._open || !instance) { return; }
 			this._instance = instance;
+			instance.manager = this;
 			$('body').css("overflow", "hidden");
 			this.overlay().fadeIn(200);
 			var c = this.container(), a = this._actions, b;
@@ -134,10 +138,20 @@ Spontaneous.Dialogue = (function($, S) {
 			}
 			this.button_map = button_map;
 			this._body.empty().append(instance.body());
+
 			c.fadeIn(200);
 			this._open = true;
 		},
 
+		updateLayout: function() {
+			var contentsHeight = this._instance.contentsHeight()
+			, dialogueHeight = (+contentsHeight) + this._actions.outerHeight() + this._title.outerHeight()
+			, el = this._frame;
+			dialogueHeight = Math.max(dialogueHeight, 100);
+			if (contentsHeight && dialogueHeight <  this._originalHeight) {
+				el.animate({'height': dialogueHeight}, 400);
+			}
+		},
 		disable_button: function(button_name) {
 			var button = this.button_map[button_name.toLowerCase()]
 			button.disable();
@@ -173,6 +187,9 @@ Spontaneous.Dialogue = (function($, S) {
 				outline.append(controls_wrap);
 				wrap.append(outline)
 				$('#content').append(wrap);
+				this._originalHeight = outline.outerHeight();
+				console.log('orig height', this._originalHeight)
+				this._frame = outline;
 				this._actions = actions;
 				this._title = title;
 				this._container = wrap;

data/application/js/dom.js

@@ -1,7 +1,7 @@
 // console.log('Loading DOM...');
 
 Spontaneous.Dom = (function($, S) {
-	var tags = 'div p iframe a span img select option label ul li dl dt dd table tr td h1 h2 h3 h4 header input button form textarea'.split(' ');
+	var tags = 'div p iframe a span img select option label ul li dl dt dd table tr td h1 h2 h3 h4 header input button form textarea optgroup'.split(' ');
 	var Dom = {
 		body: function() {
 			return $(document.body);

data/application/js/edit_panel.js

@@ -32,7 +32,12 @@ Spontaneous.EditPanel = (function($, S) {
 		},
 
 		upload_values: function() {
-			var values = this.form.serializeArray();
+			var fields = this.parent_view.string_fields();
+			var values = fields.map(function(field) {
+				return field.serializedValue();
+			});
+			// console.log("field values", values)
+			// var values = this.form.serializeArray();
 			var field_data = new FormData();
 			var size = 0;
 			$.each(values, function(i, v) {
@@ -69,13 +74,13 @@ Spontaneous.EditPanel = (function($, S) {
 		},
 
 		upload_conflict: function(conflict_data) {
-			console.log('conflicted_fields', conflict_data)
+			// console.log('conflicted_fields', conflict_data)
 			var dialogue = new S.ConflictedFieldDialogue(this, conflict_data);
 			dialogue.open();
 		},
 
 		conflicts_resolved: function(conflict_list) {
-			console.log('conflicts resolved', conflict_list)
+			// console.log('conflicts resolved', conflict_list)
 			var ff = this.parent_view.field_list(), conflicts = {};
 			for (var i =0, ii = conflict_list.length; i < ii; i++) {
 				var conflict = conflict_list[i];
@@ -84,7 +89,7 @@ Spontaneous.EditPanel = (function($, S) {
 			for (var i = 0, ii = ff.length; i < ii; i++) {
 				var field = ff[i], conflict = conflicts[field.schema_id()];
 				if (conflict) {
-					console.log(">>> conflicts_resolved", field, conflict.version)
+					// console.log(">>> conflicts_resolved", field, conflict.version)
 					field.set_edited_value(conflict.value);
 					field.set_version(conflict.version);
 				}
@@ -135,19 +140,23 @@ Spontaneous.EditPanel = (function($, S) {
 			var text_fields = this.parent_view.text_fields();
 			var submit = dom.input({'type':'submit'});
 			var __dialogue = this;
+			var fieldViews = [];
 			editing.append(toolbar);
 			for (var i = 0, ii = text_fields.length; i < ii; i++) {
-				var field = text_fields[i];
-				text_field_wrap.append(this.field_edit(field));
+				var field = text_fields[i], view = this.field_edit(field);
+				fieldViews.push(view);
+				text_field_wrap.append(view);
 			}
+
 			if (text_fields.length > 0) {
 				outer.append(text_field_wrap);
 			}
 			var image_fields = this.parent_view.image_fields();
 
 			for (var i = 0, ii = image_fields.length; i < ii; i++) {
-				var field = image_fields[i];
-				image_field_wrap.append(this.field_edit(field).click(function() { __dialogue.field_focus(this); }));
+				var field = image_fields[i], view = this.field_edit(field).click(function() { __dialogue.field_focus(this); });
+				fieldViews.push(view);
+				image_field_wrap.append(view);
 			}
 			if (image_fields.length > 0) {
 				outer.append(image_field_wrap);
@@ -198,6 +207,10 @@ Spontaneous.EditPanel = (function($, S) {
 			next_field.input().focus();
 		},
 		on_show: function(focus_field) {
+			var fields = this.parent_view.field_list();
+			$.each(fields, function(n, f) {
+				f.on_show();
+			})
 			if (!focus_field || !(focus_field['focus']) || !focus_field.accepts_focus) { focus_field = null; }
 			var focus_field = focus_field || this.parent_view.text_fields()[0];
 			if (focus_field) {
@@ -232,6 +245,8 @@ Spontaneous.EditPanel = (function($, S) {
 		},
 		field_edit: function(field) {
 			var d = dom.div('.field');
+			// console.log("field_edit", field.type)
+			d.addClass(field.type.type.toLowerCase().split(".").splice(1).join("-"));
 			// d.append($(dom.label, {'class':'name', 'for':field.css_id()}).html(field.label()));
 			var label = dom.label('.name', {'for':field.css_id()}).html(field.label());
 			if (field.type.comment) {

data/application/js/extensions.js

@@ -33,6 +33,11 @@ function $A(iterable) {
 
 (function($) {
 
+	// Cope with changing File API
+	File.filename = function(file) {
+		return file.fileName || file.name;
+	};
+
 	var function_id = 0;
 
 	if (!(typeof Function.prototype.bind === 'function')) {
@@ -58,9 +63,9 @@ function $A(iterable) {
 
 	$.extend(Number.prototype, {
 		to_filesize: function() {
-			var thou = 1000, units = [" bytes", ' KB', ' MB', ' GB'],
+			var thou = 1000, units = [" B", ' kB', ' MB', ' GB'],
 			power = Math.floor(Math.log(this) / Math.log(thou))
-			return this / (Math.pow(thou, power)) + units[power]
+			return Math.round(this / (Math.pow(thou, power))) + units[power]
 		}
 	});
 

data/application/js/field_preview.js

@@ -37,7 +37,7 @@ Spontaneous.FieldPreview = (function($, S) {
 			$.each(fields, function(i, field) {
 				var li = dom.li();
 				var name = dom.div('.name').text(field.title);
-				var value = dom.div('.value').html(field.preview());
+				var value = dom.div('.value');
 				li.click(function() {
 					__this.field_to_edit = field;
 				})
@@ -47,6 +47,7 @@ Spontaneous.FieldPreview = (function($, S) {
 				}
 				li.append(name).append(value);
 				wrapper.append(li);
+				value.html(field.preview(value));
 			});
 			return wrapper;
 		}

data/application/js/field_types/date_field.js

@@ -2,15 +2,18 @@
 Spontaneous.FieldTypes.DateField = (function($, S) {
 	var dom = S.Dom;
 	var DateField = new JS.Class(Spontaneous.FieldTypes.StringField, {
-		// get_input: function() {
-		// 	this.input = $(dom.textarea, {'id':this.css_id(), 'name':this.form_name(), 'rows':10, 'cols':30}).text(this.unprocessed_value());
-		// 	return this.input;
-		// },
-		// edit: function() {
-		// 	return this.get_input();
-		// }
+		input: function() {
+			var input = this.callSuper();
+			input.datepicker({ "dateFormat": "DD, d MM yy" });
+			return input;
+		},
+		dateFormat: function() {
+			// var rubyFormat = this.type.date_format,
+			// parts = rubyFormat.split("%").map(function(d) { return d.split(/(\\s+)/); });
+			// console.log(parts)
+			return this.type.date_format;
+		}
 	});
-
 	return DateField;
 })(jQuery, Spontaneous);