aprog 1.3.7 → 1.3.9

package/README.md

@@ -147,8 +147,8 @@ onInput: (event) => {
 - *redirect(url, { newTab: bool, replace: bool }), reload(delaySeconds)*
 - *encrypt(str), decrypt(encryptedStr)*
 
-- *div, span, button, a, img, meta, label, input, select, option, options, form, hr, textarea, table, caption, thead, tbody, tr, th, td, pre* 
-- *_get, GUID, apState, cookie, date, pause, apFetch, chars, elementToObject, copyText, scrollToTop, scrollToBottom, firstKey, checkArrays, ucfirst, deepEqual, nodeListToObject*
+- *div, span, button, a, img, meta, label, input, select, option, options, form, hr, textarea, table, caption, thead, tbody, tr, th, td, pre, attachCustomTitle* 
+- *_get, GUID, apState, date, pause, apFetch, chars, elementToObject, copyText, scrollToTop, scrollToBottom, firstKey, checkArrays, ucfirst, deepEqual, nodeListToObject*
 - *isEmpty, isNull, isFloat, isNumeric, isObject, isArray, isNumber, isString, isPromise, isNull, isFloat, isNumeric, isObject*
 
 - *router({ routes, main, "Page Not Found" })*
@@ -157,6 +157,8 @@ onInput: (event) => {
 
 - *mathInput(event.target)*
 
+- *cookie, storage*
+
 ### Info
 
 - Додано безплатний чат із Gemini

package/index.js

@@ -1,6 +1,6 @@
 export {
     div, span, button, a, img, meta, label, input, select, option, options, form, hr, textarea,
-    table, caption, thead, tbody, tr, th, td, pre, _get, GUID, isEmpty, apState, cookie, date, pause, apFetch,
+    table, caption, thead, tbody, tr, th, td, pre, attachCustomTitle, _get, GUID, isEmpty, apState, date, pause, apFetch,
     chars, isNull, isFloat, isNumeric, isObject, elementToObject, copyText, scrollToTop, scrollToBottom,
     firstKey, isArray, checkArrays, isNumber, isString, isPromise, ucfirst, deepEqual, nodeListToObject
 } from './src/aprog.js';
@@ -9,4 +9,5 @@ export { redirect, reload } from './src/redirect.js';
 export { router, navigateTo } from './src/router.js';
 export { encrypt, decrypt } from './src/shifrator.js';
 export { gemini } from './src/OpenAI.js';
-export { mathInput } from './src/math.js';
+export { mathInput } from './src/math.js';
+export { cookie, storage } from './src/storage.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aprog",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "Допоміжна бібліотека js",
   "main": "index.js",
   "scripts": {

package/src/aprog.js

@@ -241,7 +241,7 @@ export const input = (attributes = {}) => {
     let input = document.createElement("input");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 input.addEventListener(eventType, attrValue);
             } else {
@@ -290,7 +290,7 @@ export const label = (attributes = {}) => {
     label.setAttribute("for", "...");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 label.addEventListener(eventType, attrValue);
             } else {
@@ -341,7 +341,7 @@ export const form = (attributes = {}) => {
     let form = document.createElement("form");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 form.addEventListener(eventType, attrValue);
             } else {
@@ -401,7 +401,7 @@ export const div = (attributes = {}) => {
     let div = document.createElement("div");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 div.addEventListener(eventType, attrValue);
             } else {
@@ -452,7 +452,7 @@ export const a = (attributes = {}) => {
     let a = document.createElement("a");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 a.addEventListener(eventType, attrValue);
             } else {
@@ -503,7 +503,7 @@ export const span = (attributes = {}) => {
     let span = document.createElement("span");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 span.addEventListener(eventType, attrValue);
             } else {
@@ -554,7 +554,7 @@ export const textarea = (attributes = {}) => {
     let textarea = document.createElement("textarea");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 textarea.addEventListener(eventType, attrValue);
             } else {
@@ -605,7 +605,7 @@ export const pre = (attributes = {}) => {
     let pre = document.createElement("pre");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 pre.addEventListener(eventType, attrValue);
             } else {
@@ -656,7 +656,7 @@ export const button = (attributes = {}) => {
     let button = document.createElement("button");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 button.addEventListener(eventType, attrValue);
             } else {
@@ -708,7 +708,7 @@ export const select = (attributes = {}) => {
     let option = document.createElement("option");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 select.addEventListener(eventType, attrValue);
             } else {
@@ -848,7 +848,7 @@ export const table = (attributes = {}) => {
     let table = document.createElement("table");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 table.addEventListener(eventType, attrValue);
             } else {
@@ -899,7 +899,7 @@ export const caption = (attributes = {}) => {
     let caption = document.createElement("caption");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 caption.addEventListener(eventType, attrValue);
             } else {
@@ -953,7 +953,7 @@ export const thead = (attributes = {}) => {
     let thead = document.createElement("thead");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 thead.addEventListener(eventType, attrValue);
             } else {
@@ -1004,7 +1004,7 @@ export const tbody = (attributes = {}) => {
     let tbody = document.createElement("tbody");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 tbody.addEventListener(eventType, attrValue);
             } else {
@@ -1055,7 +1055,7 @@ export const tr = (attributes = {}) => {
     let tr = document.createElement("tr");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 tr.addEventListener(eventType, attrValue);
             } else {
@@ -1106,7 +1106,7 @@ export const th = (attributes = {}) => {
     let th = document.createElement("th");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 th.addEventListener(eventType, attrValue);
             } else {
@@ -1157,7 +1157,7 @@ export const td = (attributes = {}) => {
     let td = document.createElement("td");
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 td.addEventListener(eventType, attrValue);
             } else {
@@ -1208,7 +1208,7 @@ export const img = (attributes = {}) => {
     img.alt = "img...";
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
-            if (name.startsWith('on') && typeof attrValue === 'function') {
+            if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
                 const eventType = name.slice(2).toLowerCase();
                 img.addEventListener(eventType, attrValue);
             } else {
@@ -1324,33 +1324,6 @@ export const GUID = () => {
     });
 }
 
-export const cookie = {
-    get(name) {
-        const cookies = document.cookie.split('; ');
-        for (let cookie of cookies) {
-            let [key, value] = cookie.split('=');
-            if (key === name) {
-                return decodeURIComponent(value);
-            }
-        }
-        return null;
-    },
-
-    set(name, value, days = 7) {
-        let expires = "";
-        if (days) {
-            let date = new Date();
-            date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-            expires = "; expires=" + date.toUTCString();
-        }
-        document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
-    },
-
-    delete(name) {
-        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
-    }
-};
-
 export const checkArrays = (arr1, arr2, checkAll = false) => {
     const set1 = new Set(arr1);
     if (checkAll) {
@@ -1359,3 +1332,46 @@ export const checkArrays = (arr1, arr2, checkAll = false) => {
         return arr2.some(item => set1.has(item));
     }
 }
+
+const customTitle = (text) => {
+    const title = div({
+        style: {
+            position: "absolute",
+            background: "rgba(0, 0, 0, 0.8)",
+            color: "white",
+            padding: "6px 10px",
+            borderRadius: "5px",
+            fontSize: "14px",
+            whiteSpace: "nowrap",
+            display: "none",
+            pointerEvents: "none",
+            zIndex: 1000,
+        },
+        value: text
+    });
+    document.body.appendChild(title);
+
+    return title;
+};
+
+export const attachCustomTitle = (element, text) => {
+    let tooltip = element._customTooltip;
+
+    if (!tooltip) {
+        tooltip = customTitle(text);
+        element._customTooltip = tooltip;
+    }
+
+    element.addEventListener("mouseenter", () => {
+        tooltip.style.display = "block";
+    });
+
+    element.addEventListener("mousemove", (e) => {
+        tooltip.style.left = `${e.pageX + 10}px`;
+        tooltip.style.top = `${e.pageY + 10}px`;
+    });
+
+    element.addEventListener("mouseleave", () => {
+        tooltip.style.display = "none";
+    });
+};

package/src/storage.js

@@ -0,0 +1,40 @@
+export const cookie = {
+    get(name) {
+        const cookies = document.cookie.split('; ');
+        for (let cookie of cookies) {
+            let [key, value] = cookie.split('=');
+            if (key === name) {
+                return decodeURIComponent(value);
+            }
+        }
+        return null;
+    },
+
+    set(name, value, days = 7) {
+        let expires = "";
+        if (days) {
+            let date = new Date();
+            date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+            expires = "; expires=" + date.toUTCString();
+        }
+        document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
+    },
+
+    delete(name) {
+        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+    }
+};
+
+export const storage = {
+    get(key, defaulting = null) {
+        return JSON.parse(localStorage.getItem(key)) || defaulting;
+    },
+
+    set(key, data) {
+        localStorage.setItem(key, JSON.stringify(data));
+    },
+
+    delete(key) {
+        localStorage.removeItem(key);
+    }
+};