From cc912fe99ad7b50262b8850c1c3039f092bef002 Mon Sep 17 00:00:00 2001 From: Karlis Venters Date: Tue, 16 Sep 2014 17:50:32 +0300 Subject: [PATCH] Fix: disabled dropdown buttons should not open Fixes #5370 --- .../dropdown/examples_dropdown_advanced.html | 25 +++++++++++++++ .../dropdown/examples_dropdown_disabled.html | 25 +++++++++++++++ .../examples_dropdown_button_intro.html | 7 +++++ doc/pages/components/dropdown_buttons.html | 31 ++++--------------- js/foundation/foundation.dropdown.js | 4 +++ spec/dropdown/basic.html | 6 +++- spec/dropdown/dropdown.js | 17 ++++++++++ 7 files changed, 89 insertions(+), 26 deletions(-) create mode 100644 doc/includes/dropdown/examples_dropdown_advanced.html create mode 100644 doc/includes/dropdown/examples_dropdown_disabled.html diff --git a/doc/includes/dropdown/examples_dropdown_advanced.html b/doc/includes/dropdown/examples_dropdown_advanced.html new file mode 100644 index 000000000..f224084f5 --- /dev/null +++ b/doc/includes/dropdown/examples_dropdown_advanced.html @@ -0,0 +1,25 @@ +
+
+

HTML

+{{#markdown}} +```html +
+ + +``` +{{/markdown}} +
+
+

Rendered HTML

+
+ +
+
diff --git a/doc/includes/dropdown/examples_dropdown_disabled.html b/doc/includes/dropdown/examples_dropdown_disabled.html new file mode 100644 index 000000000..75237d7f3 --- /dev/null +++ b/doc/includes/dropdown/examples_dropdown_disabled.html @@ -0,0 +1,25 @@ +
+
+

HTML

+{{#markdown}} +```html +
+ + +``` +{{/markdown}} +
+
+

Rendered HTML

+
+ +
+
diff --git a/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html b/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html index f6c2c3b24..8235af747 100644 --- a/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html +++ b/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html @@ -32,3 +32,10 @@
  • This is another
  • Yet another
    • + +
    + diff --git a/doc/pages/components/dropdown_buttons.html b/doc/pages/components/dropdown_buttons.html index 37f338821..504ada384 100644 --- a/doc/pages/components/dropdown_buttons.html +++ b/doc/pages/components/dropdown_buttons.html @@ -33,32 +33,13 @@ You can create a dropdown using minimal markup.

    Advanced

    -Additional classes can be added to your dropdown buttons to change their appearance. +Additional classes can be added to your dropdown buttons to change their appearance and behavior. -
    -
    -

    HTML

    -{{#markdown}} -```html -
    - -``` -{{/markdown}} -
    -
    -

    Rendered HTML

    -
    - -
    -
    +{{> examples_dropdown_advanced}} + +Disabled dropdown buttons will not open when tapped: + +{{> examples_dropdown_disabled}} *** diff --git a/js/foundation/foundation.dropdown.js b/js/foundation/foundation.dropdown.js index 09cbe3bf1..a74c39dbc 100644 --- a/js/foundation/foundation.dropdown.js +++ b/js/foundation/foundation.dropdown.js @@ -8,6 +8,7 @@ settings : { active_class: 'open', + disabled_class: 'disabled', mega_class: 'mega', align: 'bottom', is_hover: false, @@ -147,6 +148,9 @@ }, toggle : function (target) { + if (target.hasClass(this.settings.disabled_class)) { + return; + } var dropdown = this.S('#' + target.data(this.data_attr())); if (dropdown.length === 0) { // No dropdown found, not continuing diff --git a/spec/dropdown/basic.html b/spec/dropdown/basic.html index f112ace1a..015181114 100644 --- a/spec/dropdown/basic.html +++ b/spec/dropdown/basic.html @@ -13,4 +13,8 @@

    Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

    -
    \ No newline at end of file + +Disabled Dropdown +
    +

    Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

    +
    diff --git a/spec/dropdown/dropdown.js b/spec/dropdown/dropdown.js index 03b7fc300..ab4d39ea3 100644 --- a/spec/dropdown/dropdown.js +++ b/spec/dropdown/dropdown.js @@ -23,6 +23,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(false); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('displays the dropdown on click', function() { @@ -33,6 +34,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(true); expect($('#drop2').hasClass('open')).toBe(false); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('displays the content dropdown on click', function() { @@ -43,6 +45,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(true); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('closes an open dropdown when another is clicked', function() { @@ -54,6 +57,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(true); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('closes an open dropdown when the document is clicked elsewhere', function() { @@ -65,6 +69,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(false); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('displays a dropdown even if the dropdown button has deeply nested content', function() { @@ -75,6 +80,18 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(false); expect($('#drop3').hasClass('open')).toBe(true); + expect($('#drop4').hasClass('open')).toBe(false); + }); + + it('does not display a disabled dropdown', function() { + $(document).foundation(); + + $('#drop4link').click(); + + expect($('#drop1').hasClass('open')).toBe(false); + expect($('#drop2').hasClass('open')).toBe(false); + expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); }); }); -- 2.47.2