From acab83040af22d3b2eb6a8159a0d8734d12b0f70 Mon Sep 17 00:00:00 2001 From: "hjnim.kim" Date: Thu, 3 Jan 2013 16:55:00 +0900 Subject: [PATCH] listview: Add add/delete animation (VI) Implements add/delete animation for JQM listview If you apply this animation in listview, using addItem, removeItem listview API And simple sample has been added( list -> list-vi ) Change-Id: Ia0dff988c6aa029ace414bf96875a0447a11af6b --- demos/tizen-winsets/widgets/list/list-vi.html | 27 +++++++++ demos/tizen-winsets/widgets/list/list.html | 1 + ...0022-JQM-Tizen-listview-vi-has-been-added.patch | 68 ++++++++++++++++++++++ .../tizen/common/jquery.mobile.listview.less | 43 ++++++++++++++ 4 files changed, 139 insertions(+) create mode 100644 demos/tizen-winsets/widgets/list/list-vi.html create mode 100644 libs/patch/0022-JQM-Tizen-listview-vi-has-been-added.patch diff --git a/demos/tizen-winsets/widgets/list/list-vi.html b/demos/tizen-winsets/widgets/list/list-vi.html new file mode 100644 index 0000000..8b4a104 --- /dev/null +++ b/demos/tizen-winsets/widgets/list/list-vi.html @@ -0,0 +1,27 @@ +
+ + + +
+

List vi

+
+
+ +
Add
+
Del
+ +
+
+
+
+ diff --git a/demos/tizen-winsets/widgets/list/list.html b/demos/tizen-winsets/widgets/list/list.html index 699807b..53ab3a0 100755 --- a/demos/tizen-winsets/widgets/list/list.html +++ b/demos/tizen-winsets/widgets/list/list.html @@ -30,6 +30,7 @@
  • Email list
  • Swipe list
  • Extendable list
    • +
  • List vi
  • Virtual List
  • Virtual List Normal Style 1line
  • Virtual List Normal Style 1line-btn1
    • diff --git a/libs/patch/0022-JQM-Tizen-listview-vi-has-been-added.patch b/libs/patch/0022-JQM-Tizen-listview-vi-has-been-added.patch new file mode 100644 index 0000000..afa44ef --- /dev/null +++ b/libs/patch/0022-JQM-Tizen-listview-vi-has-been-added.patch @@ -0,0 +1,68 @@ +From 7a14b644b1c924aae78c04ecbb2d399e99f46f8f Mon Sep 17 00:00:00 2001 +From: "hjnim.kim" +Date: Thu, 3 Jan 2013 16:50:15 +0900 +Subject: [PATCH] JQM Tizen listview vi has been added + +Change-Id: I0f62283d2fb05404dc599f8a529078a4972aaf49 +--- + libs/js/jquery-mobile-1.2.0/js/widgets/listview.js | 44 ++++++++++++++++++++ + 1 files changed, 44 insertions(+), 0 deletions(-) + +diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/listview.js b/libs/js/jquery-mobile-1.2.0/js/widgets/listview.js +index 539bf35..f44f6b8 100644 +--- a/libs/js/jquery-mobile-1.2.0/js/widgets/listview.js ++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/listview.js +@@ -468,6 +468,50 @@ $.widget( "mobile.listview", $.mobile.widget, { + } + }, + ++ addItem : function( listitem , idx ) { ++ var $item = $(listitem), ++ $li, ++ _self = this; ++ ++ $li = _self.element.children( 'li' ); ++ $item.css( { 'opacity' : 0, ++ 'display' : 'none' } ); ++ if( $li.length == 0 ++ || $li.length <= idx) ++ { ++ $( _self.element ).append( $item ); ++ } else { ++ $( $li.get( idx ) ).before( $item ); ++ } ++ $(_self.element).trigger("create") ++ .listview( 'refresh' ); ++ ++ $item.css( 'min-height' , '0px' ); ++ ++ $item.slideDown( 'fast' , function( ){ ++ $item.addClass("addli"); ++ $item.css( { 'opacity' : 1 } ); ++ } ); ++ }, ++ ++ removeItem : function( idx ) { ++ var $item, ++ $li, ++ _self = this; ++ ++ $li = _self.element.children( 'li' ); ++ if( $li.length <= 0 || ++ $li.length < idx ) { ++ return ; ++ } ++ $item = $( $li.get( idx ) ); ++ $item.addClass("removeli"); ++ $item.slideUp('normal', ++ function( ) { ++ $(this).remove(); ++ }); ++ }, ++ + // TODO sort out a better way to track sub pages of the listview this is brittle + childPages: function() { + var parentUrl = this.parentPage.jqmData( "url" ); +-- +1.7.5.4 + diff --git a/src/themes/tizen/common/jquery.mobile.listview.less b/src/themes/tizen/common/jquery.mobile.listview.less index fb64de1..1e4e239 100755 --- a/src/themes/tizen/common/jquery.mobile.listview.less +++ b/src/themes/tizen/common/jquery.mobile.listview.less @@ -918,3 +918,46 @@ li:not(.ui-li-has-multiline) .ui-li-text-sub { } } +@-webkit-keyframes addliitem { + from { + -webkit-transform: scale(0.5); + -moz-transform: scale(0.5); + opacity: 0; + } + to { + -webkit-transform: scale(1); + -moz-transform: scale(1); + opacity: 1; + } +} +.addli +{ + -webkit-animation-name: addliitem; + -moz-animation-name: addliitem; + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; +} + +@-webkit-keyframes removeliitem { + from { + -webkit-transform: scale(1); + -moz-transform: scale(1); + opacity : 1; + } + to { + -webkit-transform: scale(0.5); + -moz-transform: scale(0.5); + opacity : 0; + } +} +.removeli +{ + -webkit-animation-name: removeliitem; + -moz-animation-name: removeliitem; + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; +} \ No newline at end of file -- 2.7.4