diff --git a/demos/editable/editors.html b/demos/editable/editors.html new file mode 100644 index 00000000000..8b22d2f1594 --- /dev/null +++ b/demos/editable/editors.html @@ -0,0 +1,82 @@ + + + + + jQuery UI Editable - Editors + + + + + + + + + + + + +
+ + + + + +

+Default editor +

+ +

+Textarea +

+ +
+ + + +
+

+Click at text to edit it. +

+

+Save your changes by submiting (pressing Enter or clicking the save button). +

+

+Abort your changes by pressing Esc or clicking the cancel button. +

+
+ + + diff --git a/demos/editable/index.html b/demos/editable/index.html index 31cd86b8cfb..f4610065c2b 100644 --- a/demos/editable/index.html +++ b/demos/editable/index.html @@ -14,6 +14,7 @@

Examples

  • The listener event
  • Validation
  • Buttons
    • +
  • Editors
    • diff --git a/themes/base/jquery.ui.editable.css b/themes/base/jquery.ui.editable.css index f408b4d5769..22e8986fe1f 100644 --- a/themes/base/jquery.ui.editable.css +++ b/themes/base/jquery.ui.editable.css @@ -7,11 +7,13 @@ * * http://docs.jquery.com/UI/Tooltip#theming */ +.ui-editable { z-index: 3; } .ui-editable .ui-widget-content.ui-state-default {background: none !important;} -.ui-editable-form { overflow: hidden; padding: 0; vertical-align: middle; } -.ui-editable-form > div { padding: 0.4em; } +.ui-editable-form { position: relative; overflow: hidden; padding: 0; vertical-align: middle; } +.ui-editable-input-area { padding: 0.4em; } .ui-editable-placeholder { color: #555; font-style: italic; } .ui-editable-input { border: none; display: block; padding: 0; margin: 0; outline: none; vertical-align: middle; width:100%; } -.ui-editable-save, .ui-editable-cancel { float: right; margin: -1px -1px -1px 0; } +.ui-editable-buttons-area { position: absolute; } +.ui-editable-save, .ui-editable-cancel { margin: -1px -1px -1px 0; } .ui-editable-save:hover, .ui-editable-cancel:hover { z-index: 2; } diff --git a/ui/jquery.ui.editable.js b/ui/jquery.ui.editable.js index a91bdbd7a32..050efc895d1 100644 --- a/ui/jquery.ui.editable.js +++ b/ui/jquery.ui.editable.js @@ -17,8 +17,10 @@ var editableClass = "ui-editable ui-widget", formClass = "ui-editable-form", buttonClass = "ui-editable-button", + buttonsAreaClass = "ui-editable-buttons-area", cancelClass = "ui-editable-cancel", inputClass = "ui-editable-input", + inputAreaClass = "ui-editable-input-area", placeholderClass = "ui-editable-placeholder", saveClass = "ui-editable-save", hoverableClass = "ui-widget-content ui-state-default ui-corner-all", @@ -50,7 +52,7 @@ $.widget( "ui.editable", { primary: cancelIconClass }, text: false - }, + } }, placeholder: "Click to edit" }, @@ -76,6 +78,7 @@ $.widget( "ui.editable", { this._show(); } this._getEditorOptions(); + this._buttonsPosition = "e"; // First bind custom_events, then this._events. Changing that order may cause problems (_start must precede _events[click] when this.options.event is click). custom_events[this.options.event] = "_start"; this._bind( custom_events ); @@ -122,6 +125,9 @@ $.widget( "ui.editable", { var keyCode = $.ui.keyCode; switch ( event.keyCode ) { case keyCode.ENTER: + if(this._skipEnterSubmit) { + break; + } this.submit(); return false; case keyCode.ESCAPE: @@ -158,52 +164,75 @@ $.widget( "ui.editable", { _form: function() { var editor = $.ui.editable.editors[ this._editor ], - form = $( "
    " ) - .addClass( formClass ), - saveButton, cancelButton; + form = $( "
    " ).addClass( formClass ); this.frame = form; this._hoverable( this.frame.addClass( hoverableClass ) ); - if( this.options.buttons && this.options.buttons.cancel ) { - cancelButton = this._cancelButton().appendTo( form ); - } - if( this.options.buttons && this.options.buttons.save ) { - saveButton = this._saveButton().appendTo( form ); - } - if( saveButton && cancelButton ) { - saveButton.removeClass( "ui-corner-right" ); - } $( "
    " ) + .addClass( inputAreaClass ) .append( editor.element( this ) ) .appendTo( form ); + if( this.options.buttons ) { + this._drawButtons().appendTo( form ); + } return form; }, - _adjustInputWidth: function() { - // Hack to make text input to behave just like a block level element. - // Ideally, css would handle this all. - // Can't use table-cell styles for IE6/7 compatibility. - var buttonsWidth = 0; - $( ".ui-button", this.frame ).each(function() { - buttonsWidth += $( this ).outerWidth(); - }); - $( "> div", this.frame ).css( "margin-right", buttonsWidth ); + _drawButtons: function( form ) { + var i, buttons = {}, ordered_buttons = $([]), + buttonsArea = $( "
    " ).addClass( buttonsAreaClass ); + for( i in this.options.buttons ) { + buttons[ i ] = this._drawButton[ i ]( this.options.buttons[ i ] ) + .appendTo( buttonsArea ); + ordered_buttons = ordered_buttons.add( buttons[ i ] ); + } + if( /s/.test(this._buttonsPosition) ) { + buttonsArea.css({bottom: 0}); + } + else { + buttonsArea.css({top: 0}); + } + if( /e/.test(this._buttonsPosition) ) { + buttonsArea.css({right: 0}); + } + else if( /w/.test(this._buttonsPosition) ) { + buttonsArea.css({left: 0}); + } + return buttonsArea; }, - _saveButton: function() { - // Using A links, so it doesn't count on form tab order. - return $( "" ) - .button( this.options.buttons.save ) - .removeClass( "ui-corner-all" ) - .addClass( "ui-corner-right" ) - .addClass( saveClass ); + _drawButton: { + save: function( options ) { + // Using A links, so it doesn't count on form tab order. + return $( "" ) + .button( options ) + .removeClass( "ui-corner-all" ) + .addClass( saveClass ); + }, + + cancel: function( options ) { + return $( "" ) + .button( options ) + .removeClass( "ui-corner-all" ) + .addClass( cancelClass ); + } }, - _cancelButton: function() { - return $( "" ) - .button( this.options.buttons.cancel ) - .removeClass( "ui-corner-all" ) - .addClass( "ui-corner-right" ) - .addClass( cancelClass ); + _adjustInputWidth: function() { + var buttonsWidth, buttonsHeight, margin = {}, + buttonsArea = $( "." + buttonsAreaClass, this.frame ); + if( /n/.test(this._buttonsPosition) ) { + margin["margin-top"] = buttonsArea.outerHeight(); + } + else if( /s/.test(this._buttonsPosition) ) { + margin["margin-bottom"] = buttonsArea.outerHeight(); + } + else if( /e/.test(this._buttonsPosition) ) { + margin["margin-right"] = buttonsArea.outerWidth(); + } + else if( /w/.test(this._buttonsPosition) ) { + margin["margin-left"] = buttonsArea.outerWidth(); + } + $( "." + inputAreaClass, this.frame ).css( margin ); }, _formEvents: function() { @@ -249,7 +278,7 @@ $.widget( "ui.editable", { $.ui.editable.editors = { text: { - element:function( editable ) { + element: function( editable ) { return $( "" ) .attr( "type", "text" ) .val( editable.value() ) @@ -270,7 +299,29 @@ $.ui.editable.editors = { return $( "input", form ).val(); } }, - textarea: $.noop, + textarea: { + element: function( editable ) { + editable._skipEnterSubmit = true; + editable._buttonsPosition = "se"; + return $( "" ) + .val( editable.value().replace(/
    ||
    /gi, "\n") ) + .addClass( inputClass ); + }, + bind: function( editable ) { + var self = editable; + $( "textarea", editable.element ) + .focus( function() { + self.frame.addClass( activeStateClass ); + }) + .blur( function() { + self.frame.removeClass( activeStateClass ); + }) + .focus(); + }, + value: function( editable, form ) { + return $( "textarea", form ).val().replace(/\r\n|\r|\n/g, "
    "); + } + }, select: $.noop, spinner: $.noop };