1 /* ***************************************************************************
2 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
4 * Permission is hereby granted, free of charge, to any person obtaining a
5 * copy of this software and associated documentation files (the "Software"),
6 * to deal in the Software without restriction, including without limitation
7 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
8 * and/or sell copies of the Software, and to permit persons to whom the
9 * Software is furnished to do so, subject to the following conditions:
11 * The above copyright notice and this permission notice shall be included in
12 * all copies or substantial portions of the Software.
14 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
20 * DEALINGS IN THE SOFTWARE.
21 * ***************************************************************************
24 * jQuery Mobile Framework : "textinput" plugin for text inputs, textareas
25 * Copyright (c) jQuery Project
26 * Dual licensed under the MIT or GPL Version 2 licenses.
27 * http://jquery.org/license
28 * Authors: Jinhyuk Jun <jinhyuk.jun@samsung.com>
29 * Wongi Lee <wongi11.lee@samsung.com>
33 * Searchbar can be created using <input> element with type=search
34 * <input type="search" name="search" id="search1" value="" />
36 * Searchbar can be inserted 3 cases
37 * content : seachbar behave same as content element
38 * header : searchbar placed below title(header), It doesn't move when scrolling page
39 * inside optionheader : Searchbar placed inside optionheader, searchbar can be seen only expand optionheader
43 * HTML markup for creating Searchbar
44 * <input type="search"/>
46 * How to make searchbar in content
47 * <input type="search" name="" id="" value="" />
49 * How to make searchbar in title
50 * <div data-role="header" data-position ="fixed" >
52 * <input type="search" name="" id="" value="" />
55 * How to make searchbar inside optionheader
56 * <div data-role="header" data-position ="fixed" >
58 * <div id="myoptionheader2" data-role="optionheader">
59 * <input type="search" name="" id="" value="" />
64 (function ( $, undefined ) {
66 $.widget( "tizen.searchbar", $.mobile.widget, {
69 initSelector: "input[type='search'],:jqmData(type='search'), input[type='tizen-search'],:jqmData(type='tizen-search')"
72 _create: function () {
73 var input = this.element,
75 theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
76 themeclass = " ui-body-" + theme,
79 currentPage = input.closest( ".ui-page" ),
94 function toggleClear() {
96 clearbtn.addClass( "ui-input-clear-hidden" );
98 clearbtn.removeClass( "ui-input-clear-hidden" );
102 function showCancel() {
104 .addClass( "ui-input-search-default" )
105 .removeClass( "ui-input-search-wide" );
107 .addClass( "ui-btn-cancel-show" )
108 .removeClass( "ui-btn-cancel-hide" );
112 function hideCancel() {
114 .addClass( "ui-input-search-wide" )
115 .removeClass( "ui-input-search-default" );
117 .addClass( "ui-btn-cancel-hide" )
118 .removeClass( "ui-btn-cancel-show" );
120 if ( input.val() == "" ) {
127 $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
129 focusedEl = input.addClass( "ui-input-text ui-body-" + theme );
131 // XXX: Temporary workaround for issue 785 (Apple bug 8910589).
132 // Turn off autocorrect and autocomplete on non-iOS 5 devices
133 // since the popup they use can't be dismissed by the user. Note
134 // that we test for the presence of the feature by looking for
135 // the autocorrect property on the input element. We currently
136 // have no test for iOS 5 or newer so we're temporarily using
137 // the touchOverflow support flag for jQM 1.0. Yes, I feel dirty. - jblas
138 if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
139 // Set the attribute instead of the property just in case there
140 // is code that attempts to make modifications via HTML.
141 input[0].setAttribute( "autocorrect", "off" );
142 input[0].setAttribute( "autocomplete", "off" );
145 focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + "'></div>" ).parent();
146 clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
147 .tap( function ( event ) {
148 event.preventDefault();
149 event.stopPropagation();
156 clearbtn.addClass( "ui-input-clear-hidden" );
158 .appendTo( focusedEl )
160 icon: "deleteSearch",
168 input.keyup( toggleClear );
170 input.bind( 'paste cut keyup focus change blur', toggleClear );
172 //SLP --start search bar with cancel button
173 focusedEl.wrapAll( "<div class='input-search-bar'></div>" );
175 input.tap( function ( event ) {
176 inputedText = input.val();
182 searchicon = $("<div class='ui-image-search ui-image-searchfield'></div>");
184 .tap( function ( event ) {
191 .appendTo( focusedEl );
193 cancelbtn = $( "<a href='#' class='ui-input-cancel' title='clear text'>Cancel</a>" )
194 .tap(function ( event ) {
195 event.preventDefault();
196 event.stopPropagation();
201 .trigger( "change" );
205 .appendTo( focusedEl.parent() )
213 input.focus( function () {
215 focusedEl.addClass( "ui-focus" );
219 /* When user touch on page, it's same to blur */
220 $( "div.input-search-bar" ).tap( function ( event ) {
222 event.stopPropagation();
225 $( currentPage ).bind("tap", function ( e ) {
226 focusedEl.removeClass( "ui-focus" );
228 input.trigger( "change" );
232 if ( input.is( "textarea" ) ) {
233 extraLineHeight = 15;
234 keyupTimeoutBuffer = 100;
235 keyup = function () {
236 var scrollHeight = input[ 0 ].scrollHeight,
237 clientHeight = input[ 0 ].clientHeight;
239 if ( clientHeight < scrollHeight ) {
240 input.height(scrollHeight + extraLineHeight);
244 input.keyup( function () {
245 clearTimeout( keyupTimeout );
246 keyupTimeout = setTimeout( keyup, keyupTimeoutBuffer );
249 // binding to pagechange here ensures that for pages loaded via
250 // ajax the height is recalculated without user input
251 $( document ).one( "pagechange", keyup );
253 // Issue 509: the browser is not providing scrollHeight properly until the styles load
254 if ( $.trim( input.val() ) ) {
255 // bind to the window load to make sure the height is calculated based on BOTH
257 $( window ).load( keyup );
262 defaultText = input.jqmData( "default-text" );
264 if ( ( defaultText != undefined ) && ( defaultText.length > 0 ) ) {
265 defaultTextClass = "ui-input-default-text";
266 trimedText = defaultText.replace(/\s/g, "");
268 /* Make new class for default text string */
269 newClassName = defaultTextClass + "-" + trimedText;
270 newStyle = $( "<style>" + '.' + newClassName + ":after" + "{content:" + "'" + defaultText + "'" + "}" + "</style>" );
271 $( 'html > head' ).append( newStyle );
273 /* Make new empty <DIV> for default text */
274 newDiv = $( "<div></div>" );
276 /* Add class and append new div */
277 newDiv.addClass( defaultTextClass );
278 newDiv.addClass( newClassName );
279 newDiv.tap( function ( event ) {
284 input.parent().append( newDiv );
286 /* When focus, default text will be hide. */
288 .focus( function () {
289 input.parent().find( "div.ui-input-default-text" ).addClass( "ui-input-default-hidden" );
292 var inputedText = input.val();
293 if ( inputedText.length > 0 ) {
294 input.parent().find( "div.ui-input-default-text" ).addClass( "ui-input-default-hidden" );
296 input.parent().find( "div.ui-input-default-text" ).removeClass( "ui-input-default-hidden" );
302 disable: function () {
303 this.element.attr( "disabled", true );
304 this.element.parent().addClass( "ui-disabled" );
307 enable: function () {
308 this.element.attr( "disabled", false );
309 this.element.parent().removeClass( "ui-disabled" );
313 //auto self-init widgets
314 $( document ).bind( "pagecreate create", function ( e ) {
315 $.tizen.searchbar.prototype.enhanceWithin( e.target );