ziko 0.50.1 → 0.50.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ziko.cjs +772 -898
- package/dist/ziko.js +377 -207
- package/dist/ziko.min.js +2 -2
- package/dist/ziko.mjs +374 -208
- package/package.json +1 -1
- package/src/data/api/fetchdom.js +27 -11
- package/src/events/binders/custom-event.js +1 -1
- package/src/events/binders/index.js +34 -6
- package/src/events/custom-events-registry/index.js +3 -1
- package/src/events/custom-events-registry/swipe.js +41 -23
- package/src/events/custom-events-registry/view.js +50 -19
- package/src/events/events-map/index.js +13 -5
- package/src/events/utils.js +31 -0
- package/src/events/ziko-event.js +59 -117
- package/src/ui/__methods__/dom.js +0 -20
- package/src/ui/__methods__/events.js +8 -4
- package/src/ui/__methods__/index.js +3 -0
- package/src/ui/__methods__/lifecycle.js +54 -0
- package/src/ui/constructors/UIElement.js +4 -30
- package/src/ui/{constructors/UIElement-lite.js → mini/UIElement.js} +1 -1
- package/src/ui/suspense/index.js +1 -2
- package/types/data/api/index.d.ts +15 -0
- package/types/data/index.d.ts +1 -0
- package/types/data/string/checkers.d.ts +51 -0
- package/types/data/string/converters.d.ts +101 -0
- package/types/data/string/index.d.ts +2 -0
- package/types/index.d.ts +2 -1
package/dist/ziko.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/*
|
|
3
3
|
Project: ziko.js
|
|
4
4
|
Author: Zakaria Elalaoui
|
|
5
|
-
Date :
|
|
5
|
+
Date : Wed Dec 03 2025 10:48:15 GMT+0100 (UTC+01:00)
|
|
6
6
|
Git-Repo : https://github.com/zakarialaoui10/ziko.js
|
|
7
7
|
Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
|
|
8
8
|
Released under MIT License
|
|
@@ -949,16 +949,28 @@
|
|
|
949
949
|
}
|
|
950
950
|
};
|
|
951
951
|
|
|
952
|
-
async function fetchdom(url='https://github.com/zakarialaoui10'){
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
952
|
+
async function fetchdom(url='https://github.com/zakarialaoui10') {
|
|
953
|
+
try {
|
|
954
|
+
const response = await fetch(url);
|
|
955
|
+
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
|
956
|
+
const html = await response.text();
|
|
957
|
+
const dom = new DOMParser().parseFromString(html, 'text/html');
|
|
958
|
+
return dom.documentElement;
|
|
959
|
+
} catch (err) {
|
|
960
|
+
console.error('Failed to fetch DOM:', err);
|
|
961
|
+
throw err;
|
|
962
|
+
}
|
|
957
963
|
}
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
964
|
+
|
|
965
|
+
function fetchdomSync(url='https://github.com/zakarialaoui10') {
|
|
966
|
+
try {
|
|
967
|
+
const data = preload(url);
|
|
968
|
+
const dom = new DOMParser().parseFromString(data, 'text/html');
|
|
969
|
+
return dom.documentElement;
|
|
970
|
+
} catch (err) {
|
|
971
|
+
console.error('Failed to fetch DOM synchronously:', err);
|
|
972
|
+
throw err;
|
|
973
|
+
}
|
|
962
974
|
}
|
|
963
975
|
|
|
964
976
|
globalThis.fetchdom=fetchdom;
|
|
@@ -1217,6 +1229,67 @@
|
|
|
1217
1229
|
}
|
|
1218
1230
|
}
|
|
1219
1231
|
|
|
1232
|
+
// export function mount(target = this.target) {
|
|
1233
|
+
// if(this.isBody) return ;
|
|
1234
|
+
// if(target?.isUIElement)target=target.element;
|
|
1235
|
+
// this.target=target;
|
|
1236
|
+
// this.target?.appendChild(this.element);
|
|
1237
|
+
// return this;
|
|
1238
|
+
// }
|
|
1239
|
+
// export function unmount(){
|
|
1240
|
+
// if(this.cache.parent)this.cache.parent.remove(this);
|
|
1241
|
+
// else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
|
|
1242
|
+
// return this;
|
|
1243
|
+
// }
|
|
1244
|
+
|
|
1245
|
+
// export function mountAfter(target = this.target, t = 1) {
|
|
1246
|
+
// setTimeout(() => this.mount(), t);
|
|
1247
|
+
// return this;
|
|
1248
|
+
// }
|
|
1249
|
+
// export function unmountAfter(t = 1) {
|
|
1250
|
+
// setTimeout(() => this.unmount(), t);
|
|
1251
|
+
// return this;
|
|
1252
|
+
// }
|
|
1253
|
+
|
|
1254
|
+
function mount(target = this.target, delay = 0) {
|
|
1255
|
+
if (delay > 0) {
|
|
1256
|
+
setTimeout(() => this.mount(target, 0), delay);
|
|
1257
|
+
return this;
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
if (this.isBody) return this;
|
|
1261
|
+
|
|
1262
|
+
if (target?.isUIElement) target = target.element;
|
|
1263
|
+
this.target = target;
|
|
1264
|
+
|
|
1265
|
+
this.target?.appendChild(this.element);
|
|
1266
|
+
return this;
|
|
1267
|
+
}
|
|
1268
|
+
|
|
1269
|
+
function unmount(delay = 0) {
|
|
1270
|
+
if (delay > 0) {
|
|
1271
|
+
setTimeout(() => this.unmount(0), delay);
|
|
1272
|
+
return this;
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
if (this.cache.parent) {
|
|
1276
|
+
this.cache.parent.remove(this);
|
|
1277
|
+
} else if (
|
|
1278
|
+
this.target?.children?.length &&
|
|
1279
|
+
[...this.target.children].includes(this.element)
|
|
1280
|
+
) {
|
|
1281
|
+
this.target.removeChild(this.element);
|
|
1282
|
+
}
|
|
1283
|
+
|
|
1284
|
+
return this;
|
|
1285
|
+
}
|
|
1286
|
+
|
|
1287
|
+
var LifecycleMethods = /*#__PURE__*/Object.freeze({
|
|
1288
|
+
__proto__: null,
|
|
1289
|
+
mount: mount,
|
|
1290
|
+
unmount: unmount
|
|
1291
|
+
});
|
|
1292
|
+
|
|
1220
1293
|
function parseQueryParams$1(queryString) {
|
|
1221
1294
|
const params = {};
|
|
1222
1295
|
queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
|
|
@@ -1705,18 +1778,6 @@
|
|
|
1705
1778
|
this.element.innerHTML = "";
|
|
1706
1779
|
return this;
|
|
1707
1780
|
}
|
|
1708
|
-
function mount(target = this.target) {
|
|
1709
|
-
if(this.isBody)return ;
|
|
1710
|
-
if(target?.isUIElement)target=target.element;
|
|
1711
|
-
this.target=target;
|
|
1712
|
-
this.target?.appendChild(this.element);
|
|
1713
|
-
return this;
|
|
1714
|
-
}
|
|
1715
|
-
function unmount(){
|
|
1716
|
-
if(this.cache.parent)this.cache.parent.remove(this);
|
|
1717
|
-
else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
|
|
1718
|
-
return this;
|
|
1719
|
-
}
|
|
1720
1781
|
function replaceElementWith(new_element){
|
|
1721
1782
|
this.cache.element.replaceWith(new_element);
|
|
1722
1783
|
this.cache.element = new_element;
|
|
@@ -1724,14 +1785,6 @@
|
|
|
1724
1785
|
// To do : Dispose Events and States
|
|
1725
1786
|
return this
|
|
1726
1787
|
}
|
|
1727
|
-
function renderAfter(t = 1) {
|
|
1728
|
-
setTimeout(() => this.mount(), t);
|
|
1729
|
-
return this;
|
|
1730
|
-
}
|
|
1731
|
-
function unrenderAfter(t = 1) {
|
|
1732
|
-
setTimeout(() => this.unmount(), t);
|
|
1733
|
-
return this;
|
|
1734
|
-
}
|
|
1735
1788
|
function after(ui){
|
|
1736
1789
|
if(ui?.isUIElement) ui=ui.element;
|
|
1737
1790
|
this.element?.after(ui);
|
|
@@ -1750,20 +1803,12 @@
|
|
|
1750
1803
|
before: before,
|
|
1751
1804
|
clear: clear,
|
|
1752
1805
|
insertAt: insertAt,
|
|
1753
|
-
mount: mount,
|
|
1754
1806
|
prepend: prepend,
|
|
1755
1807
|
remove: remove,
|
|
1756
|
-
|
|
1757
|
-
replaceElementWith: replaceElementWith,
|
|
1758
|
-
unmount: unmount,
|
|
1759
|
-
unrenderAfter: unrenderAfter
|
|
1808
|
+
replaceElementWith: replaceElementWith
|
|
1760
1809
|
});
|
|
1761
1810
|
|
|
1762
1811
|
const EventsMap = {
|
|
1763
|
-
'Custom' : [
|
|
1764
|
-
'emit',
|
|
1765
|
-
'on'
|
|
1766
|
-
],
|
|
1767
1812
|
'Click' : [
|
|
1768
1813
|
'Click',
|
|
1769
1814
|
'DblClick',
|
|
@@ -1809,64 +1854,109 @@
|
|
|
1809
1854
|
],
|
|
1810
1855
|
'Wheel': [
|
|
1811
1856
|
'Wheel'
|
|
1812
|
-
]
|
|
1857
|
+
],
|
|
1813
1858
|
// 'Media':[
|
|
1814
1859
|
|
|
1815
1860
|
// ],
|
|
1816
1861
|
// 'Hash':[
|
|
1817
1862
|
// "HashChange"
|
|
1818
1863
|
// ]
|
|
1864
|
+
|
|
1865
|
+
'View':[
|
|
1866
|
+
'EnterView',
|
|
1867
|
+
'ExitView',
|
|
1868
|
+
'ResizeView'
|
|
1869
|
+
],
|
|
1870
|
+
'Swipe':[
|
|
1871
|
+
'SwipeLeft',
|
|
1872
|
+
'SwipeUp',
|
|
1873
|
+
'SwipeRight',
|
|
1874
|
+
'SwipeDown'
|
|
1875
|
+
]
|
|
1819
1876
|
};
|
|
1820
1877
|
|
|
1878
|
+
function event_controller(e, event_name, details_setter, customizer) {
|
|
1879
|
+
this.cache.currentEvent = event_name;
|
|
1880
|
+
this.cache.event = e;
|
|
1881
|
+
|
|
1882
|
+
details_setter?.call(this);
|
|
1883
|
+
if (customizer?.hasOwnProperty('prototype')) customizer?.call(this);
|
|
1884
|
+
else customizer?.call(null, this);
|
|
1885
|
+
|
|
1886
|
+
if (this.cache.preventDefault[event_name]) e.preventDefault();
|
|
1887
|
+
if (this.cache.stopPropagation[event_name]) e.stopPropagation();
|
|
1888
|
+
if (this.cache.stopImmediatePropagation[event_name]) e.stopImmediatePropagation();
|
|
1889
|
+
|
|
1890
|
+
// Call the single callback if it exists
|
|
1891
|
+
this.cache.callbacks[event_name]?.(this);
|
|
1892
|
+
}
|
|
1893
|
+
|
|
1894
|
+
function toggle_event_listener(method, ...events) {
|
|
1895
|
+
const keys = events.length === 0
|
|
1896
|
+
? Object.keys(this.cache.paused)
|
|
1897
|
+
: events;
|
|
1898
|
+
keys.forEach(key => {
|
|
1899
|
+
if (!this.cache.paused.hasOwnProperty(key)) return;
|
|
1900
|
+
this.targetElement?.[method](
|
|
1901
|
+
key,
|
|
1902
|
+
this.cache.__controllers__[key],
|
|
1903
|
+
this.cache.options[key]
|
|
1904
|
+
);
|
|
1905
|
+
this.cache.paused[key] = method === 'removeEventListener';
|
|
1906
|
+
});
|
|
1907
|
+
return this;
|
|
1908
|
+
}
|
|
1821
1909
|
const getEvent=(event = "")=>{
|
|
1822
1910
|
if(event.startsWith("Ptr"))return `pointer${event.split("Ptr")[1].toLowerCase()}`;
|
|
1823
1911
|
return event.toLowerCase()
|
|
1824
1912
|
};
|
|
1825
1913
|
|
|
1826
1914
|
class ZikoEvent {
|
|
1827
|
-
constructor(target = null, Events = [], details_setter, customizer){
|
|
1915
|
+
constructor(signature, target = null, Events = [], details_setter, customizer){
|
|
1828
1916
|
this.target = target;
|
|
1829
1917
|
this.cache = {
|
|
1918
|
+
signature,
|
|
1830
1919
|
currentEvent : null,
|
|
1831
1920
|
event: null,
|
|
1832
1921
|
options : {},
|
|
1833
1922
|
preventDefault : {},
|
|
1834
1923
|
stopPropagation : {},
|
|
1835
1924
|
stopImmediatePropagation : {},
|
|
1836
|
-
event_flow : {},
|
|
1837
1925
|
paused : {},
|
|
1838
|
-
stream : {
|
|
1839
|
-
enabled : {},
|
|
1840
|
-
clear : {},
|
|
1841
|
-
history : {}
|
|
1842
|
-
},
|
|
1843
1926
|
callbacks : {},
|
|
1844
1927
|
__controllers__:{}
|
|
1845
1928
|
};
|
|
1846
|
-
if(Events)this._register_events(Events, details_setter, customizer);
|
|
1847
|
-
}
|
|
1848
|
-
_register_events(Events, details_setter, customizer, REGISTER_METHODES = true){
|
|
1849
|
-
const events = Events?.map(n=>getEvent(n));
|
|
1850
|
-
events?.forEach((event,i)=>{
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1929
|
+
if (Events) this._register_events(Events, details_setter, customizer);
|
|
1930
|
+
}
|
|
1931
|
+
_register_events(Events, details_setter, customizer, REGISTER_METHODES = true) {
|
|
1932
|
+
const events = Events?.map(n => getEvent(n));
|
|
1933
|
+
events?.forEach((event, i) => {
|
|
1934
|
+
this.cache.preventDefault[event] = false;
|
|
1935
|
+
this.cache.options[event] = {};
|
|
1936
|
+
this.cache.paused[event] = false;
|
|
1937
|
+
this.cache.__controllers__[event] = (e) =>
|
|
1938
|
+
event_controller.call(this, e, event, details_setter, customizer);
|
|
1939
|
+
if (REGISTER_METHODES) {
|
|
1940
|
+
this[`on${Events[i]}`] = (callback) =>
|
|
1941
|
+
this.__onEvent(event, this.cache.options[event], {}, callback);
|
|
1942
|
+
}
|
|
1859
1943
|
});
|
|
1860
1944
|
return this;
|
|
1861
1945
|
}
|
|
1946
|
+
__onEvent(event, options, dispose, callback) {
|
|
1947
|
+
if (!callback) return this;
|
|
1948
|
+
this.cache.callbacks[event] = callback;
|
|
1949
|
+
this.__handle(event, this.cache.__controllers__[event], options, dispose);
|
|
1950
|
+
return this;
|
|
1951
|
+
}
|
|
1862
1952
|
get targetElement(){
|
|
1863
1953
|
return this.target?.element;
|
|
1864
1954
|
}
|
|
1865
1955
|
get isParent(){
|
|
1866
|
-
return this.target?.element === this.event
|
|
1956
|
+
return this.target?.element === this.event?.srcElement;
|
|
1867
1957
|
}
|
|
1868
1958
|
get item(){
|
|
1869
|
-
return this.target.find(n=>n.element == this.event?.srcElement)?.[0];
|
|
1959
|
+
return this.target.find(n => n.element == this.event?.srcElement)?.[0];
|
|
1870
1960
|
}
|
|
1871
1961
|
get currentEvent(){
|
|
1872
1962
|
return this.cache.currentEvent;
|
|
@@ -1874,114 +1964,51 @@
|
|
|
1874
1964
|
get event(){
|
|
1875
1965
|
return this.cache.event;
|
|
1876
1966
|
}
|
|
1967
|
+
get detail(){
|
|
1968
|
+
return this.cache.event.detail
|
|
1969
|
+
}
|
|
1877
1970
|
setTarget(UI){
|
|
1878
|
-
this.target=UI;
|
|
1971
|
+
this.target = UI;
|
|
1879
1972
|
return this;
|
|
1880
1973
|
}
|
|
1881
|
-
__handle(event, handler, options
|
|
1974
|
+
__handle(event, handler, options){
|
|
1882
1975
|
this.targetElement?.addEventListener(event, handler, options);
|
|
1883
1976
|
return this;
|
|
1884
1977
|
}
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
if(this.cache.
|
|
1889
|
-
|
|
1890
|
-
// this.cache.callbacks.map(n=>e=>n.call(this,e));
|
|
1891
|
-
this.cache.callbacks[event].map(n=>e=>n.call(this,e));
|
|
1892
|
-
}
|
|
1893
|
-
else {
|
|
1894
|
-
return this;
|
|
1895
|
-
}
|
|
1896
|
-
}
|
|
1897
|
-
else this.cache.callbacks[event] = callbacks.map(n=>e=>n.call(this,e));
|
|
1898
|
-
this.__handle(event, this.cache.__controllers__[event],options, dispose);
|
|
1899
|
-
return this;
|
|
1900
|
-
}
|
|
1901
|
-
#override(methode, overrides, defaultValue){
|
|
1902
|
-
if(defaultValue === "default") Object.assign(this.cache[methode], {...this.cache[methode], ...overrides});
|
|
1903
|
-
const all = defaultValue === "default"
|
|
1904
|
-
? this.cache[methode]
|
|
1905
|
-
: Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]));
|
|
1906
|
-
Object.assign(this.cache[methode], {...all,...overrides});
|
|
1907
|
-
return this
|
|
1908
|
-
}
|
|
1909
|
-
preventDefault(overrides = {}, defaultValue = "default"){
|
|
1910
|
-
this.#override("preventDefault", overrides, defaultValue);
|
|
1911
|
-
// const all=Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
|
|
1912
|
-
// Object.assign(this.cache.preventDefault, {...all,...overrides});
|
|
1978
|
+
#override(method, ...events) {
|
|
1979
|
+
const keys = events.length === 0 ? Object.keys(this.cache[method]) : events;
|
|
1980
|
+
keys.forEach(e => {
|
|
1981
|
+
if (this.cache[method].hasOwnProperty(e)) this.cache[method][e] = true;
|
|
1982
|
+
});
|
|
1913
1983
|
return this;
|
|
1914
1984
|
}
|
|
1915
|
-
|
|
1916
|
-
this.#override(
|
|
1917
|
-
return this;
|
|
1985
|
+
preventDefault(...events) {
|
|
1986
|
+
return this.#override('preventDefault', ...events);
|
|
1918
1987
|
}
|
|
1919
|
-
|
|
1920
|
-
this.#override(
|
|
1921
|
-
|
|
1988
|
+
stopPropagation(...events) {
|
|
1989
|
+
return this.#override('stopPropagation', ...events);
|
|
1990
|
+
}
|
|
1991
|
+
stopImmediatePropagation(...events) {
|
|
1992
|
+
return this.#override('stopImmediatePropagation', ...events);
|
|
1922
1993
|
}
|
|
1923
1994
|
setEventOptions(event, options){
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
this.
|
|
1995
|
+
const evt = getEvent(event);
|
|
1996
|
+
this.pause();
|
|
1997
|
+
Object.assign(this.cache.options[evt], options);
|
|
1998
|
+
this.resume();
|
|
1927
1999
|
return this;
|
|
1928
2000
|
}
|
|
1929
|
-
pause(
|
|
1930
|
-
|
|
1931
|
-
? this.cache.stream.enabled
|
|
1932
|
-
: Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
|
|
1933
|
-
overrides={...all,...overrides};
|
|
1934
|
-
for(let key in overrides){
|
|
1935
|
-
if(overrides[key]){
|
|
1936
|
-
this.targetElement?.removeEventListener(key, this.cache.__controllers__[key], this.cache.options[key]);
|
|
1937
|
-
this.cache.paused[key]=true;
|
|
1938
|
-
}
|
|
1939
|
-
}
|
|
1940
|
-
return this;
|
|
2001
|
+
pause(...events) {
|
|
2002
|
+
return toggle_event_listener.call(this, 'removeEventListener', ...events)
|
|
1941
2003
|
}
|
|
1942
|
-
resume(
|
|
1943
|
-
|
|
1944
|
-
? this.cache.stream.enabled
|
|
1945
|
-
: Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
|
|
1946
|
-
overrides={...all,...overrides};
|
|
1947
|
-
for(let key in overrides){
|
|
1948
|
-
if(overrides[key]){
|
|
1949
|
-
this.targetElement?.addEventListener(key,this.cache.__controllers__[key], this.cache.options[key]);
|
|
1950
|
-
this.cache.paused[key]=false;
|
|
1951
|
-
}
|
|
1952
|
-
}
|
|
1953
|
-
return this;
|
|
1954
|
-
}
|
|
1955
|
-
stream(overrides = {}, defaultValue = "default"){
|
|
1956
|
-
this.cache.stream.t0=Date.now();
|
|
1957
|
-
const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
|
|
1958
|
-
overrides={...all,...overrides};
|
|
1959
|
-
Object.assign(this.cache.stream.enabled,overrides);
|
|
1960
|
-
return this;
|
|
1961
|
-
}
|
|
1962
|
-
clear(){
|
|
1963
|
-
return this;
|
|
2004
|
+
resume(...events) {
|
|
2005
|
+
return toggle_event_listener.call(this, 'addEventListener', ...events);
|
|
1964
2006
|
}
|
|
1965
|
-
dispose(
|
|
1966
|
-
this.pause(
|
|
1967
|
-
|
|
2007
|
+
dispose(){
|
|
2008
|
+
this.pause();
|
|
2009
|
+
this.target.events[this.cache.signature] = null;
|
|
1968
2010
|
return this;
|
|
1969
2011
|
}
|
|
1970
|
-
}
|
|
1971
|
-
|
|
1972
|
-
function event_controller(e, event_name, details_setter, customizer, push_object){
|
|
1973
|
-
this.cache.currentEvent = event_name;
|
|
1974
|
-
this.cache.event = e;
|
|
1975
|
-
details_setter?.call(this);
|
|
1976
|
-
customizer?.hasOwnProperty("prototype") ? customizer?.call(this) : customizer?.call(null, this);
|
|
1977
|
-
// if(customizer?.hasOwnProperty("prototype")) customizer?.call(this)
|
|
1978
|
-
// else customizer?.call(null, this)
|
|
1979
|
-
if(this.cache.preventDefault[event_name]) e.preventDefault();
|
|
1980
|
-
if(this.cache.stopPropagation[event_name]) e.stopPropagation();
|
|
1981
|
-
if(this.cache.stopImmediatePropagation[event_name]) e.stopImmediatePropagation();
|
|
1982
|
-
|
|
1983
|
-
if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
|
|
1984
|
-
this.cache.callbacks[event_name]?.map(n=>n(this));
|
|
1985
2012
|
}
|
|
1986
2013
|
|
|
1987
2014
|
function key_details_setter(){
|
|
@@ -2068,9 +2095,165 @@
|
|
|
2068
2095
|
// // later, you can stop listening:
|
|
2069
2096
|
// // stop();
|
|
2070
2097
|
|
|
2098
|
+
const debounce=(fn,delay=1000)=>{
|
|
2099
|
+
let id;
|
|
2100
|
+
return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
|
|
2101
|
+
};
|
|
2102
|
+
const throttle=(fn,delay)=>{
|
|
2103
|
+
let lastTime=0;
|
|
2104
|
+
return (...args) => {
|
|
2105
|
+
const now = new Date().getTime();
|
|
2106
|
+
if(now-lastTime < delay) return;
|
|
2107
|
+
lastTime = now;
|
|
2108
|
+
fn(...args);
|
|
2109
|
+
}
|
|
2110
|
+
};
|
|
2111
|
+
|
|
2112
|
+
class ViewEvent extends CustomEvent {
|
|
2113
|
+
constructor(type, detail, { bubbles = true, cancelable = true } = {}) {
|
|
2114
|
+
super(type, { detail, bubbles, cancelable });
|
|
2115
|
+
}
|
|
2116
|
+
}
|
|
2117
|
+
|
|
2118
|
+
function register_view_event(
|
|
2119
|
+
element,
|
|
2120
|
+
{
|
|
2121
|
+
intersection = true,
|
|
2122
|
+
resize = true,
|
|
2123
|
+
threshold = 0,
|
|
2124
|
+
throttleResize = 100,
|
|
2125
|
+
throttleEnterExit = 0
|
|
2126
|
+
} = {}
|
|
2127
|
+
) {
|
|
2128
|
+
let intersectionObserver, resizeObserver;
|
|
2129
|
+
const resizeCallback = entries => {
|
|
2130
|
+
for (let entry of entries) {
|
|
2131
|
+
const { width, height } = entry.contentRect;
|
|
2132
|
+
|
|
2133
|
+
element.dispatchEvent(
|
|
2134
|
+
new ViewEvent("resizeview", {
|
|
2135
|
+
width,
|
|
2136
|
+
height,
|
|
2137
|
+
entry
|
|
2138
|
+
})
|
|
2139
|
+
);
|
|
2140
|
+
}
|
|
2141
|
+
};
|
|
2142
|
+
|
|
2143
|
+
const throttledResize = throttleResize > 0
|
|
2144
|
+
? throttle(resizeCallback, throttleResize)
|
|
2145
|
+
: resizeCallback;
|
|
2146
|
+
|
|
2147
|
+
const intersectionCallback = entries => {
|
|
2148
|
+
for (let entry of entries) {
|
|
2149
|
+
const type = entry.isIntersecting ? "enterview" : "exitview";
|
|
2150
|
+
element.dispatchEvent(new ViewEvent(type, entry));
|
|
2151
|
+
}
|
|
2152
|
+
};
|
|
2153
|
+
|
|
2154
|
+
const throttledIntersections = throttleEnterExit > 0
|
|
2155
|
+
? throttle(intersectionCallback, throttleEnterExit)
|
|
2156
|
+
: intersectionCallback;
|
|
2157
|
+
|
|
2158
|
+
if (intersection) {
|
|
2159
|
+
intersectionObserver = new IntersectionObserver(throttledIntersections, { threshold });
|
|
2160
|
+
intersectionObserver.observe(element);
|
|
2161
|
+
}
|
|
2162
|
+
|
|
2163
|
+
if (resize) {
|
|
2164
|
+
resizeObserver = new ResizeObserver(throttledResize);
|
|
2165
|
+
resizeObserver.observe(element);
|
|
2166
|
+
}
|
|
2167
|
+
|
|
2168
|
+
// ---- UNREGISTER ----
|
|
2169
|
+
return () => {
|
|
2170
|
+
if (intersectionObserver) {
|
|
2171
|
+
intersectionObserver.unobserve(element);
|
|
2172
|
+
intersectionObserver.disconnect();
|
|
2173
|
+
}
|
|
2174
|
+
if (resizeObserver) {
|
|
2175
|
+
resizeObserver.unobserve(element);
|
|
2176
|
+
resizeObserver.disconnect();
|
|
2177
|
+
}
|
|
2178
|
+
};
|
|
2179
|
+
}
|
|
2180
|
+
|
|
2181
|
+
class SwipeEvent extends CustomEvent {
|
|
2182
|
+
constructor(type, detail) {
|
|
2183
|
+
super(type, {
|
|
2184
|
+
detail,
|
|
2185
|
+
bubbles: true,
|
|
2186
|
+
cancelable: true
|
|
2187
|
+
});
|
|
2188
|
+
}
|
|
2189
|
+
}
|
|
2190
|
+
|
|
2191
|
+
function register_swipe_event(
|
|
2192
|
+
element,
|
|
2193
|
+
threshold = 50,
|
|
2194
|
+
restraint = 100,
|
|
2195
|
+
allowedTime = 500
|
|
2196
|
+
) {
|
|
2197
|
+
let startX = 0,
|
|
2198
|
+
startY = 0,
|
|
2199
|
+
startTime = 0,
|
|
2200
|
+
isPointerDown = false;
|
|
2201
|
+
|
|
2202
|
+
function onPointerDown(e) {
|
|
2203
|
+
startX = e.clientX;
|
|
2204
|
+
startY = e.clientY;
|
|
2205
|
+
startTime = performance.now();
|
|
2206
|
+
isPointerDown = true;
|
|
2207
|
+
}
|
|
2208
|
+
|
|
2209
|
+
function onPointerUp(e) {
|
|
2210
|
+
if (!isPointerDown) return;
|
|
2211
|
+
isPointerDown = false;
|
|
2212
|
+
|
|
2213
|
+
const distX = e.clientX - startX;
|
|
2214
|
+
const distY = e.clientY - startY;
|
|
2215
|
+
const elapsed = performance.now() - startTime;
|
|
2216
|
+
|
|
2217
|
+
let direction = null;
|
|
2218
|
+
let eventName = null;
|
|
2219
|
+
|
|
2220
|
+
if (elapsed <= allowedTime) {
|
|
2221
|
+
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
|
|
2222
|
+
direction = distX < 0 ? "left" : "right";
|
|
2223
|
+
eventName = "swipe" + direction;
|
|
2224
|
+
}
|
|
2225
|
+
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
|
|
2226
|
+
direction = distY < 0 ? "up" : "down";
|
|
2227
|
+
eventName = "swipe" + direction;
|
|
2228
|
+
}
|
|
2229
|
+
}
|
|
2230
|
+
|
|
2231
|
+
// Emit event
|
|
2232
|
+
if (eventName) {
|
|
2233
|
+
element.dispatchEvent(
|
|
2234
|
+
new SwipeEvent(eventName, {
|
|
2235
|
+
direction,
|
|
2236
|
+
distX,
|
|
2237
|
+
distY,
|
|
2238
|
+
originalEvent: e
|
|
2239
|
+
})
|
|
2240
|
+
);
|
|
2241
|
+
}
|
|
2242
|
+
}
|
|
2243
|
+
|
|
2244
|
+
element.addEventListener("pointerdown", onPointerDown, { passive: true });
|
|
2245
|
+
element.addEventListener("pointerup", onPointerUp, { passive: true });
|
|
2246
|
+
|
|
2247
|
+
return () => {
|
|
2248
|
+
element.removeEventListener("pointerdown", onPointerDown);
|
|
2249
|
+
element.removeEventListener("pointerup", onPointerUp);
|
|
2250
|
+
};
|
|
2251
|
+
}
|
|
2252
|
+
|
|
2071
2253
|
const bind_click_event = (target, customizer) => {
|
|
2072
2254
|
register_click_away_event(target.element);
|
|
2073
2255
|
return new ZikoEvent(
|
|
2256
|
+
'click',
|
|
2074
2257
|
target,
|
|
2075
2258
|
EventsMap.Click,
|
|
2076
2259
|
null,
|
|
@@ -2078,64 +2261,87 @@
|
|
|
2078
2261
|
);
|
|
2079
2262
|
};
|
|
2080
2263
|
const bind_clipboard_event = (target, customizer) => new ZikoEvent(
|
|
2264
|
+
'clipboard',
|
|
2081
2265
|
target,
|
|
2082
2266
|
EventsMap.Clipboard,
|
|
2083
2267
|
null,
|
|
2084
2268
|
customizer
|
|
2085
2269
|
);
|
|
2086
2270
|
const bind_drag_event = (target, customizer) => new ZikoEvent(
|
|
2271
|
+
'drag',
|
|
2087
2272
|
target,
|
|
2088
2273
|
EventsMap.Drag,
|
|
2089
2274
|
null,
|
|
2090
2275
|
customizer
|
|
2091
2276
|
);
|
|
2092
2277
|
const bind_focus_event = (target, customizer) => new ZikoEvent(
|
|
2278
|
+
'focus',
|
|
2093
2279
|
target,
|
|
2094
2280
|
EventsMap.Focus,
|
|
2095
2281
|
null,
|
|
2096
2282
|
customizer
|
|
2097
2283
|
);
|
|
2098
2284
|
const bind_key_event = (target, customizer) => new ZikoEvent(
|
|
2285
|
+
'key',
|
|
2099
2286
|
target,
|
|
2100
2287
|
EventsMap.Key,
|
|
2101
2288
|
key_details_setter,
|
|
2102
2289
|
customizer
|
|
2103
2290
|
);
|
|
2104
2291
|
const bind_mouse_event = (target, customizer) => new ZikoEvent(
|
|
2292
|
+
'mouse',
|
|
2105
2293
|
target,
|
|
2106
2294
|
EventsMap.Mouse,
|
|
2107
2295
|
null,
|
|
2108
2296
|
customizer
|
|
2109
2297
|
);
|
|
2110
2298
|
const bind_pointer_event = (target, customizer) => new ZikoEvent(
|
|
2299
|
+
'ptr',
|
|
2111
2300
|
target,
|
|
2112
2301
|
EventsMap.Ptr,
|
|
2113
2302
|
ptr_details_setter,
|
|
2114
2303
|
customizer
|
|
2115
2304
|
);
|
|
2116
2305
|
const bind_touch_event = (target, customizer) => new ZikoEvent(
|
|
2306
|
+
'touch',
|
|
2117
2307
|
target,
|
|
2118
2308
|
EventsMap.Touch,
|
|
2119
2309
|
null,
|
|
2120
2310
|
customizer
|
|
2121
2311
|
);
|
|
2122
2312
|
const bind_wheel_event = (target, customizer) => new ZikoEvent(
|
|
2313
|
+
'wheel',
|
|
2123
2314
|
target,
|
|
2124
2315
|
EventsMap.Wheel,
|
|
2125
2316
|
null,
|
|
2126
2317
|
customizer
|
|
2127
2318
|
);
|
|
2128
2319
|
|
|
2320
|
+
const bind_view_event = (target, customizer) => {
|
|
2321
|
+
register_view_event(target.element);
|
|
2322
|
+
return new ZikoEvent(
|
|
2323
|
+
'view',
|
|
2324
|
+
target,
|
|
2325
|
+
EventsMap.View,
|
|
2326
|
+
null,
|
|
2327
|
+
customizer
|
|
2328
|
+
)
|
|
2329
|
+
};
|
|
2129
2330
|
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2331
|
+
const bind_swipe_event = (target, customizer) => {
|
|
2332
|
+
register_swipe_event(target.element);
|
|
2333
|
+
return new ZikoEvent(
|
|
2334
|
+
'swipe',
|
|
2335
|
+
target,
|
|
2336
|
+
EventsMap.Swipe,
|
|
2337
|
+
null,
|
|
2338
|
+
customizer
|
|
2339
|
+
)
|
|
2340
|
+
};
|
|
2135
2341
|
|
|
2136
2342
|
class ZikoCustomEvent extends ZikoEvent{
|
|
2137
2343
|
constructor(target, events, customizer){
|
|
2138
|
-
super(target, events, details_setter, customizer);
|
|
2344
|
+
super('custom', target, events, details_setter, customizer);
|
|
2139
2345
|
}
|
|
2140
2346
|
_register_events(events){
|
|
2141
2347
|
super._register_events(events, null, null, false);
|
|
@@ -2169,7 +2375,9 @@
|
|
|
2169
2375
|
drag : bind_drag_event,
|
|
2170
2376
|
clipboard : bind_clipboard_event,
|
|
2171
2377
|
focus : bind_focus_event,
|
|
2172
|
-
wheel : bind_wheel_event
|
|
2378
|
+
wheel : bind_wheel_event,
|
|
2379
|
+
view : bind_view_event,
|
|
2380
|
+
swipe : bind_swipe_event
|
|
2173
2381
|
};
|
|
2174
2382
|
|
|
2175
2383
|
const EventsMethodes = {
|
|
@@ -2189,9 +2397,9 @@
|
|
|
2189
2397
|
const lname = name.toLowerCase();
|
|
2190
2398
|
eventList.forEach(event => {
|
|
2191
2399
|
const methodName = `on${event}`;
|
|
2192
|
-
EventsMethodes[methodName] = function (
|
|
2400
|
+
EventsMethodes[methodName] = function (callbacks) {
|
|
2193
2401
|
if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
|
|
2194
|
-
this.events[lname][methodName](
|
|
2402
|
+
this.events[lname][methodName](callbacks);
|
|
2195
2403
|
return this;
|
|
2196
2404
|
};
|
|
2197
2405
|
});
|
|
@@ -2268,6 +2476,7 @@
|
|
|
2268
2476
|
// console.log(this)
|
|
2269
2477
|
register_to_class(
|
|
2270
2478
|
this,
|
|
2479
|
+
LifecycleMethods,
|
|
2271
2480
|
AttrsMethods,
|
|
2272
2481
|
DomMethods,
|
|
2273
2482
|
StyleMethods,
|
|
@@ -2397,32 +2606,12 @@
|
|
|
2397
2606
|
// get id() {
|
|
2398
2607
|
// return this.element.getAttribute("id");
|
|
2399
2608
|
// }
|
|
2400
|
-
// onSwipe(width_threshold, height_threshold,...callbacks){
|
|
2401
|
-
// if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
|
|
2402
|
-
// this.events.swipe.onSwipe(...callbacks);
|
|
2403
|
-
// return this;
|
|
2404
|
-
// }
|
|
2405
2609
|
// To Fix
|
|
2406
2610
|
// onKeysDown({keys=[],callback}={}){
|
|
2407
2611
|
// if(!this.events.key)this.events.key = useKeyEvent(this);
|
|
2408
2612
|
// this.events.key.handleSuccessifKeys({keys,callback});
|
|
2409
2613
|
// return this;
|
|
2410
2614
|
// }
|
|
2411
|
-
// onSelect(...callbacks){
|
|
2412
|
-
// if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
|
|
2413
|
-
// this.events.clipboard.onSelect(...callbacks);
|
|
2414
|
-
// return this;
|
|
2415
|
-
// }
|
|
2416
|
-
// on(event_name,...callbacks){
|
|
2417
|
-
// if(!this.events.custom)this.events.custom = useCustomEvent(this);
|
|
2418
|
-
// this.events.custom.on(event_name,...callbacks);
|
|
2419
|
-
// return this;
|
|
2420
|
-
// }
|
|
2421
|
-
// emit(event_name,detail={}){
|
|
2422
|
-
// if(!this.events.custom)this.events.custom = useCustomEvent(this);
|
|
2423
|
-
// this.events.custom.emit(event_name,detail);
|
|
2424
|
-
// return this;
|
|
2425
|
-
// }
|
|
2426
2615
|
// watchAttr(callback){
|
|
2427
2616
|
// if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
|
|
2428
2617
|
// return this;
|
|
@@ -2431,16 +2620,8 @@
|
|
|
2431
2620
|
// if(!this.observer.children)this.observer.children = watchChildren(this,callback);
|
|
2432
2621
|
// return this;
|
|
2433
2622
|
// }
|
|
2434
|
-
// watchSize(callback)
|
|
2435
|
-
//
|
|
2436
|
-
// this.observer.resize.start();
|
|
2437
|
-
// return this;
|
|
2438
|
-
// }
|
|
2439
|
-
// watchIntersection(callback,config){
|
|
2440
|
-
// if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
|
|
2441
|
-
// this.observer.intersection.start();
|
|
2442
|
-
// return this;
|
|
2443
|
-
// }
|
|
2623
|
+
// watchSize(callback)Remplaced By on onViewResize
|
|
2624
|
+
// watchIntersection(callback,config) Remplaced By onViewEnter and onViewExit
|
|
2444
2625
|
|
|
2445
2626
|
};
|
|
2446
2627
|
|
|
@@ -2739,7 +2920,6 @@
|
|
|
2739
2920
|
const ui = await callback();
|
|
2740
2921
|
fallback_ui.unmount();
|
|
2741
2922
|
this.append(ui);
|
|
2742
|
-
// console.log(content)
|
|
2743
2923
|
}
|
|
2744
2924
|
catch(error){
|
|
2745
2925
|
console.log({error});
|
|
@@ -4370,20 +4550,6 @@
|
|
|
4370
4550
|
|
|
4371
4551
|
const step_fps = (step_or_fps) => 1000 / step_or_fps;
|
|
4372
4552
|
|
|
4373
|
-
const debounce=(fn,delay=1000)=>{
|
|
4374
|
-
let id;
|
|
4375
|
-
return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
|
|
4376
|
-
};
|
|
4377
|
-
const throttle=(fn,delay)=>{
|
|
4378
|
-
let lastTime=0;
|
|
4379
|
-
return (...args) => {
|
|
4380
|
-
const now = new Date().getTime();
|
|
4381
|
-
if(now-lastTime < delay) return;
|
|
4382
|
-
lastTime = now;
|
|
4383
|
-
fn(...args);
|
|
4384
|
-
}
|
|
4385
|
-
};
|
|
4386
|
-
|
|
4387
4553
|
const sleep= ms => new Promise(res => setTimeout(res, ms));
|
|
4388
4554
|
function timeout(ms, fn) {
|
|
4389
4555
|
let id;
|
|
@@ -5221,7 +5387,9 @@
|
|
|
5221
5387
|
exports.bind_key_event = bind_key_event;
|
|
5222
5388
|
exports.bind_mouse_event = bind_mouse_event;
|
|
5223
5389
|
exports.bind_pointer_event = bind_pointer_event;
|
|
5390
|
+
exports.bind_swipe_event = bind_swipe_event;
|
|
5224
5391
|
exports.bind_touch_event = bind_touch_event;
|
|
5392
|
+
exports.bind_view_event = bind_view_event;
|
|
5225
5393
|
exports.bind_wheel_event = bind_wheel_event;
|
|
5226
5394
|
exports.cartesianProduct = cartesianProduct;
|
|
5227
5395
|
exports.ceil = ceil;
|
|
@@ -5247,6 +5415,7 @@
|
|
|
5247
5415
|
exports.div = div;
|
|
5248
5416
|
exports.e = e;
|
|
5249
5417
|
exports.elastic = elastic;
|
|
5418
|
+
exports.event_controller = event_controller;
|
|
5250
5419
|
exports.fact = fact;
|
|
5251
5420
|
exports.floor = floor;
|
|
5252
5421
|
exports.geomspace = geomspace;
|
|
@@ -5348,6 +5517,7 @@
|
|
|
5348
5517
|
exports.timeTaken = timeTaken;
|
|
5349
5518
|
exports.time_memory_Taken = time_memory_Taken;
|
|
5350
5519
|
exports.timeout = timeout;
|
|
5520
|
+
exports.toggle_event_listener = toggle_event_listener;
|
|
5351
5521
|
exports.useDerived = useDerived;
|
|
5352
5522
|
exports.useEventEmitter = useEventEmitter;
|
|
5353
5523
|
exports.useIPC = useIPC;
|