src/js/widgets/jquery.mobile.tizen.searchbar.js

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