tizen-web-ui-fw/latest/js/src/widgets/jquery.mobile.tizen.searchbar.js

   1
   2 /* ***************************************************************************
   3  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
   4  *
   5  * Permission is hereby granted, free of charge, to any person obtaining a
   6  * copy of this software and associated documentation files (the "Software"),
   7  * to deal in the Software without restriction, including without limitation
   8  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
   9  * and/or sell copies of the Software, and to permit persons to whom the
  10  * Software is furnished to do so, subject to the following conditions:
  11  *
  12  * The above copyright notice and this permission notice shall be included in
  13  * all copies or substantial portions of the Software.
  14  *
  15  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  16  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  17  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  18  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  19  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  20  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  21  * DEALINGS IN THE SOFTWARE.
  22  * ***************************************************************************
  23  */
  24 /*
  25 * jQuery Mobile Framework : "textinput" plugin for text inputs, textareas
  26 * Copyright (c) jQuery Project
  27 * Dual licensed under the MIT or GPL Version 2 licenses.
  28 * http://jquery.org/license
  29 * Authors: Jinhyuk Jun <jinhyuk.jun@samsung.com>
  30 *          Wongi Lee <wongi11.lee@samsung.com>
  31 */
  32
  33 /**
  34  * Searchbar can be created using <input> element with type=search
  35  * <input type="search" name="search" id="search1" value=""  />
  36  *
  37  * Searchbar can be inserted 3 cases
  38  * content : seachbar behave same as content element
  39  * header : searchbar placed below title(header), It doesn't move when scrolling page
  40  * inside optionheader : Searchbar placed inside optionheader, searchbar can be seen only expand optionheader
  41  *
  42  * Examples:
  43  *
  44  *      HTML markup for creating Searchbar
  45  *              <input type="search"/>
  46  *
  47  *      How to make searchbar in content
  48  *              <input type="search" name="" id="" value=""  />
  49  *
  50  *      How to make cancel button in searchbar
  51  *              <div data-role="header" data-position ="fixed" >
  52  *                      <h1>Searchbar</h1>
  53  *                      <input type="search" data-cancel-btn=true name="" id="" value=""  />
  54  *              </div>
  55  *
  56  *      How to make icon in front of searchbar
  57  *              <div data-role="header" data-position ="fixed" >
  58  *                      <h1>Searchbar</h1>
  59  *                      <input type="search" data-icon="call" name="" id="" value=""  />
  60  *              </div>
  61 */
  62
  63 /**
  64         @class SearchBar
  65         The search bar widget is used to search for page content. This widget can be placed in the header, option header, or page content.
  66
  67         To add a search bar widget to the application, use the following code:
  68
  69                 <label for="search-basic">Search Input:</label>
  70                 <input type="search" name="search" id="searc-basic" value="" data-mini="true" />
  71
  72         Tizen supports many search bar options as described in the jQueryMobile documentation for search bar options.
  73         The search bar can define callbacks for events as described in the jQueryMobile documentation for search bar events.
  74         You can use methods with the search bar as described in the jQueryMobile documentation for search bar methods.
  75 */
  76
  77 (function ( $, undefined ) {
  78
  79         $.widget( "tizen.searchbar", $.mobile.widget, {
  80                 options: {
  81                         theme: null,
  82                         initSelector: "input[type='search'],:jqmData(type='search'), input[type='tizen-search'],:jqmData(type='tizen-search')"
  83                 },
  84
  85                 _create: function () {
  86                         var input = this.element,
  87                                 o = this.options,
  88                                 theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
  89                                 themeclass  = " ui-body-" + theme,
  90                                 focusedEl,
  91                                 clearbtn,
  92                                 cancelbtn,
  93                                 defaultText,
  94                                 defaultTextClass,
  95                                 trimedText,
  96                                 newClassName,
  97                                 newStyle,
  98                                 newDiv,
  99                                 searchimage,
 100                                 inputedText,
 101                                 useCancelBtn = false,
 102                                 frontIcon = false;
 103
 104                         $( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
 105
 106                         if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
 107                                 // Set the attribute instead of the property just in case there
 108                                 // is code that attempts to make modifications via HTML.
 109                                 input[0].setAttribute( "autocorrect", "off" );
 110                                 input[0].setAttribute( "autocomplete", "off" );
 111                         }
 112
 113                         focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + "'></div>" ).parent();
 114
 115                         if ( $( this.element ).data( "cancel-btn" ) === true ) {
 116                                 useCancelBtn = true;
 117                                 focusedEl.addClass( "ui-input-search-default" );
 118                         }
 119                         if ( $( this.element ).data( "icon" ) != undefined ) {
 120                                 frontIcon = true;
 121                                 focusedEl.addClass( "ui-search-bar-icon" );
 122                         }
 123
 124                         clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" )
 125                                 .bind('click', function ( event ) {
 126                                         if ( input.attr( "disabled" ) == "disabled" ) {
 127                                                 return false;
 128                                         }
 129                                         input
 130                                                 .val( "" )
 131                                                 .focus()
 132                                                 .trigger( "change" );
 133                                         clearbtn.addClass( "ui-input-clear-hidden" );
 134                                         event.preventDefault();
 135                                 })
 136                                 .appendTo( focusedEl )
 137                                 .buttonMarkup({
 138                                         icon: "deleteSearch",
 139                                         iconpos: "notext",
 140                                         corners: true,
 141                                         shadow: true
 142                                 });
 143
 144                         function toggleClear() {
 145                                 setTimeout(function () {
 146                                         clearbtn.toggleClass( "ui-input-clear-hidden", !input.val() );
 147                                 }, 0);
 148                         }
 149
 150                         function showCancel() {
 151                                 focusedEl
 152                                         .addClass( "ui-input-search-default" )
 153                                         .removeClass( "ui-input-search-wide" );
 154                                 cancelbtn
 155                                         .addClass( "ui-btn-cancel-show" )
 156                                         .removeClass( "ui-btn-cancel-hide" );
 157                         }
 158
 159                         function hideCancel() {
 160                                 focusedEl
 161                                         .addClass( "ui-input-search-wide" )
 162                                         .removeClass( "ui-input-search-default" );
 163                                 cancelbtn
 164                                         .addClass( "ui-btn-cancel-hide" )
 165                                         .removeClass( "ui-btn-cancel-show" );
 166                                 toggleClear();
 167                         }
 168
 169                         function makeFrontIcon() {
 170                                 var IconStyle = $( input ).jqmData( "icon" ),
 171                                         frontIcon = $( "<div data-role='button' data-style='circle'></div>" );
 172
 173                                 frontIcon
 174                                         .appendTo( focusedEl.parent() )
 175                                         .buttonMarkup( {
 176                                                 icon: IconStyle,
 177                                                 iconpos: "notext",
 178                                                 corners: true,
 179                                                 shadow: true
 180                                         } );
 181                                 frontIcon.addClass( "ui-btn-search-front-icon" );
 182                         }
 183
 184                         toggleClear();
 185
 186                         input.bind( 'paste cut keyup focus change blur', toggleClear );
 187
 188                         //SLP --start search bar with cancel button
 189                         focusedEl.wrapAll( "<div class='input-search-bar'></div>" );
 190                         searchimage = $("<div class='ui-image-search'></div>").appendTo( focusedEl );
 191
 192                         if ( frontIcon ) {
 193                                 makeFrontIcon();
 194                         }
 195
 196                         if ( useCancelBtn ) {
 197                                 cancelbtn = $( "<div data-role='button' class='ui-input-cancel' title='clear text'>Cancel</div>" )
 198                                         .bind('click', function ( event ) {
 199                                                 if ( input.attr( "disabled" ) == "disabled" ) {
 200                                                         return false;
 201                                                 }
 202                                                 event.preventDefault();
 203                                                 event.stopPropagation();
 204
 205                                                 input
 206                                                         .val( "" )
 207                                                         .blur()
 208                                                         .trigger( "change" );
 209
 210                                                 if ( useCancelBtn ) {
 211                                                         hideCancel();
 212                                                 }
 213                                         } )
 214                                         .appendTo( focusedEl.parent() )
 215                                         .buttonMarkup( {
 216                                                 iconpos: "cancel",
 217                                                 corners: true,
 218                                                 shadow: true
 219                                         } );
 220                         }
 221
 222                         // Input Focused
 223                         input
 224                                 .focus( function () {
 225                                         if ( input.attr( "disabled" ) == "disabled" ) {
 226                                                 return false;
 227                                         }
 228                                         if ( useCancelBtn ) {
 229                                                 showCancel();
 230                                         }
 231                                         focusedEl.addClass( $.mobile.focusClass );
 232                                 })
 233                                 .blur(function () {
 234                                         focusedEl.removeClass( $.mobile.focusClass );
 235                                 });
 236
 237                         // Default Text
 238                         defaultText = input.jqmData( "default-text" );
 239
 240                         if ( ( defaultText != undefined ) && ( defaultText.length > 0 ) ) {
 241                                 defaultTextClass = "ui-input-default-text";
 242                                 trimedText = defaultText.replace(/\s/g, "");
 243
 244                                 /* Make new class for default text string */
 245                                 newClassName = defaultTextClass + "-" + trimedText;
 246                                 newStyle = $( "<style>" + '.' + newClassName + ":after" + "{content:" + "'" + defaultText + "'" + "}" + "</style>" );
 247                                 $( 'html > head' ).append( newStyle );
 248
 249                                 /* Make new empty <DIV> for default text */
 250                                 newDiv = $( "<div></div>" );
 251
 252                                 /* Add class and append new div */
 253                                 newDiv.addClass( defaultTextClass );
 254                                 newDiv.addClass( newClassName );
 255                                 newDiv.tap( function ( event ) {
 256                                         input.blur();
 257                                         input.focus();
 258                                 } );
 259
 260                                 input.parent().append( newDiv );
 261
 262                                 /* When focus, default text will be hide. */
 263                                 input
 264                                         .focus( function () {
 265                                                 input.parent().find( "div.ui-input-default-text" ).addClass( "ui-input-default-hidden" );
 266                                         } )
 267                                         .blur( function () {
 268                                                 var inputedText = input.val();
 269                                                 if ( inputedText.length > 0 ) {
 270                                                         input.parent().find( "div.ui-input-default-text" ).addClass( "ui-input-default-hidden" );
 271                                                 } else {
 272                                                         input.parent().find( "div.ui-input-default-text" ).removeClass( "ui-input-default-hidden" );
 273                                                 }
 274                                         } );
 275                         }
 276
 277                         if ( !input.attr("placeholder") ) {
 278                                 input.attr( "placeholder", "Search" );
 279                         }
 280                 },
 281
 282                 disable: function () {
 283                         this.element.attr( "disabled", true );
 284                         this.element.parent().addClass( "ui-disabled" );
 285                         $( this.element ).blur();
 286                         this.element.parent().parent().find(".ui-input-cancel").addClass( "ui-disabled" );
 287                 },
 288
 289                 enable: function () {
 290                         this.element.attr( "disabled", false );
 291                         this.element.parent().removeClass( "ui-disabled" );
 292                         this.element.parent().parent().find(".ui-input-cancel").removeClass( "ui-disabled" );
 293                         $( this.element ).focus();
 294                 }
 295         } );
 296
 297         //auto self-init widgets
 298         $( document ).bind( "pagecreate create", function ( e ) {
 299                 $.tizen.searchbar.prototype.enhanceWithin( e.target );
 300         } );
 301
 302 }( jQuery ) );
 303