Added a class to body which enables/disables layout transitions

This allows people to disable animation of CSS properties temporarily
if needed by removing the vector-animateLayout class from the body.

// Disabled CSS transitions on properties customized by the hd layout
$( 'body' ).removeClass( 'vector-animateLayout' );
// Change something that would normally be animated
$( '#content' ).css( 'margin-left', 0 );
// Re-enables transitions
$( 'body' ).addClass( 'vector-animateLayout' );

Change-Id: I6d164e45c1e31d4f83e0fa390011c5d182eb69c3

diff --git a/skins/Vector.php b/skins/Vector.php
index 404bbe7..d2f0060 100644 (file)
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -18,6 +18,8 @@ if( !defined( 'MEDIAWIKI' ) ) {
  */
 class SkinVector extends SkinTemplate {
 
+       protected static $bodyClasses = array( 'vector-animateLayout' );
+
        var $skinname = 'vector', $stylename = 'vector',
                $template = 'VectorTemplate', $useHeadElement = true;
 
@@ -52,6 +54,20 @@ class SkinVector extends SkinTemplate {
                parent::setupSkinUserCss( $out );
                $out->addModuleStyles( 'skins.vector' );
        }
+
+       /**
+        * Adds classes to the body element.
+        * 
+        * @param $out OutputPage object
+        * @param &$bodyAttrs Array of attributes that will be set on the body element
+        */
+       function addToBodyAttributes( OutputPage $out, &$bodyAttrs ) {
+               if ( isset( $bodyAttrs['class'] ) && strlen( $bodyAttrs['class'] ) > 0 ) {
+                       $bodyAttrs['class'] .= ' ' . implode( ' ', static::$bodyClasses );
+               } else {
+                       $bodyAttrs['class'] = implode( ' ', static::$bodyClasses );
+               }
+       }
 }
 
 /**

diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index cc4170c..32a6489 100644 (file)
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -847,39 +847,39 @@ div.vectorTabs ul {
 
 /* Animate between standard and high definition layouts */
 
-div#content,
-div#footer {
+body.vector-animateLayout div#content,
+body.vector-animateLayout div#footer {
        transition: margin-left 250ms, padding 250ms;
        -moz-transition: margin-left 250ms, padding 250ms;
        -webkit-transition: margin-left 250ms, padding 250ms;
        -o-transition: margin-left 250ms, padding 250ms;
 }
-#p-logo,
-#left-navigation {
+body.vector-animateLayout #p-logo,
+body.vector-animateLayout #left-navigation {
        transition: left 250ms;
        -moz-transition: left 250ms;
        -webkit-transition: left 250ms;
        -o-transition: left 250ms;
 }
-#mw-panel {
+body.vector-animateLayout #mw-panel {
        transition: padding-left 250ms;
        -moz-transition: padding-left 250ms;
        -webkit-transition: padding-left 250ms;
        -o-transition: padding-left 250ms;
 }
-#p-search {
+body.vector-animateLayout #p-search {
        transition: margin-right 250ms;
        -moz-transition: margin-right 250ms;
        -webkit-transition: margin-right 250ms;
        -o-transition: margin-right 250ms;
 }
-#p-personal {
+body.vector-animateLayout #p-personal {
        transition: right 250ms;
        -moz-transition: right 250ms;
        -webkit-transition: right 250ms;
        -o-transition: right 250ms;
 }
-#mw-head-base {
+body.vector-animateLayout #mw-head-base {
        transition: margin-left 250ms;
        -moz-transition: margin-left 250ms;
        -webkit-transition: margin-left 250ms;