Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reimplement Turbo support using MutationObserver #807

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/components/accordion/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { AccordionItem, AccordionOptions } from './types';
import type { InstanceOptions } from '../../dom/types';
import { AccordionInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: AccordionOptions = {
alwaysOpen: false,
Expand Down Expand Up @@ -173,8 +174,8 @@ class Accordion implements AccordionInterface {
}
}

export function initAccordions() {
document.querySelectorAll('[data-accordion]').forEach(($accordionEl) => {
export function initAccordionsFrom(subtree: Document | Element) {
inclusiveQuerySelectorAll(subtree, '[data-accordion]').forEach(($accordionEl) => {
const alwaysOpen = $accordionEl.getAttribute('data-accordion');
const activeClasses = $accordionEl.getAttribute('data-active-classes');
const inactiveClasses = $accordionEl.getAttribute(
Expand Down Expand Up @@ -218,6 +219,10 @@ export function initAccordions() {
});
}

export function initAccordions() {
initAccordionsFrom(document);
}

if (typeof window !== 'undefined') {
window.Accordion = Accordion;
window.initAccordions = initAccordions;
Expand Down
9 changes: 7 additions & 2 deletions src/components/carousel/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type {
import type { InstanceOptions } from '../../dom/types';
import { CarouselInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: CarouselOptions = {
defaultPosition: 0,
Expand Down Expand Up @@ -296,8 +297,8 @@ class Carousel implements CarouselInterface {
}
}

export function initCarousels() {
document.querySelectorAll('[data-carousel]').forEach(($carouselEl) => {
export function initCarouselsFrom(subtree: Document | Element) {
inclusiveQuerySelectorAll(subtree, '[data-carousel]').forEach(($carouselEl) => {
const interval = $carouselEl.getAttribute('data-carousel-interval');
const slide =
$carouselEl.getAttribute('data-carousel') === 'slide'
Expand Down Expand Up @@ -372,6 +373,10 @@ export function initCarousels() {
});
}

export function initCarousels() {
initCarouselsFrom(document);
}

if (typeof window !== 'undefined') {
window.Carousel = Carousel;
window.initCarousels = initCarousels;
Expand Down
10 changes: 7 additions & 3 deletions src/components/clipboard/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { CopyClipboardOptions } from './types';
import type { InstanceOptions } from '../../dom/types';
import { CopyClipboardInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: CopyClipboardOptions = {
htmlEntities: false,
Expand Down Expand Up @@ -140,9 +141,8 @@ class CopyClipboard implements CopyClipboardInterface {
}
}

export function initCopyClipboards() {
document
.querySelectorAll('[data-copy-to-clipboard-target]')
export function initCopyClipboardsFrom(subtree: Document | Element) {
inclusiveQuerySelectorAll(subtree, '[data-copy-to-clipboard-target]')
.forEach(($triggerEl) => {
const targetId = $triggerEl.getAttribute(
'data-copy-to-clipboard-target'
Expand Down Expand Up @@ -185,6 +185,10 @@ export function initCopyClipboards() {
});
}

export function initCopyClipboards() {
initCopyClipboardsFrom(document);
}

if (typeof window !== 'undefined') {
window.CopyClipboard = CopyClipboard;
window.initClipboards = initCopyClipboards;
Expand Down
10 changes: 7 additions & 3 deletions src/components/collapse/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { CollapseOptions } from './types';
import type { InstanceOptions } from '../../dom/types';
import { CollapseInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: CollapseOptions = {
onCollapse: () => {},
Expand Down Expand Up @@ -115,9 +116,8 @@ class Collapse implements CollapseInterface {
}
}

export function initCollapses() {
document
.querySelectorAll('[data-collapse-toggle]')
export function initCollapsesFrom(subtree: Document | Element) {
inclusiveQuerySelectorAll(subtree, '[data-collapse-toggle]')
.forEach(($triggerEl) => {
const targetId = $triggerEl.getAttribute('data-collapse-toggle');
const $targetEl = document.getElementById(targetId);
Expand Down Expand Up @@ -156,6 +156,10 @@ export function initCollapses() {
});
}

export function initCollapses() {
initCollapsesFrom(document);
}

if (typeof window !== 'undefined') {
window.Collapse = Collapse;
window.initCollapses = initCollapses;
Expand Down
9 changes: 7 additions & 2 deletions src/components/dial/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { DialOptions, DialTriggerType } from './types';
import type { InstanceOptions } from '../../dom/types';
import { DialInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: DialOptions = {
triggerType: 'hover',
Expand Down Expand Up @@ -172,8 +173,8 @@ class Dial implements DialInterface {
}
}

export function initDials() {
document.querySelectorAll('[data-dial-init]').forEach(($parentEl) => {
export function initDialsFrom(subtree: Document | Element) {
inclusiveQuerySelectorAll(subtree, '[data-dial-init]').forEach(($parentEl) => {
const $triggerEl = $parentEl.querySelector('[data-dial-toggle]');

if ($triggerEl) {
Expand Down Expand Up @@ -206,6 +207,10 @@ export function initDials() {
});
}

export function initDials() {
initDialsFrom(document);
}

if (typeof window !== 'undefined') {
window.Dial = Dial;
window.initDials = initDials;
Expand Down
9 changes: 7 additions & 2 deletions src/components/dismiss/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { DismissOptions } from './types';
import type { InstanceOptions } from '../../dom/types';
import { DismissInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: DismissOptions = {
transition: 'transition-opacity',
Expand Down Expand Up @@ -88,8 +89,8 @@ class Dismiss implements DismissInterface {
}
}

export function initDismisses() {
document.querySelectorAll('[data-dismiss-target]').forEach(($triggerEl) => {
export function initDismissesFrom(subtree: Document | Element) {
inclusiveQuerySelectorAll(subtree, '[data-dismiss-target]').forEach(($triggerEl) => {
const targetId = $triggerEl.getAttribute('data-dismiss-target');
const $dismissEl = document.querySelector(targetId);

Expand All @@ -103,6 +104,10 @@ export function initDismisses() {
});
}

export function initDismisses() {
initDismissesFrom(document);
}

if (typeof window !== 'undefined') {
window.Dismiss = Dismiss;
window.initDismisses = initDismisses;
Expand Down
9 changes: 7 additions & 2 deletions src/components/drawer/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { DrawerOptions, PlacementClasses } from './types';
import type { InstanceOptions, EventListenerInstance } from '../../dom/types';
import { DrawerInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: DrawerOptions = {
placement: 'left',
Expand Down Expand Up @@ -313,8 +314,8 @@ class Drawer implements DrawerInterface {
}
}

export function initDrawers() {
document.querySelectorAll('[data-drawer-target]').forEach(($triggerEl) => {
export function initDrawersFrom(subtree: Document | Element) {
inclusiveQuerySelectorAll(subtree, '[data-drawer-target]').forEach(($triggerEl) => {
// mandatory
const drawerId = $triggerEl.getAttribute('data-drawer-target');
const $drawerEl = document.getElementById(drawerId);
Expand Down Expand Up @@ -453,6 +454,10 @@ export function initDrawers() {
});
}

export function initDrawers() {
initDrawersFrom(document);
}

if (typeof window !== 'undefined') {
window.Drawer = Drawer;
window.initDrawers = initDrawers;
Expand Down
10 changes: 7 additions & 3 deletions src/components/dropdown/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { DropdownOptions } from './types';
import type { InstanceOptions } from '../../dom/types';
import { DropdownInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: DropdownOptions = {
placement: 'bottom',
Expand Down Expand Up @@ -319,9 +320,8 @@ class Dropdown implements DropdownInterface {
}
}

export function initDropdowns() {
document
.querySelectorAll('[data-dropdown-toggle]')
export function initDropdownsFrom(subtree: Document | Element) {
inclusiveQuerySelectorAll(subtree, '[data-dropdown-toggle]')
.forEach(($triggerEl) => {
const dropdownId = $triggerEl.getAttribute('data-dropdown-toggle');
const $dropdownEl = document.getElementById(dropdownId);
Expand Down Expand Up @@ -372,6 +372,10 @@ export function initDropdowns() {
});
}

export function initDropdowns() {
initDropdownsFrom(document);
}

if (typeof window !== 'undefined') {
window.Dropdown = Dropdown;
window.initDropdowns = initDropdowns;
Expand Down
49 changes: 36 additions & 13 deletions src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,34 @@
import { initAccordions } from './accordion';
import { initCarousels } from './carousel';
import { initCopyClipboards } from './clipboard';
import { initCollapses } from './collapse';
import { initDials } from './dial';
import { initDismisses } from './dismiss';
import { initDrawers } from './drawer';
import { initDropdowns } from './dropdown';
import { initInputCounters } from './input-counter';
import { initModals } from './modal';
import { initPopovers } from './popover';
import { initTabs } from './tabs';
import { initTooltips } from './tooltip';
import { initAccordions, initAccordionsFrom } from './accordion';
import { initCarousels, initCarouselsFrom } from './carousel';
import { initCopyClipboards, initCopyClipboardsFrom } from './clipboard';
import { initCollapses, initCollapsesFrom } from './collapse';
import { initDials, initDialsFrom } from './dial';
import { initDismisses, initDismissesFrom } from './dismiss';
import { initDrawers, initDrawersFrom } from './drawer';
import { initDropdowns, initDropdownsFrom } from './dropdown';
import { initInputCounters, initInputCountersFrom } from './input-counter';
import { initModals, initModalsFrom } from './modal';
import { initPopovers, initPopoversFrom } from './popover';
import { initTabs, initTabsFrom } from './tabs';
import { initTooltips, initTooltipsFrom } from './tooltip';
import { observeFlowbite } from '../dom/observer';


export function initFlowbiteFrom(subtree: Document | Element) {
initAccordionsFrom(subtree);
initCollapsesFrom(subtree);
initCarouselsFrom(subtree);
initDismissesFrom(subtree);
initDropdownsFrom(subtree);
initModalsFrom(subtree);
initDrawersFrom(subtree);
initTabsFrom(subtree);
initTooltipsFrom(subtree);
initPopoversFrom(subtree);
initDialsFrom(subtree);
initInputCountersFrom(subtree);
initCopyClipboardsFrom(subtree);
}

export function initFlowbite() {
initAccordions();
Expand All @@ -28,6 +46,11 @@ export function initFlowbite() {
initCopyClipboards();
}

export function initAndObserveFlowbite() {
initFlowbite()
observeFlowbite()
}

if (typeof window !== 'undefined') {
window.initFlowbite = initFlowbite;
}
9 changes: 7 additions & 2 deletions src/components/input-counter/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { InputCounterOptions } from './types';
import type { InstanceOptions } from '../../dom/types';
import { InputCounterInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: InputCounterOptions = {
minValue: null,
Expand Down Expand Up @@ -172,8 +173,8 @@ class InputCounter implements InputCounterInterface {
}
}

export function initInputCounters() {
document.querySelectorAll('[data-input-counter]').forEach(($targetEl) => {
export function initInputCountersFrom(subtree: Document | Element) {
inclusiveQuerySelectorAll(subtree, '[data-input-counter]').forEach(($targetEl) => {
const targetId = $targetEl.id;

const $incrementEl = document.querySelector(
Expand Down Expand Up @@ -213,6 +214,10 @@ export function initInputCounters() {
});
}

export function initInputCounters() {
initInputCountersFrom(document);
}

if (typeof window !== 'undefined') {
window.InputCounter = InputCounter;
window.initInputCounters = initInputCounters;
Expand Down
15 changes: 10 additions & 5 deletions src/components/modal/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { ModalOptions } from './types';
import type { InstanceOptions, EventListenerInstance } from '../../dom/types';
import { ModalInterface } from './interface';
import instances from '../../dom/instances';
import { inclusiveQuerySelectorAll } from '../../dom/query';

const Default: ModalOptions = {
placement: 'center',
Expand Down Expand Up @@ -266,9 +267,9 @@ class Modal implements ModalInterface {
}
}

export function initModals() {
export function initModalsFrom(subtree: Document | Element) {
// initiate modal based on data-modal-target
document.querySelectorAll('[data-modal-target]').forEach(($triggerEl) => {
inclusiveQuerySelectorAll(subtree, '[data-modal-target]').forEach(($triggerEl) => {
const modalId = $triggerEl.getAttribute('data-modal-target');
const $modalEl = document.getElementById(modalId);

Expand All @@ -290,7 +291,7 @@ export function initModals() {
});

// toggle modal visibility
document.querySelectorAll('[data-modal-toggle]').forEach(($triggerEl) => {
inclusiveQuerySelectorAll(subtree, '[data-modal-toggle]').forEach(($triggerEl) => {
const modalId = $triggerEl.getAttribute('data-modal-toggle');
const $modalEl = document.getElementById(modalId);

Expand Down Expand Up @@ -323,7 +324,7 @@ export function initModals() {
});

// show modal on click if exists based on id
document.querySelectorAll('[data-modal-show]').forEach(($triggerEl) => {
inclusiveQuerySelectorAll(subtree, '[data-modal-show]').forEach(($triggerEl) => {
const modalId = $triggerEl.getAttribute('data-modal-show');
const $modalEl = document.getElementById(modalId);

Expand Down Expand Up @@ -356,7 +357,7 @@ export function initModals() {
});

// hide modal on click if exists based on id
document.querySelectorAll('[data-modal-hide]').forEach(($triggerEl) => {
inclusiveQuerySelectorAll(subtree, '[data-modal-hide]').forEach(($triggerEl) => {
const modalId = $triggerEl.getAttribute('data-modal-hide');
const $modalEl = document.getElementById(modalId);

Expand Down Expand Up @@ -389,6 +390,10 @@ export function initModals() {
});
}

export function initModals() {
initModalsFrom(document);
}

if (typeof window !== 'undefined') {
window.Modal = Modal;
window.initModals = initModals;
Expand Down
Loading