spontaneous 0.2.0.beta1 → 0.2.0.beta2

data/application/js/field/boolean.js

@@ -0,0 +1,31 @@
+Spontaneous.Field.Boolean = (function($, S) {
+	var dom = S.Dom;
+	var BooleanField = new JS.Class(Spontaneous.Field.String, {
+		edit: function() {
+			var self = this
+			, w = dom.div(dom.id(self.css_id()))
+			, input = self.input() // ensure we have created the radio inputs $on & $off
+			, labels = self.type.labels
+			, label = function(label, radio) { return dom.label().text(label).prepend(radio); }
+			;
+			w.append(label(labels['true'], self.$on), label(labels['false'], self.$off));
+			return w;
+		},
+		generate_input: function() {
+			var self = this
+			, checked = (this.get('unprocessed_value') == 'true')
+			, click = function() { self.editor.field_focus(self.input()); }
+			, on = dom.radio({'name':this.form_name(), 'value': 'true', 'checked': checked})
+			, off = dom.radio({'name':this.form_name(), 'value': 'false', 'checked': !checked})
+			;
+			self.$on = on;
+			self.$off = off;
+			return $(on).add(off).click(click);
+		},
+		edited_value: function() {
+			return this.input().filter(':checked').val();
+		}
+	});
+	return BooleanField;
+})(jQuery, Spontaneous);
+

data/application/js/field/file.js

