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

Update textinput.js - 'refresh' method for textinput #5867

Closed
wants to merge 1 commit into from
Closed

Update textinput.js - 'refresh' method for textinput #5867

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
281 changes: 179 additions & 102 deletions js/widgets/forms/textinput.js
View file
Open in desktop
Expand Up @@ -23,137 +23,214 @@ $.widget( "mobile.textinput", $.mobile.widget, {
},

_create: function() {
this._refresh(true);
},

_refresh: function() {
var self = this,
input = this.element,
o = this.options,
theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
themeclass = " ui-body-" + theme,
miniclass = o.mini ? " ui-mini" : "",
isSearch = input.is( "[type='search'], :jqmData(type='search')" ),
focusedEl,
clearbtn,
clearBtnText = o.clearSearchButtonText || o.clearBtnText,
clearBtnBlacklist = input.is( "textarea, :jqmData(type='range')" ),
inputNeedsClearBtn = !!o.clearBtn && !clearBtnBlacklist,
inputNeedsWrap = input.is( "input" ) && !input.is( ":jqmData(type='range')" );

clearBtnText,
focusedEl,
miniclass,
inputNeedsClearBtn,
theme,
isSearch = input.is("[type='search'], :jqmData(type='search')"),
clearBtnBlacklist = input.is("textarea, :jqmData(type='range')"),
inputNeedsWrap = input.is("input") && !input.is(":jqmData(type='range')");

function toggleClear() {
setTimeout( function() {
clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
}, 0 );
}

$( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );

focusedEl = input.addClass( "ui-input-text ui-body-"+ theme );

// XXX: Temporary workaround for issue 785 (Apple bug 8910589).
// Turn off autocorrect and autocomplete on non-iOS 5 devices
// since the popup they use can't be dismissed by the user. Note
// that we test for the presence of the feature by looking for
// the autocorrect property on the input element. We currently
// have no test for iOS 5 or newer so we're temporarily using
// the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
// Set the attribute instead of the property just in case there
// is code that attempts to make modifications via HTML.
input[0].setAttribute( "autocorrect", "off" );
input[0].setAttribute( "autocomplete", "off" );
}

//"search" and "text" input widgets
if ( isSearch ) {
focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + miniclass + "'></div>" ).parent();
} else if ( inputNeedsWrap ) {
focusedEl = input.wrap( "<div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + miniclass + "'></div>" ).parent();
setTimeout(function () {
clearbtn.toggleClass("ui-input-clear-hidden", !input.val());
}, 0);
}

if( inputNeedsClearBtn || isSearch ) {
clearbtn = $( "<a href='#' class='ui-input-clear' title='" + clearBtnText + "'>" + clearBtnText + "</a>" )
.bind( "click", function( event ) {
input
.val( "" )
.focus()
.trigger( "change" );
clearbtn.addClass( "ui-input-clear-hidden" );

function buildClearBtn() {
clearbtn = $("<a href='#' class='ui-input-clear' title='" + clearBtnText + "'>" + clearBtnText + "</a>")
.bind("click", function (event) {
input.val("").focus().trigger("change");
clearbtn.addClass("ui-input-clear-hidden");
event.preventDefault();
})
.appendTo( focusedEl )
.buttonMarkup({
}).appendTo(focusedEl).buttonMarkup({
icon: "delete",
iconpos: "notext",
corners: true,
shadow: true,
mini: o.mini
});
if ( !isSearch ) {
focusedEl.addClass( "ui-input-has-clear" );

if (!isSearch) {
focusedEl.addClass("ui-input-has-clear");
}

toggleClear();

input.bind( "paste cut keyup input focus change blur", toggleClear );
}
else if ( !inputNeedsWrap && !isSearch ) {
input.addClass( "ui-corner-all ui-shadow-inset" + themeclass + miniclass );
input.bind("paste cut keyup input focus change blur", toggleClear);
}

if (!create) {
var oldTheme, dataMini, refreshMini = false;

input.focus(function() {
// In many situations, iOS will zoom into the input upon tap, this prevents that from happening
if ( o.preventFocusZoom ) {
$.mobile.zoom.disable( true );
}
focusedEl.addClass( $.mobile.focusClass );
})
.blur(function() {
focusedEl.removeClass( $.mobile.focusClass );
if ( o.preventFocusZoom ) {
$.mobile.zoom.enable( true );
}
});
focusedEl = input;
oldTheme = o.theme || $.mobile.getInheritedTheme(input, "c");
theme = input.attr("data-" + $.mobile.ns + "theme") || (o.theme || $.mobile.getInheritedTheme(input, "c"));
o.clearBtn = input.attr("data-" + $.mobile.ns + "clear-btn") === 'true';
inputNeedsClearBtn = !!o.clearBtn && !clearBtnBlacklist;

if (isSearch || inputNeedsWrap) {
focusedEl = input.parent();
focusedEl.removeClass("ui-body-" + oldTheme).addClass("ui-body-" + theme);
}

input.removeClass("ui-body-" + oldTheme).addClass("ui-body-" + theme);

o.theme = theme;

//is data-mini changed?
dataMini = input.attr("data-" + $.mobile.ns + "mini") === 'true';

if (o.mini !== dataMini) {
o.mini = dataMini;
refreshMini = true;
miniclass = o.mini ? "ui-mini" : "";
focusedEl.removeClass("ui-mini").addClass(miniclass);
}

//if textinput or search
if (inputNeedsClearBtn || isSearch) {
clearBtnText = input.attr("data-" + $.mobile.ns + "clear-btn-text");

//accept even an empty string
if (typeof clearBtnText === "undefined") {
clearBtnText = o.clearSearchButtonText || o.clearBtnText;
}

clearbtn = focusedEl.find(".ui-input-clear");

if (!clearbtn.length) {
buildClearBtn();
} else {
clearbtn[0].title = clearBtnText;
clearbtn.find(".ui-btn-text").text(clearBtnText);
}

clearbtn.removeClass("ui-btn-up-" + oldTheme).addClass("ui-btn-up-" + theme);

// Autogrow
if ( input.is( "textarea" ) ) {
var extraLineHeight = 15,
keyupTimeoutBuffer = 100,
keyupTimeout;

this._keyup = function() {
var scrollHeight = input[ 0 ].scrollHeight,
clientHeight = input[ 0 ].clientHeight;

if ( clientHeight < scrollHeight ) {
var paddingTop = parseFloat( input.css( "padding-top" ) ),
paddingBottom = parseFloat( input.css( "padding-bottom" ) ),
paddingHeight = paddingTop + paddingBottom;

input.height( scrollHeight - paddingHeight + extraLineHeight );
if (refreshMini) {
if (miniclass) {
clearbtn.removeClass("ui-fullsize").addClass(miniclass);
} else {
clearbtn.removeClass("ui-mini").addClass("ui-fullsize");
}
}
};

input.on( "keyup change input paste", function() {
clearTimeout( keyupTimeout );
keyupTimeout = setTimeout( self._keyup, keyupTimeoutBuffer );
clearbtn.attr("data-theme", theme);
clearbtn.toggleClass("ui-input-clear-hidden", !input.val());

} else {
if (focusedEl.length) {
focusedEl.find(".ui-input-clear").remove();
}
}

if (input.attr("disabled")) {
this.disable();
} else {
this.enable();
}
} else {
theme = o.theme || $.mobile.getInheritedTheme(this.element, "c");
themeclass = " ui-body-" + theme;
miniclass = o.mini ? " ui-mini" : "";
inputNeedsClearBtn = !!o.clearBtn && !clearBtnBlacklist;
clearBtnText = o.clearSearchButtonText || o.clearBtnText;

$("label[for='" + input.attr("id") + "']").addClass("ui-input-text");

focusedEl = input.addClass("ui-input-text ui-body-" + theme);

// XXX: Temporary workaround for issue 785 (Apple bug 8910589).
// Turn off autocorrect and autocomplete on non-iOS 5 devices
// since the popup they use can't be dismissed by the user. Note
// that we test for the presence of the feature by looking for
// the autocorrect property on the input element. We currently
// have no test for iOS 5 or newer so we're temporarily using
// the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
if (typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow) {
// Set the attribute instead of the property just in case there
// is code that attempts to make modifications via HTML.
input[0].setAttribute("autocorrect", "off");
input[0].setAttribute("autocomplete", "off");
}

//"search" and "text" input widgets
if (isSearch) {
focusedEl = input.wrap("<div class='ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield" + themeclass + miniclass + "'></div>").parent();
} else if (inputNeedsWrap) {
focusedEl = input.wrap("<div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + miniclass + "'></div>").parent();
}

if (inputNeedsClearBtn || isSearch) {
buildClearBtn();
} else if (!inputNeedsWrap && !isSearch) {
input.addClass("ui-corner-all ui-shadow-inset" + themeclass + miniclass);
}

input.focus(function () {
// In many situations, iOS will zoom into the input upon tap, this prevents that from happening
if (o.preventFocusZoom) {
$.mobile.zoom.disable(true);
}
focusedEl.addClass($.mobile.focusClass);
}).blur(function () {
focusedEl.removeClass($.mobile.focusClass);
if (o.preventFocusZoom) {
$.mobile.zoom.enable(true);
}
});

// binding to pagechange here ensures that for pages loaded via
// ajax the height is recalculated without user input
this._on( true, $.mobile.document, { "pagechange": "_keyup" });
// Autogrow
if (input.is("textarea")) {
var extraLineHeight = 15,
keyupTimeoutBuffer = 100,
keyupTimeout;

// Issue 509: the browser is not providing scrollHeight properly until the styles load
if ( $.trim( input.val() ) ) {
// bind to the window load to make sure the height is calculated based on BOTH
// the DOM and CSS
this._on( true, $.mobile.window, {"load": "_keyup"});
this._keyup = function () {
var scrollHeight = input[0].scrollHeight,
clientHeight = input[0].clientHeight;

if (clientHeight < scrollHeight) {
input.height(scrollHeight + extraLineHeight);
}
};

input.on("keyup change input paste", function () {
clearTimeout(keyupTimeout);
keyupTimeout = setTimeout(self._keyup, keyupTimeoutBuffer);
});

// binding to pagechange here ensures that for pages loaded via
// ajax the height is recalculated without user input
this._on($.mobile.document, { "pagechange": "_keyup" });

// Issue 509: the browser is not providing scrollHeight properly until the styles load
if ($.trim(input.val())) {
// bind to the window load to make sure the height is calculated based on BOTH
// the DOM and CSS
this._on($.mobile.window, { "load": "_keyup" });
}
}
if (input.attr("disabled")) {
this.disable();
}
}
if ( input.attr( "disabled" ) ) {
this.disable();
}
},


refresh: function() {
this._refresh(false);
},

disable: function() {
var $el,
isSearch = this.element.is( "[type='search'], :jqmData(type='search')" ),
Expand Down