@htmlplus/element 0.6.7 → 0.6.8

package/client/utils/event.d.ts

@@ -0,0 +1,8 @@
+type EventTarget = Window | Document | Element;
+type EventType = 'outside' | (string & {});
+type EventHandler = EventListenerOrEventListenerObject;
+type EventOptions = boolean | AddEventListenerOptions;
+type EventListener = (target: EventTarget, type: EventType, handler: EventHandler, options?: EventOptions) => void;
+export declare const off: EventListener;
+export declare const on: EventListener;
+export {};

package/client/utils/event.js

@@ -0,0 +1,27 @@
+const outsides = [];
+export const off = (target, type, handler, options) => {
+    if (type != 'outside')
+        return target.removeEventListener(type, handler, options);
+    const index = outsides.findIndex((outside) => outside.target == target && outside.handler == handler && outside.options == options);
+    const outside = outsides[index];
+    if (!outside)
+        return;
+    off(document, outside.type, outside.callback, outside.options);
+    outsides.splice(index, 1);
+};
+export const on = (target, type, handler, options) => {
+    if (type != 'outside')
+        return target.addEventListener(type, handler, options);
+    const callback = (event) => {
+        !event.composedPath().some((item) => item == target) && handler(event);
+    };
+    type = 'ontouchstart' in window.document.documentElement ? 'touchstart' : 'click';
+    on(document, type, callback, options);
+    outsides.push({
+        target,
+        type,
+        handler,
+        options,
+        callback
+    });
+};

package/client/utils/index.d.ts

@@ -3,6 +3,7 @@ export * from './appendToMethod.js';
 export * from './call.js';
 export * from './config.js';
 export * from './defineProperty.js';
+export * from './event.js';
 export * from './fromAttribute.js';
 export * from './getFramework.js';
 export * from './getMembers.js';
@@ -11,8 +12,6 @@ export * from './getTag.js';
 export * from './host.js';
 export * from './isEvent.js';
 export * from './isServer.js';
-export * from './off.js';
-export * from './on.js';
 export * from './request.js';
 export * from './shadowRoot.js';
 export * from './syncAttributes.js';

package/client/utils/index.js

@@ -3,6 +3,7 @@ export * from './appendToMethod.js';
 export * from './call.js';
 export * from './config.js';
 export * from './defineProperty.js';
+export * from './event.js';
 export * from './fromAttribute.js';
 export * from './getFramework.js';
 export * from './getMembers.js';
@@ -11,8 +12,6 @@ export * from './getTag.js';
 export * from './host.js';
 export * from './isEvent.js';
 export * from './isServer.js';
-export * from './off.js';
-export * from './on.js';
 export * from './request.js';
 export * from './shadowRoot.js';
 export * from './syncAttributes.js';

package/client/utils/syncAttributes.js

@@ -1,6 +1,5 @@
+import { off, on } from './event.js';
 import { isEvent } from './isEvent.js';
-import { off } from './off.js';
-import { on } from './on.js';
 import { toEvent } from './toEvent.js';
 import { updateAttribute } from './updateAttribute.js';
 export const syncAttributes = (node) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",

package/client/utils/off.d.ts

@@ -1 +0,0 @@
-export declare const off: (target: Window | Document | Element, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void;

package/client/utils/off.js

@@ -1,3 +0,0 @@
-export const off = (target, type, handler, options) => {
-    target.removeEventListener(type, handler, options);
-};

package/client/utils/on.d.ts

@@ -1 +0,0 @@
-export declare const on: (target: Window | Document | Element, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;

package/client/utils/on.js

@@ -1,3 +0,0 @@
-export const on = (target, type, handler, options) => {
-    target.addEventListener(type, handler, options);
-};