@@ -4,11 +4,40 @@ Spontaneous.Field.File = (function($, S) {
 	var FileField = new JS.Class(Spontaneous.Field.String, {
 		selected_files: false,
 
+		currentValue: function() {
+			var pending, v = this.get('value');
+			if ((pending = v['__pending__'])) {
+				return pending['value'];
+			}
+			return v;
+		},
+
+		currentFilename: function() {
+			return this.currentValue()['filename'];
+		},
+
+		currentFilesize: function() {
+			return this.currentValue()['filesize'];
+		},
+
+		currentEditValue: function() {
+			var value, pending, ui, v = this.get('value');
+			if ((pending = v['__pending__'])) {
+				return pending['value'];
+			}
+			value = v['original'];
+			if ((ui = v['__ui__'])) {
+				value['path'] = value['src'];
+				value['src'] = ui['src'];
+			}
+			return value;
+		},
+
 		preview: function() {
 			Spontaneous.UploadManager.register(this);
 			var self = this
-			, value = this.get('value')
-			, filename = this.filename(value);
+			, value = this.currentValue()
+			, filename = this.currentFilename();
 			var wrap = dom.div('.file-field');
 			var dropper = dom.div('.file-drop');
 
@@ -61,7 +90,7 @@ Spontaneous.Field.File = (function($, S) {
 				}
 			};
 			if (value) {
-				set_info(value.html, this.filename(value), value.filesize);
+				set_info(value.html, this.currentFilename(), this.currentFilesize());
 			}
 
 			dropper.append(this.progress_bar().parent());
@@ -237,7 +266,6 @@ Spontaneous.Field.File = (function($, S) {
 			this.processed_value();
 		},
 		set_edited_value: function(value) {
-			console.log('set_edited_value', value, this.edited_value(), this.original_value())
 			if (value === this.edited_value()) {
 				// do nothing
 			} else {

data/application/js/field/image.js

@@ -1,5 +1,6 @@
 // console.log('Loading ImageField...')
 Spontaneous.Field.Image = (function($, S) {
+	"use strict";
 	var dom = S.Dom;
 	var ImageFieldConflictView = new JS.Class(S.Field.String.ConflictView, {
 
@@ -58,13 +59,31 @@ Spontaneous.Field.Image = (function($, S) {
 		},
 
 		currentValue: function() {
-			var v = this.get('value');
+			var pending, v = this.get('value');
 			if ((pending = v['__pending__'])) {
+				pending['path'] = pending['src'];
 				return pending['value'];
 			}
 			return v['__ui__'] || v['original'];
 		},
 
+		currentEditValue: function() {
+			var value, pending, ui, v = this.get('value');
+			if ((pending = v['__pending__'])) {
+				return pending['value'];
+			}
+			value = v['original'];
+			if ((ui = v['__ui__'])) {
+				value['path'] = value['src'];
+				value['src'] = ui['src'];
+			}
+			return value;
+		},
+
+		currentFilename: function() {
+			var v = this.currentValue();
+			return v['filename'];
+		},
 		/*
 		* HACK: The async nature of image updates means that the version setting
 		* may be out of date not because of the actions of another, but because
@@ -80,7 +99,7 @@ Spontaneous.Field.Image = (function($, S) {
 		* weird problems with simultaneous updates.
 		*/
 		version: function() {
-			var value = this.get("value");
+			var pending, value = this.get("value");
 			if ((pending = value["__pending__"])) {
 				return pending["version"];
 			}
@@ -245,7 +264,7 @@ Spontaneous.Field.Image = (function($, S) {
 		},
 		edit: function() {
 			var wrap = dom.div({'style':'position:relative;'}),
-				value = this.currentValue(),
+				value = this.currentEditValue(),
 				src = value.src,
 				img = dom.img({'src':src}),
 				info, sizes, filename_info, filesize_info, dimensions_info;
@@ -350,8 +369,8 @@ Spontaneous.Field.Image = (function($, S) {
 			wrap.append(img, actions, info);
 
 			if (value) {
-				var s = value.src.split('/'), filename = s[s.length - 1];
-				set_info(filename, value.filesize, value.width, value.height);
+				// var s = value.path.split('/'), filename = s[s.length - 1];
+				set_info(this.currentFilename(), value.filesize, value.width, value.height);
 			}
 			this.preview_img = img;
 			return wrap;
@@ -370,10 +389,6 @@ Spontaneous.Field.Image = (function($, S) {
 			this.input = this.generate_input();
 			return this.input;
 		},
-
-		edited_value: function() {
-			return this.input.val();
-		},
 		cancel_edit: function() {
 			this.image.attr('src', this.currentValue().src);
 		},

data/application/js/field/markdown.js

@@ -447,7 +447,8 @@ Spontaneous.Field.Markdown = (function($, S) {
 		},
 		page_selected: function(page) {
 			this.url_input.val(page.path);
-		}
+		},
+		scroll: true
 	});
 
 	var PageSelector = new JS.Class({
@@ -502,38 +503,25 @@ Spontaneous.Field.Markdown = (function($, S) {
 			state = this.fix_selection_whitespace(state)
 			var selected = state.selection, m, n, start = state.start, end = state.end;
 
-			// cursor is either in the [] or in the ()
-			// first test for being in []
-			m = /(\[[^\]]*)$/.exec(state.before);
-			if (m) {
-				n = /^(.*\]\(.+?\))/.exec(state.after);
-				if (n) {
-					start -= m[1].length;
-					selected += m[1];
-					end += n[1].length;
-					selected += n[1];
-				}
-			}
-			// now test for being in the ()
-			m = /(\[.+?\]\([^\)]*)$/.exec(state.before);
-			if (m) {
-				n = /^(.*?\))/.exec(state.after);
-				if (n) {
-					start -= m[1].length;
-					selected += m[1];
-					end += n[1].length;
-					selected += n[1];
-				}
-			}
-			// finally check for being exactly between the two
-			m = /(\[.+?\])$/.exec(state.before);
-			if (m) {
-				n = /^(\(.+?\))/.exec(state.after);
-				if (n) {
-					start -= m[1].length;
-					selected += m[1];
-					end += n[1].length;
-					selected += n[1];
+			var linkExp = /(\[[^\]]*?\]\([^\ ]*?\))/g;
+			var text = this.input.val(), cursor = start, match = 0;
+			// First look at all the text before and move the cursor past any links.
+			// This stops us expanding backwards to grab any link found in the text before
+			// the selection start.
+			do {
+				if ((m = linkExp.exec(state.before))) { match = linkExp.lastIndex; }
+			} while (m && (linkExp.lastIndex < cursor));
+
+			// now we've established where the last whole link lives, and can stop ourselves
+			// including it in the search, we can look backwards
+			// until we find the start of any link that's around the current selection.
+			while ((cursor >= match) && (text[cursor] !== "[")) { cursor--; }
+
+			if (text[cursor] === "[") {
+				if (m = linkExp.exec(text.substr(cursor))) {
+					start = cursor;
+					end = cursor + m[1].length;
+					selected = m[1];
 				}
 			}
 			return {selection:selected, start:start, end:end};
@@ -637,45 +625,86 @@ Spontaneous.Field.Markdown = (function($, S) {
 			this.callSuper();
 		},
 		toolbar: function() {
-			if (!this._toolbar) {
-				this._wrapper = dom.div([dom.id('editor-'+this.css_id()), '.markdown-editor']);
-				// $(dom.div, {'class':'markdown-editor', 'id':'editor-'+this.css_id()});
-				this._toolbar = dom.div('.md-toolbar');
-				this.commands = [];
-				var input = this.input();
-				for (var i = 0, c = this.actions, ii = c.length; i < ii; i++) {
+			var self = this;
+			if (!self._toolbar) {
+				self._wrapper = dom.div([dom.id('editor-'+self.css_id()), '.markdown-editor']);
+				self._wrapper.append(self.popupToolbar());
+			}
+			return self._wrapper;
+		},
+		popupToolbar: function() {
+			var self = this;
+			if (!self._popupToolbar) {
+				var toolbar = dom.div('.md-toolbar');
+				var arrow = dom.div(".arrow");
+				toolbar.append(arrow);
+				self.commands = [];
+				var input = self.input();
+				for (var i = 0, c = self.actions, ii = c.length; i < ii; i++) {
 					var cmd_class = c[i], cmd = new cmd_class(input);
-					this.commands.push(cmd);
-					this._toolbar.append(cmd.button());
+					self.commands.push(cmd);
+					toolbar.append(cmd.button());
 				}
-				this._wrapper.append(this._toolbar);
-				// input.css('height', '');
+				toolbar.hide();
+				self._popupToolbar = toolbar;
 			}
-			return this._wrapper;
+			return self._popupToolbar;
 		},
 		edit: function() {
-			this.expanded = false;
-			var input = this.input();
-			input.unbind('select.markdown').unbind('click.markdown').unbind('keyup.markdown');
-			input.bind('select.markdown', this.on_select.bind(this))
-			input.bind('click.markdown', this.on_select.bind(this))
-			input.bind('keyup.markdown', this.on_select.bind(this))
+			var self = this, input = self.input();
+			self.expanded = false;
+			// clear previously assigned bindings
+			input.unbind('select.markdown');
+			input.bind('select.markdown', self.on_select.bind(self))
+			// input.bind('click.markdown', self.on_select.bind(self))
+			// input.bind('keyup.markdown', self.on_select.bind(self))
 			return input;
 		},
 		close_edit: function() {
-			this._input = null;
-			this._toolbar = null;
-			this.commands = [];
-			this.expanded = false;
-			this.callSuper();
+			var self = this;
+			self._input = null;
+			self._toolbar = null;
+			self._popupToolbar = null;
+			self.commands = [];
+			self.expanded = false;
+			self.callSuper();
 		},
 		// iterates through all the buttons and lets them highlight themselves depending on the
 		// currently selected text
 		on_select: function(event) {
-			var state = TextCommand.get_state(this.input());
+			var input = this.input(), toolbar = this.popupToolbar(), state = TextCommand.get_state(input);
 			$.each(this.commands, function() {
 				this.respond_to_selection(state);
 			});
+			input.showSelectionPopup(toolbar, function(position) {
+				var tools = {width: toolbar.width(), height: toolbar.height()},
+				text = { width: input.width(), height: input.height()};
+				// console.log("position", position, tools, text);
+				var place = {
+					left: position.left,
+				  // 5 is half the height of the arrow
+				  // 7 is the padding of the field
+					top: position.top + 7 - 5  - tools.height
+				};
+				var dx = 0;
+				var arrow = toolbar.find(".arrow"),
+				arrowLeft = (position.width / 2) - 5;
+				// if the selection is narrow the arrow can peek over the left
+				// of the toolbar. This shifts everything over and keeps it neat.
+				if (position.width < 40) {
+					place.left = place.left - 15;
+					arrowLeft += 15;
+				}
+				if ((place.left + tools.width) > (text.width)) {
+					dx = ((place.left + tools.width) - (text.width + 20));
+					place.left = place.left - dx;
+					arrowLeft += dx;
+				}
+
+				arrowLeft = Math.min(toolbar.width() - 30, arrowLeft);
+				arrow.css("left", dom.px(arrowLeft));
+				return place;
+			});
 		}
 	});
 
@@ -688,9 +717,8 @@ Spontaneous.Field.Markdown = (function($, S) {
 		H1: H1,
 		H2: H2,
 		Link: Link
-
-
 	});
+
 	return MarkdownField;
 })(jQuery, Spontaneous);
 

data/application/js/field/select.js

@@ -25,7 +25,7 @@ Spontaneous.Field.Select = (function($, S) {
 		},
 
 		optionsURL: function() {
-			return ["/options", this.type.schema_id, this.content.id()].join("/");
+			return ["/field/options", this.type.schema_id, this.content.id()].join("/");
 		},
 
 		append_select: function(wrapper, option_list) {

data/application/js/field/webvideo.js

@@ -10,7 +10,12 @@ Spontaneous.Field.WebVideo = (function($, S) {
 		// 	return this.get_input();
 		// }
 		preview: function() {
-			var value = this.get('value')
+			// oh god. I need to have a UI only version of the player code which disables autoplay etc
+			// at the moment the value passed to the ui is the same as the one used for templates
+			// which, in the case of autoplay, is wildly inappropriate
+			// at the same time I want to replace an immediately inserted video player with an
+			// image + play button to reduce the impact of multiple videos on the cms ui load time
+			var value = this.get('value').replace(/autoplay=1/, '')
 			, iframe = dom.iframe({src:value, frameborder: 0, border: 0}).css({position: "absolute", top:0, left:0, height: "100%", width: "100%"});
 			if (!value) { // don't fill up the page with empty iframes...
 				return dom.div();

data/application/js/init.js

@@ -20,9 +20,9 @@ Spontaneous.Init = (function($, S) {
 		b.append(content_area.init());
 		b.append(S.StatusBar.init());
 
-		S.Metadata.load(function() {
+		S.Metadata.load(function(metadata) {
 			location.init(function() {
-				top_bar.init();
+				top_bar.init(metadata);
 			});
 		});
 	};

data/application/js/jquery-selection-position.js

@@ -0,0 +1,130 @@
+/**
+ * Based on an original plugin "jquery-caret-position-getter"
+ *
+ * https://github.com/beviz/jquery-caret-position-getter
+ *
+ * @license under Apache license
+ * @author Bevis Zhao (i@bevis.me, http://bevis.me)
+ */
+(function($) {
+	"use strict";
+
+	var calculator = {
+		// key styles
+		primaryStyles: ['fontFamily', 'fontSize', 'fontWeight', 'fontVariant',
+'fontStyle', 'paddingLeft', 'paddingTop', 'paddingBottom', 'paddingRight',
+'marginLeft', 'marginTop', 'marginBottom', 'marginRight', 'borderLeftColor',
+'borderTopColor', 'borderBottomColor', 'borderRightColor', 'borderLeftStyle',
+'borderTopStyle', 'borderBottomStyle', 'borderRightStyle', 'borderLeftWidth',
+'borderTopWidth', 'borderBottomWidth', 'borderRightWidth', 'line-height',
+'outline'],
+
+specificStyle: {
+	'white-space': 'pre-wrap',
+'word-wrap': 'normal',
+'overflow-x': 'hidden',
+'overflow-y': 'auto'
+},
+
+simulator : $('<div id="textarea_simulator"/>').css({
+	position: 'absolute',
+top: 0,
+left: 0,
+visibility: 'hidden'
+}).appendTo(document.body),
+
+					// calculate position
+					getSelectionPosition: function() {
+						var cal = calculator, self = this, element = self[0], elementOffset = self.offset();
+
+						cal.simulator.empty();
+						// clone primary styles to imitate textarea
+						$.each(cal.primaryStyles, function(index, styleName) {
+							self.cloneStyle(cal.simulator, styleName);
+						});
+
+						// caculate width and height
+						cal.simulator.css($.extend({
+							'width': self.width(),
+							'height': self.height()
+						}, cal.specificStyle));
+
+						var value = self.val(),
+								selectStart = element.selectionStart,
+								selectEnd = element.selectionEnd;
+
+						if (selectEnd === selectStart) { return false; };
+
+						var beforeText = value.substring(0, selectStart),
+								selectedText = value.substring(selectStart, selectEnd),
+								afterText = value.substring(selectEnd);
+
+						var before = $('<span class="before"/>').html(beforeText),
+								focus = $('<span class="focus"/>').html(selectedText),
+								after = $('<span class="after"/>').html(afterText);
+
+						cal.simulator.append(before, focus, after);
+
+						var focusOffset = focus.offset(), simulatorOffset = cal.simulator.offset();
+
+						return {
+							top: focusOffset.top - simulatorOffset.top - element.scrollTop,
+								left: focus[0].offsetLeft -  cal.simulator[0].offsetLeft - element.scrollLeft,
+								width: focus.width(),
+								height: focus.height()
+						};
+					}
+};
+
+var showPopup = function(textarea, popup, offsetCalculator) {
+	var pos = calculator.getSelectionPosition.call(textarea);
+	if (pos === false) {
+		popup.hide();
+		return false;
+	}
+	var position = textarea.position(), height = textarea.height(),
+			top = position.top + pos.top, bottom = position.top + height;
+
+	// In order to use the size of the popup in the positioning calculations
+	// it needs to be visible in the dom.
+	popup.css("visibility", "hidden").show();
+	var place = offsetCalculator(pos);
+	popup.hide().css("visibility", "visible");
+	if (top >= position.top && top < bottom) {
+		popup.css({
+			left: place.left,
+			top: place.top
+		}).fadeIn(100)
+	} else {
+		popup.fadeOut(100);
+	}
+	return true;
+}
+$.fn.extend({
+	getComputedStyle: function(styleName) {
+		if (this.length == 0) return;
+		var self = this[0], result = this.css(styleName);
+		result = result || ($.browser.msie ? self.currentStyle[styleName]: document.defaultView.getComputedStyle(self, null)[styleName]);
+		return result;
+	},
+cloneStyle: function(target, styleName) {
+	var styleVal = this.getComputedStyle(styleName);
+	if (!!styleVal) {
+		$(target).css(styleName, styleVal);
+	}
+},
+showSelectionPopup: function(popup, offsetCalculator) {
+	var self = $(this);
+	var callback = function() {
+		var selected = showPopup(self, popup, offsetCalculator);
+		if (!selected) {
+			self.unbind("scroll.popup").unbind("mouseup.popup");
+		}
+	};
+	self.bind("scroll.popup", callback);
+	self.bind("mouseup.popup",  callback.delay(1));
+	callback();
+}
+});
+}(jQuery));
+

data/application/js/location.js

@@ -83,7 +83,8 @@ Spontaneous.Location = (function($, S) {
 		},
 		load_map: function() {
 		},
-		location_loaded: function(location, xhr) {
+		location_loaded: function(location, status, xhr) {
+			S.Popover.close();
 			if (xhr.status === 406) { // Code returned if site is missing a root page
 				var d = new Spontaneous.AddHomeDialogue(Spontaneous.Types.get('types'));
 				d.open();
@@ -127,7 +128,7 @@ Spontaneous.Location = (function($, S) {
 			if (this.location() && path === this.location().path) {
 				return this.location();
 			}
-			this.retrieve('/location'+path, this.location_loaded.bind(this));
+			this.retrieve('/map/path'+path, this.location_loaded.bind(this));
 		},
 		find_id: function(id) {
 			if (this.location() && id === this.location().id) {
@@ -155,30 +156,8 @@ Spontaneous.Location = (function($, S) {
 			}
 			return path;
 		},
-		// easier to create my own 304 sensitive ajax request
-		// than peg on a content cache to jQuery's
 		retrieve: function(url, callback) {
-			var self = this
-			, req = new XMLHttpRequest()
-			, data;
-			req.open("GET", ajax.request_url(url, true), true)
-			req.setRequestHeader('If-Modified-Since', self.lastModified(url));
-			req.onreadystatechange = function(event) {
-				if (req.readyState === XMLHttpRequest.DONE) {
-					if (req.status === 200) {
-						data = jQuery.parseJSON(req.responseText);
-						self.setLocationCache(url, req.getResponseHeader("Last-Modified"), data)
-					}
-					if (req.status === 304) {
-						data = self.getLocationCache(url)
-					}
-					if (req.status === 401) {
-						S.Ajax.unauthorized();
-					}
-					callback(data, req);
-				}
-			};
-			req.send(null);
+			ajax.get(url, {}, callback, {ifModified: true, cache: true});
 		},
 		lastModified: function(path) {
 			return (this.locationCache[path] || {}).lastModified;

data/application/js/meta_view/user_admin.js

@@ -515,8 +515,8 @@ Spontaneous.MetaView.UserAdmin = (function($, S){
 		title: function() {
 			return "Delete user “" + (this.user.get("login")) + "”";
 		},
-		position_from_event: function(event) {
-			var pos = this.position_from_element(event);
+		position_from_event: function(target) {
+			var pos = this.position_from_element(target);
 			pos.left += 40;
 			return pos;
 		},

data/application/js/metadata.js

@@ -7,12 +7,12 @@ Spontaneous.Metadata = (function($, S) {
 			S.Types.loaded(metadata.types);
 			S.User.loaded(metadata.user);
 			S.Services.loaded(metadata.services);
-			if (callback) { callback.call(); };
+			if (callback) { callback(metadata); };
 		};
 	};
 	return {
 		load: function(onComplete) {
-			ajax.get('/metadata', loaded(onComplete));
+			ajax.get('/site', loaded(onComplete));
 		}
 	};
 }(jQuery, Spontaneous));

data/application/js/page_browser.js

@@ -52,7 +52,7 @@ Spontaneous.PageBrowser = (function($, S) {
 		get_page_list: function() {
 			var path;
 			if (typeof this.origin === 'string') {
-				path = '/location' + this.origin;
+				path = '/map/path' + this.origin;
 			} else {
 				path = '/map/' + this.origin.id;
 			}

data/application/js/panel/root_menu.js

@@ -22,7 +22,6 @@
 			return outer;
 		},
 		after_close: function() {
-			console.log("root menu after close")
 			if (this.afterCloseCallback && (typeof this.afterCloseCallback === "function")) {
 				this.afterCloseCallback();
 			}