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                                                 corners: true,
 185                                                 shadow: true
 186                                         } );
 187                                 frontIcon.addClass( "ui-btn-search-front-icon" );
 188                         }
 189
 190                         toggleClear();
 191
 192                         input.bind( 'paste cut keyup focus change blur', toggleClear );
 193
 194                         //SLP --start search bar with cancel button
 195                         focusedEl.wrapAll( "<div class='input-search-bar'></div>" );
 196                         searchimage = $("<div class='ui-image-search'></div>").appendTo( focusedEl );
 197
 198                         if ( frontIcon ) {
 199                                 makeFrontIcon();
 200                         }
 201
 202                         if ( useCancelBtn ) {
 203                                 cancelbtn = $( "<div data-role='button' class='ui-input-cancel' title='clear text'>Cancel</div>" )
 204                                         .bind('click', function ( event ) {
 205                                                 if ( input.attr( "disabled" ) == "disabled" ) {
 206                                                         return false;
 207                                                 }
 208                                                 event.preventDefault();
 209                                                 event.stopPropagation();
 210
 211                                                 input
 212                                                         .val( "" )
 213                                                         .blur()
 214                                                         .trigger( "change" );
 215
 216                                                 if ( useCancelBtn ) {
 217                                                         hideCancel();
 218                                                 }
 219                                         } )
 220                                         .appendTo( focusedEl.parent() )
 221                                         .buttonMarkup( {
 222                                                 iconpos: "cancel",
 223                                                 corners: true,
 224                                                 shadow: true
 225                                         } );
 226                         }
 227
 228                         // Input Focused
 229                         input
 230                                 .focus( function () {
 231                                         if ( input.attr( "disabled" ) == "disabled" ) {
 232                                                 return false;
 233                                         }
 234                                         if ( useCancelBtn ) {
 235                                                 showCancel();
 236                                         }
 237                                         focusedEl.addClass( $.mobile.focusClass );
 238                                 })
 239                                 .blur(function () {
 240                                         focusedEl.removeClass( $.mobile.focusClass );
 241                                 });
 242
 243                         // Default Text
 244                         defaultText = input.jqmData( "default-text" );
 245
 246                         if ( ( defaultText != undefined ) && ( defaultText.length > 0 ) ) {
 247                                 defaultTextClass = "ui-input-default-text";
 248                                 trimedText = defaultText.replace(/\s/g, "");
 249
 250                                 /* Make new class for default text string */
 251                                 newClassName = defaultTextClass + "-" + trimedText;
 252                                 newStyle = $( "<style>" + '.' + newClassName + ":after" + "{content:" + "'" + defaultText + "'" + "}" + "</style>" );
 253                                 $( 'html > head' ).append( newStyle );
 254
 255                                 /* Make new empty <DIV> for default text */
 256                                 newDiv = $( "<div></div>" );
 257
 258                                 /* Add class and append new div */
 259                                 newDiv.addClass( defaultTextClass );
 260                                 newDiv.addClass( newClassName );
 261                                 newDiv.tap( function ( event ) {
 262                                         input.blur();
 263                                         input.focus();
 264                                 } );
 265
 266                                 input.parent().append( newDiv );
 267
 268                                 /* When focus, default text will be hide. */
 269                                 input
 270                                         .focus( function () {
 271                                                 input.parent().find( "div.ui-input-default-text" ).addClass( "ui-input-default-hidden" );
 272                                         } )
 273                                         .blur( function () {
 274                                                 var inputedText = input.val();
 275                                                 if ( inputedText.length > 0 ) {
 276                                                         input.parent().find( "div.ui-input-default-text" ).addClass( "ui-input-default-hidden" );
 277                                                 } else {
 278                                                         input.parent().find( "div.ui-input-default-text" ).removeClass( "ui-input-default-hidden" );
 279                                                 }
 280                                         } );
 281                         }
 282
 283                         if ( !input.attr("placeholder") ) {
 284                                 input.attr( "placeholder", "Search" );
 285                         }
 286                 },
 287
 288                 disable: function () {
 289                         this.element.attr( "disabled", true );
 290                         this.element.parent().addClass( "ui-disabled" );
 291                         $( this.element ).blur();
 292                         this.element.parent().parent().find(".ui-input-cancel").addClass( "ui-disabled" );
 293                 },
 294
 295                 enable: function () {
 296                         this.element.attr( "disabled", false );
 297                         this.element.parent().removeClass( "ui-disabled" );
 298                         this.element.parent().parent().find(".ui-input-cancel").removeClass( "ui-disabled" );
 299                         $( this.element ).focus();
 300                 }
 301         } );
 302
 303         //auto self-init widgets
 304         $( document ).bind( "pagecreate create", function ( e ) {
 305                 $.tizen.searchbar.prototype.enhanceWithin( e.target );
 306         } );
 307
 308 }( jQuery ) );
 309
 310 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
 311 } );
 312 //>>excludeEnd("jqmBuildExclude");