spontaneous 0.2.0.alpha2 → 0.2.0.alpha3

data/application/css/meta.css.scss

@@ -0,0 +1,331 @@
+@import "definitions.css.scss";
+
+#content-outer #content-meta {
+	a {
+		color: $highlight;
+	}
+	.container {
+	}
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+
+#user-admin-container {
+	$container-margin: $container-padding;
+	$user-admin-dialogue-width: 680px;
+	@include calc(max-height, "100% - #{ 2 * $container-margin }");
+	@include display-box;
+	@include box-orient(vertical);
+
+	@include rounded;
+	min-height: 450px;
+	background-color: rgba(0, 0, 0, 0.2);
+	position: relative;
+	width: $user-admin-dialogue-width;
+	margin: $container-margin auto 0 auto;
+	overflow: hidden;
+
+	.title {
+		@include rounded-top;
+		height: $container-padding;
+		background-color: rgba(0, 0, 0, 0.2);
+		// background: #ccc;
+		position: relative;
+		span {
+			position: absolute;
+			color: $editing-focus;
+			left: $container-padding/4;
+			top: 15px;
+		}
+	}
+	.title.main {
+		.done {
+			@include button-color($highlight, $action);
+			position: absolute;
+			right: $container-padding / 2;
+			width: 20%;
+			top: ($container-padding / 4) + 4;
+		}
+		span {
+			color: rgba(255, 255, 255, 0.3);
+			padding-left: $container-padding - 10;
+			left: $container-padding / 4;
+			&:before {
+				@include awesome-icon("\f0c0");
+				position: absolute;
+				left: -2px;
+				top: -5px;
+				font-size: 2em;
+				margin-right: $unit;
+			}
+		}
+	}
+
+	.gap {
+		@include box-flex;
+	}
+	.edit {
+		// @extend .meta-background;
+		@include rounded;
+		@extend .editing-background;
+		@include box-sizing;
+		color: #000;
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: $user-admin-dialogue-width - $container-padding;
+		margin-right: $container-padding;
+
+		.back {
+			position: absolute;
+			left: -$container-padding;
+			top: 0;
+			bottom: 0;
+			width: $container-padding;
+		}
+		form {
+			padding: ( $container-padding / 2 ) ($container-padding / 4);
+			margin: 0;
+			p {
+				margin: 0 0 $unit 0;
+			}
+			label {
+				@include field-name;
+			}
+			.value {
+				@include field-value;
+				position: relative;
+				.error {
+					@include rounded;
+					@include box-sizing;
+					@include button-color(rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.8));
+					@include input-font;
+					margin: 0;
+					border: 0;
+					padding: 0;
+					display: table;
+					font-weight: bold;
+					position: absolute;
+					right: -3px;
+					top: 0;
+					height: 31px;
+					width: 25%;
+					color:#fff;
+					span {
+						display: table-cell;
+						padding-left: $unit;
+						vertical-align: middle;
+					}
+				}
+			}
+
+			input[type="text"], input[type="email"] {
+				@include text-input;
+			}
+			.focus {
+				label {
+					background-color: $editing-focus;
+					color: white;
+				}
+			}
+			.admin {
+				@include display-box;
+				@include box-orient(horizontal);
+				@include box-align(stretch);
+				margin-bottom: $container-padding / 2;
+				p {
+					width: 30%;
+					margin: 0;
+				}
+				.log-out {
+					display: block;
+					background: $editing-focus;
+					box-shadow: none;
+
+					&:active {
+						@include button-color($editing-focus, $editing-focus);
+					}
+
+					&.complete,
+					&.complete:hover {
+						@include button-color($editing-blur, $editing-blur);
+					}
+
+					&:before {
+						@include awesome-icon("\f08b ");
+						margin-right: $unit/2;
+					}
+				}
+				.enabled {
+					label {
+						@include rounded;
+						background-color: $editing-focus;
+						height: 17px;
+						position: relative;
+						input {
+							margin: 0;
+							padding: 0;
+							position: absolute;
+							right: $unit;
+							top: 3px;
+						}
+					}
+				}
+			}
+			.save {
+				@include display-box;
+				@include box-orient(horizontal);
+				@include box-align(stretch);
+				margin-top: ($container-padding / 2);
+				.button {
+					@include button-color($highlight, $action);
+					display: block;
+					width: 30%;
+				}
+				.cancel {
+					@include button-color($editing-blur, $action);
+				}
+			}
+			.level-select {
+				@include input-font;
+				@include no-select;
+				position: relative;
+				height: 20px;
+				cursor: pointer;
+				font-weight: bold;
+				z-index: 100;
+				.select {
+					@include rounded;
+					cursor: pointer;
+					position: absolute;
+					background-color: opacify($editing-focus, 0.5);
+					width: 300px;
+					padding: $unit/2 0;
+					color: #fff;
+					margin-left: -$unit;
+					margin-top: -$unit/2;
+					z-index: 100;
+					.level {
+						@include display-box;
+						@include box-align(stretch);
+						@include box-orient(horizontal);
+						padding: $unit/2 $unit;
+						// position: relative;
+						span {
+							display: block;
+							width: 25%;
+						}
+						.level-name {
+							@include box-flex;
+							width: auto;
+						}
+						span.true, span.false {
+							margin-left: $unit;
+							font-weight: normal;
+						}
+
+						span.true {
+							color: $editing;
+						}
+						span.true:before {
+							@include awesome-icon("\f00c");
+							width: $unit * 1.5;
+						}
+						span.false {
+							color: rgba(255, 255, 255, 0.4);
+						}
+						span.false:before {
+							@include awesome-icon("\f00d");
+							width: $unit * 1.5;
+						}
+					}
+					.level:hover {
+						background-color: $highlight;
+						color: #000;
+					}
+				}
+			}
+		}
+	}
+	.contents {
+		@include box-flex;
+		overflow: auto;
+		padding: ($container-padding / 4) ($container-padding / 4);
+		.user {
+			@include box-sizing;
+			@include display-box;
+			@include box-align(stretch);
+			@include box-orient(horizontal);
+			@include box-pack(top);
+			@include rounded;
+
+			cursor: pointer;
+			height: $container-padding * 1;
+			padding: ($container-padding / 4);
+
+			& > div {
+				position: relative;
+				top: 2px;
+			}
+			.name {
+				color: $highlight;
+				width: 40%;
+				// font-weight: bold;
+			}
+			.level {
+				@include box-flex;
+				color: rgba(255, 255, 255, 0.5);
+			}
+			.delete {
+				width: 50px;
+				text-align: right;
+				&:after {
+					@include awesome-icon("\f014");
+					font-size: 1.5em;
+					position: relative;
+					top: 1px;
+					text-align: right;
+					color: rgba(255, 255, 255, 0.3);
+				}
+				&:hover:after {
+					color: $highlight;
+				}
+			}
+		}
+		.user.disabled {
+			.name {
+				// text-decoration: line-through;
+			}
+			.name:after {
+				content: "(disabled)";
+				color: rgba(255, 255, 255, 0.5);
+				margin-left: $unit;
+				// text-decoration: line-through;
+			}
+		}
+		.user:hover {
+			background-color: rgba(0, 0, 0, 0.5);
+			.name {
+
+			}
+		}
+	}
+	.add-user {
+		@include rounded-bottom;
+		height: $container-padding;
+		background-color: rgba(0, 0, 0, 0.2);
+		position: relative;
+
+		.add {
+			@include button-color($highlight, $action);
+			position: absolute;
+			right: $container-padding / 2;
+			width: 20%;
+			top: ($container-padding / 4) + 4;
+		}
+	}
+}

