collapsible: Add collapse/expand animation (VI)

[platform/framework/web/web-ui-fw.git] / src / themes / tizen / tizen-white / theme.js

diff --git a/src/themes/tizen/tizen-white/theme.js b/src/themes/tizen/tizen-white/theme.js
index 2904c15..7251723 100755 (executable)
--- a/src/themes/tizen/tizen-white/theme.js
+++ b/src/themes/tizen/tizen-white/theme.js
@@ -2,16 +2,59 @@
 //$.mobile.page.prototype.options.backBtnTheme = "s";
 
 // Clear default theme for child elements
-$.mobile.page.prototype.options.headerTheme            = "s";
-$.mobile.page.prototype.options.footerTheme            = "s";
-//$.mobile.page.prototype.options.contentTheme = "s";
+$( function ( o ) {
+       o.headerTheme = "s";
+       o.footerTheme = "s";
+} ( $.mobile.page.prototype.options ) );
 
 // clear listview
-$.mobile.listview.prototype.options.theme = "s";
-$.mobile.listview.prototype.options.countTheme = "s";
-$.mobile.listview.prototype.options.headerTheme = "s";
-$.mobile.listview.prototype.options.dividerTheme = "s";
-$.mobile.listview.prototype.options.splitTheme = "s";
+( function ( o ) {
+       o.theme = "s";
+       o.countTheme = "s";
+       o.headerTheme = "s";
+       o.dividerTheme = "s";
+       o.splitTheme = "s";
+} ( $.mobile.listview.prototype.options ) );
+
+// Collapsible
+( function ( o ) {
+       o.heading = o.heading + ',li';          // Add listitem as a heading
+       o.inset = false;
+       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
 $.mobile.button.prototype.options.theme = "s";
@@ -20,7 +63,8 @@ $.fn.buttonMarkup.defaults.theme = "s";
 // Default theme swatch
 $.mobile.page.prototype.options.theme = "s";
 
-// Default font size for this theme
-$.tizen.frameworkData.defaultFontSize = 36;
+// Original scale of the theme
+$.tizen.frameworkData.defaultViewportWidth = 360;      // Fit to device-width
+$.tizen.frameworkData.defaultFontSize = 22;
 
 })(jQuery);