* http://www.opensource.org/licenses/mit-license.php)
*
* ***************************************************************************
- * Copyright (C) 2011 by Intel Corporation Ltd.
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2011 by Intel Corporation Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
//
// animationComplete: Triggered by a cover when it finishes sliding
// (to either the right or left).
-(function ($) {
-
-$.widget("tizen.swipelist", $.mobile.widget, {
- options: {
- theme: null
- },
-
- _create: function () {
- // use the theme set on the element, set in options,
- // the parent theme, or 'c' (in that order of preference)
- var theme = this.element.jqmData('theme') ||
- this.options.theme ||
- this.element.parent().jqmData('theme') ||
- 'c';
-
- this.options.theme = theme;
-
- this.refresh();
- },
-
- refresh: function () {
- this._cleanupDom();
-
- var self = this,
- defaultCoverTheme,
- covers;
-
- defaultCoverTheme = 'ui-body-' + this.options.theme;
-
- // swipelist is a listview
- if (!this.element.hasClass('ui-listview')) {
- this.element.listview();
- }
-
- this.element.addClass('ui-swipelist');
-
- // get the list item covers
- covers = this.element.find(':jqmData(role="swipelist-item-cover")');
-
- covers.each(function () {
- var cover = $(this);
- var coverTheme = defaultCoverTheme;
-
- // get the parent li element and add classes
- var item = cover.closest('li');
-
- // add swipelist CSS classes
- item.addClass('ui-swipelist-item');
-
- cover.addClass('ui-swipelist-item-cover');
- // set swatch on cover: if the nearest list item has
- // a swatch set on it, that will be used; otherwise, use
- // the swatch set for the swipelist
- var itemHasThemeClass = item.attr('class')
- .match(/ui\-body\-[a-z]|ui\-bar\-[a-z]/);
-
- if (itemHasThemeClass) {
- coverTheme = itemHasThemeClass[0];
- }
-
- cover.addClass(coverTheme);
-
- // wrap inner HTML (so it can potentially be styled)
- if (cover.has('.ui-swipelist-item-cover-inner').length === 0) {
- cover.wrapInner($('<span/>').addClass('ui-swipelist-item-cover-inner'));
- }
-
- // bind to swipe events on the cover and the item
- if (!(cover.data('animateRight') && cover.data('animateLeft'))) {
- cover.data('animateRight', function () {
- self._animateCover(cover, 100);
- });
-
- cover.data('animateLeft', function () {
- self._animateCover(cover, 0);
- });
- }
-
- // bind to synthetic events
- item.bind('swipeleft', cover.data('animateLeft'));
- cover.bind('swiperight', cover.data('animateRight'));
-
- // any clicks on buttons inside the item also trigger
- // the cover to slide back to the left
- item.find('.ui-btn').bind('vclick', cover.data('animateLeft'));
- });
- },
-
- _cleanupDom: function () {
- var self = this,
- defaultCoverTheme,
- covers;
-
- defaultCoverTheme = 'ui-body-' + this.options.theme;
-
- this.element.removeClass('ui-swipelist');
-
- // get the list item covers
- covers = this.element.find(':jqmData(role="swipelist-item-cover")');
-
- covers.each(function () {
- var cover = $(this);
- var coverTheme = defaultCoverTheme;
- var text, wrapper;
-
- // get the parent li element and add classes
- var item = cover.closest('li');
-
- // remove swipelist CSS classes
- item.removeClass('ui-swipelist-item');
- cover.removeClass('ui-swipelist-item-cover');
-
- // remove swatch from cover: if the nearest list item has
- // a swatch set on it, that will be used; otherwise, use
- // the swatch set for the swipelist
- var itemClass = item.attr('class');
- var itemHasThemeClass = itemClass &&
- itemClass.match(/ui\-body\-[a-z]|ui\-bar\-[a-z]/);
-
- if (itemHasThemeClass) {
- coverTheme = itemHasThemeClass[0];
- }
-
- cover.removeClass(coverTheme);
+/**
+ @class SwipeList
+ The swipe list widget shows a list view on the screen where the list items can be swiped vertically to show a menu.
+ To add a swipe list widget to the application, use the following code:
+
+ <ul data-role="swipelist">
+ <li>
+ <div data-role="button" data-inline="true">OK</div>
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="swipelist-item-cover">
+ <p>This is a swipelist item cover.<br>
+ This will be swiped out when swipe event comes.</p>
+ </div>
+ </li>
+ </ul>
+
+ You can use methods with the swipe list as described in the jQueryMobile documentation for list view methods.
+*/
+/**
+ @property {String} data-role
+ Creates a swipe list using the HTML unordered list (>ul<) element.
+ The default value is swipelist.
+
+ Creates a swipe list item cover using an HTML $gt;div$lt; element. This cover can be swiped to show the content beneath it.
+ The default value is swipelist-item-cover.
+*/
+/**
+ @event animationend
+ The swipe list can define a callback for the animationend event, which is fired after a list item is swiped and the swipe animation is complete:
+
+ <ul data-role="swipelist">
+ <li>
+ <div data-role="button" data-inline="true">OK</div>
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="swipelist-item-cover" id="foo">
+ <p>This is a swipelist item cover.<br>
+ This will be swiped out when swipe event comes.</p>
+ </div>
+ </li>
+ </ul>
+ $("#foo").bind("animationend", function (ev)
+ {
+ Console.log("Swipelist cover's animation is complete.");
+ });
+*/
+(function ($) {
- // remove wrapper HTML
- wrapper = cover.find('.ui-swipelist-item-cover-inner');
-
- wrapper.children().unwrap();
-
- text = wrapper.text()
-
- if (text) {
- cover.append(text);
- wrapper.remove();
- }
-
- // unbind swipe events
- if (cover.data('animateRight') && cover.data('animateLeft')) {
- cover.unbind('swiperight', cover.data('animateRight'));
- item.unbind('swipeleft', cover.data('animateLeft'));
-
- // unbind clicks on buttons inside the item
- item.find('.ui-btn').unbind('vclick', cover.data('animateLeft'));
-
- cover.data('animateRight', null);
- cover.data('animateLeft', null);
- }
- });
- },
-
- // NB I tried to use CSS animations for this, but the performance
- // and appearance was terrible on Android 2.2 browser;
- // so I reverted to jQuery animations
- //
- // once the cover animation is done, the cover emits an
- // animationComplete event
- _animateCover: function (cover, leftPercentage) {
- var animationOptions = {
- easing: 'linear',
- duration: 'fast',
- queue: true,
- complete: function () {
- cover.trigger('animationComplete');
- }
- };
-
- cover.stop();
- cover.clearQueue();
- cover.animate({left: '' + leftPercentage + '%'}, animationOptions);
- },
-
- destroy: function () {
- this._cleanupDom();
- }
-
-});
-
-$(document).bind("pagecreate", function (e) {
- $(e.target).find(":jqmData(role='swipelist')").swipelist();
-});
-
-})(jQuery);
+ $.widget("tizen.swipelist", $.mobile.widget, {
+ options: {
+ theme: null
+ },
+
+ _create: function () {
+ // use the theme set on the element, set in options,
+ // the parent theme, or 'c' (in that order of preference)
+ var theme = this.element.jqmData('theme') ||
+ this.options.theme ||
+ this.element.parent().jqmData('theme') ||
+ 'c';
+
+ this.options.theme = theme;
+ this.refresh();
+ },
+
+ refresh: function () {
+ this._cleanupDom();
+
+ var self = this,
+ defaultCoverTheme,
+ covers;
+
+ defaultCoverTheme = 'ui-body-' + this.options.theme;
+
+ // swipelist is a listview
+ if (!this.element.hasClass('ui-listview')) {
+ this.element.listview();
+ }
+
+ this.element.addClass('ui-swipelist');
+
+ // get the list item covers
+ covers = this.element.find(':jqmData(role="swipelist-item-cover")');
+
+ covers.each(function () {
+ var cover = $(this),
+ coverTheme = defaultCoverTheme,
+ // get the parent li element and add classes
+ item = cover.closest('li'),
+ itemHasThemeClass;
+
+ // add swipelist CSS classes
+ item.addClass('ui-swipelist-item');
+ cover.addClass('ui-swipelist-item-cover');
+
+ // set swatch on cover: if the nearest list item has
+ // a swatch set on it, that will be used; otherwise, use
+ // the swatch set for the swipelist
+ itemHasThemeClass = item.attr('class')
+ .match(/ui\-body\-[a-z]|ui\-bar\-[a-z]/);
+
+ if (itemHasThemeClass) {
+ coverTheme = itemHasThemeClass[0];
+ }
+
+ cover.addClass(coverTheme);
+
+ // wrap inner HTML (so it can potentially be styled)
+ if (cover.has('.ui-swipelist-item-cover-inner').length === 0) {
+ cover.wrapInner($('<span/>').addClass('ui-swipelist-item-cover-inner'));
+ }
+
+ // bind to swipe events on the cover and the item
+ if (!(cover.data('animateRight') && cover.data('animateLeft'))) {
+ cover.data('animateRight', function () {
+ self._animateCover(cover, 100);
+ });
+
+ cover.data('animateLeft', function () {
+ self._animateCover(cover, 0);
+ });
+ }
+
+ // bind to synthetic events
+ item.bind('swipeleft', cover.data('animateLeft'));
+ cover.bind('swiperight', cover.data('animateRight'));
+
+ // any clicks on buttons inside the item also trigger
+ // the cover to slide back to the left
+ item.find('.ui-btn').bind('vclick', cover.data('animateLeft'));
+ });
+ },
+
+ _cleanupDom: function () {
+
+ var self = this,
+ defaultCoverTheme,
+ covers;
+
+ defaultCoverTheme = 'ui-body-' + this.options.theme;
+
+ this.element.removeClass('ui-swipelist');
+
+ // get the list item covers
+ covers = this.element.find(':jqmData(role="swipelist-item-cover")');
+
+ covers.each(function () {
+ var cover = $(this),
+ coverTheme = defaultCoverTheme,
+ text,
+ wrapper,
+ // get the parent li element and add classes
+ item = cover.closest('li'),
+ itemClass,
+ itemHasThemeClass;
+
+ // remove swipelist CSS classes
+ item.removeClass('ui-swipelist-item');
+ cover.removeClass('ui-swipelist-item-cover');
+
+ // remove swatch from cover: if the nearest list item has
+ // a swatch set on it, that will be used; otherwise, use
+ // the swatch set for the swipelist
+ itemClass = item.attr('class');
+ itemHasThemeClass = itemClass &&
+ itemClass.match(/ui\-body\-[a-z]|ui\-bar\-[a-z]/);
+
+ if (itemHasThemeClass) {
+ coverTheme = itemHasThemeClass[0];
+ }
+
+ cover.removeClass(coverTheme);
+
+ // remove wrapper HTML
+ wrapper = cover.find('.ui-swipelist-item-cover-inner');
+ wrapper.children().unwrap();
+ text = wrapper.text();
+
+ if (text) {
+ cover.append(text);
+ wrapper.remove();
+ }
+
+ // unbind swipe events
+ if (cover.data('animateRight') && cover.data('animateLeft')) {
+ cover.unbind('swiperight', cover.data('animateRight'));
+ item.unbind('swipeleft', cover.data('animateLeft'));
+
+ // unbind clicks on buttons inside the item
+ item.find('.ui-btn').unbind('vclick', cover.data('animateLeft'));
+
+ cover.data('animateRight', null);
+ cover.data('animateLeft', null);
+ }
+ });
+ },
+
+ // NB I tried to use CSS animations for this, but the performance
+ // and appearance was terrible on Android 2.2 browser;
+ // so I reverted to jQuery animations
+ //
+ // once the cover animation is done, the cover emits an
+ // animationComplete event
+ _animateCover: function (cover, leftPercentage) {
+ var animationOptions = {
+ easing: 'linear',
+ duration: 'fast',
+ queue: true,
+ complete: function () {
+ cover.trigger('animationComplete');
+ }
+ };
+
+ cover.stop();
+ cover.clearQueue();
+ cover.animate({left: leftPercentage + '%'}, animationOptions);
+ },
+
+ destroy: function () {
+ this._cleanupDom();
+ }
+
+ });
+
+ $(document).bind("pagecreate", function (e) {
+ $(e.target).find(":jqmData(role='swipelist')").swipelist();
+ });
+
+}(jQuery));
projects / platform / framework / web / web-ui-fw.git / blobdiff