spontaneous 0.1.0.alpha1

data/application/js/progress.js

@@ -0,0 +1,358 @@
+// console.log('Loading Progress...');
+
+Spontaneous.Progress = (function($, S) {
+	var Progress = function(parent, size, options) {
+		var defaults = {
+			spinner_fg_color: "#000000", // colour
+			spinner_bg_color: null, // null  or false for transparent
+			progress_fg_color: "#000000", // colour
+			progress_bg_color: false, // null  or false for transparent
+			spinner_alpha: 1,
+			progress_alpha: 1,
+			period: 550, // (ms) time taken for spinner to complete one revolution
+			segments: 12,  // number of bars in spinner
+			segment_length: 0.47, // length of spinner bar as fraction of total radius
+			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,
+		}
+		if (typeof options == 'undefined') options = {};
+		var settings = {};
+		for (k in defaults) {
+			settings[k] = defaults[k];
+		}
+
+		for (k in options) {
+			settings[k] = options[k];
+		}
+		return {
+			container: parent,
+			size: size,
+			_canvas: false,
+			defaults: defaults,
+			options: settings,
+
+			_color: {},
+
+			// forces the addition of the canvas. normally this is lazily added
+			// only when the progress indicator is actually used
+			init: function() {
+				var c = this.canvas();
+			},
+
+			context: function() {
+				return this.canvas().getContext('2d');
+			},
+
+			colour: function(t, l, alpha) {
+				var c = t + '_' + l + '_color';
+				if (typeof alpha == 'undefined') alpha = this.options[t+'_alpha'];
+				if (!this._color[c]) {
+					this._color[c] = this._parse_color(this.options[c]);
+				}
+				return "rgba("+this._color[c][0]+", "+this._color[c][1]+", "+this._color[c][2]+", " +alpha+ ")";
+			},
+
+			canvas: function() {
+				var c;
+				if (this.container && !this._canvas) {
+
+					c = document.createElement('canvas');
+					c.width = this.size;
+					c.height = this.size;
+					// _log(typeof this.container)
+					var e = null;
+					if (typeof this.container == 'string') {
+						this.container = document.getElementById(this.container);
+					}
+					this.container.appendChild(c);
+					this._canvas = c;
+
+				}
+				return this._canvas;
+			},
+
+			_percent: false,
+
+			// thanks to Stoyan Stefanov
+			// for original pie drawing code:
+			// http://www.phpied.com/canvas-pie/
+			update: function(percent) {
+				this._indeterminate = false;
+
+				percent = Math.max(0.1, parseFloat(percent)); // always show something...
+				this._percent = percent;
+				var ctx = this.context();
+
+				var radius = this.size / 2;
+				var center = this.size / 2;
+				ctx.clearRect(0,0,this.size,this.size);
+				var colour;
+
+				if (this.options.progress_bg_color) {
+					colour = this.colour('progress', 'bg');
+					ctx.beginPath();
+					ctx.moveTo(center, center);
+					ctx.arc(  // draw next arc
+						center, // x
+						center, // y
+						radius,    // radius
+						Math.PI * -0.5, // -0.5 sets set the start to be top
+						Math.PI * 2,
+						false // clockwise?
+					);
+					ctx.closePath();
+					ctx.fillStyle = colour;    // color
+					ctx.fill();
+				}
+				colour = this.colour('progress', 'fg');
+
+
+				var a = (parseFloat(percent)/100.0);
+				ctx.beginPath();
+				ctx.moveTo(center, center); // center of the pie
+				ctx.arc(  // draw next arc
+					center, // x
+					center, // y
+					radius,    // radius
+					Math.PI * -0.5, // -0.5 sets set the start to be top
+					Math.PI * (- 0.5 + 2 * a),
+					false // clockwise?
+				);
+
+				ctx.lineTo(center, center); // line back to the center
+				ctx.closePath();
+				ctx.fillStyle = colour;    // color
+				ctx.fill();
+			},
+
+			_redraw: function() {
+				if (this._percent) this.update(this._percent);
+			},
+
+			_indeterminate: false,
+			_indeterminate_interval: false,
+
+			indeterminate: function() {
+				if (this._indeterminate) return;
+				this._indeterminate = true;
+				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_angle: 0,
+			_spin_increment: function() { return 2 / this.options.segments },
+
+			_update_indeterminate: function() {
+				if (!this._indeterminate) {
+					this.pause();
+					return;
+				}
+				this._spin_angle += this._spin_increment();
+				this._draw_indeterminate();
+			},
+
+			_draw_indeterminate: function() {
+				var ctx = this.context();
+
+				var radius = this._radius();
+				var center = this._center();
+				var inc = this._spin_increment();
+
+				ctx.clearRect(0,0,this.size,this.size);
+				var r1 = radius - (radius * this.options.segment_length);
+
+				var p = ((2.0 * Math.PI * r1) / this.options.segments) * this.options.segment_width ;
+				var r2 = radius;
+
+				if (this.options.rounded) r2 -= p/2;
+
+				for (var i = 0; i < this.options.segments; i++) {
+					var offset = (inc * i);
+					var a = Math.PI * (1 -this._spin_angle + offset);
+
+					ctx.beginPath();
+
+					if (this.options.rounded) {
+						this._draw_rounded(ctx, center, r1, r2, a, p)
+					} else {
+						this._draw_square(ctx, center, r1, r2, a, p)
+					}
+					ctx.closePath();
+					ctx.fillStyle = this._fill(ctx, i);
+					ctx.fill();
+				}
+			},
+
+			_draw_rounded: function(ctx, c, r1, r2, a, p) {
+				var sin = Math.sin(a);
+				var cos = Math.cos(a);
+				var a1 = Math.PI - a;
+				var a2 = 2 * Math.PI - a;
+				ctx.arc(
+					c + r1 * sin, // x
+					c + r1 * cos, // y
+					p/2,// radius
+					a1,
+					a2,
+					false
+				);
+
+				ctx.arc(
+					c + r2 * sin, // x
+					c + r2 * cos, // y
+					p/2, // radius
+					a2,
+					a1,
+					false
+				);
+
+			},
+
+			_draw_square: function(ctx, c, r1, r2, a, p) {
+				var sin = Math.sin(a);
+				var cos = Math.cos(a);
+				var dx = (p/2.0) * cos;
+				var dy = (p/2.0) * sin;
+
+				var x0 = c + r1 * sin;
+				var y0 = c + r1 * cos;
+
+				var x1 = c + r1 * sin + dx
+				var y1 = c + r1 * cos - dy;
+
+				var x2 = c + r2 * sin + dx
+				var y2 = c + r2 * cos - dy;
+
+				var x3 = c + r2 * sin - dx;
+				var y3 = c + r2 * cos + dy;
+
+				var x4 = c + r1 * sin - dx;
+				var y4 = c + r1 * cos + dy;
+
+				ctx.moveTo(x1, y1);
+				ctx.lineTo(x2, y2);
+				ctx.lineTo(x3, y3);
+				ctx.lineTo(x4, y4);
+
+			},
+
+			_fill: function(ctx, i) {
+				if (this.options.shaded) {
+					return this._shaded_fill(ctx, i);
+				} else {
+					return this._solid_fill(ctx, i);
+				}
+			},
+
+			_solid_fill: function(ctx, i) {
+				return this.colour('spinner','fg', this._alpha_for_segment(i));
+			},
+
+			_shaded_fill: function(ctx, i) {
+				var c = this._center();
+				var gradient = ctx.createRadialGradient(c, c, 0, c, c, this._radius());
+				gradient.addColorStop(0.3, this.colour('spinner', 'fg', 0));
+				gradient.addColorStop(1, this.colour('spinner', 'fg', this._alpha_for_segment(i)));
+				return gradient;
+
+			},
+
+			_alpha_for_segment: function(n) {
+				var x = (n / this.options.segments);
+				// gotta be a smart way to figure out these constants
+				var a = Math.max(0, this.options.spinner_alpha * ((1.0 / (5.0 * ((x / this.options.trail_length) + (1.0/5.8)))) - 0.168));
+				return a;
+			},
+
+			_radius: function() {
+				return this.size/2;
+			},
+
+			_center: function() {
+				return this._radius();
+			},
+
+			_parse_color: function(css_colour) {
+				if (css_colour.charAt(0) == '#') {
+					css_colour = css_colour.substr(1, 6);
+				}
+				css_colour = css_colour.replace(/ /g,'');
+				css_colour = css_colour.toLowerCase();
+				var hex = [];
+				if (css_colour.length == 3) {
+					for (var i = 0; i < 3; i++) {
+						hex[hex.length] = css_colour.charAt(i) + css_colour.charAt(i);
+					}
+				} else {
+					for (var i = 0; i < 3; i++) {
+						hex[hex.length] = css_colour.substr(i*2, 2);
+					}
+				}
+				var rgb = [];
+				for (var i = 0; i < hex.length; i++) {
+					rgb[i] = parseInt(hex[i], 16);
+				}
+				return rgb;
+			},
+
+			pause: function() {
+				// pauses indeterminate spinner
+				this._indeterminate = false;
+				// this._spin_angle = 0;
+				clearInterval(this._indeterminate_interval);
+			},
+
+			stop: function() {
+				this.pause();
+				this.clear();
+			},
+
+			clear: function() {
+				this.context().clearRect(0,0,this.size,this.size);
+			},
+
+			_disappear_interval: null,
+
+			disappear: function(duration) {
+				if (typeof duration === 'undefined') duration = 1000;
+				var disappearing = this;
+				var orig_alpha = this.options.spinner_alpha;
+				var finish_time = (new Date()).valueOf() + duration;
+				var disappear = function() {
+					if (disappearing.options.spinner_alpha <= 0) {
+						clearInterval(disappearing._disappear_interval);
+						disappearing.stop();
+						disappearing.options.spinner_alpha = orig_alpha;
+					} else {
+						var now = (new Date()).valueOf(), remaining = (finish_time - now)/duration;
+						disappearing.options.spinner_alpha = orig_alpha * remaining;
+					}
+				}
+
+				this._disappear_interval = setInterval(disappear, 50);
+			},
+
+			set_options: function(o) {
+				this.options = o;
+				this._color = {};
+				this._spin_angle = 0;
+				if (this._indeterminate) {
+					this.stop();
+					this.indeterminate();
+				} else {
+					this._redraw()
+				}
+			}
+		}
+	}
+	return Progress;
+})(jQuery, Spontaneous);

data/application/js/properties.js

@@ -0,0 +1,90 @@
+Spontaneous.Properties = (function($, S) {
+	var Properties = new JS.Module({
+		_props_debug: false,
+		_props_properties: function() {
+			if (!this._props_property_store) { this._props_property_store = {}; }
+			return this._props_property_store;
+		},
+		_props_listeners: function() {
+			if (!this._props_listener_store) { this._props_listener_store = {}; }
+			return this._props_listener_store;
+		},
+		_props_notify_changed: function(property_names) {
+			for (var c = 0, cc = property_names.length; c < cc; c++) {
+				var property_name = property_names[c], property_value = this._props_properties()[property_name];
+				// if (this._props_debug) { console.log("Properties: notify change:", property_name, property_value) }
+				var listeners = this._props_listeners_for(property_name);
+				// if (this._props_debug) { console.log("Properties: notify change", listeners) }
+				for (var i = 0, ii = listeners.length; i < ii; i++) {
+					var callback = listeners[i].callback;
+					callback(property_value);
+				}
+			}
+		},
+		_props_set_individual: function(property_name, value) {
+			if (this._props_set_individual_wo_callbacks(property_name, value)) {
+				this._props_notify_changed([ property_name ]);
+			}
+		},
+		_props_set_individual_wo_callbacks: function(property_name, value) {
+			if (this._props_debug) { console.log("setting ", property_name, value) }
+			orig_value = this._props_properties()[property_name];
+			this._props_properties()[property_name] = value;
+			var changed = (value !== orig_value)
+			return changed;
+		},
+		_props_set_multiple: function(values) {
+			var changed_props = [], property_name;
+			for (property_name in values) {
+				if (values.hasOwnProperty(property_name)) {
+					if (this._props_set_individual_wo_callbacks(property_name, values[property_name])) {
+						changed_props.push(property_name);
+					}
+				}
+			}
+			this._props_notify_changed(changed_props);
+		},
+		_props_listeners_for: function(property_name) {
+			return this._props_listeners()[property_name] || [];
+		},
+		_props_add_listener: function(name, callback) {
+			var current_listeners = this._props_listeners()[name] || [];
+			current_listeners.push({'callback': callback});
+			this._props_listeners()[name] = current_listeners;
+		},
+		// get the value of a property
+		get: function(property_name) {
+			return this._props_properties()[property_name];
+		},
+		// set the value of a property. can be called as
+		//   set('property_name', property_value)
+		// or as
+		//   set({'property_name_1': property_value_1, 'property_name_2':property_value_2})
+		// all watchers of this property will be notified of the change
+		// (only if the value acutally changes)
+		set: function() {
+			if (arguments.length === 1 && typeof arguments[0] === "object") {
+				this._props_set_multiple(arguments[0]);
+			} else if (arguments.length ===2) {
+				this._props_set_individual(arguments[0], arguments[1]);
+			}
+		},
+		// assign a callback function to a property to be called when that property changes
+		watch: function(property_name, callback) {
+			return this._props_add_listener(property_name, callback)
+		},
+		// assign a callback to an event to be called when that event is triggered
+		bind: function(event_name, callback) {
+			return this._props_add_listener(event_name, callback)
+		},
+		// trigger a particular event
+		trigger: function() {
+			var args = Array.prototype.slice.call(arguments);
+			var event_name = args.shift(), listeners = this._props_listeners_for(event_name);
+			for (var i = 0, ii = listeners.length; i < ii; i++) {
+				listeners[i].callback.apply(null, args);
+			}
+		}
+	});
+	return Properties;
+}(jQuery, Spontaneous));

data/application/js/publish.js

@@ -0,0 +1,187 @@
+// console.log('Loading Publishing...')
+
+Spontaneous.Publishing = (function($, S) {
+	var dom = S.Dom, Dialogue = Spontaneous.Dialogue;
+
+	var PublishingDialogue = new JS.Class(Dialogue, {
+		initialize: function(content) {
+			this.change_sets = [];
+		},
+		width: function() {
+			return '90%';
+		},
+		title: function() {
+			return "Publish Changes";
+		},
+		class_name: function() {
+			return "publishing";
+		},
+		body: function() {
+			var wrapper = dom.div('#publishing-dialogue').text('publishing')
+			this.wrapper = wrapper;
+			Spontaneous.Ajax.get(['/publish', 'changes'].join('/'), this.change_list_loaded.bind(this));
+			return wrapper;
+		},
+		buttons: function() {
+			btns = {};
+			btns['Publish'] = this.publish.bind(this);
+			return btns;
+		},
+		publish: function() {
+			var ids = [], changes = this.changes_to_publish();
+			for (var i = 0, ii = changes.length; i < ii; i++) {
+				ids.push(changes[i].id);
+			}
+			if (ids.length > 0) {
+				Spontaneous.Ajax.post(['/publish', 'publish'].join('/'),{'change_set_ids': ids}, this.publish_requested.bind(this));
+			} else {
+			}
+		},
+
+
+		publish_requested: function() {
+			Spontaneous.TopBar.publishing_started();
+			this.close();
+		},
+
+		change_list_loaded: function(change_list) {
+			var w = this.wrapper, __dialogue = this;
+			w.empty();
+			var changed_wrap = dom.div("#changes.change-list"), publish_wrap = dom.div("#to-publish.change-list")
+			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);
+				this.disable_button('Publish');
+			} else {
+				var publish_all = dom.a('.button').text('Publish All').click(function() {
+					this.set_publish_all(true);
+				}.bind(this));
+				var clear_all = dom.a('.button').text('Clear All').click(function() {
+					this.set_publish_all(false);
+				}.bind(this));
+				var changed_toolbar = dom.div('.actions').append(dom.div().text("Modified pages")).append(publish_all);
+				var publish_toolbar = dom.div('.actions').append(dom.div().text("Publish pages")).append(clear_all);
+				var changed_entries = dom.div('.change-sets'), publish_entries = dom.div('.change-sets')
+				changed_wrap.append(changed_toolbar, changed_entries);
+				publish_wrap.append(publish_toolbar, publish_entries);
+				for (var i = 0, ii = change_list.length; i < ii; i++) {
+					var cs = new ChangeSet(i, this, change_list[i]);
+					this.change_sets.push(cs);
+					changed_entries.append(cs.panel())
+				}
+				publish_entries.append(dom.div('.instructions').text('Add pages to publish from the list on the left'));
+				this.changed_entries = changed_entries;
+				this.publish_entries = publish_entries;
+			}
+		},
+		set_publish_all: function(state) {
+			this.publish_all = state;
+			$.each(this.change_sets, function() {
+				this.select(state);
+			});
+		},
+		change_set_state: function(change_set, state) {
+			var id = 'cs-' + change_set.id, panel, __this = this;
+			if (state) {
+				this.publish_entries.find('.instructions').hide();
+				panel = change_set.selected_panel(id).hide();
+				this.publish_entries.prepend(panel);
+				change_set.panel().disappear();
+				panel.appear();
+			} else {
+				panel = this.publish_entries.find('#'+id)
+				panel.disappear(function() {
+					panel.remove();
+					var entries = __this.publish_entries;
+					if (entries.find('.change-set').length == 0) {
+						entries.find('.instructions').fadeIn();
+					}
+				});
+				change_set.panel().appear();
+			}
+		},
+		selected: function() {
+			var selected = [], cs;
+			for (var i = 0, ii = this.change_sets.length; i < ii; i++) {
+				cs = this.change_sets[i];
+				if (cs.selected) {
+					selected.push(cs);
+				}
+			}
+			return selected;
+		},
+		changes_to_publish: function() {
+			var changes = [], selected = this.selected(), cs;
+			for (var i = 0, ii = selected.length; i < ii; i++) {
+				cs = selected[i];
+				changes = changes.concat(cs.change.changes)
+			}
+			return changes;
+		}
+	});
+
+	var ChangeSet = new JS.Class({
+		initialize: function(id, dialogue, change) {
+			this.id = id;
+			this.dialogue = dialogue;
+			this.change = change;
+			this.selected = false;
+		},
+		panel: function() {
+			if (!this._panel) {
+				var w = dom.div('.change-set'), inner = dom.div('.inner'), page_list = dom.div('.pages'), add = dom.div('.add').append(dom.span().text('+')), pages = this.pages();
+				for (var i = 0, ii = pages.length; i < ii; i++) {
+					page_list.append(dom.div('.title').text(pages[i].title).append(dom.div('.url').text(pages[i].path)));
+				}
+				add.click(function() {
+					this.select_toggle();
+				}.bind(this))
+				inner.append(page_list, add)
+				w.append(inner)
+				this.wrapper = w;
+				this._panel = w;
+			}
+			return this._panel;
+		},
+		selected_panel: function(id) {
+			var panel = this.panel().clone().attr('id', id);
+			panel.find('.add').click(this.select_toggle.bind(this)).find('span').text('-');
+			return panel;
+		},
+		select: function(state) {
+			if (state === this.selected) { return; }
+			this.selected = state;
+			this.dialogue.change_set_state(this, this.selected);
+		},
+		select_toggle: function() {
+			this.select(!this.selected)
+		},
+		update_view: function() {
+			if (this.selected) {
+				this.wrapper.addClass('selected')
+			} else {
+				this.wrapper.removeClass('selected')
+			}
+		},
+		pages: function() {
+			if (!this._pages) {
+				this._pages = this.change.pages.sort(function(p1, p2) {
+					var a = p1.depth, b = p2.depth;
+					if (a == b) return 0;
+					return (a < b ? -1 : 1);
+				});
+			}
+			return this._pages;
+		}
+	});
+
+	var Publishing = new JS.Singleton({
+		open_dialogue: function() {
+			Dialogue.open(new PublishingDialogue());
+		}
+	});
+
+	return Publishing;
+})(jQuery, Spontaneous);
+