2 * jQuery Mobile Widget @VERSION
4 * This software is licensed under the MIT licence (as defined by the OSI at
5 * http://www.opensource.org/licenses/mit-license.php)
7 * ***************************************************************************
8 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
9 * Copyright (c) 2011 by Intel Corporation Ltd.
11 * Permission is hereby granted, free of charge, to any person obtaining a
12 * copy of this software and associated documentation files (the "Software"),
13 * to deal in the Software without restriction, including without limitation
14 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
15 * and/or sell copies of the Software, and to permit persons to whom the
16 * Software is furnished to do so, subject to the following conditions:
18 * The above copyright notice and this permission notice shall be included in
19 * all copies or substantial portions of the Software.
21 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
26 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
27 * DEALINGS IN THE SOFTWARE.
28 * ***************************************************************************
30 * Authors: Kalyan Kondapally <kalyan.kondapally@intel.com>,
31 * Elliot Smith <elliot.smith@intel.com>
32 * Hyunjung Kim <hjnim.kim@samsung.com>
35 // Widget which turns a html element into a "swipe":
36 // i.e. each list item has a sliding "cover" which can be swiped
37 // to the right (to reveal buttons underneath) or left (to
38 // cover the buttons again). Clicking on a button under a swipe
39 // also moves the cover back to the left.
41 // In this case, the cover is over a grid of buttons;
42 // but it is should also be possible to use other types of markup under the
45 // WARNING: This doesn't work well inside a scrollview widget, as
46 // the touch events currently interfere with each other badly (e.g.
47 // a swipe will work but cause a scroll as well).
49 // Theme: default is to use the theme on the target element,
50 // theme passed in options, parent theme, or 'c' if none of the above.
51 // If list items are themed individually, the cover will pick up the
52 // theme of the list item which is its parent.
57 The swipe widget shows a view on the screen where the items can be swiped vertically to show a menu.
58 To add a swipe widget to the application, use the following code:
60 <ul data-role="listview">
61 <li data-role="swipe">
62 <div data-role="swipe-cover">
63 <div data-role="button" data-inline="true">OK</div>
64 <div data-role="button" data-inline="true">Cancel</div>
66 <div data-role="swipe-item-cover">
67 <p>This is a swipe item cover.<br>
68 This will be swiped out when swipe event comes.</p>
73 You can use methods with the swipe as described in the jQueryMobile documentation for view methods.
76 @property {String} data-role
77 Creates a swipe using the HTML unordered view (>ul<) element.
78 The default value is swipe.
80 Creates a swipe item cover using an HTML $gt;div$lt; element. This cover can be swiped to show the content beneath it.
81 The default value is swipe-item-cover.
93 return coveritem status( coverd or uncovred )
97 The swipe can define a callback for the animationstart event, which is fired after a item is swipe and the swipe animation is start:
101 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 <ul data-role="listview">
104 <li data-role="swipe">
105 <div data-role="swipe-cover">
106 <div data-role="button" data-inline="true">OK</div>
107 <div data-role="button" data-inline="true">Cancel</div>
109 <div data-role="swipe-item-cover" id="foo">
110 <p>This is a swipe item cover.<br>
111 This will be swiped out when swipe event comes.</p>
115 $("#foo").bind("animationend", function (ev)
117 Console.log("Swipe cover's animation is complete.");
122 $.widget("tizen.swipe", $.mobile.widget, {
127 _create: function () {
128 // use the theme set on the element, set in options,
129 // the parent theme, or 'c' (in that order of preference)
130 var theme = this.element.jqmData('theme') ||
131 this.options.theme ||
132 this.element.parent().jqmData('theme') ||
135 this.options.theme = theme;
136 this._isopen = false;
140 refresh: function () {
150 defaultCoverTheme = 'ui-body-' + this.options.theme;
152 if ( !this.element.parent().hasClass('ui-listview') ) {
153 this.element.parent().listview();
155 this.element.addClass('ui-swipe');
157 // get the item covers
158 covers = this.element.find(':jqmData(role="swipe-item-cover")');
159 item = this.element.find(':jqmData(role="swipe-item")');
161 this._covers = covers;
162 item.addClass('ui-swipe-item');
163 coverTheme = defaultCoverTheme;
164 itemHasThemeClass = item.parent().attr('class')
165 .match(/ui\-body\-[a-z]|ui\-bar\-[a-z]/);
167 covers.each( function () {
168 var cover = $( this );
170 if ( itemHasThemeClass ) {
171 coverTheme = itemHasThemeClass[0];
174 cover.addClass('ui-swipe-item-cover');
175 cover.addClass( coverTheme );
177 if ( cover.has('.ui-swipe-item-cover-inner').length === 0 ) {
178 cover.wrapInner( $('<span/>').addClass('ui-swipe-item-cover-inner') );
181 if ( !( cover.data('animateRight') && cover.data('animateLeft') ) ) {
182 cover.data('animateRight', function () {
183 self._animateCover( cover, 110 );
186 cover.data('animateLeft', function () {
187 self._animateCover( cover, 0 );
191 // bind to synthetic events
192 item.bind( 'swipeleft', cover.data('animateLeft') );
193 cover.bind( 'swiperight', cover.data('animateRight') );
194 item.find( '.ui-btn' ).bind( 'vclick', cover.data('animateLeft') );
199 _cleanupDom: function () {
203 coverTheme = defaultCoverTheme,
210 defaultCoverTheme = 'ui-body-' + this.options.theme;
212 this.element.removeClass('ui-swipe');
214 // get the item covers
215 cover = this.element.find(':jqmData(role="swipe-item-cover")');
216 item = this.element.find(':jqmData(role="swipe-item")');
218 item.removeClass('ui-swipe-item');
219 cover.removeClass('ui-swipe-item-cover');
221 itemClass = item.attr('class');
222 itemHasThemeClass = itemClass &&
223 itemClass.match(/ui\-body\-[a-z]|ui\-bar\-[a-z]/);
225 if ( itemHasThemeClass ) {
226 coverTheme = itemHasThemeClass[0];
229 cover.removeClass(coverTheme);
231 // remove wrapper HTML
232 wrapper = cover.find('.ui-swipe-item-cover-inner');
233 wrapper.children().unwrap();
234 text = wrapper.text();
237 cover.append( text );
241 // unbind swipe events
242 if ( cover.data('animateRight') && cover.data('animateLeft') ) {
243 cover.unbind( 'swiperight', cover.data('animateRight') );
244 item.unbind( 'swipeleft', cover.data('animateLeft') );
246 // unbind clicks on buttons inside the item
247 item.find('.ui-btn').unbind( 'vclick', cover.data('animateLeft') );
249 cover.data( 'animateRight', null );
250 cover.data( 'animateLeft', null );
254 // NB I tried to use CSS animations for this, but the performance
255 // and appearance was terrible on Android 2.2 browser;
256 // so I reverted to jQuery animations
258 // once the cover animation is done, the cover emits an
259 // animationComplete event
260 _animateCover: function ( cover, leftPercentage ) {
266 complete: function () {
267 cover.trigger('animationComplete');
271 $( this.element.parent() )
272 .find(":jqmData(role='swipe')")
275 if ( this !== self.element.get(0) &&
276 $( this ).swipe("opened") ) {
277 $( this ).swipe("close");
282 if ( leftPercentage == 110 ) {
285 this._isopen = false;
290 cover.trigger('animationStart');
291 cover.animate( {left: leftPercentage + '%'}, animationOptions );
294 destroy: function () {
301 $( self._covers ).each( function () {
302 var cover = $( this );
303 self._animateCover( cover, 110 );
307 opened: function () {
314 $( self._covers ).each( function () {
315 var cover = $( this );
316 self._animateCover( cover, 0 );
322 $( document ).bind("pagecreate", function ( e ) {
323 $( e.target ).find(":jqmData(role='swipe')").swipe();