spontaneous 0.2.0.beta1 → 0.2.0.beta2

data/application/js/popover.js

@@ -13,7 +13,7 @@ Spontaneous.Popover = (function($, S) {
 		},
 		open: function(event) {
 			var view = this.view;
-			var location = Popover.div();
+			var location = view.attach_to();
 			var wrapper = dom.div('.pop-over');
 			var handle = dom.div('.menuHandle');
 			var header = dom.header();//.append(back_btn).append(title);
@@ -26,34 +26,49 @@ Spontaneous.Popover = (function($, S) {
 				var back_btn = dom.a('.button.back').append(dom.span('.pointer')).append(dom.span('.label').text("Back")).css('visibility', 'hidden');
 				header.append(back_btn);
 			}
+			var target = event.currentTarget;
+			this.set_position(target, wrapper, handle);
+
 			header.append(title);
+
 			if (view.close_text()) {
 				var close_btn = dom.a('.button.close').text(view.close_text()).click(this.close.bind(this));
 				header.append(close_btn);
 			}
 			wrapper.append(handle).append(header).append(view_wrapper);
-			var o = view.position_from_event(event), handle_width = 30, offset = 10, left = -30, top = 18;
-
-			if (view.align === 'right') {
-				handle.css('left', (view.width() - (offset + handle_width)) + 'px')
-				left = -(view.width() - (offset + handle_width/2) + 8);
-			}
-			// need to subtract the height of the top-bar because the
-			// popover is positioned absolutely inside the data-pane but
-			// given coordinates relative to the body
-			top -= 37 - Popover.div().scrollTop();
-			wrapper.offset({top:(o.top+top), left:(o.left + left)});
 			wrapper.hide();
 			location.append(wrapper);
+
+			var update_position = function(e) {
+				this.set_position(target, wrapper, handle);
+			}.bind(this);
+
+			if (view.scroll) {
+				view.scroll_element().bind("scroll.popover", update_position);
+			}
 			this.wrapper = wrapper;
 			this.is_open = true;
 			wrapper.fadeIn(200, this.after_open.bind(this));
 		},
 
+		set_position: function(target, wrapper, handle) {
+			var view = this.view, o = view.position_from_event(target), handle_width = 30, offset = 10, left = -30, top = 18;
+
+			if (view.align === 'right') {
+				handle.css('left', (view.width() - (offset + handle_width)) + 'px')
+				left = -(view.width() - (offset + handle_width/2) + 8);
+			}
+			wrapper.css({top:(o.top), left:(o.left + left)});
+		},
+
 		after_open: function() {
 			this.view.after_open();
 		},
 		close: function() {
+			var view = this.view;
+			if (view.scroll) {
+				view.scroll_element().unbind("scroll.popover");
+			}
 			Popover.close();
 			return false;
 		},

data/application/js/popover_view.js

@@ -22,15 +22,23 @@ Spontaneous.PopoverView = (function($, S) {
 		width: function() {
 			return 400;
 		},
-		position_from_event: function(event) {
-			return this.position_from_element(event);
+		position_from_event: function(target) {
+			var p = this.position_from_element(target);
+			// need to subtract the height of the top-bar because the
+			// popover is positioned absolutely inside the data-pane but
+			// given coordinates relative to the body
+			p.top = p.top + 18 - 37 - this.attach_to().scrollTop();
+			return p;
 		},
-		position_from_element: function(event) {
-			var t = $(event.currentTarget), o = t.offset();
+		position_from_element: function(t) {
+			var t = $(t), o = this.element_position(t);
 			o.top += t.outerHeight();
 			o.left += t.outerWidth() / 2;
 			return o
 		},
+		element_position: function(el) {
+			return $(el).offset();
+		},
 		position_from_mouse: function(event) {
 			return {top: event.clientX, left: event.clientY};
 		},
@@ -47,6 +55,14 @@ Spontaneous.PopoverView = (function($, S) {
 		do_close: function() {
 		},
 		after_close: function() {
+		},
+		attach_to: function() {
+			return Spontaneous.Popover.div();
+		},
+		// Should the popover scroll with the document?
+		scroll: false,
+		scroll_element: function() {
+			return S.ContentArea.inner;
 		}
 	});
 	return PopoverView;

data/application/js/preview.js

@@ -1,6 +1,6 @@
 // console.log('Loading Preview...');
 
-Spontaneous.Preview = (function($, S) {
+Spontaneous.Preview = (function($, S, $window) {
 	var dom = S.Dom, goto_id = 0;
 	var click_param = function() {
 		return "?__click="+(++goto_id);
@@ -22,21 +22,31 @@ Spontaneous.Preview = (function($, S) {
 			return this;
 		},
 		display: function(page) {
-
 			// HACK: must be a better way of making sure that updates to the path are
-			// propagated throughout entrie interface
+			// propagated throughout entire interface
 			var path = S.Location.get('path');
-			this.iframe.show().fadeOut(0)
-			this.iframe.bind('load.preview', function() {
-				var _iframe = this;
-				$(this.contentWindow.document).ready(function() {
-					$(_iframe).fadeIn(100);
-				})
-				S.Preview.set({
-					'title': this.contentWindow.document.title,
-					'path': this.contentWindow.location.pathname
-				});
-				S.Location.load_path(this.contentWindow.location.pathname)
+			var preview = this, $iframe = this.iframe, iframe = $iframe[0];
+			var location, monitorInterval = 200, monitor = function() {
+				var icw = iframe.contentWindow, currentLocation = icw.location.pathname;
+				if (currentLocation !== location) {
+					location = currentLocation;
+					S.Preview.set({
+						'title': iframe.contentWindow.document.title,
+						'path': iframe.contentWindow.location.pathname
+					});
+					$(icw).bind('unload', function(e) {
+						// trigger a progress indicator here
+					});
+					S.Location.load_path(iframe.contentWindow.location.pathname);
+				}
+			};
+
+			$iframe.hide();
+			$iframe.one("load", function() {
+				$iframe.show();
+				if (!preview.previewPathMonitor) {
+					preview.previewPathMonitor = $window.setInterval(monitor, monitorInterval);
+				}
 			});
 			this.goto_path(path);
 		},
@@ -53,11 +63,16 @@ Spontaneous.Preview = (function($, S) {
 			}
 		},
 		hide: function() {
-			this.iframe.unbind('load.preview').hide();
+			var preview = this;
+			preview.iframe.unbind('load.preview').hide();
+			if (preview.previewPathMonitor) {
+				$window.clearInterval(preview.previewPathMonitor);
+				preview.previewPathMonitor = null;
+			}
 		},
 		show: function() {
 			this.iframe.show();
 		}
 	});
 	return Preview;
-})(jQuery, Spontaneous);
+})(jQuery, Spontaneous, window);

data/application/js/progress.js

@@ -15,15 +15,15 @@ Spontaneous.Progress = (function($, S) {
 			segment_width: 0.6, // spinner bar thickness. 1 means inner edges form unbroken circle
 			trail_length: 1.1, // trail length of 1 means shaded bars go all the way around
 			rounded: true,
-			shaded: false,
-		}
+			shaded: false
+		};
 		if (typeof options == 'undefined') options = {};
 		var settings = {};
-		for (k in defaults) {
+		for (var k in defaults) {
 			settings[k] = defaults[k];
 		}
 
-		for (k in options) {
+		for (var k in options) {
 			settings[k] = options[k];
 		}
 		return {
@@ -125,6 +125,7 @@ Spontaneous.Progress = (function($, S) {
 				ctx.closePath();
 				ctx.fillStyle = colour;    // color
 				ctx.fill();
+				return this;
 			},
 
 			_redraw: function() {
@@ -140,16 +141,16 @@ Spontaneous.Progress = (function($, S) {
 				var __spinner = this;
 				var __spinning = function() {
 					__spinner._update_indeterminate();
-				}
+				};
 				this._draw_indeterminate();
 
 				this._indeterminate_interval = setInterval(__spinning, parseFloat(this.options.period) / this.options.segments);
 			},
-			spin: function() {this.indeterminate()},
-			start: function() {this.indeterminate()},
+			spin: function() { this.indeterminate(); },
+			start: function() { this.indeterminate(); },
 
 			_spin_angle: 0,
-			_spin_increment: function() { return 2 / this.options.segments },
+			_spin_increment: function() { return 2 / this.options.segments; },
 
 			_update_indeterminate: function() {
 				if (!this._indeterminate) {
@@ -182,9 +183,9 @@ Spontaneous.Progress = (function($, S) {
 					ctx.beginPath();
 
 					if (this.options.rounded) {
-						this._draw_rounded(ctx, center, r1, r2, a, p)
+						this._draw_rounded(ctx, center, r1, r2, a, p);
 					} else {
-						this._draw_square(ctx, center, r1, r2, a, p)
+						this._draw_square(ctx, center, r1, r2, a, p);
 					}
 					ctx.closePath();
 					ctx.fillStyle = this._fill(ctx, i);
@@ -226,10 +227,10 @@ Spontaneous.Progress = (function($, S) {
 				var x0 = c + r1 * sin;
 				var y0 = c + r1 * cos;
 
-				var x1 = c + r1 * sin + dx
+				var x1 = c + r1 * sin + dx;
 				var y1 = c + r1 * cos - dy;
 
-				var x2 = c + r2 * sin + dx
+				var x2 = c + r2 * sin + dx;
 				var y2 = c + r2 * cos - dy;
 
 				var x3 = c + r2 * sin - dx;
@@ -287,18 +288,18 @@ Spontaneous.Progress = (function($, S) {
 				}
 				css_colour = css_colour.replace(/ /g,'');
 				css_colour = css_colour.toLowerCase();
-				var hex = [];
+				var i, hex = [];
 				if (css_colour.length == 3) {
-					for (var i = 0; i < 3; i++) {
+					for (i = 0; i < 3; i++) {
 						hex[hex.length] = css_colour.charAt(i) + css_colour.charAt(i);
 					}
 				} else {
-					for (var i = 0; i < 3; i++) {
+					for (i = 0; i < 3; i++) {
 						hex[hex.length] = css_colour.substr(i*2, 2);
 					}
 				}
 				var rgb = [];
-				for (var i = 0; i < hex.length; i++) {
+				for (i = 0; i < hex.length; i++) {
 					rgb[i] = parseInt(hex[i], 16);
 				}
 				return rgb;
@@ -336,7 +337,7 @@ Spontaneous.Progress = (function($, S) {
 						var now = (new Date()).valueOf(), remaining = (finish_time - now)/duration;
 						disappearing.options.spinner_alpha = orig_alpha * remaining;
 					}
-				}
+				};
 
 				this._disappear_interval = setInterval(disappear, 50);
 			},
@@ -349,10 +350,10 @@ Spontaneous.Progress = (function($, S) {
 					this.stop();
 					this.indeterminate();
 				} else {
-					this._redraw()
+					this._redraw();
 				}
 			}
-		}
-	}
+		};
+	};
 	return Progress;
-})(jQuery, Spontaneous);
+})(jQuery, Spontaneous);

data/application/js/publish.js

@@ -37,8 +37,15 @@ Spontaneous.Publishing = (function($, S) {
 		},
 		body: function() {
 			var wrapper = dom.div('#publishing-dialogue');
+			var spinner = dom.div(".spinner");
+			wrapper.append(spinner);
+
+			this.spinnerWrap = spinner;
 			this.wrapper = wrapper;
-			Spontaneous.Ajax.get(['/publish', 'changes'].join('/'), this.change_list_loaded.bind(this));
+			this.spinner = S.Progress(spinner[0], 48, {period: 800, segment_length: 0.30});
+			this.spinner.start()
+			spinner.append(dom.div().append(dom.p().text("Loading changes...")))
+			Spontaneous.Ajax.get('/changes', this.change_list_loaded.bind(this));
 			return wrapper;
 		},
 		buttons: function() {
@@ -52,7 +59,7 @@ Spontaneous.Publishing = (function($, S) {
 				ids = ids.concat(changes[i].page_ids());
 			}
 			if (ids.length > 0) {
-				Spontaneous.Ajax.post(['/publish', 'publish'].join('/'),{'page_ids': ids}, this.publish_requested.bind(this));
+				Spontaneous.Ajax.post('/changes', {'page_ids': ids}, this.publish_requested.bind(this));
 			} else {
 			}
 		},
@@ -67,15 +74,14 @@ Spontaneous.Publishing = (function($, S) {
 			var change_list = outstanding.changes
 			, w = this.wrapper
 			, self = this
-			, changed_wrap = dom.div("#changes.change-list")
-			, publish_wrap = dom.div("#to-publish.change-list")
+			, changed_wrap = dom.div("#changes.change-list").css("opacity", 0)
+			, publish_wrap = dom.div("#to-publish.change-list").css("opacity", 0)
 			, first_publish = outstanding.first_publish
+			, spinner = this.spinner
 			, append_to;
 			if (first_publish) {
 				w.addClass("first-publish");
 			}
-			w.empty();
-			w.append(changed_wrap, publish_wrap)
 			if (change_list.length === 0) {
 				var summary = dom.p('.publish-up-to-date').text("The site is up to date");
 				w.append(summary);
@@ -108,9 +114,14 @@ Spontaneous.Publishing = (function($, S) {
 				if (!first_publish) {
 					publish_entries.append(dom.div('.instructions').text('Add pages to publish from the list on the left'));
 				}
-
+				spinner.stop();
+				this.spinnerWrap.remove();
+				w.empty();
+				w.append(changed_wrap, publish_wrap)
+				changed_wrap.add(publish_wrap).animate({opacity: 1});
 				self.changed_entries = changed_entries;
 				self.publish_entries = publish_entries;
+				this.spinner = this.spinnerWrap = null;
 			}
 		},
 		set_publish_all: function(state) {

data/application/js/sharded_upload.js

@@ -32,7 +32,7 @@ Spontaneous.ShardedUpload = (function($, S) {
 			this.failure_count = 0;
 		},
 		remote_path: function() {
-			return S.Ajax.request_url(['shard', this.hash].join('/'), true);
+			return S.Ajax.request_url(['shard', this.hash].join('/'));
 		},
 		begin_upload: function() {
 			// test for existance of shard on server
@@ -57,10 +57,12 @@ Spontaneous.ShardedUpload = (function($, S) {
 			// create the form and post it using the calculated hash
 			// assigning the callbacks to myself.
 
-			var form = new FormData(),
-				path = S.Ajax.request_url(['/shard', this.hash].join('/'), true);
+			var form = new FormData()
+			, path = S.Ajax.request_url(['/shard', this.hash].join('/'));
 			form.append('file', this.blob);
-			var xhr = new XMLHttpRequest(), upload = xhr.upload;
+			var xhr = S.Ajax.authenticatedRequest();
+			var upload = xhr.upload;
+
 			xhr.open("POST", path, true);
 			upload.onprogress = this.onprogress.bind(this);
 			upload.onload = this.onload.bind(this);
@@ -141,11 +143,12 @@ Spontaneous.ShardedUpload = (function($, S) {
 			form.append('shards', this.hashes().join(','));
 			form.append('mime_type', this.mime_type());
 			form.append('filename', File.filename(this.file));
-			this.post(this.path(), form);
+			this.request(this.method, this.path(), form);
 		},
 		path: function() {
-			return ["/shard/replace", this.target_id].join('/');
+			return ["/shard", this.target_id].join('/');
 		},
+		method: "PUT",
 		hashes: function() {
 			var hashes = [];
 			for (var i = 0, ii = this.completed.length; i < ii; i++) {

data/application/js/spontaneous.js

@@ -1,11 +1,12 @@
 //= require compatibility
 //= require vendor/jquery-ui-1.8.18.custom.min
-//= require vendor/JS.Class-2.1.5/min/core
+//= require vendor/js.class-2.1.5.min
 //= require vendor/crypto-2.3.0-crypto
 //= require vendor/crypto-2.3.0-sha1
 //= require vendor/diff_match_patch
 //= require vendor/date
 //= require extensions
+//= require jquery-selection-position.js
 //= require properties
 //= require dom
 //= require ajax
@@ -38,6 +39,7 @@
 //= require field/date
 //= require field/webvideo
 //= require field/select
+//= require field/boolean
 //= require content_area
 //= require preview
 //= require editing