Skip to content

Commit

Permalink
Added popper 🍿 to dropdown component (#37)
Browse files Browse the repository at this point in the history 
* Iframe link fixes

* Tooltip uses Popper Now

* Dropdown Popper
  • Loading branch information
@SoorajSNBlaze333
SoorajSNBlaze333 authored Mar 14, 2021
1 parent 8d3079f commit be4d19b
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 46 deletions.
12 changes: 6 additions & 6 deletions docs/content/docs/dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ title: Dropdown

<div x-data="dropdown()">
<button class="btn btn-primary" id="open-color-menu" x-spread="trigger">Open Dropdown</button>
<div class="dropdown-list" id="color-menu" x-spread="dropdown" x-cloak>
<div class="dropdown-list" id="color-menu" x-spread="dropdown" x-cloak x-position="right">
<a href="#" class="dropdown-item">Red</a>
<a href="#" class="dropdown-item">Blue</a>
<a href="#" class="dropdown-item">Green</a>
Expand All @@ -25,7 +25,7 @@ title: Dropdown
Open Dropdown
<svg class="dropdown-arrow" :class="{ 'rotate-180': open }" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="dropdown-list" id="color-menu-arrow" x-spread="dropdown" x-cloak>
<div class="dropdown-list" id="color-menu-arrow" x-spread="dropdown" x-cloak x-position="right">
<a href="#" class="dropdown-item">Red</a>
<a href="#" class="dropdown-item">Blue</a>
<a href="#" class="dropdown-item">Green</a>
Expand All @@ -43,7 +43,7 @@ title: Dropdown
Open Dropdown
<svg class="dropdown-arrow" :class="{ 'rotate-180': open }" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="dropdown-list" id="color-menu-small" x-spread="dropdown" x-cloak>
<div class="dropdown-list" id="color-menu-small" x-spread="dropdown" x-cloak x-position="right">
<a href="#" class="dropdown-item">Red</a>
<a href="#" class="dropdown-item">Blue</a>
<a href="#" class="dropdown-item">Green</a>
Expand All @@ -54,7 +54,7 @@ title: Dropdown
Open Dropdown
<svg class="dropdown-arrow" :class="{ 'rotate-180': open }" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="dropdown-list" id="color-menu-large" x-spread="dropdown" x-cloak>
<div class="dropdown-list" id="color-menu-large" x-spread="dropdown" x-cloak x-position="right">
<a href="#" class="dropdown-item">Red</a>
<a href="#" class="dropdown-item">Blue</a>
<a href="#" class="dropdown-item">Green</a>
Expand All @@ -72,7 +72,7 @@ title: Dropdown
Open Dropdown
<svg class="dropdown-arrow" :class="{ 'rotate-180': open }" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="dropdown-list" id="color-menu-divider" x-spread="dropdown" x-cloak>
<div class="dropdown-list" id="color-menu-divider" x-spread="dropdown" x-cloak x-position="right">
<a href="#" class="dropdown-item">Red</a>
<div class="dropdown-divide"></div>
<a href="#" class="dropdown-item">Blue</a>
Expand All @@ -93,7 +93,7 @@ title: Dropdown
Open Dropdown
<svg class="dropdown-arrow" :class="{ 'rotate-180': open }" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="dropdown-list" id="color-menu-icons" x-spread="dropdown" x-cloak>
<div class="dropdown-list" id="color-menu-icons" x-spread="dropdown" x-cloak x-position="right">
<a href="#" class="dropdown-item justify-between">Red <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg></a>
<a href="#" class="dropdown-item justify-between">Green <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></a>
<a href="#" class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="12" cy="12" r="4"></circle><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path></svg> Blue</a>
Expand Down
70 changes: 30 additions & 40 deletions src/js/components/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,70 +26,60 @@ var lastOpenedElement = null;
// If so, assign it to (elements.length - 1)
// Else, decrement the counter
function normalizeNegativeCounter(elements, focussedIndex) {
if (focussedIndex <= 0) {
return elements.length - 1;
} else {
return focussedIndex - 1;
}
if (focussedIndex <= 0) return elements.length - 1;
return focussedIndex - 1;
}

// Toggle aria atrributes based on the dropdown state
function toggleAriaAtrributes(dropdown, open) {
var trigger = dropdown.querySelectorAll('[x-spread="trigger"]');
if (trigger.length) {
trigger = trigger[0];
let trigger = dropdown.querySelector('[x-spread="trigger"]');
let dropdownList = dropdown.querySelector('[x-spread="dropdown"]');
if (trigger && dropdownList) {
if (open) {
trigger.setAttribute("aria-expanded", true);
var dropdownList = dropdown.querySelectorAll('[x-spread="dropdown"]');
if (dropdownList.length) {
dropdownList = dropdownList[0];
dropdownList.setAttribute("aria-hidden", false);
}
dropdownList.setAttribute("aria-hidden", false);
} else {
trigger.setAttribute("aria-expanded", false);
var dropdownList = dropdown.querySelectorAll('[x-spread="dropdown"]');
if (dropdownList.length) {
dropdownList = dropdownList[0];
dropdownList.setAttribute("aria-hidden", true);
}
dropdownList.setAttribute("aria-hidden", true);
}
}
}

// Set attributes when the component is initialized
function init(dropdown) {
var trigger = dropdown.querySelectorAll('[x-spread="trigger"]');
if (trigger.length) {
trigger = trigger[0];
let trigger = dropdown.querySelector('[x-spread="trigger"]');
let dropdownList = dropdown.querySelector('[x-spread="dropdown"]');
if (trigger && dropdownList) {
trigger.setAttribute("aria-haspopup", true);
trigger.setAttribute("aria-expanded", false);
var dropdown = dropdown.querySelectorAll('[x-spread="dropdown"]');
if (dropdown.length) {
dropdown = dropdown[0];
trigger.setAttribute("aria-controls", dropdown.id);
dropdown.setAttribute("role", "menu");
dropdown.setAttribute("aria-labelledby", trigger.id);
dropdown.setAttribute("aria-hidden", true);
var dropdownItems = dropdown.querySelectorAll(".dropdown-item");
if (dropdownItems.length) {
[...dropdownItems].forEach(function (dropdownItem) {
dropdownItem.setAttribute("role", "menuitem");
dropdownItem.setAttribute("tabindex", -1);
});
}
trigger.setAttribute("aria-controls", dropdown.id);
dropdownList.setAttribute("role", "menu");
dropdownList.setAttribute("aria-labelledby", trigger.id);
dropdownList.setAttribute("aria-hidden", true);
let dropdownItems = dropdown.querySelectorAll(".dropdown-item");
if (dropdownItems.length) {
[...dropdownItems].forEach(function (dropdownItem) {
dropdownItem.setAttribute("role", "menuitem");
dropdownItem.setAttribute("tabindex", -1);
});
}
return Popper.createPopper(trigger, dropdownList, {
placement: dropdownList.getAttribute('x-position') || 'bottom',
})
}
}

// Initialize attribute for all dropdown elements
var dropdowns = document.querySelectorAll('[x-data="dropdown()"]');
dropdowns.forEach(function (dropdown) {
init(dropdown);
});
window.addEventListener('DOMContentLoaded', function() {
const dropdowns = document.querySelectorAll('[x-data="dropdown()"]');
dropdowns.forEach(function (dropdown) {
init(dropdown);
});
})

window.dropdown = function () {
const DROPDOWN_ITEM_SELECTOR = ".dropdown-item";
var focussedIndex = -1;
const DROPDOWN_ITEM_SELECTOR = ".dropdown-item";
return {
open: false,
trigger: {
Expand Down
1 change: 1 addition & 0 deletions src/js/components/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const destroyTooltip = function (element) {
return tooltipElement.parentNode.removeChild(tooltipElement);
};


window.tooltip = function () {
return {
tooltip: {
Expand Down

0 comments on commit be4d19b

Please sign in to comment.