collapsible: Add collapse/expand animation (VI)

Implements collapse/expand animation for JQM collapsible list.
This spec is described in VI(COM.002).
Includes a simple JQM patch, running custom event handler function.
theme.js has the custom function for the animation.

Change-Id: I1c7ec6bff12e111b88ad3f09e1e64658a7be2955

diff --git a/libs/patch/0022-JQM-Run-custom-event-handler-on-collapsible-list.patch b/libs/patch/0022-JQM-Run-custom-event-handler-on-collapsible-list.patch
new file mode 100644 (file)
index 0000000..84914c1
--- /dev/null
+++ b/libs/patch/0022-JQM-Run-custom-event-handler-on-collapsible-list.patch
@@ -0,0 +1,32 @@
+From 16a62b49eb87d912f070eb6844ba670b252ac895 Mon Sep 17 00:00:00 2001
+From: Youmin Ha <youmin.ha@samsung.com>
+Date: Thu, 27 Dec 2012 19:18:06 +0900
+Subject: [PATCH] JQM: Run custom event handler on collapsible list
+
+The collapsible list runs options.customEventHandler(isCollapse)
+function with this patch.
+This patch is for animating collapsing/expanding effect of collapsed
+content.
+
+Change-Id: Ic4f776db06224c15c0a8b10b108f56e26e298d6d
+---
+ .../jquery-mobile-1.2.0/js/widgets/collapsible.js  |    3 +++
+ 1 file changed, 3 insertions(+)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js b/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js
+index 97bfacb..d56a24f 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js
++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js
+@@ -121,6 +121,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
+ 
+                                       event.preventDefault();
+ 
++                                      // Custom event callback
++                                      if ( o.customEventHandler ) { o.customEventHandler.call( this, isCollapse ) };
++
+                                       collapsibleHeading
+                                               .toggleClass( "ui-collapsible-heading-collapsed", isCollapse )
+                                               .find( ".ui-collapsible-heading-status" )
+-- 
+1.7.9.5
+

diff --git a/src/themes/tizen/common/jquery.mobile.collapsible.less b/src/themes/tizen/common/jquery.mobile.collapsible.less
index fb24e98..7802a84 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.collapsible.less
+++ b/src/themes/tizen/common/jquery.mobile.collapsible.less
@@ -47,6 +47,35 @@
        .ui-btn-icon-top .ui-btn-inner,
        .ui-btn-icon-bottom .ui-btn-inner { padding-right: 40px; text-align: center; }
 
+       // Icons' animation
+       .ui-btn-inner > .ui-icon-arrow-d {
+               -webkit-transition: all 0.33s ease;
+               -moz-transition: all 0.33s ease;
+               -ms-transition: all 0.33s ease;
+               -o-transition: all 0.33s ease;
+               transition: all 0.33s ease;
+
+               -webkit-transform: rotate(180deg);
+               -moz-transform: rotate(180deg);
+               -ms-transform: rotate(180deg);
+               -o-transform: rotate(180deg);
+               transform: rotate(180deg);
+       }
+       .ui-btn-inner > .ui-icon-arrow-u {
+               background-image: url(images/controls/button/00_button_expand_closed.png);
+               -webkit-transition: all 0.33s ease;
+               -moz-transition: all 0.33s ease;
+               -ms-transition: all 0.33s ease;
+               -o-transition: all 0.33s ease;
+               transition: all 0.33s ease;
+
+               -webkit-transform: rotate(0deg);
+               -moz-transform: rotate(0deg);
+               -ms-transform: rotate(0deg);
+               -o-transform: rotate(0deg);
+               transform: rotate(0deg);
+       }
+
        .ui-btn span.ui-btn {
                position: absolute;
                left: 6px; top: 50%;
@@ -78,6 +107,14 @@
        border-right-width: 0;
        border-top: none;      /* Overrides ui-body-* */
        background-image: none; /* Overrides ui-body-* */
+
+       visibility: visible;
+       overflow: auto;
+       -webkit-transition: all 0.5s ease;
+       -moz-transition: all 0.5s ease;
+       -ms-transition: all 0.5s ease;
+       -o-transition: all 0.5s ease;
+       transition: all 0.5s ease;
 }
 .ui-collapsible-inset .ui-collapsible-content {
        margin: 0;
@@ -85,7 +122,9 @@
        border-left-width: 1px;
 }
 .ui-collapsible-content-collapsed {
-       display: none;
+       overflow: hidden;
+       max-height: 0px !important;
+       visibility: hidden;
 }
 .ui-collapsible-set {
        margin: .5em 0;

diff --git a/src/themes/tizen/tizen-white/theme.js b/src/themes/tizen/tizen-white/theme.js
index 8177773..7251723 100755 (executable)
--- a/src/themes/tizen/tizen-white/theme.js
+++ b/src/themes/tizen/tizen-white/theme.js
@@ -23,6 +23,37 @@ $( function ( o ) {
        o.iconPos = "right";    // Move iconPos to right position
        o.collapsedIcon = "arrow-u";
        o.expandedIcon = "arrow-d";
+       o.animation = true;
+       o.customEventHandler = function ( isCollapse ) {
+               var self = this,
+                       c = $(self).children('.ui-collapsible-content')[0],
+
+               function _getHeight( el ) {
+                       var h = 0,
+                               heading = $( el ).children('.ui-collapsible-heading')[0],
+                               content = $( el ).children('.ui-collapsible-content')[0];
+
+                       h += heading.clientHeight;
+                       $( content ).children().each ( function ( idx, _el ) {
+                               if ( $( _el ).hasClass( 'ui-collapsible' ) ) {  // recursive call for nested collapsible list
+                                       h += _getHeight( _el );
+
+                               } else {
+                                       h += _el.clientHeight;
+                               }
+                       } );
+                       return h;
+               }
+
+               if ( isCollapse ) {
+                       $( c ).data( 'max-height', _getHeight( self ) );
+               } else {
+                       if ( ! $( c ).data( 'max-height' ) ) {
+                               $( c ).data( 'max-height', document.body.clientHeight );
+                       }
+                       $( c ).css( 'max-height', $( c ).data( 'max-height' ) );
+               }
+       };
 } ( $.mobile.collapsible.prototype.options ) );
 
 //clear button theme