Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 5b4ac79

Browse files
arschmitzarschmitz
committed
Textinput: Quality review, seperate clear button and autogrow textareas into extensions
1 parent d482916 commit 5b4ac79

File tree

5 files changed

+321
-130
lines changed

5 files changed

+321
-130
lines changed

‎js/index.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@
6363
'widgets/forms/slider.tooltip.js',
6464
'widgets/forms/rangeslider.js',
6565
'widgets/forms/textinput.js',
66+
'widgets/forms/clearButton.js',
67+
'widgets/forms/autogrow.js',
6668
'widgets/forms/select.js',
6769
'widgets/forms/select.custom.js',
6870
'jquery.mobile.buttonMarkup.js',

‎js/widgets/forms/autogrow.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2+
//>>description: Enhances and consistently styles text inputs.
3+
//>>label: Textarea Autosize
4+
//>>group: Forms
5+
//>>css.structure: ../css/structure/jquery.mobile.forms.textinput.css
6+
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
7+
8+
define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", "../../jquery.mobile.degradeInputs", "../../jquery.mobile.zoom", "../../jquery.mobile.registry","./textinput" ], function( jQuery ) {
9+
//>>excludeEnd("jqmBuildExclude");
10+
(function( $, undefined ) {
11+
12+
$.widget( "mobile.textinput", $.mobile.textinput, {
13+
options: {
14+
autogrow:true,
15+
keyupTimeoutBuffer: 100
16+
},
17+
18+
_create: function(){
19+
this._super();
20+
21+
if( !!this.options.autogrow && this.isTextarea ) {
22+
this._autogrow();
23+
}
24+
},
25+
26+
_autogrow: function() {
27+
this._on({
28+
"keyup": "_timeout",
29+
"change": "_timeout",
30+
"input": "_timeout",
31+
"paste": "_timeout",
32+
});
33+
34+
// Issue 509: the browser is not providing scrollHeight properly until the styles load
35+
if ( $.trim( this.element.val() ) ) {
36+
// bind to the window load to make sure the height is calculated based on BOTH
37+
// the DOM and CSS
38+
// binding to pagechange here ensures that for pages loaded via
39+
// ajax the height is recalculated without user input
40+
this._on( true, $.mobile.window, {
41+
"load": "_timeout",
42+
"pagechange": "_timeout"
43+
});
44+
}
45+
},
46+
47+
_unbindAutogrow: function() {
48+
this._off( this.element, "keyup, change, input, paste" );
49+
this._off( $.mobile.window, "load, pagechange" );
50+
},
51+
52+
keyupTimeout:null,
53+
54+
_timeout: function(){
55+
var self = this;
56+
clearTimeout( this.keyupTimeout );
57+
this.keyupTimeout = setTimeout( function() {
58+
self._updateHeight.apply( self );
59+
}, self.options.keyupTimeoutBuffer );
60+
},
61+
62+
_updateHeight:function(){
63+
var paddingTop, paddingBottom, paddingHeight,
64+
scrollHeight = this.element[ 0 ].scrollHeight,
65+
clientHeight = this.element[ 0 ].clientHeight;
66+
67+
68+
if ( clientHeight < scrollHeight ) {
69+
paddingTop = parseFloat( this.element.css( "padding-top" ) );
70+
paddingBottom = parseFloat( this.element.css( "padding-bottom" ) );
71+
paddingHeight = paddingTop + paddingBottom;
72+
73+
this.element.height( scrollHeight - paddingHeight + 15 );
74+
}
75+
},
76+
_setOptions: function( o ){
77+
this._super( o );
78+
79+
if( o.autogrow !== undefined && this.isTextarea ){
80+
if( !!o.autogrow ){
81+
this._autogrow();
82+
} else {
83+
this._unbindAutogrow();
84+
}
85+
}
86+
}
87+
});
88+
})( jQuery );
89+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
90+
});
91+
//>>excludeEnd("jqmBuildExclude");

