Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 40d38ed031
Fetching contributors…

Cannot retrieve contributors at this time

151 lines (129 sloc) 4.115 kB
<!-- A control with separate edit and read modes. -->
<Control className="Editable" generic="true">
<prototype>
<Modes>
<div ref="Editable_read" tabindex="-1" />
<div ref="Editable_edit"/>
</Modes>
</prototype>
<style>
> * {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
/* Generic appearance */
.Editable.generic .Editable_read {
outline: none;
}
</style>
<script>
Editable.prototype.extend( {
/*
* Cancel any pending changes and revert to read mode.
*/
cancel: Control.iterator( function() {
this.editing( false );
}),
/*
* The current content in either mode.
*/
content: function( value ) {
return this.editing()
? this._editContent( value )
: this._readContent( value );
},
/*
* The class of the content in edit mode. This class is not instantiated
* until editing() is set to true for the first time.
*/
editClass: Control.property[ "class" ]( function( editClass ) {
if ( this.editing() ) {
// Transmute the edit control to the new class.
this._ensureEditControl();
}
}),
/*
* The control used for editing.
*/
editControl: Control.chain( "$Editable_edit" ),
/*
* True if the control is in edit mode, false if in read mode. By default,
* this is false.
*/
editing: Control.chain( "applyClass/editing", function( editing ) {
if ( editing === undefined ) {
// Getter
return this._editing();
} else {
// Setter
return this.eachControl( function() {
if ( editing ) {
// Switch to edit mode.
// Copy content from read to edit mode.
// This will create the edit control if necessary.
this._editContent( this._readContent() );
this.activeChild( this.$Editable_edit() );
} else {
// Switch to read mode.
this.activeChild( this.$Editable_read() );
this.readControl().focus();
}
});
}
}),
/* The class of the content in read mode. */
readClass: Control.property[ "class" ]( function( readClass ) {
var $new = this.$Editable_read().transmute( readClass, true );
this.referencedElement( "Editable_read", $new );
}),
/*
* The control used for reading.
*/
readControl: Control.chain( "$Editable_read" ),
/*
* Save changes and return to read mode.
*/
save: Control.iterator( function() {
this._readContent( this._editContent() );
this.editing( false );
}),
/* The content of the edit portion */
_editContent: function( content ) {
this._ensureEditControl();
return this.$Editable_edit().content( content );
},
_createEditControl: function() {
var editClass = this.editClass();
var $new = this.$Editable_edit().transmute( editClass, true );
this.referencedElement( "Editable_edit", $new );
},
/*
* Make sure we have an edit control of the desired class. If not, create
* one.
*/
_ensureEditControl: function() {
var currentClass = this.$Editable_edit().controlClass()
var desiredClass = this.editClass();
if ( desiredClass !== currentClass ) {
this._createEditControl();
}
},
/* The content of the read portion */
_readContent: function( content ) {
var result;
if ( content === undefined ) {
var result = this.$Editable_read().content();
if ( result instanceof jQuery && result.length === 0 ) {
// Convert empty jQuery array to null.
result = null;
}
} else {
this.$Editable_read().content( content );
result = this;
}
return result;
}
} );
</script>
</Control>
Jump to Line
Something went wrong with that request. Please try again.