spontaneous 0.2.0.beta5 → 0.2.0.beta6

data/application/css/definitions.css.scss

@@ -102,6 +102,7 @@ $target-name-size: 14px;
   content: ".";
   display: block;
   height: 0;
+  width: 0;
   clear: both;
   visibility: hidden; }
 
@@ -111,9 +112,9 @@ $target-name-size: 14px;
 }
 
 @mixin display-box {
-  display: -webkit-box;
-  display: -moz-box;
-  display: box;
+  // display: -webkit-box;
+  // display: -moz-box;
+  display: flex;
 }
 @mixin box-sizing($model: border-box) {
   -webkit-box-sizing: $model;
@@ -121,25 +122,17 @@ $target-name-size: 14px;
   box-sizing: $model;
 }
 
-@mixin box-orient($direction: horizontal) {
-  box-orient: $direction;
-  -webkit-box-orient: $direction;
-  -moz-box-orient: $direction;
+@mixin box-orient($direction: row) {
+  flex-direction: $direction;
 }
 @mixin box-pack($packing: center) {
-  box-pack: $packing;
-  -webkit-box-pack: $packing;
-  -moz-box-pack: $packing;
+  justify-content: $packing;
 }
 @mixin box-align($aligning: start) {
-  box-align: $aligning;
-  -webkit-box-align: $aligning;
-  -moz-box-align: $aligning;
+  align-items: $aligning;
 }
 @mixin box-flex($flex: 1) {
-	-webkit-box-flex: $flex;
-	-moz-box-flex: $flex;
-	box-flex: $flex;
+	flex-grow: $flex;
 }
 
 @mixin no-select {
@@ -347,3 +340,44 @@ $editing-focus: rgba(0, 0, 0, 0.6);
 	font-size: 11px;
 	line-height: 14px;
 }
+
+@mixin animation($name: fadeIn, $duration: 1s, $delay: .2s, $function: ease, $mode: both) {
+  -webkit-animation: $name $duration $delay $function $mode;
+  -moz-animation: $name $duration $delay $function $mode;
+  -o-animation: $name $duration $delay $function $mode;
+  animation: $name $duration $delay $function $mode;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -o-transform: rotate(0deg);
+  }
+  100% {
+    -o-transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

data/application/css/dialogue.css.scss

@@ -27,6 +27,9 @@ $dialogue-title-height: 32px;
 			@extend .controls-gradient;
 			@include header;
 			@include rounded-top;
+			position: absolute;
+			right: 0;
+			left: 0;
 			height: $dialogue-title-height;
 			color: #fff;
 			padding: 0 $unit 0 ($unit+$dialogue-frame-width);
@@ -144,7 +147,7 @@ $dialogue-title-height: 32px;
 #publishing-dialogue {
 	@include fullsize;
 	@include display-box;
-	@include box-orient(horizontal);
+	@include box-orient(row);
 
 	.spinner {
 		position: absolute;
@@ -184,7 +187,7 @@ $dialogue-title-height: 32px;
 		.actions {
 			@include interface;
 			@include display-box;
-			@include box-orient(horizontal);
+			@include box-orient(row);
 			@include box-align(center);
 			@include box-sizing;
 			position: absolute;

data/application/css/editing.css.scss

@@ -41,8 +41,8 @@ $text-edit-width: 621px;
 		}
 		.buttons {
 			@include display-box;
-			@include box-orient(horizontal);
-			@include box-pack(justify);
+			@include box-orient(row);
+			@include box-pack(space-between);
 			width: $text-edit-width;
 			.save, .cancel {
 				@include button($action);
@@ -161,7 +161,7 @@ $text-edit-width: 621px;
 
 		.editing-fields {
 			padding: 0;
-      @include box-orient(vertical);
+      @include box-orient(column);
 		}
 		.editing-toolbar {
 			padding-left: $unit;
@@ -256,15 +256,15 @@ $text-edit-width: 621px;
 				@include interface;
 				text-transform: none;
 				@include display-box;
-				@include box-orient(vertical);
+				@include box-orient(column);
         .filename {
           word-wrap: break-word;
         }
 				.sizes {
 					padding-top: $unit/2;
 					@include display-box;
-					@include box-orient(horizontal);
-					@include box-pack(justify);
+					@include box-orient(row);
+					@include box-pack(space-between);
 				}
 			}
 			.landscape {
@@ -406,7 +406,7 @@ $text-edit-width: 621px;
 	.image-field-conflict.changes {
 		.diff {
 			@include display-box;
-			@include box-orient(horizontal);
+			@include box-orient(row);
 			@include box-pack(center);
 			@include box-align(center);
 			img {

data/application/css/font.css.scss

@@ -1,6 +1,6 @@
 @font-face {
     font-family: 'FontAwesome';
-    src:  url('/@spontaneous/static/font/fontawesome-webfont-1c66a4738b40ef0f6b1abca0ba9a796d.ttf') format('truetype');
+    src:  url('/@spontaneous/static/font/fontawesome-webfont-4f0022f25672c7f501c339cbf98d9117.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

data/application/css/meta.css.scss

@@ -18,7 +18,7 @@
 	$user-admin-dialogue-width: 680px;
 	@include calc(max-height, "100% - #{ 2 * $container-margin }");
 	@include display-box;
-	@include box-orient(vertical);
+	@include box-orient(column);
 
 	@include rounded;
 	min-height: 450px;
@@ -134,7 +134,7 @@
 			}
 			.admin {
 				@include display-box;
-				@include box-orient(horizontal);
+				@include box-orient(row);
 				@include box-align(stretch);
 				margin-bottom: $container-padding / 2;
 				p {
@@ -178,7 +178,7 @@
 			}
 			.save {
 				@include display-box;
-				@include box-orient(horizontal);
+				@include box-orient(row);
 				@include box-align(stretch);
 				margin-top: ($container-padding / 2);
 				.button {
@@ -212,7 +212,7 @@
 					.level {
 						@include display-box;
 						@include box-align(stretch);
-						@include box-orient(horizontal);
+						@include box-orient(row);
 						padding: $unit/2 $unit;
 						// position: relative;
 						span {
@@ -259,8 +259,8 @@
 			@include box-sizing;
 			@include display-box;
 			@include box-align(stretch);
-			@include box-orient(horizontal);
-			@include box-pack(top);
+			@include box-orient(row);
+			@include box-pack(flex-start);
 			@include rounded;
 
 			cursor: pointer;

data/application/css/popover.css.scss

@@ -105,7 +105,7 @@
 	}
 	header {
 		@include display-box;
-		@include box-orient(horizontal);
+		@include box-orient(row);
 		@include box-align(stretch);
 	}
 	.menuHandle {
@@ -167,8 +167,8 @@
 	}
 	.buttons {
 		@include display-box;
-		@include box-orient(horizontal);
-		@include box-pack(justify);
+		@include box-orient(row);
+		@include box-pack(space-between);
 		a {
 			display: block;
 		}
@@ -286,7 +286,7 @@
 
 			ul {
 				@include display-box;
-				@include box-orient(horizontal);
+				@include box-orient(row);
 				margin: 0;
 				padding: 0;
 				// outline: solid 1px red;
@@ -318,8 +318,8 @@
 	}
 	#popover-delete {
 		@include display-box;
-		@include box-orient(horizontal);
-		@include box-pack(justify);
+		@include box-orient(row);
+		@include box-pack(space-between);
 
 		a.ok {
 			@include button;

data/application/css/top.css.scss

@@ -147,10 +147,14 @@ $navigation-color: #555;
 	#switch-mode, #open-publish {
 		@include button;
 		@include display-box;
-		@include box-orient(vertical);
+		@include box-orient(column);
 		@include box-align(center);
 		margin: 0;
 		width: 70px;
+		&.disabled {
+			opacity: 0.5;
+			@include button-color(#666);
+		}
 	}
 	#open-publish {
 		position: relative;
@@ -220,6 +224,9 @@ $navigation-color: #555;
 		.page:hover {
 			color: $action;
 		}
+		.page.current {
+			color: $highlight;
+		}
 		.box {
 			margin-top: 8px;
 		}

data/application/js/add_alias_dialogue.js

@@ -1,36 +1,110 @@
 
-Spontaneous.AddAliasDialogue = (function($, S) {
+Spontaneous.AddAliasDialogue = (function($, S, window) {
+	'use strict';
 	var dom = S.Dom, Dialogue = Spontaneous.Dialogue;
 
+	var Target = function(data, element) {
+		this.id = data.id;
+		this.data = data;
+		this.element = element;
+		this.selected = false;
+	};
+	Target.prototype = {
+		redraw: function() {
+			var el = this.element;
+			if (this.selected) {
+				if (!el.hasClass('selected')) {
+					el.addClass('selected');
+				}
+			} else {
+				if (el.hasClass('selected')) {
+					el.removeClass('selected');
+				}
+			}
+		}
+	};
+
 	var AddAliasDialogue = new JS.Class(Dialogue, {
 		initialize: function(box_view, type, position) {
 			this.box_view = box_view;
-			this.box_view.bind('entry_added', this.alias_added.bind(this))
+			this.box_view.bind('entry_added', this.alias_added.bind(this));
 			this.type = type;
 			this.insert_position = position;
+			this.shiftSelectStartPosition = false;
 		},
 		title: function() {
-			return 'Add alias to “' + this.box_view.name() + '”';
+			return 'Add “'+(this.type.title)+'” alias to “' + this.box_view.name() + '”';
 		},
 		buttons: function() {
 			var btns = {};
-			btns["Add"] = this.add_alias.bind(this);
+			btns.Add = this.add_alias.bind(this);
 			return btns;
 		},
 
+		cleanup: function() {
+			this._outer.add(this._contents, window).unbind('mouseup.addAliasDialogue');
+		},
+
 		uid: function() {
 			return this.content.uid() + '!add-alias';
 		},
 		add_alias: function() {
-			if (this.target) {
-				this.box_view.add_alias(this.target.id, this.type, this.insert_position);
+			var self = this, selected = self.selected();
+			if (selected.length > 0) {
+				self.box_view.add_alias(selected.map(function(target) { return target.id; }), self.type, self.insert_position);
 			}
 		},
 		alias_added: function() {
 			this.close();
 		},
-		select_target: function(target) {
-			this.target = target;
+		selected: function() {
+			return this.targets.filter(function(t) { return t.selected; });
+		},
+		// toggle a target in the list
+		// returns true if the targe is in the list
+		// false if not
+		toggle_target: function(target, position, shiftKey) {
+			var self = this, targets = self.shiftSelectTargets(target, position, shiftKey);
+			if (target.selected) {
+				self.remove_target(targets);
+			} else {
+				self.add_target(targets);
+			}
+		},
+
+		remove_target: function(targets) {
+			targets.forEach(function(target) {
+				target.selected = false;
+			});
+			return false;
+		},
+
+		add_target: function(targets) {
+			targets.forEach(function(target) {
+				target.selected = true;
+			});
+			return true;
+		},
+
+		shiftSelectTargets: function(target, position, shiftKey) {
+			var self = this, allTargets = self.targets, startPosition = self.shiftSelectStartPosition, targets = [target], i;
+			if (!shiftKey) {
+				self.shiftSelectStartPosition = position;
+			} else {
+				if (startPosition !== false) {
+					if (position > startPosition) { // down
+						for (i = startPosition + 1; i < position; i++) {
+							targets.push(allTargets[i]);
+						}
+					} else if (position < startPosition) { // up
+						for (i = startPosition - 1; i > position; i--) {
+							targets.push(allTargets[i]);
+						}
+					}
+				}
+				self.shiftSelectStartPosition = false;
+			}
+			return targets;
 		},
 		box_owner: function() {
 			return this.box_view.box.container;
@@ -40,11 +114,11 @@ Spontaneous.AddAliasDialogue = (function($, S) {
 		},
 		body: function() {
 			var self = this
-			, editing = dom.div('#add-alias-dialogue')
+				, editing = dom.div('#add-alias-dialogue')
 				, outer = dom.div('.typelist')
-				, paging = dom.div(".paging")
-				, search = dom.div(".search")
-				, progress = dom.div(".progress")
+				, paging = dom.div('.paging')
+				, search = dom.div('.search')
+				, progress = dom.div('.progress')
 				, instructions = dom.p('.instructions')
 				, __dialogue = this
 				, timeout = null
@@ -55,38 +129,38 @@ Spontaneous.AddAliasDialogue = (function($, S) {
 				, load_targets = function(query) {
 					clearTimeout();
 					var params = {};
-					if (query !== "") {
-						params["query"] = query;
+					if (query !== '') {
+						params.query = query;
 					}
 
 					self.spinner.start();
 					Spontaneous.Ajax.get(['/alias', self.type.schema_id, self.box().id()].join('/'), params, self.targets_loaded.bind(self));
 				}
-				, input = dom.input({"type":"search", "placeholder":"Search..."}).keydown(function(event) {
+				, 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() === "") {
+						if (input.val() === '') {
 							return true;
 						}
-						input.val("");
+						input.val('');
 						load_targets();
 						return false;
 					}
 				}).keyup(function() {
 					clearTimeout();
 					var val = input.val();
-					if (val === "" || val.length > 1) {
+					if (val === '' || val.length > 1) {
 						timeout = window.setTimeout(function() {
 							load_targets(val);
 						}, searchDelay);
 					}
-				})
-			instructions.html("Choose a target:");
+				});
+			instructions.html('Choose a target:');
 
-			search.append(input)
-			paging.append(progress, search)
+			search.append(input);
+			paging.append(progress, search);
 			this.spinner = S.Progress(progress[0], 16);
 			editing.append(paging, outer);
 			load_targets();
@@ -96,22 +170,49 @@ Spontaneous.AddAliasDialogue = (function($, S) {
 		},
 
 		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);
+			var outer = this._outer, wrap, self = this, targets = self.sort_targets(results.targets);
+			window.setTimeout(function() { self.spinner.stop(); }, 300);
+			self.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');;
+			var _select = function(target, i) {
+				return function(shiftKey) {
+					self.toggle_target(target, i, shiftKey);
+					self.redraw();
+				};
+			};
+			$.each(targets, function(i, targetData) {
+				var d = dom.div('.type').html(targetData.title), target = new Target(targetData, d);
+				d.mouseup(function(e) {
+					if (!self.dragSelect) {
+						_select(target, i)(false);
+					}
 				});
-				wrap.append(d)
+				d.mousedown(function(e) {
+					self.dragSelect = true;
+					_select(target, i)(e.shiftKey);
+				});
+				d.mouseenter(function(e) {
+					if (self.dragSelect) {
+						_select(target, i)(false);
+					}
+				});
+				wrap.append(d);
+				self.targets.push(target);
+			});
+			wrap.add(outer, window).bind('mouseup.addAliasDialogue', function() {
+				if (self.dragSelect) {
+					self.dragSelect = false;
+				}
+			});
+			outer.append(wrap);
+			self._contents = wrap;
+			self.manager.updateLayout();
+		},
+		redraw: function() {
+			this.targets.forEach(function(t) {
+				t.redraw();
 			});
-			outer.append(wrap)
-			this._contents = wrap;
-			this.manager.updateLayout();
 		},
 		contentsHeight: function() {
 			return this.paging.outerHeight() + this._contents.outerHeight();
@@ -122,10 +223,10 @@ Spontaneous.AddAliasDialogue = (function($, S) {
 				if (at > bt) { return 1; }
 				if (at < bt) { return -1; }
 				return 0;
-			}
+			};
 			return targets.sort(comparator);
 		}
 	});
 	return AddAliasDialogue;
-})(jQuery, Spontaneous);
+})(jQuery, Spontaneous, window);