Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #29 from gtm-nayan/generic-action-type
- Loading branch information
Showing
18 changed files
with
314 additions
and
267 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "useTabs": true, | ||
| "printWidth": 100, | ||
| "singleQuote": true | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,34 @@ | ||
| import { Action } from './types'; | ||
|
|
||
| export interface ClickOutsideConfig { | ||
| enabled: boolean; | ||
| cb: (node: HTMLElement) => void; | ||
| } | ||
| /** | ||
| * | ||
| * Call callback when user clicks outside a given element | ||
| * | ||
| * Usage: | ||
| * | ||
| * @example | ||
| * ```svelte | ||
| * <div use:clickOutside={{ enabled: open, cb: () => open = false }}> | ||
| * | ||
| * ``` | ||
| * Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2 | ||
| * | ||
| */ | ||
| export function clickOutside(node: HTMLElement, params: {enabled: boolean, cb: Function }): ReturnType<Action> { | ||
| const { enabled: initialEnabled, cb } = params | ||
|
|
||
| const handleOutsideClick = ({ target }: MouseEvent) => { | ||
| if (!node.contains(target as Node)) cb(node); // typescript hack, not sure how to solve without asserting as Node | ||
| }; | ||
| export const clickOutside: Action<ClickOutsideConfig> = (node, config) => { | ||
| function handler(e: MouseEvent) { | ||
| if (!node.contains(e.target as Node)) config.cb(node); | ||
| } | ||
|
|
||
| function update({enabled}: {enabled: boolean}) { | ||
| if (enabled) { | ||
| window.addEventListener('click', handleOutsideClick); | ||
| } else { | ||
| window.removeEventListener('click', handleOutsideClick); | ||
| } | ||
| } | ||
| update({ enabled: initialEnabled }); | ||
| return { | ||
| update, | ||
| destroy() { | ||
| window.removeEventListener( 'click', handleOutsideClick ); | ||
| } | ||
| }; | ||
| function set_handler(enabled: boolean) { | ||
| (enabled ? window.addEventListener : window.removeEventListener)('click', handler); | ||
| } | ||
| set_handler(config.enabled); | ||
|
|
||
| } | ||
| return { | ||
| update(params) { | ||
| set_handler((config = params).enabled); | ||
| }, | ||
| destroy() { | ||
| set_handler(false); | ||
| }, | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,35 @@ | ||
| import { Action } from './types'; | ||
| const node_attributes_map = new WeakMap<HTMLElement, object>(); | ||
|
|
||
| const intersection_handler: IntersectionObserverCallback = (entries) => { | ||
| entries.forEach((entry) => { | ||
| if (entry.isIntersecting && entry.target instanceof HTMLElement) { | ||
| const node = entry.target; | ||
| Object.assign(node, node_attributes_map.get(node)); | ||
| lazy_load_observer.unobserve(node); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| let lazy_load_observer: IntersectionObserver; | ||
| function observer() { | ||
| return (lazy_load_observer ??= new IntersectionObserver(intersection_handler)); | ||
| } | ||
| /** | ||
| * Attach onto any image to lazy load it | ||
| * | ||
| * Set attributes on an element when it is visible in the viewport. | ||
| *@example | ||
| *```svelte | ||
| * <img use:lazyLoad={{src:"/myimage"}} alt=""> | ||
| * | ||
| *``` | ||
| * Demo: https://svelte.dev/repl/f12988de576b4bf9b541a2a59eb838f6?version=3.23.2 | ||
| * | ||
| * | ||
| */ | ||
| const lazyLoadHandleIntersection: IntersectionObserverCallback = (entries) => { | ||
| entries.forEach( | ||
| entry => { | ||
| if (!entry.isIntersecting) { | ||
| return | ||
| } | ||
|
|
||
| if (!(entry.target instanceof HTMLElement)) { | ||
| return; | ||
| } | ||
|
|
||
| let node = entry.target; | ||
| let attributes = lazyLoadNodeAttributes.find(item => item.node === node)?.attributes | ||
| Object.assign(node, attributes) | ||
|
|
||
| lazyLoadObserver.unobserve(node) | ||
| } | ||
| ) | ||
| } | ||
|
|
||
| let lazyLoadObserver: IntersectionObserver; | ||
| let lazyLoadNodeAttributes: Array<{node: HTMLElement, attributes: Object}> = [] | ||
| export function lazyload(node: HTMLElement, attributes: Object): ReturnType<Action> { | ||
| if (!lazyLoadObserver) { | ||
| lazyLoadObserver = new IntersectionObserver(lazyLoadHandleIntersection); | ||
| } | ||
| lazyLoadNodeAttributes.push({node, attributes}) | ||
|
|
||
| lazyLoadObserver.observe(node); | ||
| export const lazyload: Action<object> = (node, attributes) => { | ||
| node_attributes_map.set(node, attributes); | ||
| observer().observe(node); | ||
| return { | ||
| destroy() { | ||
| lazyLoadObserver.unobserve(node); | ||
| } | ||
| observer().unobserve(node); | ||
| }, | ||
| }; | ||
| } | ||
| }; |
Oops, something went wrong.