| Index: trunk/extensions/MobileFrontend/tests/js/test_toggle.js |
| — | — | @@ -1,16 +1,8 @@ |
| 2 | | -function applyCss() { |
| 3 | | - $(".hide").show(); |
| 4 | | - $(".show").hide(); |
| 5 | | - $(".openSection .hide").hide(); |
| 6 | | - $(".openSection .show").show(); |
| 7 | | -} |
| 8 | | - |
| 9 | 2 | module("MobileFrontend toggle.js: wm_toggle_section", { |
| 10 | 3 | setup: function() { |
| 11 | 4 | MFET.createFixtures(); |
| 12 | 5 | MFE.toggle.init(); |
| 13 | | - $("#section_1").addClass("openSection"); |
| 14 | | - $("#content_1,#anchor_1,#section_1 .hide").hide(); |
| | 6 | + $("#section_1,#content_1,#anchor_1").addClass("openSection"); |
| 15 | 7 | }, |
| 16 | 8 | teardown: function() { |
| 17 | 9 | MFET.cleanFixtures(); |
| — | — | @@ -21,20 +13,15 @@ |
| 22 | 14 | test("wm_toggle_section", function() { |
| 23 | 15 | strictEqual($("#section_1").hasClass("openSection"), true, "openSection class present"); |
| 24 | 16 | MFE.toggle.wm_toggle_section("1"); |
| 25 | | - applyCss(); |
| 26 | | - strictEqual($("#content_1").is(":visible"), true, "check content is visible on a toggle"); |
| 27 | | - strictEqual($("#anchor_1").is(":visible"), true, "check anchor is visible on toggle"); |
| 28 | | - strictEqual($("#section_1").hasClass("openSection"), false, "openSection class removed"); |
| 29 | | - strictEqual($("#section_1 .hide").is(":visible"), true, "check hide button now visible"); |
| 30 | | - strictEqual($("#section_1 .show").is(":visible"), false, "check show button now hidden"); |
| | 17 | + strictEqual($("#content_1").hasClass("openSection"), false, "check content is closed on a toggle"); |
| | 18 | + strictEqual($("#anchor_1").hasClass("openSection"), false, "check anchor is closed on toggle"); |
| | 19 | + strictEqual($("#section_1").hasClass("openSection"), false, "check section is closed"); |
| 31 | 20 | |
| 32 | 21 | // perform second toggle |
| 33 | 22 | MFE.toggle.wm_toggle_section("1"); |
| 34 | | - applyCss(); |
| 35 | | - strictEqual($("#content_1").is(":visible"), false, "check content is hidden on a toggle"); |
| 36 | | - strictEqual($("#anchor_1").is(":visible"), false, "check anchor is hidden on toggle"); |
| 37 | | - strictEqual($("#section_1 .hide").is(":visible"), false, "check hide button now hidden"); |
| 38 | | - strictEqual($("#section_1 .show").is(":visible"), true, "check show button now visible"); |
| | 23 | + strictEqual($("#content_1").hasClass("openSection"), true, "check content reopened"); |
| | 24 | + strictEqual($("#anchor_1").hasClass("openSection"), true, "check anchor reopened"); |
| | 25 | + strictEqual($("#section_1").hasClass("openSection"), true, "check section has reopened"); |
| 39 | 26 | }); |
| 40 | 27 | |
| 41 | 28 | test("clicking a hash link to reveal an already open section", function() { |
| — | — | @@ -45,26 +32,21 @@ |
| 46 | 33 | |
| 47 | 34 | test("wm_reveal_for_hash", function() { |
| 48 | 35 | MFE.toggle.wm_reveal_for_hash("#First_Section_2"); |
| 49 | | - applyCss(); |
| 50 | | - strictEqual($("#content_1").is(":visible"), true, "check content is visible on a toggle"); |
| 51 | | - strictEqual($("#anchor_1").is(":visible"), true, "check anchor is visible on toggle"); |
| 52 | | - strictEqual($("#section_1 .hide").is(":visible"), true, "check hide button now visible"); |
| 53 | | - strictEqual($("#section_1 .show").is(":visible"), false, "check show button now hidden"); |
| | 36 | + strictEqual($("#content_1").hasClass("openSection"), true, "check content is visible on a toggle"); |
| | 37 | + strictEqual($("#anchor_1").hasClass("openSection"), true, "check anchor is visible on toggle"); |
| | 38 | + strictEqual($("#section_1").hasClass("openSection"), true, "check section is marked as open"); |
| 54 | 39 | }); |
| 55 | 40 | |
| 56 | 41 | test("clicking hash links", function() { |
| 57 | 42 | MFET.triggerEvent($("[href=#First_Section_2]")[0], "click"); |
| 58 | | - applyCss(); |
| 59 | | - strictEqual($("#content_1").is(":visible"), true, "check content is visible on a toggle"); |
| 60 | | - strictEqual($("#anchor_1").is(":visible"), true, "check anchor is visible on toggle"); |
| 61 | | - strictEqual($("#section_1 .hide").is(":visible"), true, "check hide button now visible"); |
| 62 | | - strictEqual($("#section_1 .show").is(":visible"), false, "check show button now hidden"); |
| | 43 | + strictEqual($("#content_1").hasClass("openSection"), true, "check content is visible on a toggle"); |
| | 44 | + strictEqual($("#anchor_1").hasClass("openSection"), true, "check anchor is visible on toggle"); |
| | 45 | + strictEqual($("#section_1").hasClass("openSection"), true, "check section marked as open"); |
| 63 | 46 | }); |
| 64 | 47 | |
| 65 | 48 | test("clicking a heading toggles it", function() { |
| 66 | | - var visibilityStart = $("#content_1").is(":visible"); |
| 67 | | - MFET.triggerEvent($("#section_1")[0], "click"); |
| 68 | | - applyCss(); |
| | 49 | + var visibilityStart = $("#content_2").hasClass("openSection"); |
| | 50 | + MFET.triggerEvent($("#section_2")[0], "click"); |
| 69 | 51 | strictEqual(visibilityStart, false, "check content is hidden at start"); |
| 70 | | - strictEqual($("#content_1").is(":visible"), true, "check content is hidden on a toggle"); |
| | 52 | + strictEqual($("#content_2").hasClass("openSection"), true, "check content is shown on a toggle"); |
| 71 | 53 | }); |
| Index: trunk/extensions/MobileFrontend/javascripts/toggle.js |
| — | — | @@ -79,8 +79,10 @@ |
| 80 | 80 | } |
| 81 | 81 | for ( i = 0, d = ['content_','anchor_']; i<=1; i++ ) { |
| 82 | 82 | e = document.getElementById( d[i] + section_id ); |
| 83 | | - if ( e ) { |
| 84 | | - e.style.display = e.style.display === 'block' ? 'none' : 'block'; |
| | 83 | + if ( e && u( e ).hasClass( 'openSection' ) ) { |
| | 84 | + u( e ).removeClass( 'openSection' ) |
| | 85 | + } else { |
| | 86 | + u( e ).addClass( 'openSection' ) |
| 85 | 87 | } |
| 86 | 88 | } |
| 87 | 89 | } |
| Index: trunk/extensions/MobileFrontend/stylesheets/common.css |
| — | — | @@ -352,6 +352,10 @@ |
| 353 | 353 | display: none; |
| 354 | 354 | } |
| 355 | 355 | |
| | 356 | +.togglingEnabled .openSection { |
| | 357 | + display: block; |
| | 358 | +} |
| | 359 | + |
| 356 | 360 | .mwm-notice { |
| 357 | 361 | padding: 5px; |
| 358 | 362 | background: #dddddd; |
| Index: trunk/extensions/MobileFrontend/stylesheets/beta_common.css |
| — | — | @@ -333,11 +333,35 @@ |
| 334 | 334 | display: inline-block; |
| 335 | 335 | } |
| 336 | 336 | |
| 337 | | -.togglingEnabled .content_block, |
| | 337 | +.openSection button.hide, |
| | 338 | +.openSection button.show { |
| | 339 | + opacity: 1; |
| | 340 | +} |
| | 341 | + |
| 338 | 342 | .togglingEnabled .section_anchors { |
| 339 | 343 | display: none; |
| 340 | 344 | } |
| 341 | 345 | |
| | 346 | +.togglingEnabled .content_block { |
| | 347 | + max-height: 0; |
| | 348 | + position: relative; |
| | 349 | + overflow: hidden; |
| | 350 | + -webkit-transition: max-height 0.2s ease-in; |
| | 351 | + -moz-transition: max-height 0.2s ease-in; |
| | 352 | + -o-transition: max-height 0.2s ease-in; |
| | 353 | + transition: max-height 0.2s ease-in; |
| | 354 | +} |
| | 355 | + |
| | 356 | +.togglingEnabled .openSection.section_anchors { |
| | 357 | + display: block; |
| | 358 | +} |
| | 359 | + |
| | 360 | +.togglingEnabled .openSection.content_block { |
| | 361 | + max-height: 9999px; /* large number as height: auto is not effected by transitions */ |
| | 362 | + -webkit-transition: max-height 0.7s ease-in; |
| | 363 | + transition: max-height 0.7s ease-in; |
| | 364 | +} |
| | 365 | + |
| 342 | 366 | .mwm-notice { |
| 343 | 367 | padding: 5px; |
| 344 | 368 | background: #dddddd; |