aprog 1.3.9 → 1.4.1

package/index.js

@@ -11,3 +11,4 @@ export { encrypt, decrypt } from './src/shifrator.js';
 export { gemini } from './src/OpenAI.js';
 export { mathInput } from './src/math.js';
 export { cookie, storage } from './src/storage.js';
+export Paginate, { parseData } from './src/Paginate.js';

package/package.json

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

package/src/Paginate.js

@@ -0,0 +1,88 @@
+import {storage} from "./storage.js";
+import {button} from "./aprog.js";
+
+const Paginate = ({count = 0, currentPage = 1, onPageChange = () => {}}) => {
+    const generatePageButtons = () => {
+        const buttons = [];
+        if (count <= 5) {
+            for (let i = 1; i <= count; i++) {
+                buttons.push(createPageButton(i));
+            }
+        } else {
+            buttons.push(createPageButton(1));
+            if (currentPage > 3) {
+                buttons.push(createDotsButton());
+            }
+            for (
+                let i = Math.max(2, currentPage - 1);
+                i <= Math.min(count - 1, currentPage + 1);
+                i++
+            ) {
+                buttons.push(createPageButton(i));
+            }
+            if (currentPage < count - 2) {
+                buttons.push(createDotsButton());
+            }
+            buttons.push(createPageButton(count));
+        }
+        return buttons;
+    }
+
+    const createPageButton = (page) => button({
+        class: `paginate-btn ${page === currentPage ? "active" : ""}`,
+        value: `${page}`,
+        onClick: () => onPageChange(page),
+    });
+
+    const createDotsButton = () => button({
+        class: "paginate-dots",
+        disabled: true,
+        value: "...",
+    });
+
+    // const navigateTo = (path) => {
+    //     window.history.pushState("", "", path);
+    // }
+    //
+    // navigateTo(`${window.location.pathname}?page=${currentPage || 1}${!isEmpty(_get("filter", null))
+    //         ? `&filter=${_get("filter")}`
+    //         : ""
+    //     }${!isEmpty(_get("sort", null))
+    //         ? `&sort=${_get('sort')}`
+    //         : ""
+    //     }`
+    // );
+
+    return div({
+        class: "paginate-block",
+        value: [
+            button({
+                class: "paginate-prev",
+                value: "<<<",
+                onClick: () => onPageChange(currentPage > 1 ? currentPage - 1 : 1),
+                disabled: currentPage === 1 || currentPage === 0,
+            }),
+            ...generatePageButtons(),
+            button({
+                class: "paginate-next",
+                value: ">>>",
+                onClick: () => onPageChange(currentPage < count ? currentPage + 1 : count),
+                disabled: currentPage === count,
+            }),
+        ],
+    });
+};
+
+export const parseData = (data, page) => {
+    const pageSize = storage.get("pageSize");
+    const totalData = data.length;
+    const pages = Math.ceil(totalData / pageSize);
+    if (page > pages) {
+        page = pages;
+    }
+    const cutData = data.slice((page - 1) * pageSize, page * pageSize);
+
+    return [pages, cutData, page];
+};
+
+export default Paginate;

package/src/aprog.js

@@ -242,7 +242,7 @@ export const input = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 input.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -291,7 +291,7 @@ export const label = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 label.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -342,7 +342,7 @@ export const form = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 form.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -402,7 +402,7 @@ export const div = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 div.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -453,7 +453,7 @@ export const a = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 a.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -504,7 +504,7 @@ export const span = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 span.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -555,7 +555,7 @@ export const textarea = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 textarea.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -606,7 +606,7 @@ export const pre = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 pre.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -657,7 +657,7 @@ export const button = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 button.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -709,7 +709,7 @@ export const select = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 select.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -849,7 +849,7 @@ export const table = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 table.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -900,7 +900,7 @@ export const caption = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 caption.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -954,7 +954,7 @@ export const thead = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 thead.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -1005,7 +1005,7 @@ export const tbody = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 tbody.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -1056,7 +1056,7 @@ export const tr = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 tr.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -1107,7 +1107,7 @@ export const th = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 th.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -1158,7 +1158,7 @@ export const td = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 td.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {
@@ -1209,7 +1209,7 @@ export const img = (attributes = {}) => {
     if (attributes) {
         Object.entries(attributes).forEach(([name, attrValue]) => {
             if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
-                const eventType = name.slice(2).toLowerCase();
+                const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
                 img.addEventListener(eventType, attrValue);
             } else {
                 switch (name) {