Moving inline editing to own file

jakearchibald · Sep 28, 2012 · 1ed3a22 · 1ed3a22
1 parent d9d839e
commit 1ed3a22
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 39 deletions.
diff --git a/bin/compress_assets.sh b/bin/compress_assets.sh
@@ -1,4 +1,4 @@
 #!/bin/bash
 ver=8
-cat www/assets/$ver/script/{jquery-1.7.1,jquery.easing,jquery.transition,jquery.fileClickjack,intro,MicroEvent,Rect,ImgInput,SpriteCanvas,SpriteCanvasView,CssOutput,Toolbar,pageLayout,FeatureTest,featureTests,base}.js | node bin/uglify.js > www/assets/$ver/script/mainmin.js
+cat www/assets/$ver/script/{jquery-1.7.1,jquery.easing,jquery.transition,jquery.fileClickjack,intro,MicroEvent,Rect,ImgInput,SpriteCanvas,SpriteCanvasView,InlineEdit,CssOutput,Toolbar,pageLayout,FeatureTest,featureTests,base}.js | node bin/uglify.js > www/assets/$ver/script/mainmin.js
 ~/dev/sass/bin/sass --style compressed www/assets/$ver/style/all.scss:www/assets/$ver/style/all-min.css
diff --git a/www/assets/8/script/CssOutput.js b/www/assets/8/script/CssOutput.js
@@ -52,7 +52,7 @@ spriteCow.CssOutput = (function() {
 		if (this.useBgUrl && this.backgroundFileName) {
 			$code.append( indent + "background: url('" );
 			$file = $('<span class="file"/>')
-				.append( $('<span class="file-path"/>').text( this.path ) )
+				.append( $('<span data-inline-edit="file-path"/>').text( this.path ) )
 				.append( $('<span class="file-name"/>').text( this.backgroundFileName ) );
 
 			$code.append( $file ).append( "') no-repeat " );
@@ -90,45 +90,13 @@ spriteCow.CssOutput = (function() {
 	};
 
 	CssOutputProto._addEditEvents = function() {
-		var cssOutput = this,
-			$container = cssOutput._$container,
-			$input = $('<input type="text"/>').appendTo( $container ).hide(),
-			inputTopPadding  = parseInt( $input.css('padding-top') ),
-			inputTopBorder   = parseInt( $input.css('border-top-width') ),
-			inputLeftPadding = parseInt( $input.css('padding-left') ),
-			inputLeftBorder  = parseInt( $input.css('border-left-width') ),
-			isEditingPath;
-
-		$input.hide();
-
-		$container.delegate('.file', 'click', function() {
-			var $path = $(this).find('.file-path'),
-				position = $path.position();
-
-			if (isEditingPath) { return; }
-			isEditingPath = true;
-
-			$input.show().css({
-				top:  position.top  - inputTopPadding  - inputTopBorder,
-				left: position.left - inputLeftPadding - inputLeftBorder,
-				width: Math.max( $path.width(), 50 )
-			}).val( $path.text() ).focus();
-		});
-
-		function endPathEdit() {
-			var newVal = $input.val();
-			$input.hide();
+		var cssOutput = this;
+
+		new spriteCow.InlineEdit( cssOutput._$container ).bind('file-path', function(event) {
+			var newVal = event.val;
 			cssOutput.path = newVal;
 			cssOutput.update();
 			localStorage.setItem('cssOutputPath', newVal);
-			isEditingPath = false;
-		}
-
-		$input.blur(endPathEdit).keyup(function(event) {
-			if (event.keyCode === 13) {
-				$input.blur();
-				event.preventDefault();
-			}
 		});
 	};
 

diff --git a/www/assets/8/script/InlineEdit.js b/www/assets/8/script/InlineEdit.js
@@ -0,0 +1,66 @@
+(function() {
+	function InlineEdit( $toWatch ) {
+		var $input = $('<input type="text"/>').appendTo( $toWatch );
+		var inlineEdit = this;
+
+		inlineEdit._$input = $input;
+		inlineEdit._$editing = null;
+		inlineEdit._inputBoxOffset = {
+			top:  -parseInt( $input.css('padding-top'),  10 ) - parseInt( $input.css('border-top-width'),  10 ),
+			left: -parseInt( $input.css('padding-left'), 10 ) - parseInt( $input.css('border-left-width'), 10 )
+		};
+
+		$input.hide();
+		$toWatch.on('click', '[data-inline-edit]', function(event) {
+			var $target = $(event.target);
+			var $editing = inlineEdit._$editing;
+
+			if ($editing && $target[0] === $editing[0]) {
+				return;
+			}
+			inlineEdit.edit( $target );
+			event.preventDefault();
+		});
+
+		$input.blur(function() {
+			inlineEdit.finishEdit();
+		}).keyup(function(event) {
+			if (event.keyCode === 13) {
+				$input[0].blur();
+				event.preventDefault();
+			}
+		});
+	}
+
+	var InlineEditProto = InlineEdit.prototype = new spriteCow.MicroEvent();
+
+	InlineEditProto.edit = function( $elm ) {
+		$elm = $($elm);
+
+		var position = $elm.position();
+
+		if (this._$editing) {
+			this.finishEdit();
+		}
+
+		this._$editing = $elm;
+		this._$input.show().css({
+			top: position.top + this._inputBoxOffset.top,
+			left: position.left + this._inputBoxOffset.left,
+			width: Math.max( $elm.width(), 50 )
+		}).val( $elm.text() ).focus();
+	};
+
+	InlineEditProto.finishEdit = function() {
+		if (!this._$editing) { return; }
+
+		var newVal = this._$input.hide().val();
+		var event = new $.Event( this._$editing.data('inlineEdit') );
+
+		event.val = newVal;
+		this.trigger( event );
+		this._$editing = null;
+	};
+
+	spriteCow.InlineEdit = InlineEdit;
+})();
diff --git a/www/assets/8/style/_components.scss b/www/assets/8/style/_components.scss
@@ -178,7 +178,7 @@
 			line-height: 1;
 		}
 
-		& .file-path {
+		& [data-inline-edit] {
 			position: relative;
 			display: inline-block;
 

diff --git a/www/unmin.html b/www/unmin.html
@@ -82,6 +82,7 @@ <h1>Sorry, it isn't working out between us</h1>
 	<script src="assets/8/script/ImgInput.js"></script>
 	<script src="assets/8/script/SpriteCanvas.js"></script>
 	<script src="assets/8/script/SpriteCanvasView.js"></script>
+	<script src="assets/8/script/InlineEdit.js"></script>
 	<script src="assets/8/script/CssOutput.js"></script>
 	<script src="assets/8/script/Toolbar.js"></script>
 	<script src="assets/8/script/pageLayout.js"></script>