https://www.mediawiki.org/wiki/Special:Code/MediaWiki/113880
Revision: 113880
Author: jdlrobson
Date: 2012-03-15 00:12:47 +0000 (Thu, 15 Mar 2012)
Log Message:
-----------
redefine toggle behaviour
this rewrites the tests to describe toggle behaviour
in terms of classes rather than visibility
in beta we use height:0 and overflow:hidden instead of
display:none so we can make use of transitions to
animate expanding/collapsing
Modified Paths:
--------------
trunk/extensions/MobileFrontend/javascripts/toggle.js
trunk/extensions/MobileFrontend/stylesheets/beta_common.css
trunk/extensions/MobileFrontend/stylesheets/common.css
trunk/extensions/MobileFrontend/tests/js/test_toggle.js
Modified: trunk/extensions/MobileFrontend/javascripts/toggle.js
===================================================================
--- trunk/extensions/MobileFrontend/javascripts/toggle.js 2012-03-15
00:04:49 UTC (rev 113879)
+++ trunk/extensions/MobileFrontend/javascripts/toggle.js 2012-03-15
00:12:47 UTC (rev 113880)
@@ -79,8 +79,10 @@
}
for ( i = 0, d = ['content_','anchor_']; i<=1; i++ ) {
e = document.getElementById( d[i] + section_id );
- if ( e ) {
- e.style.display = e.style.display === 'block' ?
'none' : 'block';
+ if ( e && u( e ).hasClass( 'openSection' ) ) {
+ u( e ).removeClass( 'openSection' )
+ } else {
+ u( e ).addClass( 'openSection' )
}
}
}
Modified: trunk/extensions/MobileFrontend/stylesheets/beta_common.css
===================================================================
--- trunk/extensions/MobileFrontend/stylesheets/beta_common.css 2012-03-15
00:04:49 UTC (rev 113879)
+++ trunk/extensions/MobileFrontend/stylesheets/beta_common.css 2012-03-15
00:12:47 UTC (rev 113880)
@@ -333,11 +333,35 @@
display: inline-block;
}
-.togglingEnabled .content_block,
+.openSection button.hide,
+.openSection button.show {
+ opacity: 1;
+}
+
.togglingEnabled .section_anchors {
display: none;
}
+.togglingEnabled .content_block {
+ max-height: 0;
+ position: relative;
+ overflow: hidden;
+ -webkit-transition: max-height 0.2s ease-in;
+ -moz-transition: max-height 0.2s ease-in;
+ -o-transition: max-height 0.2s ease-in;
+ transition: max-height 0.2s ease-in;
+}
+
+.togglingEnabled .openSection.section_anchors {
+ display: block;
+}
+
+.togglingEnabled .openSection.content_block {
+ max-height: 9999px; /* large number as height: auto is not effected by
transitions */
+ -webkit-transition: max-height 0.7s ease-in;
+ transition: max-height 0.7s ease-in;
+}
+
.mwm-notice {
padding: 5px;
background: #dddddd;
Modified: trunk/extensions/MobileFrontend/stylesheets/common.css
===================================================================
--- trunk/extensions/MobileFrontend/stylesheets/common.css 2012-03-15
00:04:49 UTC (rev 113879)
+++ trunk/extensions/MobileFrontend/stylesheets/common.css 2012-03-15
00:12:47 UTC (rev 113880)
@@ -352,6 +352,10 @@
display: none;
}
+.togglingEnabled .openSection {
+ display: block;
+}
+
.mwm-notice {
padding: 5px;
background: #dddddd;
Modified: trunk/extensions/MobileFrontend/tests/js/test_toggle.js
===================================================================
--- trunk/extensions/MobileFrontend/tests/js/test_toggle.js 2012-03-15
00:04:49 UTC (rev 113879)
+++ trunk/extensions/MobileFrontend/tests/js/test_toggle.js 2012-03-15
00:12:47 UTC (rev 113880)
@@ -1,16 +1,8 @@
-function applyCss() {
- $(".hide").show();
- $(".show").hide();
- $(".openSection .hide").hide();
- $(".openSection .show").show();
-}
-
module("MobileFrontend toggle.js: wm_toggle_section", {
setup: function() {
MFET.createFixtures();
MFE.toggle.init();
- $("#section_1").addClass("openSection");
- $("#content_1,#anchor_1,#section_1 .hide").hide();
+ $("#section_1,#content_1,#anchor_1").addClass("openSection");
},
teardown: function() {
MFET.cleanFixtures();
@@ -21,20 +13,15 @@
test("wm_toggle_section", function() {
strictEqual($("#section_1").hasClass("openSection"), true, "openSection
class present");
MFE.toggle.wm_toggle_section("1");
- applyCss();
- strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
- strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
- strictEqual($("#section_1").hasClass("openSection"), false,
"openSection class removed");
- strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
- strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
+ strictEqual($("#content_1").hasClass("openSection"), false, "check
content is closed on a toggle");
+ strictEqual($("#anchor_1").hasClass("openSection"), false, "check
anchor is closed on toggle");
+ strictEqual($("#section_1").hasClass("openSection"), false, "check
section is closed");
// perform second toggle
MFE.toggle.wm_toggle_section("1");
- applyCss();
- strictEqual($("#content_1").is(":visible"), false, "check content is
hidden on a toggle");
- strictEqual($("#anchor_1").is(":visible"), false, "check anchor is
hidden on toggle");
- strictEqual($("#section_1 .hide").is(":visible"), false, "check hide
button now hidden");
- strictEqual($("#section_1 .show").is(":visible"), true, "check show
button now visible");
+ strictEqual($("#content_1").hasClass("openSection"), true, "check
content reopened");
+ strictEqual($("#anchor_1").hasClass("openSection"), true, "check anchor
reopened");
+ strictEqual($("#section_1").hasClass("openSection"), true, "check
section has reopened");
});
test("clicking a hash link to reveal an already open section", function() {
@@ -45,26 +32,21 @@
test("wm_reveal_for_hash", function() {
MFE.toggle.wm_reveal_for_hash("#First_Section_2");
- applyCss();
- strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
- strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
- strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
- strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
+ strictEqual($("#content_1").hasClass("openSection"), true, "check
content is visible on a toggle");
+ strictEqual($("#anchor_1").hasClass("openSection"), true, "check anchor
is visible on toggle");
+ strictEqual($("#section_1").hasClass("openSection"), true, "check
section is marked as open");
});
test("clicking hash links", function() {
MFET.triggerEvent($("[href=#First_Section_2]")[0], "click");
- applyCss();
- strictEqual($("#content_1").is(":visible"), true, "check content is
visible on a toggle");
- strictEqual($("#anchor_1").is(":visible"), true, "check anchor is
visible on toggle");
- strictEqual($("#section_1 .hide").is(":visible"), true, "check hide
button now visible");
- strictEqual($("#section_1 .show").is(":visible"), false, "check show
button now hidden");
+ strictEqual($("#content_1").hasClass("openSection"), true, "check
content is visible on a toggle");
+ strictEqual($("#anchor_1").hasClass("openSection"), true, "check anchor
is visible on toggle");
+ strictEqual($("#section_1").hasClass("openSection"), true, "check
section marked as open");
});
test("clicking a heading toggles it", function() {
- var visibilityStart = $("#content_1").is(":visible");
- MFET.triggerEvent($("#section_1")[0], "click");
- applyCss();
+ var visibilityStart = $("#content_2").hasClass("openSection");
+ MFET.triggerEvent($("#section_2")[0], "click");
strictEqual(visibilityStart, false, "check content is hidden at start");
- strictEqual($("#content_1").is(":visible"), true, "check content is
hidden on a toggle");
+ strictEqual($("#content_2").hasClass("openSection"), true, "check
content is shown on a toggle");
});
_______________________________________________
MediaWiki-CVS mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
