jenkins-bot has submitted this change and it was merged.
Change subject: Convert from show()/hide() to using classes
..
Convert from show()/hide() to using classes
jQuery's show/hide/fadeIn/fadeOut methods makes changes to the
style attributes of elements. That makes them rather hard to override
their visibility, without adding an entire API to the module to do so.
This replaces the default animations with one using classes to control
visibility and only animates the animatable properties using
the style attributes.
Follow-up to: Iadaae3fb9ae1899e12605d653b2688616b8f7c40
Change-Id: I4652ade66c6de864ee3e74b3817ed9b93967ce3d
---
M modules/jquery.wikiEditor.toolbar.css
M modules/jquery.wikiEditor.toolbar.js
2 files changed, 29 insertions(+), 17 deletions(-)
Approvals:
Mwalker: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/jquery.wikiEditor.toolbar.css
b/modules/jquery.wikiEditor.toolbar.css
index fe09576..2dad74a 100644
--- a/modules/jquery.wikiEditor.toolbar.css
+++ b/modules/jquery.wikiEditor.toolbar.css
@@ -6,6 +6,11 @@
position: relative;
display: block;
}
+
+.wikiEditor-ui-toolbar .empty {
+ display: none;
+}
+
/* Expandable Sections */
.wikiEditor-ui-toolbar .sections {
float: left;
@@ -14,12 +19,16 @@
height: 0;
}
.wikiEditor-ui-toolbar .sections .section {
- display: none;
float: left;
width: 100%;
border-top: 1px solid #DD;
background-color: #E0EEf7;
}
+
+.wikiEditor-ui-toolbar .sections .section-hidden {
+ display: none;
+}
+
.wikiEditor-ui-toolbar {
/* @embed */
background-image: url(images/toolbar/base.png);
diff --git a/modules/jquery.wikiEditor.toolbar.js
b/modules/jquery.wikiEditor.toolbar.js
index 3b6d4ed..454b42a 100644
--- a/modules/jquery.wikiEditor.toolbar.js
+++ b/modules/jquery.wikiEditor.toolbar.js
@@ -62,7 +62,7 @@
$group.append(
$.wikiEditor.modules.toolbar.fn.buildTool( context, tool, data[type][tool] ) );
}
if ( $group.children().length ) {
- $group.show();
+ $group.removeClass( 'empty' );
}
smooth = false;
break;
@@ -136,7 +136,7 @@
// Fix div.section size after adding things; if smooth is true
uses a smooth
// animation, otherwise just change height (breaking any
ongoing animation)
var $divSections = context.modules.toolbar.$toolbar.find(
'div.sections' );
- var $visibleSection = $divSections.find( '.section:visible' );
+ var $visibleSection = $divSections.find( '.section-visible' );
if ( $visibleSection.size() ) {
if ( smooth ) {
$divSections.animate( { 'height':
$visibleSection.outerHeight() }, 'fast' );
@@ -189,7 +189,7 @@
if ( group ) {
var $group =
context.modules.toolbar.$toolbar.find( group );
if ( $group.children().length === 0 ) {
- $group.hide();
+ $group.addClass( 'empty' );
}
}
}
@@ -292,7 +292,7 @@
}
}
if ( empty ) {
- $group.hide();
+ $group.addClass( 'empty' );
}
return $group;
},
@@ -604,28 +604,31 @@
var $sections = $( this ).data(
'context' ).$ui.find( '.sections' );
var $section =
$( this ).data( 'context'
).$ui.find( '.section-' + $( this ).parent().attr( 'rel' ) );
- var show = $section.css( 'display' )
=== 'none';
+ var show = !$section.hasClass(
'section-visible' );
$section.parent().find(
'.section-visible' )
.css( 'position', 'absolute' )
.attr( 'aria-expanded', 'false'
)
.removeClass( 'section-visible'
)
- .fadeOut( 'fast', function () {
- $( this ).css(
'position', 'static' );
+ .animate( { opacity: 0 },
'fast', 'linear', function () {
+
