From: Youmin Ha <youmin.ha@samsung.com>
Date: Thu, 27 Dec 2012 10:21:45 +0000 (+0900)
Subject: collapsible: Add collapse/expand animation (VI)
X-Git-Tag: accepted/tizen_2.1/20130425.023924~7^2~312
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=f26827b8e824d882d78bc39dfad79678020786b3;p=platform%2Fframework%2Fweb%2Fweb-ui-fw.git

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
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
--- 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
--- 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