data/application/css/{popover.scss → popover.css.scss}

@@ -1,3 +1,4 @@
+@import "definitions.css.scss";
 .pop-over {
 	$popover-border-radius: 4px;
 	display: inline-block;
@@ -25,8 +26,8 @@
 		// height: 22px;
 }
 	& > header > h3 {
-		@extend .interface;
-		@extend .box-flexible;
+		@include interface;
+		@include box-flex(1);
 		text-transform: none;
 		margin: 0px;
 		margin-bottom: 0;
@@ -109,7 +110,7 @@
 	}
 	.menuHandle {
 		position: absolute;
-		top: -14px;
+		top: -8px;
 		left: 8px;
 		height: 30px !important;
 		width: 30px;
@@ -186,7 +187,7 @@
 
 		}
 		label {
-			@extend .interface;
+			@include interface;
 			@include rounded;
 			display: block;
 			background-color: $chrome-accent;
@@ -229,7 +230,7 @@
 			.page {
 				cursor: pointer;
 				color: #333;
-				@extend .interface;
+				@include interface;
 				text-transform: none;
 				padding: $unit/2 $unit/2;
 				padding-right: $deeper-width;
@@ -266,7 +267,7 @@
 					font-weight: normal;
 					width: $deeper-width;
 					margin: 2px;
-					background: url("/@spontaneous/static/page-browser-next.png") right 1px no-repeat;
+					background: url("/@spontaneous/static/page-browser-next-ce781a242c23b980b99b9db7abc20b05.png") right 1px no-repeat;
 					&:hover {
 						background-position: right -39px;
 						background-color: #8d8d8d;
@@ -290,7 +291,7 @@
 
 				padding: $unit/2;
 				li {
-					@extend .interface;
+					@include interface;
 					font-size: 10px;
 					text-transform: none;
 					cursor: pointer;
@@ -328,7 +329,7 @@
 			display: block;
 		}
 		a {
-			@extend .box-flexible;
+			@include box-flex(1);
 			max-width: 100px
 		}
 	}

data/application/css/{schema_error.scss → schema_error.css.scss}

@@ -1,12 +1,12 @@
-@import "definitions";
+@import "definitions.css.scss";
 
-body {
-	background: url(/@spontaneous/static/texture.png) repeat;
+body#schema-error {
+	@extend .meta-background;
 	color: #fff;
 	font-size: 16px;
 }
 
-#container {
+#schema-error #container {
 	@include rounded;
 	background-color: rgba(0, 0, 0, 0.2);
 	width: 700px;

data/application/css/spontaneous.css

@@ -0,0 +1,5 @@
+/*
+ *= require core
+ *= require login
+ *= require schema_error
+ */

data/application/css/unsupported.css.scss

@@ -0,0 +1,42 @@
+@import "definitions.css.scss";
+
+#outer {
+	width: 600px;
+	margin: 0 auto;
+	font-family: $content-font-family;
+	font-size: 14px;
+	color: #666;
+	padding-top: 5 * $unit;
+
+	a {
+		color: $action;
+		&:hover {
+		color: $highlight;
+		}
+	}
+	img {
+		border: 0;
+	}
+	.error {
+		margin: 2*$unit 0;
+		padding: 0;
+		color: $highlight;
+		.feature {
+			font-weight: bold;
+		}
+		.user-agent {
+			font-size: 0.9em;
+		}
+	}
+	h1 {
+		@include header;
+		color: #666;
+	}
+	h2 {
+		@include header;
+	}
+	.chrome {
+		margin-top: 4*$unit;
+	}
+}
+

data/application/js/add_alias_dialogue.js

@@ -39,29 +39,91 @@ Spontaneous.AddAliasDialogue = (function($, S) {
 			return this.box_view.box;
 		},
 		body: function() {
-			var editing = dom.div('#add-alias-dialogue')
-				, outer = dom.div()
+			var self = this
+			, editing = dom.div('#add-alias-dialogue')
+				, outer = dom.div('.typelist')
+				, paging = dom.div(".paging")
+				, search = dom.div(".search")
+				, progress = dom.div(".progress")
 				, instructions = dom.p('.instructions')
-				, __dialogue = this;
+				, __dialogue = this
+				, timeout = null
+				, searchDelay = 200
+				, clearTimeout = function() {
+					if (timeout) { window.clearTimeout(timeout); timeout = null; }
+				}
+				, load_targets = function(query) {
+					clearTimeout();
+					var params = {};
+					if (query !== "") {
+						params["query"] = query;
+					}
+
+					self.spinner.start();
+					Spontaneous.Ajax.get(['/targets', self.type.schema_id, self.box().id()].join('/'), params, self.targets_loaded.bind(self));
+				}
+				, input = dom.input({"type":"search", "placeholder":"Search..."}).keydown(function(event) {
+					if (event.keyCode === 13) {
+						load_targets(input.val());
+					}
+					if (event.keyCode === 27) {
+						if (input.val() === "") {
+							return true;
+						}
+						input.val("");
+						load_targets();
+						return false;
+					}
+				}).keyup(function() {
+					clearTimeout();
+					var val = input.val();
+					if (val === "" || val.length > 1) {
+						timeout = window.setTimeout(function() {
+							load_targets(val);
+						}, searchDelay);
+					}
+				})
 			instructions.html("Choose a target:");
-			editing.append(instructions, outer);
-			Spontaneous.Ajax.get(['/targets', this.type.schema_id, this.box().id()].join('/'), this.targets_loaded.bind(this));
+
+			search.append(input)
+			paging.append(progress, search)
+			this.spinner = S.Progress(progress[0], 16);
+			editing.append(paging, outer);
+			load_targets();
+			this.paging = paging;
 			this._outer = outer;
 			return editing;
 		},
 
-		targets_loaded: function(targets) {
-			var outer = this._outer, __dialogue = this;
-			this.targets = targets;
+		targets_loaded: function(results) {
+			var outer = this._outer, wrap, self = __dialogue = this, targets = results.targets;
+			window.setTimeout(function() { self.spinner.stop() }, 300);
+			this.targets = this.sort_targets(targets);
+			outer.empty();
+			wrap = dom.div();
 			$.each(targets, function(i, target) {
 				var d = dom.div('.type').html(target.title).click(function() {
 					$('.type', outer).removeClass('selected');
 					__dialogue.select_target(target);
 					$(this).addClass('selected');;
 				});
-				outer.append(d)
+				wrap.append(d)
 			});
-
+			outer.append(wrap)
+			this._contents = wrap;
+			this.manager.updateLayout();
+		},
+		contentsHeight: function() {
+			return this.paging.outerHeight() + this._contents.outerHeight();
+		},
+		sort_targets: function(targets) {
+			var comparator = function(a, b) {
+				var at = a.title, bt = b.title;
+				if (at > bt) { return 1; }
+				if (at < bt) { return -1; }
+				return 0;
+			}
+			return targets.sort(comparator);
 		}
 	});
 	return AddAliasDialogue;

data/application/js/ajax.js

@@ -7,43 +7,77 @@ Spontaneous.Ajax = (function($, S) {
 		'dataType': 'json',
 		'ifModified': true
 	});
+	// wraps jQuery.ajax with a auth aware error catcher
+	var __request = function(params) {
+		var requestErrorHandler = params["error"]
+		, errorHandler = function(xhr, textStatus, error_thrown) {
+			console.log('caught http error', xhr, textStatus, error_thrown)
+			if (xhr.status === 401) {
+				S.Ajax.unauthorized();
+			} else if (requestErrorHandler) {
+				requestErrorHandler(xhr, textStatus, error_thrown);
+			}
+		};
+		params["error"] = errorHandler;
+		$.ajax(params);
+	};
 	return {
 		namespace: "/@spontaneous",
-		get: function(url, callback) {
+
+		get: function(url, data, callback) {
+			if (typeof data === "function") {
+				callback = data;
+				data = {};
+			}
 			var handle_response = function(data, textStatus, xhr) {
-				if (textStatus !== 'success') {
-					xhr = data;
-					data = {};
-				}
 				callback(data, textStatus, xhr);
 			};
-			$.ajax({
+			__request({
 				'url': this.request_url(url),
 				'success': handle_response,
-				'data': this.api_access_key(),
+				'ifModified': true,
+				'data': $.extend(data, this.api_access_key()),
 				'error': handle_response // pass the error to the handler too
 			});
 		},
-		post: function(url, post_data, callback) {
+		put: function(url, data, callback) {
+			this.makeRequest("PUT", url, data, callback);
+		},
+		del: function(url, data, callback) {
+			this.makeRequest("DELETE", url, data, callback);
+		},
+		post: function(url, data, callback) {
+			this.makeRequest("POST", url, data, callback);
+		},
+		makeRequest: function(method, url, data, callback) {
 			var success = function(data, textStatus, XMLHttpRequest) {
-				callback(data, textStatus, XMLHttpRequest);
+				if (typeof callback === "function") {
+					callback(data, textStatus, XMLHttpRequest);
+				}
 			};
 			var error = function(XMLHttpRequest, textStatus, error_thrown) {
-				var data = false;
+				var result = false;
 				try {
-					data = $.parseJSON(XMLHttpRequest.responseText);
+					result = $.parseJSON(XMLHttpRequest.responseText);
 				} catch (e) { }
-				callback(data, textStatus, XMLHttpRequest);
+				if (typeof callback === "function") {
+					callback(result, textStatus, XMLHttpRequest);
+				}
 			};
-			post_data = $.extend(post_data, this.api_access_key());
-			$.ajax({
+			data = data || {};
+			data = $.extend(data, this.api_access_key());
+			__request({
 				'url': this.request_url(url, true),
-				'type': 'post',
-				'data': post_data,
+				'type': method,
+				'data': data,
 				'success': success,
 				'error': error
 			});
 		},
+		unauthorized: function() {
+			console.log("UNAUTH!")
+			window.location.href = "/";
+		},
 		test_field_versions: function(target, fields, success, failure) {
 			var version_data = {}, modified = 0;
 			for (var i = 0, ii = fields.length; i < ii; i++) {