Skip to content
This repository has been archived by the owner on Oct 2, 2024. It is now read-only.

Commit

Permalink
portal
Browse files Browse the repository at this point in the history 
Signed-off-by: Christoph Schmatzler <christoph@medium.place>
  • Loading branch information
@cschmatzler
cschmatzler committed Jul 3, 2024
1 parent 9a7288c commit 98ad01f
Show file tree
Hide file tree
Showing 6 changed files with 234 additions and 5 deletions.
23 changes: 21 additions & 2 deletions hooks/dist/index.d.mts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,25 @@ interface TooltipHook extends ViewHook {
tooltip: Tooltip;
context(): tooltip.Context;
}
declare const _default$8: TooltipHook;
declare const _default$9: TooltipHook;

declare class Portal {
el: HTMLElement;
parent: HTMLElement | null;
target: string | null;
screen: number;
mediaQuery: MediaQueryList | null;
constructor(el: HTMLElement, target: string, { screen }: {
screen?: number;
});
update(): void;
onResize(e: MediaQueryList | MediaQueryListEvent): void;
destroy(): void;
}
interface PortalHook extends ViewHook {
portal: Portal;
}
declare const _default$8: PortalHook;

declare class Popover extends Component<popover.Context, popover.Api> {
initService(context: popover.Context): Machine<any, any, any>;
Expand Down Expand Up @@ -180,7 +198,8 @@ declare const Hooks: {
Menu: MenuHook;
PinInput: PinInputHook;
Popover: PopoverHook;
Portal: PortalHook;
Tooltip: TooltipHook;
};

export { _default as Accordion, _default$1 as Clipboard, _default$2 as Collapsible, _default$3 as Combobox, _default$4 as Dialog, Hooks, _default$5 as Menu, _default$6 as PinInput, _default$7 as Popover, _default$8 as Tooltip };
export { _default as Accordion, _default$1 as Clipboard, _default$2 as Collapsible, _default$3 as Combobox, _default$4 as Dialog, Hooks, _default$5 as Menu, _default$6 as PinInput, _default$7 as Popover, _default$8 as Portal, _default$9 as Tooltip };
23 changes: 21 additions & 2 deletions hooks/dist/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,25 @@ interface TooltipHook extends ViewHook {
tooltip: Tooltip;
context(): tooltip.Context;
}
declare const _default$8: TooltipHook;
declare const _default$9: TooltipHook;

declare class Portal {
el: HTMLElement;
parent: HTMLElement | null;
target: string | null;
screen: number;
mediaQuery: MediaQueryList | null;
constructor(el: HTMLElement, target: string, { screen }: {
screen?: number;
});
update(): void;
onResize(e: MediaQueryList | MediaQueryListEvent): void;
destroy(): void;
}
interface PortalHook extends ViewHook {
portal: Portal;
}
declare const _default$8: PortalHook;

declare class Popover extends Component<popover.Context, popover.Api> {
initService(context: popover.Context): Machine<any, any, any>;
Expand Down Expand Up @@ -180,7 +198,8 @@ declare const Hooks: {
Menu: MenuHook;
PinInput: PinInputHook;
Popover: PopoverHook;
Portal: PortalHook;
Tooltip: TooltipHook;
};

export { _default as Accordion, _default$1 as Clipboard, _default$2 as Collapsible, _default$3 as Combobox, _default$4 as Dialog, Hooks, _default$5 as Menu, _default$6 as PinInput, _default$7 as Popover, _default$8 as Tooltip };
export { _default as Accordion, _default$1 as Clipboard, _default$2 as Collapsible, _default$3 as Combobox, _default$4 as Dialog, Hooks, _default$5 as Menu, _default$6 as PinInput, _default$7 as Popover, _default$8 as Portal, _default$9 as Tooltip };
62 changes: 62 additions & 0 deletions hooks/dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ __export(hooks_exports, {
Menu: () => menu_default,
PinInput: () => pin_input_default,
Popover: () => popover_default,
Portal: () => portal_default,
Tooltip: () => tooltip_default
});
module.exports = __toCommonJS(hooks_exports);
Expand Down Expand Up @@ -678,6 +679,65 @@ var popover_default = {
}
};

// hooks/portal.ts
var Portal = class {
constructor(el, target, { screen }) {
__publicField(this, "el");
__publicField(this, "parent");
__publicField(this, "target");
__publicField(this, "screen", 0);
__publicField(this, "mediaQuery", null);
this.el = el;
this.parent = el.parentElement;
this.target = target;
if (screen) this.screen = screen;
}
update() {
if (this.mediaQuery) {
this.mediaQuery.removeEventListener("change", this.onResize);
this.mediaQuery = null;
}
if (this.screen === 0) return;
this.mediaQuery = window.matchMedia(`(${this.screen > 0 ? "min" : "max"}-width: ${Math.abs(this.screen)}px)`);
this.mediaQuery?.addEventListener("change", this.onResize);
}
onResize(e) {
console.log("resizing");
if (this.target && e.matches) {
document.querySelector(this.target)?.appendChild(this.el);
} else {
this.parent?.appendChild(this.el);
}
}
destroy() {
if (this.mediaQuery) {
this.mediaQuery.removeEventListener("change", this.onResize);
this.mediaQuery = null;
}
}
};
var portal_default = {
mounted() {
const parentWithHook = this.el.parentElement?.closest("[phx-hook]");
console.log(parentWithHook);
window.requestAnimationFrame(() => {
if (!this.el.dataset.target) return;
this.portal = new Portal(this.el, this.el.dataset.target, { screen: 400 });
this.portal.update();
if (this.portal.mediaQuery) this.portal.onResize(this.portal.mediaQuery);
});
},
updated() {
window.requestAnimationFrame(() => {
this.portal.update();
if (this.portal.mediaQuery) this.portal.onResize(this.portal.mediaQuery);
});
},
beforeDestroy() {
this.portal.destroy();
}
};

// hooks/tooltip.ts
var tooltip = __toESM(require("@zag-js/tooltip"));
var Tooltip = class extends Component {
Expand Down Expand Up @@ -748,6 +808,7 @@ var Hooks = {
Menu: menu_default,
PinInput: pin_input_default,
Popover: popover_default,
Portal: portal_default,
Tooltip: tooltip_default
};
// Annotate the CommonJS export names for ESM import in node:
Expand All @@ -761,5 +822,6 @@ var Hooks = {
Menu,
PinInput,
Popover,
Portal,
Tooltip
});
61 changes: 61 additions & 0 deletions hooks/dist/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -635,6 +635,65 @@ var popover_default = {
}
};

