spontaneous 0.2.0.alpha2 → 0.2.0.alpha3

data/application/js/field_types/file_field.js

@@ -3,9 +3,83 @@ Spontaneous.FieldTypes.FileField = (function($, S) {
 	var dom = S.Dom;
 	var FileField = new JS.Class(Spontaneous.FieldTypes.StringField, {
 		selected_files: false,
+
 		preview: function() {
 			Spontaneous.UploadManager.register(this);
-			return this.callSuper();
+			var self = this
+			, value = this.get('value')
+			, filename = this.filename(value);
+			var wrap = dom.div('.file-field');
+			var dropper = dom.div('.file-drop');
+
+			var stopEvent = function(event) {
+				event.stopPropagation();
+				event.preventDefault();
+			};
+
+			var drop = function(event) {
+				stopEvent(event);
+				dropper.removeClass('drop-active');
+				var files = event.dataTransfer.files;
+
+				if (files && files.length > 0) {
+					this.selected_files = files;
+					S.Ajax.test_field_versions(this.content, [this], this.upload_values.bind(this), this.upload_conflict.bind(this));
+				}
+
+				return false;
+			}.bind(this);
+
+			var drag_enter = function(event) {
+				stopEvent(event);
+				$(this).addClass('drop-active');
+				return false;
+			}.bind(dropper);
+
+			var drag_over = function(event) {
+				stopEvent(event);
+				return false;
+			}.bind(dropper);
+
+			var drag_leave = function(event) {
+				stopEvent(event);
+				$(this).removeClass('drop-active');
+				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 filename_info = dom.div('.filename');
+			var filesize_info = dom.div('.filesize');
+
+			var set_info = function(href, filename, filesize) {
+				filename_info.text(filename);
+				if (filesize) {
+					filesize_info.text(parseFloat(filesize, 10).to_filesize());
+				}
+			};
+			if (value) {
+				set_info(value.html, this.filename(value), value.filesize);
+			}
+
+			dropper.append(this.progress_bar().parent());
+
+			wrap.append(dropper, filename_info, filesize_info);
+
+			this.drop_target = dropper;
+			this.value_wrap =  wrap;
+
+			return wrap;
+		},
+		upload_values: function() {
+			var file = this.selected_files[0];
+			S.UploadManager.replace(this, file);
+		},
+		upload_conflict: function(conflict_data) {
+			var dialogue = new S.ConflictedFieldDialogue(this, conflict_data);
+			dialogue.open();
 		},
 		unload: function() {
 			this.callSuper();
@@ -14,33 +88,138 @@ Spontaneous.FieldTypes.FileField = (function($, S) {
 			Spontaneous.UploadManager.unregister(this);
 		},
 		upload_complete: function(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();
 		},
+		progress_bar: function() {
+			if (!this._progress_bar) {
+				var progress_outer = dom.div('.drop-upload-outer').hide();
+				var progress_inner = dom.div('.drop-upload-inner').css('width', 0);
+				progress_outer.append(progress_inner);
+				this._progress_bar = progress_inner;
+			}
+			return this._progress_bar;
+		},
 		disable_progress: function() {
 			this.progress_bar().parent().hide();
-			this.drop_target.removeClass('uploading')
+			this.drop_target.add(this.value_wrap).removeClass('uploading')
 		},
 		upload_progress: function(position, total) {
-			if (!this.drop_target.hasClass('uploading')) { this.drop_target.addClass('uploading'); }
+			if (!this.drop_target.hasClass('uploading')) {
+				this.drop_target.add(this.value_wrap).addClass('uploading');
+			}
 			this.progress_bar().parent().show();
 			this.progress_bar().css('width', ((position/total)*100) + '%');
 		},
 		is_file: function() {
 			return true;
 		},
-		get_input: function() {
-			this.input = dom.input({'type':'file', 'name':this.form_name(), 'accept':'image/*'});
-			return this.input;
+
+		edit: function() {
+			var self = this;
+			var wrap = dom.div(".file-field", {'style':'position:relative;'});
+			var value = this.value();
+			var input = this.input();
+			var filename_info = dom.div('.filename');
+			var filesize_info = dom.div('.filesize');
+			var choose_files  = dom.a('.choose').text("Choose file...");
+
+			var set_info = function(filename, filesize) {
+				filename_info.text(filename);
+				if (filesize) {
+					filesize_info.text(parseFloat(filesize, 10).to_filesize());
+				}
+			};
+
+			var files_selected = function(files) {
+				if (files.length > 0) {
+					var file = files[0], url = window.URL.createObjectURL(file);
+					this.selected_files = files;
+					this._edited_value = url;
+					window.URL.revokeObjectURL(url);
+					set_info(File.filename(file), file.fileSize)
+				}
+			}.bind(this);
+
+			var onchange = function() {
+				var files = input[0].files;
+				files_selected(files);
+			}.bind(this);
+
+			var onclick = function() {
+				self.focus();
+				input.trigger('click');
+				return false;
+			};
+
+			input.change(onchange);
+
+			var dropper = dom.div('.file-drop');
+
+			dropper.add(choose_files).click(onclick);
+
+			// dropper.append(filename_info, filesize_info)
+			wrap.append(dropper);
+
+			var stopEvent = function(event) {
+				event.stopPropagation();
+				event.preventDefault();
+			};
+
+			var drop = function(event) {
+				stopEvent(event);
+				dropper.removeClass('drop-active');
+				var files = event.dataTransfer.files;
+				files_selected(files);
+				return false;
+			}.bind(this);
+
+			var drag_enter = function(event) {
+				stopEvent(event);
+				$(this).addClass('drop-active');
+				return false;
+			}.bind(dropper);
+
+			var drag_over = function(event) {
+				stopEvent(event);
+				return false;
+			}.bind(dropper);
+
+			var drag_leave = function(event) {
+				stopEvent(event);
+				$(this).removeClass('drop-active');
+				return false;
+			}.bind(dropper);
+
+			dropper.get(0).addEventListener('drop', drop, true);
+			dropper.bind('dragenter', drag_enter).bind('dragover', drag_over).bind('dragleave', drag_leave);
+
+			if (value) {
+				var s = value.html.split('/'), filename = s[s.length - 1];
+				set_info(filename, value.filesize);
+			}
+			wrap.append(input, choose_files, filename_info, filesize_info);
+
+
+			return wrap;
+		},
+
+		filename: function(value) {
+			var s = value.html.split('/'), filename = s[s.length - 1];
+			return filename;
+		},
+
+		accept_mimetype: "*/*",
+		generate_input: function() {
+			return dom.input({'type':'file', 'name':this.form_name(), 'accept':this.accept_mimetype});
 		},
 		accepts_focus: false,
 		// called by edit dialogue in order to begin the async upload of files
 		save: function() {
 			if (!this.selected_files) { return; }
-			var files = this.selected_files; //this.input[0].files;
+			var files = this.selected_files;
 			if (files && files.length > 0) {
 				this.drop_target.addClass('uploading');
 				this.progress_bar().parent().show();
@@ -51,7 +230,7 @@ Spontaneous.FieldTypes.FileField = (function($, S) {
 			this.selected_files = false;
 		},
 		is_modified: function() {
-			var files = this.selected_files; //this.input[0].files;
+			var files = this.selected_files;
 			return (files && files.length > 0);
 		},
 		original_value: function() {

data/application/js/field_types/image_field.js

@@ -40,15 +40,15 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 			this._progress_bar = null;
 		},
 
-		progress_bar: function() {
-			if (!this._progress_bar) {
-				var progress_outer = dom.div('.drop-upload-outer').hide();
-				var progress_inner = dom.div('.drop-upload-inner').css('width', 0);
-				progress_outer.append(progress_inner);
-				this._progress_bar = progress_inner;
-			}
-			return this._progress_bar;
-		},
+		// progress_bar: function() {
+		// 	if (!this._progress_bar) {
+		// 		var progress_outer = dom.div('.drop-upload-outer').hide();
+		// 		var progress_inner = dom.div('.drop-upload-inner').css('width', 0);
+		// 		progress_outer.append(progress_inner);
+		// 		this._progress_bar = progress_inner;
+		// 	}
+		// 	return this._progress_bar;
+		// },
 
 
 		upload_progress: function(position, total) {
@@ -57,9 +57,14 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 			this.callSuper();
 		},
 
-		preview: function() {
+		preview: function(container) {
 			Spontaneous.UploadManager.register(this);
-			var value = this.get('value').original, src = value.src, img = null, dim = 45;
+			var self = this
+			, value = this.get('value').original
+			, src = value.src
+			, img = null
+			, dim = 45
+			, container = container.parent('li');
 
 			if (src === "") {
 				img = dom.img('.missing-image', {'src':'/@spontaneous/static/px.gif'});
@@ -67,8 +72,12 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 				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;
+					if (r >= 1) { // landscape -- fit image vertically
+						// tag for extra css styles applicable to landscape images
+						container.addClass('landscape');
+						if (h <= dim) {
+							dh = (dim - h)/2;
+						}
 					}
 					$this.css('top', dom.px(dh));
 				});
@@ -102,16 +111,23 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 				if (files.length > 0) {
 					this.selected_files = files;
 					var file = files[0],
-					url = window.URL.createObjectURL(file);
+					url = window.URL.createObjectURL(file)
+					, image = this.image;
 					this._edited_value = url;
-					this.image.__start_upload = true;
-					this.image.bind('load', function() {
+					image.__start_upload = true;
+					image.bind('load', function() {
 						if (this.image.__start_upload) {
-							this.image.__start_upload = false;
+							image.__start_upload = false;
 							S.Ajax.test_field_versions(this.content, [this], this.upload_values.bind(this), this.upload_conflict.bind(this));
 						}
+						var img = image[0], w = img.width, h = img.height, r = w/h;
+						if (r > 1) {
+							container.addClass('landscape');
+						} else {
+							container.removeClass('landscape');
+						}
 					}.bind(this))
-					this.image.attr('src', url)
+					image.attr('src', url)
 					// see http://www.htmlfivewow.com/slide25
 					window.URL.revokeObjectURL(url);
 				}
@@ -140,18 +156,11 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 
 			dropper.get(0).addEventListener('drop', drop, true);
 			dropper.bind('dragenter', drag_enter).bind('dragover', drag_over).bind('dragleave', drag_leave);
+			this.value_wrap = outer;
 			this.drop_target = dropper;
 			this.preview_img = img;
 			return outer;
 		},
-		upload_values: function() {
-			var file = this.selected_files[0];
-			S.UploadManager.replace(this, file);
-		},
-		upload_conflict: function(conflict_data) {
-			var dialogue = new S.ConflictedFieldDialogue(this, conflict_data);
-			dialogue.open();
-		},
 		conflicts_resolved: function(resolution_list) {
 			console.log('conflicts_resolved', resolution_list)
 			var resolution = resolution_list[0];
@@ -251,7 +260,8 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 					this._edited_value = url;
 					this.image.attr('src', url)
 					window.URL.revokeObjectURL(url);
-					set_info(file.fileName, file.fileSize, null, null)
+					console.log(file)
+					set_info(File.filename(file), file.fileSize, null, null)
 				}
 			}.bind(this);
 
@@ -318,8 +328,14 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 			return wrap;
 		},
 
+		get_input: function() {
+			console.log("FileField", "#get_input")
+			this.input = this.generate_input();
+			return this.input;
+		},
+
 		edited_value: function() {
-			return this.input().val();
+			return this.input.val();
 		},
 		cancel_edit: function() {
 			this.image.attr('src', this.original_value().src);
@@ -336,7 +352,8 @@ Spontaneous.FieldTypes.ImageField = (function($, S) {
 		set_edited_value: function(value) {
 			this.preview_img.attr('src', value);
 			this.callSuper(value);
-		}
+		},
+		accept_mimetype: "image/*",
 	});
 
 	ImageField.ConflictView = ImageFieldConflictView;

data/application/js/field_types/markdown_field.js

@@ -486,29 +486,55 @@ Spontaneous.FieldTypes.MarkdownField = (function($, S) {
 				text = m[1];
 				url = m[2];
 			}
+			this.open_dialogue(event, text, url);
+			this.input.focus();
+			return false;
+		},
+		open_dialogue: function(event, text, url) {
 			if (!this._dialogue) {
 				this._dialogue = Spontaneous.Popover.open(event, new LinkView(this, text, this.preprocess_url(text, url)));
 			} else {
 				this._dialogue.close();
 				this._dialogue = null;
 			}
-			this.input.focus();
-			return false;
 		},
 		expand_selection: function(state) {
 			state = this.fix_selection_whitespace(state)
-			var selected = state.selection, m, start = state.start, end = state.end;
+			var selected = state.selection, m, n, start = state.start, end = state.end;
 
-			m = /(\[[^\)]*?)$/.exec(state.before);
+			// cursor is either in the [] or in the ()
+			// first test for being in []
+			m = /(\[[^\]]*)$/.exec(state.before);
 			if (m) {
-				start -= m[1].length;
-				selected = m[1] + selected;
+				n = /^(.*\]\(.+?\))/.exec(state.after);
+				if (n) {
+					start -= m[1].length;
+					selected += m[1];
+					end += n[1].length;
+					selected += n[1];
+				}
 			}
-			// TODO: this breaks if ')' in URL...
-			m = /^([^\)\[]*?\))/.exec(state.after);
+			// now test for being in the ()
+			m = /(\[.+?\]\([^\)]*)$/.exec(state.before);
 			if (m) {
-				end += m[1].length;
-				selected += m[1];
+				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];
+				}
 			}
 			return {selection:selected, start:start, end:end};
 		},
@@ -526,6 +552,8 @@ Spontaneous.FieldTypes.MarkdownField = (function($, S) {
 					url = 'http://' + url;
 				} else if (/^[^ @]+@([a-z-]+\.)+[a-z]{2,}$/i.exec(url)) { // email addresses
 					url = 'mailto:' + url;
+				} else if (/^@([a-z0-9_]{1,15})$/i.exec(url)) { // twitter handles
+					url = 'https://twitter.com/' + url.substring(1);
 				} else {
 					// need a flag saying that the string doesn't look like URL because
 					// this function is used in two places and each one needs to respond
@@ -569,7 +597,22 @@ Spontaneous.FieldTypes.MarkdownField = (function($, S) {
 	var MarkdownField = new JS.Class(Spontaneous.FieldTypes.StringField, {
 		actions: [Bold, Italic, H1, H2, UL, OL, Link],
 		generate_input: function() {
-			return dom.textarea(dom.id(this.css_id()), {'name':this.form_name(), 'rows':10, 'cols':90}).val(this.unprocessed_value());
+			var input = dom.textarea(dom.id(this.css_id()), {'name':this.form_name(), 'rows':10, 'cols':90}).val(this.unprocessed_value()), height = this.content.getFieldMetadata(this, 'height');
+			if (height) {
+				input.css('height', dom.px(height));
+			}
+
+			return input;
+		},
+		on_show: function() {
+			var self = this, input = self.input();
+			input.resizable({
+				handles: 's',
+				minHeight: 100,
+				stop: function(event, ui) {
+					self.content.setFieldMetadata(self, 'height', ui.size.height);
+				}
+			});
 		},
 		on_focus: function() {
 			if (!this.expanded) {
@@ -579,7 +622,7 @@ Spontaneous.FieldTypes.MarkdownField = (function($, S) {
 				var text_height = input[0].scrollHeight, max_height = 500, resize_height = Math.min(text_height, max_height);
 				// console.log(resize_height, h)
 				if (Math.abs(resize_height - h) > 20) {
-					input.animate({'height':resize_height});
+					// input.animate({'height':resize_height});
 					this.expanded = true;
 				}
 			}
@@ -588,7 +631,7 @@ Spontaneous.FieldTypes.MarkdownField = (function($, S) {
 		on_blur: function() {
 			if (this.expanded) {
 				var input = this.input();
-				input.animate({ 'height':input.data('original-height') });
+				// input.animate({ 'height':input.data('original-height') });
 				this.expanded = false;
 			}
 			this.callSuper();
@@ -606,7 +649,7 @@ Spontaneous.FieldTypes.MarkdownField = (function($, S) {
 					this._toolbar.append(cmd.button());
 				}
 				this._wrapper.append(this._toolbar);
-				input.css('height', '');
+				// input.css('height', '');
 			}
 			return this._wrapper;
 		},

data/application/js/field_types/select_field.js

@@ -0,0 +1,72 @@
+
+Spontaneous.FieldTypes.SelectField = (function($, S) {
+	"use strict";
+
+	var dom = S.Dom
+	, ajax = S.Ajax;
+
+	var SelectField = new JS.Class(Spontaneous.FieldTypes.StringField, {
+		edit: function() {
+			var self = this
+			, type = this.type
+			, option_list = type.option_list
+			, wrapper = dom.div(".select-field-type")
+			, callback;
+			if (!option_list) {
+				// dynamic, make ajax call
+				callback = function(data) {
+					self.append_select(wrapper, data);
+				};
+				ajax.get(this.optionsURL(), callback);
+			} else {
+				self.append_select(wrapper, option_list);
+			}
+			return wrapper;
+		},
+
+		optionsURL: function() {
+			return ["/options", this.type.schema_id, this.content.id()].join("/");
+		},
+
+		append_select: function(wrapper, option_list) {
+			var select = dom.select()
+			, options = {}
+			, selected = this.selectedValue();
+			option_list.forEach(function(val) {
+				var value = val[0]
+				, label = val[1]
+				, option = dom.option({"value": value}).text(label);
+				options[value] = label;
+				if (value == selected) { // only == so that strings successfully match ints
+					option.attr("selected", "selected");
+				}
+				select.append(option);
+			});
+			this._select = select;
+			this._options = options;
+			wrapper.append(select);
+		},
+
+		preview: function() {
+			return this.parsedValue()[1];
+		},
+
+		parsedValue: function() {
+			var value = this.get("value")
+			if (!value) { return []; }
+			return JSON.parse(this.get('value'));
+		},
+
+		selectedValue: function() {
+			return this.parsedValue()[0];
+		},
+
+		edited_value: function() {
+			var value = this._select.val()
+			, label = this._options[value];
+			return JSON.stringify([value, label]);
+		}
+	});
+
+	return SelectField;
+})(jQuery, Spontaneous);

data/application/js/field_types/string_field.js

@@ -166,6 +166,8 @@ Spontaneous.FieldTypes.StringField = (function($, S) {
 		footer: function() {
 			return false;
 		},
+		on_show: function() {
+		},
 		focus: function() {
 			this.input().focus().select();
 		},
@@ -179,6 +181,12 @@ Spontaneous.FieldTypes.StringField = (function($, S) {
 		},
 		conflict_view: function(dialogue, conflict) {
 			return new StringFieldConflictView(dialogue, conflict);
+		},
+		serializedValue: function() {
+			return {
+				name: this.form_name(),
+				value: this.edited_value()
+			};
 		}
 	});
 

data/application/js/field_types/webvideo_field.js

@@ -9,6 +9,14 @@ Spontaneous.FieldTypes.WebVideoField = (function($, S) {
 		// edit: function() {
 		// 	return this.get_input();
 		// }
+		preview: function() {
+			var value = this.get('value')
+			, 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();
+			}
+			return dom.div().css({width: "100%", position: "relative", "padding-bottom":"56.25%", height: 0}).append(iframe)
+		}
 	});
 
 	return WebVideoField;

data/application/js/init.js

@@ -20,16 +20,10 @@ Spontaneous.Init = (function($, S) {
 		b.append(content_area.init());
 		b.append(S.StatusBar.init());
 
-		S.User.load();
-
-		S.Types.init(function() {
+		S.Metadata.load(function() {
 			location.init(function() {
 				top_bar.init();
 			});
 		});
-
-
-
-
 	};
 }(jQuery, Spontaneous));