diff --git a/dist/shoelace.js b/dist/shoelace.js index c4055e437..fd1893cc3 100644 --- a/dist/shoelace.js +++ b/dist/shoelace.js @@ -5,11 +5,11 @@ Released under the MIT license Source: https://github.com/claviska/shoelace-css */ -!function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace dropdowns require either jQuery or Zepto.");("function"==typeof jQuery?jQuery:Zepto)(function(e){e(document).on("click",function(t){var i=e(t.target).closest(".dropdown").get(0),r=i?e(t.target).closest(".dropdown-trigger").get(0):null,o=(i?e(t.target).closest(".dropdown-menu").get(0):null)?e(t.target).closest("a").get(0):null;if(r){if(e(".dropdown.active").not(i).removeClass("active").trigger("hide"),e(r).is(".disabled, :disabled"))return;e(i).toggleClass("active").trigger(e(i).is(".active")?"show":"hide")}else if(o){if(t.preventDefault(),e(o).is(".disabled"))return;e(i).removeClass("active").trigger("hide").trigger("select",o)}else i||e(".dropdown.active").removeClass("active").trigger("hide")}).on("keydown",function(t){27===t.keyCode&&e(".dropdown.active").removeClass("active").trigger("hide")})})}(),/*! +!function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace dropdowns require either jQuery or Zepto.");("function"==typeof jQuery?jQuery:Zepto)(function(e){e(document).on("click",function(t){var i=e(t.target).closest(".dropdown").get(0),r=i?e(t.target).closest(".dropdown-trigger").get(0):null,o=(i?e(t.target).closest(".dropdown-menu").get(0):null)?e(t.target).closest("a").get(0):null;if(r){if(e(".dropdown.active").not(i).removeClass("active").trigger("hide"),e(r).is(".disabled, :disabled"))return;e(i).toggleClass("active").trigger(e(i).is(".active")?"show":"hide")}else if(o){if(e(o).is(".disabled"))return;e(i).removeClass("active").trigger("hide").trigger(e.Event("select",t),o)}else i||e(".dropdown.active").removeClass("active").trigger("hide")}).on("keydown",function(t){27===t.keyCode&&e(".dropdown.active").removeClass("active").trigger("hide")})})}(),/*! Shoelace.css tabs 1.0.0-beta22 (c) A Beautiful Site, LLC Released under the MIT license Source: https://github.com/claviska/shoelace-css */ -function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace tabs require either jQuery or Zepto.");(window.jQuery||window.Zepto)(function(e){new MutationObserver(function(t){t.forEach(function(t){if("attributes"===t.type&&"class"===t.attributeName){var i=e(t.target).get(0),r=e(t.target).closest(".tabs").get(0),o=e(t.target).closest(".tabs-nav").get(0),a="A"===i.tagName?e(r).find(i.hash):null;if(!e(i).is("a")||!r||!o)return;if(e(i).is(".disabled.active"))return void e(i).removeClass("active");e(i).is(".active")?(e(i).siblings(".active").removeClass("active"),e(a).addClass("active"),e(r).trigger("show",a)):(e(a).removeClass("active"),e(r).trigger("hide",a))}})}).observe(document.body,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0,subtree:!0}),e(document).on("click",".tabs-nav a",function(t){e(this).addClass("active"),t.preventDefault()})})}(); \ No newline at end of file +function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace tabs require either jQuery or Zepto.");(window.jQuery||window.Zepto)(function(e){new MutationObserver(function(t){t.forEach(function(t){if("attributes"===t.type&&"class"===t.attributeName){var i=e(t.target).get(0),r=e(t.target).closest(".tabs").get(0),o=e(t.target).closest(".tabs-nav").get(0),s="A"===i.tagName?e(r).find(i.hash):null;if(!e(i).is("a")||!r||!o)return;if(e(i).is(".disabled.active"))return void e(i).removeClass("active");e(i).is(".active")?(e(i).siblings(".active").removeClass("active"),e(s).addClass("active"),e(r).trigger("show",s)):(e(s).removeClass("active"),e(r).trigger("hide",s))}})}).observe(document.body,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0,subtree:!0}),e(document).on("click",".tabs-nav a",function(t){e(this).addClass("active"),t.preventDefault()})})}(); \ No newline at end of file diff --git a/docs/dropdowns.html b/docs/dropdowns.html index 7d7de406a..3d6b1f655 100644 --- a/docs/dropdowns.html +++ b/docs/dropdowns.html @@ -179,6 +179,9 @@ }) .on('select', function(event, item) { console.log('select', event.target, item); + + // Tip: Use use event.preventDefault() to + // intercept the original click event. });

To show or hide a dropdown programmatically, just add or remove the active class to the dropdown.

diff --git a/source/docs/dropdowns.md b/source/docs/dropdowns.md index 01635d6f9..4f1161fd4 100644 --- a/source/docs/dropdowns.md +++ b/source/docs/dropdowns.md @@ -147,6 +147,9 @@ $('#my-dropdown') }) .on('select', function(event, item) { console.log('select', event.target, item); + + // Tip: Use use event.preventDefault() to + // intercept the original click event. }); ``` diff --git a/source/js/dropdowns.js b/source/js/dropdowns.js index ff0ff4a1d..31f14d245 100644 --- a/source/js/dropdowns.js +++ b/source/js/dropdowns.js @@ -65,17 +65,15 @@ // If the user selected a menu item, close the dropdown and fire the select event if(selectedItem) { - // Prevent the page from scrolling since menu items are #links - event.preventDefault(); - // Don't select disabled menu items if($(selectedItem).is('.disabled')) return; - // Trigger a selection + // Close the dropdown and trigger the select event. The original click event is exposed to + // the handler so it can be prevented as needed. $(dropdown) .removeClass('active') .trigger('hide') - .trigger('select', selectedItem); + .trigger($.Event('select', event), selectedItem); return; }