// hooks/portal.ts
var Portal = class {
constructor(el, target, { screen }) {
__publicField(this, "el");
__publicField(this, "parent");
__publicField(this, "target");
__publicField(this, "screen", 0);
__publicField(this, "mediaQuery", null);
this.el = el;
this.parent = el.parentElement;
this.target = target;
if (screen) this.screen = screen;
}
update() {
if (this.mediaQuery) {
this.mediaQuery.removeEventListener("change", this.onResize);
this.mediaQuery = null;
}
if (this.screen === 0) return;
this.mediaQuery = window.matchMedia(`(${this.screen > 0 ? "min" : "max"}-width: ${Math.abs(this.screen)}px)`);
this.mediaQuery?.addEventListener("change", this.onResize);
}
onResize(e) {
console.log("resizing");
if (this.target && e.matches) {
document.querySelector(this.target)?.appendChild(this.el);
} else {
this.parent?.appendChild(this.el);
}
}
destroy() {
if (this.mediaQuery) {
this.mediaQuery.removeEventListener("change", this.onResize);
this.mediaQuery = null;
}
}
};
var portal_default = {
mounted() {
const parentWithHook = this.el.parentElement?.closest("[phx-hook]");
console.log(parentWithHook);
window.requestAnimationFrame(() => {
if (!this.el.dataset.target) return;
this.portal = new Portal(this.el, this.el.dataset.target, { screen: 400 });
this.portal.update();
if (this.portal.mediaQuery) this.portal.onResize(this.portal.mediaQuery);
});
},
updated() {
window.requestAnimationFrame(() => {
this.portal.update();
if (this.portal.mediaQuery) this.portal.onResize(this.portal.mediaQuery);
});
},
beforeDestroy() {
this.portal.destroy();
}
};

// hooks/tooltip.ts
import * as tooltip from "@zag-js/tooltip";
var Tooltip = class extends Component {
Expand Down Expand Up @@ -705,6 +764,7 @@ var Hooks = {
Menu: menu_default,
PinInput: pin_input_default,
Popover: popover_default,
Portal: portal_default,
Tooltip: tooltip_default
};
export {
Expand All @@ -717,5 +777,6 @@ export {
menu_default as Menu,
pin_input_default as PinInput,
popover_default as Popover,
portal_default as Portal,
tooltip_default as Tooltip
};
4 changes: 3 additions & 1 deletion hooks/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Dialog from "./dialog";
import Menu from "./menu";
import PinInput from "./pin-input";
import Popover from "./popover";
import Portal from "./portal";
import Tooltip from "./tooltip";

const Hooks = {
Expand All @@ -17,7 +18,8 @@ const Hooks = {
Menu,
PinInput,
Popover,
Portal,
Tooltip,
};

export { Accordion, Clipboard, Collapsible, Combobox, Dialog, Menu, PinInput, Popover, Tooltip, Hooks };
export { Accordion, Clipboard, Collapsible, Combobox, Dialog, Menu, PinInput, Popover, Portal, Tooltip, Hooks };
66 changes: 66 additions & 0 deletions hooks/portal.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import type { ViewHook } from "phoenix_live_view";

class Portal {
el: HTMLElement;
parent: HTMLElement | null;
target: string | null;
screen = 0;
mediaQuery: MediaQueryList | null = null;

constructor(el: HTMLElement, target: string, { screen }: { screen?: number }) {
this.el = el;
this.parent = el.parentElement;
this.target = target;
if (screen) this.screen = screen;
}

update() {
if (this.mediaQuery) {
this.mediaQuery.removeEventListener("change", this.onResize);
this.mediaQuery = null;
}

if (this.screen === 0) return;

this.mediaQuery = window.matchMedia(`(${this.screen > 0 ? "min" : "max"}-width: ${Math.abs(this.screen)}px)`);
this.mediaQuery?.addEventListener("change", this.onResize);
}

onResize(e: MediaQueryList | MediaQueryListEvent) {
console.log("resizing");
if (this.target && e.matches) {
document.querySelector(this.target)?.appendChild(this.el);
} else {
this.parent?.appendChild(this.el);
}
}

destroy() {
if (this.mediaQuery) {
this.mediaQuery.removeEventListener("change", this.onResize);
this.mediaQuery = null;
}
}
}

export interface PortalHook extends ViewHook {
portal: Portal;
}

export default {
mounted() {
if (!this.el.dataset.target) return;
this.portal = new Portal(this.el, this.el.dataset.target, { screen: 400 });
this.portal.update();
if (this.portal.mediaQuery) this.portal.onResize(this.portal.mediaQuery);
},

updated() {
this.portal.update();
if (this.portal.mediaQuery) this.portal.onResize(this.portal.mediaQuery);
},

beforeDestroy() {
this.portal.destroy();
},
} as PortalHook;

0 comments on commit 98ad01f

Please sign in to comment.