Permalink
Browse files

Textinput: Quality review, seperate clear button and autogrow textare…

…as into extensions
  • Loading branch information...
arschmitz committed Jun 26, 2013
1 parent d482916 commit 5b4ac79d3d9ed0bc281c0ffe662a23778846b2cc
Showing with 321 additions and 130 deletions.
  1. +2 −0 js/index.php
  2. +91 −0 js/widgets/forms/autogrow.js
  3. +135 −0 js/widgets/forms/clearButton.js
  4. +92 −129 js/widgets/forms/textinput.js
  5. +1 −1 tests/unit/textinput/index.html
View
@@ -63,6 +63,8 @@
'widgets/forms/slider.tooltip.js',
'widgets/forms/rangeslider.js',
'widgets/forms/textinput.js',
'widgets/forms/clearButton.js',
'widgets/forms/autogrow.js',
'widgets/forms/select.js',
'widgets/forms/select.custom.js',
'jquery.mobile.buttonMarkup.js',
@@ -0,0 +1,91 @@
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Enhances and consistently styles text inputs.
//>>label: Textarea Autosize
//>>group: Forms
//>>css.structure: ../css/structure/jquery.mobile.forms.textinput.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", "../../jquery.mobile.degradeInputs", "../../jquery.mobile.zoom", "../../jquery.mobile.registry","./textinput" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
$.widget( "mobile.textinput", $.mobile.textinput, {
options: {
autogrow:true,
keyupTimeoutBuffer: 100
},
_create: function(){
this._super();
if( !!this.options.autogrow && this.isTextarea ) {
this._autogrow();
}
},
_autogrow: function() {
this._on({
"keyup": "_timeout",
"change": "_timeout",
"input": "_timeout",
"paste": "_timeout",
});
// Issue 509: the browser is not providing scrollHeight properly until the styles load
if ( $.trim( this.element.val() ) ) {
// bind to the window load to make sure the height is calculated based on BOTH
// the DOM and CSS
// binding to pagechange here ensures that for pages loaded via
// ajax the height is recalculated without user input
this._on( true, $.mobile.window, {
"load": "_timeout",
"pagechange": "_timeout"
});
}
},
_unbindAutogrow: function() {
this._off( this.element, "keyup, change, input, paste" );
this._off( $.mobile.window, "load, pagechange" );
},
keyupTimeout:null,
_timeout: function(){
var self = this;
clearTimeout( this.keyupTimeout );
this.keyupTimeout = setTimeout( function() {
self._updateHeight.apply( self );
}, self.options.keyupTimeoutBuffer );
},
_updateHeight:function(){
var paddingTop, paddingBottom, paddingHeight,
scrollHeight = this.element[ 0 ].scrollHeight,
clientHeight = this.element[ 0 ].clientHeight;
if ( clientHeight < scrollHeight ) {
paddingTop = parseFloat( this.element.css( "padding-top" ) );
paddingBottom = parseFloat( this.element.css( "padding-bottom" ) );
paddingHeight = paddingTop + paddingBottom;
this.element.height( scrollHeight - paddingHeight + 15 );
}
},
_setOptions: function( o ){
this._super( o );
if( o.autogrow !== undefined && this.isTextarea ){
if( !!o.autogrow ){
this._autogrow();
} else {
this._unbindAutogrow();
}
}
}
});
})( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");
@@ -0,0 +1,135 @@
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Add the ability to have a clear button
//>>label: Text Input Clear Button
//>>group: Forms
//>>css.structure: ../css/structure/jquery.mobile.forms.textinput.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", "../../jquery.mobile.degradeInputs", "../../jquery.mobile.zoom", "../../jquery.mobile.registry" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
$.widget( "mobile.textinput", $.mobile.textinput, {
options: {
clearBtn: false,
clearBtnText: "clear text"
},
_create: function(){
this._super();
if( !!this.options.clearBtn || this.isSearch ){
this._addClearBtn();
}
},
clearButton: function(){
var o = this.options;
return $( "<a href='#' class='ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext" +
" ui-corner-all ui-shadow " +
( o.theme ? "ui-btn-" + o.theme : "" ) +
( o.mini ? "ui-mini" : "" ) + "' title='" + o.clearBtnText + "'>" + o.clearBtnText + "</a>" );
},
_clearBtnClick: function( event ){
this.element.val( "" )
.focus()
.trigger( "change" );
this._clearbtn.addClass( "ui-input-clear-hidden" );
event.preventDefault();
},
_addClearBtn: function(){
if( !this.options.enhanced ) {
this._enhanceClear();
}
$.extend( this, {
_clearBtn: this.widget().find("a.ui-input-clear")
});
this._bindClearEvents();
this._toggleClear();
},
_enhanceClear: function() {
this.clearButton().appendTo( this.widget() );
if ( !this.isSearch ) {
this.widget().addClass( "ui-input-has-clear" );
}
},
_bindClearEvents: function() {
this._on( this._clearBtn, {
"click": "_clearBtnClick"
});
this._on({
"keyup": "_toggleClear",
"change": "_toggleClear",
"input": "_toggleClear",
"focus": "_toggleClear",
"blur": "_toggleClear",
"cut": "_toggleClear",
"paste": "_toggleClear"
});
},
_unbindClear: function() {
this._off( this._clearBtn, "click");
this._off( this.element, "keyup, change, input, focus, blur, cut, paste" );
},
_setOptions:function( o ){
this._super( o );
if( o.clearbtn !== undefined && !this.element.is( "textarea, :jqmData(type='range')" ) ){
if( !!o.clearBtn ){
this._addClearBtn();
} else {
this._destroyClear();
}
}
if( o.clearBtnText !== undefined && this._clearBtn !== undefined ){
this._clearBtn.text( o.clearBtnText );
}
},
_toggleClear: function() {
var self = this;
setTimeout( function() {
self._clearBtn.toggleClass( "ui-input-clear-hidden", !self.element.val() );
}, 0);
},
_destroyClear: function(){
this.element.removeClass( "ui-input-has-clear" );
this._unbindClear()._clearBtn.remove();
},
_destroy: function(){
this._super();
this._destroyClear();
}
});
})( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");
Oops, something went wrong.

0 comments on commit 5b4ac79

Please sign in to comment.