spontaneous 0.1.0.alpha1 → 0.2.0.alpha1

data/application/js/views.js

@@ -2,6 +2,7 @@
 Spontaneous.Views = (function($, S) {
 	var dom = S.Dom;
 	var View = new JS.Class({
+		include: Spontaneous.Properties,
 		initialize: function(content) {
 			this.content = content;
 		},
@@ -79,7 +80,7 @@ Spontaneous.Views = (function($, S) {
 			w.css({'position':'relative'});
 			r.css({'position':'absolute', 'top':0, 'right':0, 'left':0}).animate({'top':h}, { queue: false, duration: time_to_reveal, complete:function() {
 				w.css({'z-index': front, 'position':'relative', 'height':'auto'})
-				r.css({'z-index': back, 'position':'absolute'})
+				r.css({'z-index': back, 'position':'absolute', 'display':'none'})
 				o.css('height', 'auto');
 				panel.on_show(focus_field);
 			}});
@@ -89,8 +90,7 @@ Spontaneous.Views = (function($, S) {
 			if (this.edit_closing) { return; }
 			this.edit_closing = true;
 			var time_to_reveal = 300, back = 10, front = 20,
-			a = this.editing_area, o = a.outer, w = a.write, r = a.read, wi = a.write_inner, ri = a.read_inner,
-			h = ri.outerHeight(), __content = this;
+			a = this.editing_area, o = a.outer, w = a.write, r = a.read.css('display', 'block'), wi = a.write_inner, ri = a.read_inner, __content = this, h = ri.outerHeight();
 			o.add(r).animate({'height':h}, { queue: false, duration: time_to_reveal });
 			r.css({'z-index':front, 'height':h, 'top':wi.outerHeight()+'px'}).animate({'top':0}, { queue: true, duration: time_to_reveal, complete: function() {
 				w.css({'position':'absolute', 'z-index':back});

data/application/js/views/box_view.js

@@ -11,6 +11,7 @@ Spontaneous.Views.BoxView = (function($, S) {
 			this.box = box;
 			this.dom_container = dom_container;
 			this.box.bind('entry_added', this.insert_entry.bind(this));
+			this.box.bind('entry_removed', this.remove_entry.bind(this));
 		},
 
 		name: function() {
@@ -41,6 +42,7 @@ Spontaneous.Views.BoxView = (function($, S) {
 			if (!this._panel) {
 				// var panel = $(dom.div, {'class': 'slot-content'});
 				var panel = dom.div('.slot-content');
+				panel.addClass('empty')
 				if (this.box.has_fields()) {
 					var w = dom.div('.box-fields');
 					var fields = new Spontaneous.FieldPreview(this, '');
@@ -53,72 +55,11 @@ Spontaneous.Views.BoxView = (function($, S) {
 					this.fields_preview = fields_preview;
 				}
 
-				var allowed = this.box.allowed_types();
-				// var allowed_bar = $(dom.div, {'class':'slot-addable'});
-				var allowed_bar = dom.div('.slot-addable');
-				var dropper = allowed_bar;
-				var drop = function(event) {
-					dropper.removeClass('drop-active').addClass('uploading');
-					// var progress_outer = $(dom.div, {'class':'drop-upload-outer'});
-					// var progress_inner = $(dom.div, {'class':'drop-upload-inner'}).css('width', 0);
-					// progress_outer.append(progress_inner);
-					// dropper.append(progress_outer);
-					// this.progress_bar = progress_inner;
-					event.stopPropagation();
-					event.preventDefault();
-					var files = event.dataTransfer.files;
-					if (files.length > 0) {
-						S.UploadManager.wrap(this, files);
-					}
-					return false;
-				}.bind(this);
-
-				var drag_enter = function(event) {
-					// var files = event.originalEvent.dataTransfer.files;
-					// console.log(event.originalEvent.dataTransfer, files)
-					$(this).addClass('drop-active');
-					event.stopPropagation();
-					event.preventDefault();
-					return false;
-				}.bind(dropper);
-
-				var drag_over = function(event) {
-					event.stopPropagation();
-					event.preventDefault();
-					return false;
-				}.bind(dropper);
-
-				var drag_leave = function(event) {
-					$(this).removeClass('drop-active');
-					event.stopPropagation();
-					event.preventDefault();
-					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 _box = this;
-				$.each(allowed, function(i, type) {
-					var a = dom.a().text(type.title), add_allowed;
-					if (type.is_alias()) {
-						a.addClass('alias')
-						add_allowed = function(type) {
-							var d = new Spontaneous.AddAliasDialogue(_box, type);
-							d.open();
-						}.bind(_box, type);
-					} else {
-						add_allowed = function(type) {
-							this.add_content(type, 0);
-						}.bind(_box, type);
-					}
-					a.click(add_allowed);
-					allowed_bar.append(a)
-				});
-				allowed_bar.append(dom.span('.down'));
-				panel.append(allowed_bar);
+				panel.append(this.add_allowed_types_bar('top', 0));
 				// var entries = $(dom.div, {'class':'slot-entries'});
 				var entries = dom.div('.slot-entries');
+				var instructions = dom.div('.slot-instructions').text("Add items using the buttons above");
+				entries.append(instructions);
 				// panel.append();
 				for (var i = 0, ee = this.entries(), ii = ee.length;i < ii; i++) {
 					var entry = ee[i];
@@ -126,35 +67,129 @@ Spontaneous.Views.BoxView = (function($, S) {
 				}
 				entries.sortable({
 					items:'> .'+this.entry_class(),
-					handle: '.title-bar',
+					// handle: '.title-bar',
 					axis:'y',
 					distance: 5,
 					tolerance: 'pointer',
+					// tolerance: 'intersect',
 					scrollSpeed: 40,
 					containment: 'parent',
+					cursor: 'move',
 					stop: function(event, ui) {
 						this.re_sort(ui.item);
 					}.bind(this)
 				})
 				panel.append(entries);
-				panel.hide();
-				this.dom_container.append(panel)
-				this._panel = panel;
+			// this.floating_add_bar = this.add_allowed_types_bar('floating', -1).hide();
+			// var _bottom_add_bar = this.add_allowed_types_bar('bottom', -1).hide();
+			// panel.append(_bottom_add_bar);
+			panel.hide();
+			this.dom_container.append(panel)
+			this._panel = panel;
 				this._entry_container = entries;
+				// this._bottom_add_bar = _bottom_add_bar;
 			}
+			this.check_if_empty();
 			return this._panel;
 		},
+		check_if_empty: function() {
+			var _view = this, _panel = this._panel;
+			if (_view.box.entries().length == 0) {
+				_panel.addClass('empty');
+				// _view._bottom_add_bar.fadeOut($.fn.appear.height_change_duration/2, function() {
+				// })
+			} else {
+				_panel.removeClass('empty');
+				// _view._bottom_add_bar.fadeIn(function() {
+				// })
+			}
+		},
+		add_allowed_types_bar: function(position, insert_at) {
+			var allowed = this.box.allowed_types()
+			// var allowed_bar = $(dom.div, {'class':'slot-addable'});
+			, _box = this
+			, allowed_bar = dom.div('.slot-addable')
+			, dropper = allowed_bar
+			, drop = function(event) {
+				dropper.removeClass('drop-active').addClass('uploading');
+				// var progress_outer = $(dom.div, {'class':'drop-upload-outer'});
+				// var progress_inner = $(dom.div, {'class':'drop-upload-inner'}).css('width', 0);
+				// progress_outer.append(progress_inner);
+				// dropper.append(progress_outer);
+				// this.progress_bar = progress_inner;
+				event.stopPropagation();
+				event.preventDefault();
+				var files = event.dataTransfer.files;
+				if (files.length > 0) {
+					S.UploadManager.wrap(this, files, insert_at);
+				}
+				return false;
+			}.bind(this)
+
+			, drag_enter = function(event) {
+				// var files = event.originalEvent.dataTransfer.files;
+				// console.log(event.originalEvent.dataTransfer, files)
+				$(this).addClass('drop-active');
+				event.stopPropagation();
+				event.preventDefault();
+				return false;
+			}.bind(dropper)
+
+			, drag_over = function(event) {
+				event.stopPropagation();
+				event.preventDefault();
+				return false;
+			}.bind(dropper)
+
+			, drag_leave = function(event) {
+				$(this).removeClass('drop-active');
+				event.stopPropagation();
+				event.preventDefault();
+				return false;
+			}.bind(dropper);
+
+			allowed_bar.addClass(position);
+			dropper.get(0).addEventListener('drop', drop, true);
+			dropper.bind('dragenter', drag_enter).bind('dragover', drag_over).bind('dragleave', drag_leave);
+
+			$.each(allowed, function(i, type) {
+				var a = dom.a().text(type.title), add_allowed;
+				if (type.is_alias()) {
+					a.addClass('alias')
+					add_allowed = function(type) {
+						var d = new Spontaneous.AddAliasDialogue(_box, type, insert_at);
+						d.open();
+					}.bind(_box, type);
+				} else {
+					add_allowed = function(type) {
+						this.add_content(type, insert_at);
+					}.bind(_box, type);
+				}
+				a.click(add_allowed);
+				allowed_bar.append(a)
+			});
+			allowed_bar.append(dom.span('.down'));
+
+			return allowed_bar;
+		},
 		re_sort: function(item) {
-			var order = this._entry_container.sortable('toArray'), css_id = item.attr('id'), position = 0;
+			var entries = this.entries(), order = this._entry_container.sortable('toArray'), css_id = item.attr('id'), new_position = 0;
 			for (var i = 0, ii = order.length; i < ii; i++) {
-				if (order[i] === css_id) { position = i; break; }
+				if (order[i] === css_id) { new_position = i; break; }
 			}
-			var id = css_id.split('-')[1], entry;
+			var id = css_id.split('-')[1], entry, old_position = 0;
 
-			for (var i = 0, entries = this.entries(), ii = entries.length; i < ii; i++) {
-				if (entries[i].id() == id) { entry = entries[i]; break; }
+			for (var i = 0, ii = entries.length; i < ii; i++) {
+				if (entries[i].id() == id) {
+					old_position = i;
+					entry = entries[i];
+					break;
+				}
 			}
-			entry.reposition(position, function(entry) {
+			// move entry inside the array so that we can reliably find its position
+			entries.splice(old_position, 1);
+			entries.splice(new_position, 0, entry);
+			entry.reposition(new_position, function(entry) {
 				this.sorted(entry)
 			}.bind(this));
 		},
@@ -179,11 +214,12 @@ Spontaneous.Views.BoxView = (function($, S) {
 			if (entry.is_page()) {
 				view_class = S.Views.PagePieceView;
 			}
-			view = new view_class(entry);
+			view = new view_class(entry, this);
 			return view;
 		},
 		claim_entry: function(entry) {
 			var div = entry.panel();
+			entry.bind('removed', this.entry_removed.bind(this));
 			return div.attr('id', this.entry_id(entry)).addClass(this.entry_class());
 		},
 
@@ -203,23 +239,68 @@ Spontaneous.Views.BoxView = (function($, S) {
 			this.box.add_entry(content_type, position);
 		},
 
-		add_alias: function(target_id, type) {
-			this.box.add_alias(target_id, type);
+		add_alias: function(target_id, type, position) {
+			this.box.add_alias(target_id, type, position);
 		},
 
 		insert_entry: function(entry, position) {
-			this.trigger('entry_added', entry);
-			var entries = this.entries(), w = this.entry_wrappers(), e = this.view_for_entry(entry), h = this.claim_entry(e);
-			entries.splice(position, 0, e);
-			if (w.length > 0) {
-				this.entry_wrappers().slice(position, position+1).before(h);
+			this.trigger('entry_added', entry, position);
+			var entries = this.entries()
+			, w = this.entry_wrappers()
+			, e = this.view_for_entry(entry)
+			, h = this.claim_entry(e)
+			, view = this;
+			if (position === -1) {
+				entries.push(e);
 			} else {
+				entries.splice(position, 0, e);
+			}
+			if (position === -1 || w.length === 0) {
 				this._entry_container.append(h);
+			} else if (position === 0) {
+				this._entry_container.prepend(h);
+			} else {
+				this.entry_wrappers().slice(position-1, position).after(h);
+			}
+			if (position === -1) {
+				S.ContentArea.scroll_to_bottom($.fn.appear.height_change_duration);
+			}
+			view.check_if_empty();
+			h.hide().appear(function() {
+				if (e.content.has_fields()) {
+					e.edit();
+				}
+			});
+		},
+
+		remove_entry: function(entry) {
+		},
+		entry_removed: function(entry) {
+			var entries = this.entries();
+			for (var i = 0, ii = entries.length; i < ii; i++) {
+				if (entries[i] === entry) {
+					entries.splice(i, 1);
+				}
 			}
-			h.hide().appear();
+			this.check_if_empty();
 		},
 		entry_wrappers: function() {
 			return this._entry_container.find('> .'+this.entry_class())
+		},
+		show_add_after: function(entry, entry_spacer) {
+			var bar, position = 0;
+			for (var i = 0, entries = this.entries(), ii = entries.length; i < ii; i++) {
+				if (entries[i] === entry) {
+					position = i;
+					break;
+				}
+			}
+			bar = this.add_allowed_types_bar('floating', position + 1);
+			entry_spacer.addClass('add-entry').append(bar.show());
+		},
+		hide_add_after: function(entry, entry_spacer) {
+			entry_spacer.empty();
+			entry_spacer.removeClass('add-entry');
 		}
 	});
 

data/application/js/views/page_piece_view.js

@@ -24,7 +24,7 @@ Spontaneous.Views.PagePieceView = (function($, S) {
 			inside.append(entry);
 			var preview_area = this.create_edit_wrapper(inside);
 			contents.append(preview_area);
-			wrapper.append(contents, dom.div('.entry-spacer'));
+			wrapper.append(contents, this.entry_spacer());
 			this.wrapper = wrapper;
 			this.outline = outline;
 			this.fields_preview = fields_panel;
@@ -33,7 +33,7 @@ Spontaneous.Views.PagePieceView = (function($, S) {
 		page_title_panel: function() {
 			var wrapper = dom.div('.page-title'),
 			__content = this,
-			title = dom.a().text(this.content.title()).click(function() {
+			title = dom.a().html(this.content.title()).click(function() {
 				S.Location.load_id(__content.id());
 			});
 			this.content.title_field().watch('value', function(t) { title.text(t); }.bind(this));

data/application/js/views/page_view.js

@@ -46,7 +46,7 @@ Spontaneous.Views.PageView = (function($, S) {
 		},
 		set_title: function(title) {
 			title = title || this.page.title();
-			this.title.text(title);
+			this.title.html(title);
 			if (this.page.content.hidden) {
 				this.title.append(dom.span().text(' (hidden)'));
 			}
@@ -74,6 +74,13 @@ Spontaneous.Views.PageView = (function($, S) {
 				edit.append(label, input_and_error);
 				edit.append(dom.a('.button.save').text('Save').click(submit));
 				edit.append(dom.a('.button.cancel').text('Cancel').click(this.close.bind(this)));
+				input.bind('keydown.uideditor', function(event) {
+					var s_key = 83, esc_key = 27;
+					if ((event.ctrlKey || event.metaKey) && event.keyCode === s_key) {
+						submit();
+						return false;
+					}
+				}.bind(this));
 				input.keyup(function(event) {
 					if (event.keyCode === 13) {
 						submit();
@@ -127,36 +134,60 @@ Spontaneous.Views.PageView = (function($, S) {
 				input_and_error.append(input);
 				input_and_error.append(error);
 				edit.append(input_and_error);
+
 				var submit = function() {
 					this.save(input.val());
 				}.bind(this);
+
+				var last_slug = slug;
+				var close = function() { this.close(); }.bind(this);
+
 				edit.append(dom.a('.button.save').text('Save').click(submit));
-				edit.append(dom.a('.button.cancel').text('Cancel').click(this.close.bind(this)));
+				edit.append(dom.a('.button.cancel').text('Cancel').click(close));
+
+				input.bind('keydown.urleditor', function(event) {
+					var s_key = 83, esc_key = 27;
+					if ((event.ctrlKey || event.metaKey) && event.keyCode === s_key) {
+						submit();
+						return false;
+					}
+				}.bind(this));
+
 				input.keyup(function(event) {
 					if (event.keyCode === 13) {
 						submit();
 					} else {
-						var v = this.input.val();
-						// do some basic cleanup -- proper cleanup is done on the server-side
-						v = v.toLowerCase().replace(/['"]/g, '').replace(/\&/, 'and');
-						v = v.replace(/[^\w0-9+]/g, '-').replace(/(\-+|\s+)/g, '-').replace(/(^\-)/, '');
-						this.input.val(v);
-						if (v === '') {
+						var i = this.input, v = i.val(), i0 = i[0], se = i0.selectionEnd;
+						if (v !== last_slug) {
+							// do some basic cleanup -- proper cleanup is done on the server-side
+							v = v.toLowerCase().replace(/['"]/g, '').replace(/\&/, 'and');
+							v = v.replace(/[^\w0-9+]/g, '-').replace(/(\-+|\s+)/g, '-').replace(/(^\-)/, '');
+							if (last_slug.length === v.length) {
+								se -= 1;
+							}
+							i.val(v);
+							i0.selectionStart = i0.selectionEnd = se;
+							last_slug = v;
+							if (v === '') {
 								this.show_path_error('Invalid URL');
-						} else {
-							if (this.unavailable[v]) {
-								this.show_path_error();
 							} else {
-								this.hide_path_error();
+								if (this.unavailable[v]) {
+									this.show_path_error();
+								} else {
+									this.hide_path_error();
+								}
 							}
 						}
 					}
 				}.bind(this)).keydown(function(event) {
-					if (event.keyCode === 27) { this.close(); }
+					if (event.keyCode === 27) { close(); }
 				}.bind(this));
+
+				edit.fadeIn(200, function() {
+					input.focus();
+				});
 				this.input = input;
 				this.error = error;
-				edit.fadeIn(200);
 			}.bind(this));
 		},
 		show_path_error: function(error_text) {
@@ -177,7 +208,7 @@ Spontaneous.Views.PageView = (function($, S) {
 				this.hide_path_error();
 				var view = $('h3.path', this.panel), edit = $('.edit', this.panel);
 				this.page.set('path', response.path);
-				view.text(response.path);
+				this.page.set('slug', response.slug);
 				this.close();
 				// HACK: see preview.js (Preview.display)
 				Spontaneous.Location.set('path', this.page.get('path'))