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

   1
   2 /*
   3  * jQuery Mobile Widget @VERSION
   4  *
   5  * This software is licensed under the MIT licence (as defined by the OSI at
   6  * http://www.opensource.org/licenses/mit-license.php)
   7  *
   8  * ***************************************************************************
   9  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
  10  * Copyright (c) 2011 by Intel Corporation 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  * Authors: Kalyan Kondapally <kalyan.kondapally@intel.com>,
  32  *          Elliot Smith <elliot.smith@intel.com>
  33  *          Hyunjung Kim <hjnim.kim@samsung.com>
  34  */
  35
  36 // Widget which turns a html element into a "swipe":
  37 // i.e. each list item has a sliding "cover" which can be swiped
  38 // to the right (to reveal buttons underneath) or left (to
  39 // cover the buttons again). Clicking on a button under a swipe
  40 // also moves the cover back to the left.
  41 //
  42 // In this case, the cover is over a grid of buttons;
  43 // but it is should also be possible to use other types of markup under the
  44 // list items.
  45 //
  46 // WARNING: This doesn't work well inside a scrollview widget, as
  47 // the touch events currently interfere with each other badly (e.g.
  48 // a swipe will work but cause a scroll as well).
  49 //
  50 // Theme: default is to use the theme on the target element,
  51 // theme passed in options, parent theme, or 'c' if none of the above.
  52 // If list items are themed individually, the cover will pick up the
  53 // theme of the list item which is its parent.
  54 //
  55
  56 /**
  57         @class Swipe
  58         The swipe widget shows a view on the screen where the items can be swiped vertically to show a menu.
  59         To add a swipe widget to the application, use the following code:
  60
  61                 <ul data-role="listview">
  62                         <li data-role="swipe">
  63                                 <div data-role="swipe-cover">
  64                                         <div data-role="button" data-inline="true">OK</div>
  65                                         <div data-role="button" data-inline="true">Cancel</div>
  66                                 </div>
  67                                 <div data-role="swipe-item-cover">
  68                                         <p>This is a swipe item cover.<br>
  69                                                 This will be swiped out when swipe event comes.</p>
  70                                 </div>
  71                         </li>
  72                 </ul>
  73
  74         You can use methods with the swipe as described in the jQueryMobile documentation for view methods.
  75 */
  76 /**
  77         @property {String} data-role
  78         Creates a swipe using the HTML unordered view (&gt;ul&lt;) element.
  79         The default value is swipe.
  80
  81         Creates a swipe item cover using an HTML $gt;div$lt; element. This cover can be swiped to show the content beneath it.
  82         The default value is swipe-item-cover.
  83 */
  84 /**
  85         @method open
  86         uncover swipe item
  87 */
  88 /**
  89         @method close
  90         cover swipe item
  91 */
  92 /**
  93         @method opened
  94         return coveritem status( coverd or uncovred )
  95 */
  96 /**
  97         @event animationstart
  98         The swipe can define a callback for the animationstart event, which is fired after a item is swipe and the swipe animation is start:
  99 */
 100 /**
 101         @event animationend
 102         The swipe can define a callback for the animationend event, which is fired after a item is swiped and the swipe animation is complete:
 103
 104                 <ul data-role="listview">
 105                 <li data-role="swipe">
 106                                 <div data-role="swipe-cover">
 107                                         <div data-role="button" data-inline="true">OK</div>
 108                                         <div data-role="button" data-inline="true">Cancel</div>
 109                                 </div>
 110                                 <div data-role="swipe-item-cover" id="foo">
 111                                 <p>This is a swipe item cover.<br>
 112                                                 This will be swiped out when swipe event comes.</p>
 113                                 </div>
 114                         </li>
 115                 </ul>
 116                 $("#foo").bind("animationend", function (ev)
 117                 {
 118                         Console.log("Swipe cover's animation is complete.");
 119                 });
 120 */
 121 (function ($) {
 122
 123         $.widget("tizen.swipe", $.mobile.widget, {
 124                 options: {
 125                         theme: null
 126                 },
 127
 128                 _create: function () {
 129                         // use the theme set on the element, set in options,
 130                         // the parent theme, or 'c' (in that order of preference)
 131                         var theme = this.element.jqmData('theme') ||
 132                                 this.options.theme ||
 133                                 this.element.parent().jqmData('theme') ||
 134                                 's';
 135
 136                         this.options.theme = theme;
 137                         this._isopen = false;
 138                         this.refresh();
 139                 },
 140
 141                 refresh: function () {
 142                         this._cleanupDom();
 143
 144                         var self = this,
 145                                 defaultCoverTheme,
 146                                 covers,
 147                                 coverTheme,
 148                                 item,
 149                                 itemHasThemeClass;
 150
 151                         defaultCoverTheme = 'ui-body-' + this.options.theme;
 152
 153                         if ( !this.element.parent().hasClass('ui-listview') ) {
 154                                 this.element.parent().listview();
 155                         }
 156                         this.element.addClass('ui-swipe');
 157
 158                         // get the item covers
 159                         covers = this.element.find(':jqmData(role="swipe-item-cover")');
 160                         item = this.element.find(':jqmData(role="swipe-item")');
 161
 162                         this._covers = covers;
 163                         this._item = item;
 164                         item.addClass('ui-swipe-item');
 165                         coverTheme = defaultCoverTheme;
 166                         itemHasThemeClass = item.parent().attr('class')
 167                                         .match(/ui\-body\-[a-z]|ui\-bar\-[a-z]/);
 168
 169                         covers.each( function () {
 170                                 var cover = $( this );
 171
 172                                 if ( itemHasThemeClass ) {
 173                                         coverTheme = itemHasThemeClass[0];
 174                                 }
 175
 176                                 cover.addClass('ui-swipe-item-cover');
 177                                 cover.addClass( coverTheme );
 178
 179                                 if ( cover.has('.ui-swipe-item-cover-inner').length === 0 ) {
 180                                         cover.wrapInner( $('<span/>').addClass('ui-swipe-item-cover-inner') );
 181                                 }
 182
 183                                 if ( !( cover.data('animateRight') && cover.data('animateLeft') ) ) {
 184                                         cover.data('animateRight', function () {
 185                                                 self._animateCover( cover, 110, item );
 186                                         });
 187
 188                                         cover.data('animateLeft', function () {
 189                                                 self._animateCover( cover, 0, item );
 190                                         });
 191                                 }
 192
 193                                 // bind to synthetic events
 194                                 item.bind( 'swipeleft', cover.data('animateLeft') );
 195                                 cover.bind( 'swiperight', cover.data('animateRight') );
 196                                 item.find( '.ui-btn' ).bind( 'vclick', cover.data('animateLeft') );
 197                         } );
 198
 199                 },
 200
 201                 _cleanupDom: function () {
 202                         var self = this,
 203                                 defaultCoverTheme,
 204                                 cover,
 205                                 coverTheme = defaultCoverTheme,
 206                                 item,
 207                                 itemClass,
 208                                 itemHasThemeClass,
 209                                 text,
 210                                 wrapper;
 211
 212                         defaultCoverTheme = 'ui-body-' + this.options.theme;
 213
 214                         this.element.removeClass('ui-swipe');
 215
 216                         // get the item covers
 217                         cover = this.element.find(':jqmData(role="swipe-item-cover")');
 218                         item = this.element.find(':jqmData(role="swipe-item")');
 219
 220                         item.removeClass('ui-swipe-item');
 221                         cover.removeClass('ui-swipe-item-cover');
 222
 223                         itemClass = item.attr('class');
 224                         itemHasThemeClass = itemClass &&
 225                                 itemClass.match(/ui\-body\-[a-z]|ui\-bar\-[a-z]/);
 226
 227                         if ( itemHasThemeClass ) {
 228                                 coverTheme = itemHasThemeClass[0];
 229                         }
 230
 231                         cover.removeClass(coverTheme);
 232
 233                         // remove wrapper HTML
 234                         wrapper = cover.find('.ui-swipe-item-cover-inner');
 235                         wrapper.children().unwrap();
 236                         text = wrapper.text();
 237
 238                         if ( text ) {
 239                                 cover.append( text );
 240                                 wrapper.remove();
 241                         }
 242
 243                         // unbind swipe events
 244                         if ( cover.data('animateRight') && cover.data('animateLeft') ) {
 245                                 cover.unbind( 'swiperight', cover.data('animateRight') );
 246                                 item.unbind( 'swipeleft', cover.data('animateLeft') );
 247
 248                                 // unbind clicks on buttons inside the item
 249                                 item.find('.ui-btn').unbind( 'vclick', cover.data('animateLeft') );
 250
 251                                 cover.data( 'animateRight', null );
 252                                 cover.data( 'animateLeft', null );
 253                         }
 254                 },
 255
 256                 // NB I tried to use CSS animations for this, but the performance
 257                 // and appearance was terrible on Android 2.2 browser;
 258                 // so I reverted to jQuery animations
 259                 //
 260                 // once the cover animation is done, the cover emits an
 261                 // animationComplete event
 262                 _animateCover: function ( cover, leftPercentage, item ) {
 263                         var self = this,
 264                                 animationOptions = {
 265                                         easing: 'linear',
 266                                         duration: 'normal',
 267                                         queue: true,
 268                                         complete: function () {
 269                                                 cover.trigger('animationend');
 270                                         }
 271                                 };
 272
 273                         $( this.element.parent() )
 274                                 .find(":jqmData(role='swipe')")
 275                                 .each(
 276                                         function () {
 277                                                 if ( this !== self.element.get(0) &&
 278                                                                 $( this ).swipe("opened") ) {
 279                                                         $( this ).swipe("close");
 280                                                 }
 281                                         }
 282                                 );
 283
 284                         if ( leftPercentage == 110 ) {
 285                                 this._isopen = true;
 286                         } else {
 287                                 this._isopen = false;
 288                         }
 289
 290                         cover.stop();
 291                         cover.clearQueue();
 292                         cover.trigger('animationstart');
 293                         cover.animate( { left: leftPercentage + '%' }, animationOptions );
 294                         if ( leftPercentage == 0 ) {
 295                                 item.animate({ opacity: 0 }, "slow");
 296                         } else {
 297                                 item.animate({ opacity: 1 }, "slow");
 298                         }
 299
 300                 },
 301
 302                 destroy: function () {
 303                         this._cleanupDom();
 304                 },
 305
 306                 open: function () {
 307                         var self = this;
 308
 309                         $( self._covers ).each( function () {
 310                                 var cover = $( this );
 311                                 self._animateCover( cover, 110, self._item);
 312                         } );
 313                 },
 314
 315                 opened: function () {
 316                         return this._isopen;
 317                 },
 318
 319                 close: function () {
 320                         var self = this;
 321
 322                         $( self._covers ).each( function () {
 323                                 var cover = $( this );
 324                                 self._animateCover( cover, 0, self._item);
 325                         } );
 326                 }
 327
 328         });
 329
 330         $( document ).bind("pagecreate", function ( e ) {
 331                 $( e.target ).find(":jqmData(role='swipe')").swipe();
 332         });
 333
 334 }( jQuery ));
 335