‎js/widgets/forms/clearButton.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2+
//>>description: Add the ability to have a clear button
3+
//>>label: Text Input Clear Button
4+
//>>group: Forms
5+
//>>css.structure: ../css/structure/jquery.mobile.forms.textinput.css
6+
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
7+
8+
define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", "../../jquery.mobile.degradeInputs", "../../jquery.mobile.zoom", "../../jquery.mobile.registry" ], function( jQuery ) {
9+
//>>excludeEnd("jqmBuildExclude");
10+
(function( $, undefined ) {
11+
12+
$.widget( "mobile.textinput", $.mobile.textinput, {
13+
options: {
14+
clearBtn: false,
15+
clearBtnText: "clear text"
16+
},
17+
18+
_create: function(){
19+
this._super();
20+
21+
if( !!this.options.clearBtn || this.isSearch ){
22+
this._addClearBtn();
23+
}
24+
},
25+
26+
clearButton: function(){
27+
28+
var o = this.options;
29+
30+
return $( "<a href='#' class='ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext" +
31+
" ui-corner-all ui-shadow " +
32+
( o.theme ? "ui-btn-" + o.theme : "" ) +
33+
( o.mini ? "ui-mini" : "" ) + "' title='" + o.clearBtnText + "'>" + o.clearBtnText + "</a>" );
34+
35+
},
36+
37+
_clearBtnClick: function( event ){
38+
this.element.val( "" )
39+
.focus()
40+
.trigger( "change" );
41+
42+
this._clearbtn.addClass( "ui-input-clear-hidden" );
43+
event.preventDefault();
44+
},
45+
46+
_addClearBtn: function(){
47+
48+
if( !this.options.enhanced ) {
49+
this._enhanceClear();
50+
}
51+
52+
$.extend( this, {
53+
_clearBtn: this.widget().find("a.ui-input-clear")
54+
});
55+
56+
this._bindClearEvents();
57+
58+
this._toggleClear();
59+
60+
},
61+
62+
_enhanceClear: function() {
63+
64+
this.clearButton().appendTo( this.widget() );
65+
66+
if ( !this.isSearch ) {
67+
this.widget().addClass( "ui-input-has-clear" );
68+
}
69+
70+
},
71+
72+
_bindClearEvents: function() {
73+
74+
this._on( this._clearBtn, {
75+
"click": "_clearBtnClick"
76+
});
77+
78+
this._on({
79+
"keyup": "_toggleClear",
80+
"change": "_toggleClear",
81+
"input": "_toggleClear",
82+
"focus": "_toggleClear",
83+
"blur": "_toggleClear",
84+
"cut": "_toggleClear",
85+
"paste": "_toggleClear"
86+
87+
});
88+
89+
},
90+
91+
_unbindClear: function() {
92+
this._off( this._clearBtn, "click");
93+
this._off( this.element, "keyup, change, input, focus, blur, cut, paste" );
94+
},
95+
96+
_setOptions:function( o ){
97+
this._super( o );
98+
99+
if( o.clearbtn !== undefined && !this.element.is( "textarea, :jqmData(type='range')" ) ){
100+
if( !!o.clearBtn ){
101+
this._addClearBtn();
102+
} else {
103+
this._destroyClear();
104+
}
105+
}
106+
107+
if( o.clearBtnText !== undefined && this._clearBtn !== undefined ){
108+
this._clearBtn.text( o.clearBtnText );
109+
}
110+
},
111+
112+
_toggleClear: function() {
113+
var self = this;
114+
setTimeout( function() {
115+
self._clearBtn.toggleClass( "ui-input-clear-hidden", !self.element.val() );
116+
}, 0);
117+
},
118+
119+
_destroyClear: function(){
120+
this.element.removeClass( "ui-input-has-clear" );
121+
this._unbindClear()._clearBtn.remove();
122+
},
123+
124+
_destroy: function(){
125+
this._super();
126+
this._destroyClear();
127+
}
128+
129+
});
130+
131+
132+
})( jQuery );
133+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
134+
});
135+
//>>excludeEnd("jqmBuildExclude");

0 commit comments

Comments
 (0)