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

diff --git a/demos/tizen-winsets/widgets/list/list-vi.html b/demos/tizen-winsets/widgets/list/list-vi.html
new file mode 100644 (file)
index 0000000..8b4a104
--- /dev/null
+++ b/demos/tizen-winsets/widgets/list/list-vi.html
@@ -0,0 +1,27 @@
+<div data-role="page" data-add-back-btn="true">
+
+       <script type="text/javascript">
+               var add = function() {
+                       $("#listvi").listview( 'addItem', '<li>Test<div data-role="button" data-inline="true">TEST</div></li>', $("#idx").val() );
+               }
+               var del = function() {
+                       $("#listvi").listview( 'removeItem' , $("#idx").val() );
+               }
+       </script>
+
+       <div data-role="header" data-position="fixed">
+               <h1>List vi</h1>
+       </div>
+       <div class="content" data-role="content" data-scroll="y">
+               <input type="text" value="0" id="idx" />
+               <div data-role="button" onclick="add()" data-inline="true">Add</div>
+               <div data-role="button" onclick="del()" data-inline="true">Del</div>
+               <ul id="listvi" data-role="listview">
+                       <li><a href="#">Normal lists</a></li>
+                       <li><a href="#">Normal lists</a></li>
+               </ul>
+       </div>
+       <div data-role="footer">
+       </div>
+</div>
+

diff --git a/demos/tizen-winsets/widgets/list/list.html b/demos/tizen-winsets/widgets/list/list.html
index 699807b..53ab3a0 100755 (executable)
--- a/demos/tizen-winsets/widgets/list/list.html
+++ b/demos/tizen-winsets/widgets/list/list.html
@@ -30,6 +30,7 @@
                        <li><a href="list-email.html">Email list</a></li>
                        <li><a href="list-swipe.html">Swipe list</a></li>
                        <li><a href="list-extendable.html">Extendable list</a></li>
+                       <li><a href="list-vi.html">List vi</a></li>
                        <li data-role="list-divider">Virtual List</li>
                        <li><a href="virtuallist-normal.html">Virtual List Normal Style 1line</a></li>
                        <li><a href="virtuallist-normal_3_1_4.html">Virtual List Normal Style 1line-btn1</a></li>

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 (file)
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" <hjnim.kim@samsung.com>
+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 (executable)
--- 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