Permalink
Browse files

Moving inline editing to own file

  • Loading branch information...
1 parent b3d0e0a commit 4edec542919f52314de69a2dc626666bfcccafa7 @jakearchibald committed Jul 9, 2012
View
@@ -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
@@ -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();
- }
});
};
@@ -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;
+})();
@@ -178,7 +178,7 @@
line-height: 1;
}
- & .file-path {
+ & [data-inline-edit] {
position: relative;
display: inline-block;
View
@@ -82,6 +82,7 @@ <h1 class="cow-logo">Sprite Cow</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>

0 comments on commit 4edec54

Please sign in to comment.