Skip to content

Commit

Permalink
Editable: Added textarea editor; added support to place buttons anywh…
Browse files Browse the repository at this point in the history 
…ere in [ne, se, sw, nw];
  • Loading branch information
@rxaviers
rxaviers committed Nov 3, 2011
1 parent d33c1f9 commit 8914dbc
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 40 deletions.
82 changes: 82 additions & 0 deletions demos/editable/editors.html
View file
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<title>jQuery UI Editable - Editors</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.editable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.demo { display: inline-block; }
</style>
<script>
$(function() {
$( "#default" ).editable();
$( "#textarea" ).editable({
editor: "textarea",
buttons: {
save: {
icons: false,
},
cancel: {
icons: false,
}
}
});

$( "#start-all" )
.button()
.click(function() {
$( ".sample" ).editable("start");
});
$( "#submit-all" )
.button()
.click(function() {
$( ".sample" ).editable("submit");
});
$( "#cancel-all" )
.button()
.click(function() {
$( ".sample" ).editable("cancel");
});
});
</script>
</head>
<body>

<div class="demo">

<button id="start-all">Edit all</button>
<button id="submit-all">Submit all changes</button>
<button id="cancel-all">Skip all changes</button>

<p>
<span class="sample" id="default">Default editor</span>
</p>

<p class="sample" id="textarea">
Textarea
</p>

</div><!-- End demo -->



<div class="demo-description">
<p>
Click at text to edit it.
</p>
<p>
Save your changes by submiting (pressing Enter or clicking the save button).
</p>
<p>
Abort your changes by pressing Esc or clicking the cancel button.
</p>
</div><!-- End demo-description -->

</body>
</html>
1 change: 1 addition & 0 deletions demos/editable/index.html
View file
Expand Up @@ -14,6 +14,7 @@ <h4>Examples</h4>
<li><a href="listener_event.html">The listener event</a></li>
<li><a href="validation.html">Validation</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="editors.html">Editors</a></li>
</ul>
</div>

Expand Down
8 changes: 5 additions & 3 deletions themes/base/jquery.ui.editable.css
View file
Expand Up @@ -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; }
125 changes: 88 additions & 37 deletions ui/jquery.ui.editable.js
View file
Expand Up @@ -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",
Expand Down Expand Up @@ -50,7 +52,7 @@ $.widget( "ui.editable", {
primary: cancelIconClass
},
text: false
},
}
},
placeholder: "Click to edit"
},
Expand All @@ -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 );
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -158,52 +164,75 @@ $.widget( "ui.editable", {

_form: function() {
var editor = $.ui.editable.editors[ this._editor ],
form = $( "<form></form>" )
.addClass( formClass ),
saveButton, cancelButton;
form = $( "<form></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" );
}
$( "<div></div>" )
.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 = $( "<div></div>" ).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 $( "<a></a>" )
.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 $( "<a></a>" )
.button( options )
.removeClass( "ui-corner-all" )
.addClass( saveClass );
},

cancel: function( options ) {
return $( "<a></a>" )
.button( options )
.removeClass( "ui-corner-all" )
.addClass( cancelClass );
}
},

_cancelButton: function() {
return $( "<a></a>" )
.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() {
Expand Down Expand Up @@ -249,7 +278,7 @@ $.widget( "ui.editable", {

$.ui.editable.editors = {
text: {
element:function( editable ) {
element: function( editable ) {
return $( "<input/>" )
.attr( "type", "text" )
.val( editable.value() )
Expand All @@ -270,7 +299,29 @@ $.ui.editable.editors = {
return $( "input", form ).val();
}
},
textarea: $.noop,
textarea: {
element: function( editable ) {
editable._skipEnterSubmit = true;
editable._buttonsPosition = "se";
return $( "<textarea></textarea>" )
.val( editable.value().replace(/<br>|<br\/>|<br \/>/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, "<br/>");
}
},
select: $.noop,
spinner: $.noop
};
Expand Down

0 comments on commit 8914dbc

Please sign in to comment.