aprog 1.3.8 → 1.4.0

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.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/aprog.js +79 -36
package/README.md CHANGED
@@ -147,7 +147,7 @@ onInput: (event) => {
147
147
  - *redirect(url, { newTab: bool, replace: bool }), reload(delaySeconds)*
148
148
  - *encrypt(str), decrypt(encryptedStr)*
149
149
 
150
- - *div, span, button, a, img, meta, label, input, select, option, options, form, hr, textarea, table, caption, thead, tbody, tr, th, td, pre*
150
+ - *div, span, button, a, img, meta, label, input, select, option, options, form, hr, textarea, table, caption, thead, tbody, tr, th, td, pre, attachCustomTitle*
151
151
  - *_get, GUID, apState, date, pause, apFetch, chars, elementToObject, copyText, scrollToTop, scrollToBottom, firstKey, checkArrays, ucfirst, deepEqual, nodeListToObject*
152
152
  - *isEmpty, isNull, isFloat, isNumeric, isObject, isArray, isNumber, isString, isPromise, isNull, isFloat, isNumeric, isObject*
153
153
 
package/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export {
2
2
  div, span, button, a, img, meta, label, input, select, option, options, form, hr, textarea,
3
- table, caption, thead, tbody, tr, th, td, pre, _get, GUID, isEmpty, apState, date, pause, apFetch,
3
+ table, caption, thead, tbody, tr, th, td, pre, attachCustomTitle, _get, GUID, isEmpty, apState, date, pause, apFetch,
4
4
  chars, isNull, isFloat, isNumeric, isObject, elementToObject, copyText, scrollToTop, scrollToBottom,
5
5
  firstKey, isArray, checkArrays, isNumber, isString, isPromise, ucfirst, deepEqual, nodeListToObject
6
6
  } from './src/aprog.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aprog",
3
- "version": "1.3.8",
3
+ "version": "1.4.0",
4
4
  "description": "Допоміжна бібліотека js",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/aprog.js CHANGED
@@ -241,8 +241,8 @@ export const input = (attributes = {}) => {
241
241
  let input = document.createElement("input");
242
242
  if (attributes) {
243
243
  Object.entries(attributes).forEach(([name, attrValue]) => {
244
- if (name.startsWith('on') && typeof attrValue === 'function') {
245
- const eventType = name.slice(2).toLowerCase();
244
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
245
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
246
246
  input.addEventListener(eventType, attrValue);
247
247
  } else {
248
248
  switch (name) {
@@ -290,8 +290,8 @@ export const label = (attributes = {}) => {
290
290
  label.setAttribute("for", "...");
291
291
  if (attributes) {
292
292
  Object.entries(attributes).forEach(([name, attrValue]) => {
293
- if (name.startsWith('on') && typeof attrValue === 'function') {
294
- const eventType = name.slice(2).toLowerCase();
293
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
294
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
295
295
  label.addEventListener(eventType, attrValue);
296
296
  } else {
297
297
  switch (name) {
@@ -341,8 +341,8 @@ export const form = (attributes = {}) => {
341
341
  let form = document.createElement("form");
342
342
  if (attributes) {
343
343
  Object.entries(attributes).forEach(([name, attrValue]) => {
344
- if (name.startsWith('on') && typeof attrValue === 'function') {
345
- const eventType = name.slice(2).toLowerCase();
344
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
345
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
346
346
  form.addEventListener(eventType, attrValue);
347
347
  } else {
348
348
  switch (name) {
@@ -401,8 +401,8 @@ export const div = (attributes = {}) => {
401
401
  let div = document.createElement("div");
402
402
  if (attributes) {
403
403
  Object.entries(attributes).forEach(([name, attrValue]) => {
404
- if (name.startsWith('on') && typeof attrValue === 'function') {
405
- const eventType = name.slice(2).toLowerCase();
404
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
405
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
406
406
  div.addEventListener(eventType, attrValue);
407
407
  } else {
408
408
  switch (name) {
@@ -452,8 +452,8 @@ export const a = (attributes = {}) => {
452
452
  let a = document.createElement("a");
453
453
  if (attributes) {
454
454
  Object.entries(attributes).forEach(([name, attrValue]) => {
455
- if (name.startsWith('on') && typeof attrValue === 'function') {
456
- const eventType = name.slice(2).toLowerCase();
455
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
456
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
457
457
  a.addEventListener(eventType, attrValue);
458
458
  } else {
459
459
  switch (name) {
@@ -503,8 +503,8 @@ export const span = (attributes = {}) => {
503
503
  let span = document.createElement("span");
504
504
  if (attributes) {
505
505
  Object.entries(attributes).forEach(([name, attrValue]) => {
506
- if (name.startsWith('on') && typeof attrValue === 'function') {
507
- const eventType = name.slice(2).toLowerCase();
506
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
507
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
508
508
  span.addEventListener(eventType, attrValue);
509
509
  } else {
510
510
  switch (name) {
@@ -554,8 +554,8 @@ export const textarea = (attributes = {}) => {
554
554
  let textarea = document.createElement("textarea");
555
555
  if (attributes) {
556
556
  Object.entries(attributes).forEach(([name, attrValue]) => {
557
- if (name.startsWith('on') && typeof attrValue === 'function') {
558
- const eventType = name.slice(2).toLowerCase();
557
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
558
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
559
559
  textarea.addEventListener(eventType, attrValue);
560
560
  } else {
561
561
  switch (name) {
@@ -605,8 +605,8 @@ export const pre = (attributes = {}) => {
605
605
  let pre = document.createElement("pre");
606
606
  if (attributes) {
607
607
  Object.entries(attributes).forEach(([name, attrValue]) => {
608
- if (name.startsWith('on') && typeof attrValue === 'function') {
609
- const eventType = name.slice(2).toLowerCase();
608
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
609
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
610
610
  pre.addEventListener(eventType, attrValue);
611
611
  } else {
612
612
  switch (name) {
@@ -656,8 +656,8 @@ export const button = (attributes = {}) => {
656
656
  let button = document.createElement("button");
657
657
  if (attributes) {
658
658
  Object.entries(attributes).forEach(([name, attrValue]) => {
659
- if (name.startsWith('on') && typeof attrValue === 'function') {
660
- const eventType = name.slice(2).toLowerCase();
659
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
660
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
661
661
  button.addEventListener(eventType, attrValue);
662
662
  } else {
663
663
  switch (name) {
@@ -708,8 +708,8 @@ export const select = (attributes = {}) => {
708
708
  let option = document.createElement("option");
709
709
  if (attributes) {
710
710
  Object.entries(attributes).forEach(([name, attrValue]) => {
711
- if (name.startsWith('on') && typeof attrValue === 'function') {
712
- const eventType = name.slice(2).toLowerCase();
711
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
712
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
713
713
  select.addEventListener(eventType, attrValue);
714
714
  } else {
715
715
  switch (name) {
@@ -848,8 +848,8 @@ export const table = (attributes = {}) => {
848
848
  let table = document.createElement("table");
849
849
  if (attributes) {
850
850
  Object.entries(attributes).forEach(([name, attrValue]) => {
851
- if (name.startsWith('on') && typeof attrValue === 'function') {
852
- const eventType = name.slice(2).toLowerCase();
851
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
852
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
853
853
  table.addEventListener(eventType, attrValue);
854
854
  } else {
855
855
  switch (name) {
@@ -899,8 +899,8 @@ export const caption = (attributes = {}) => {
899
899
  let caption = document.createElement("caption");
900
900
  if (attributes) {
901
901
  Object.entries(attributes).forEach(([name, attrValue]) => {
902
- if (name.startsWith('on') && typeof attrValue === 'function') {
903
- const eventType = name.slice(2).toLowerCase();
902
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
903
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
904
904
  caption.addEventListener(eventType, attrValue);
905
905
  } else {
906
906
  switch (name) {
@@ -953,8 +953,8 @@ export const thead = (attributes = {}) => {
953
953
  let thead = document.createElement("thead");
954
954
  if (attributes) {
955
955
  Object.entries(attributes).forEach(([name, attrValue]) => {
956
- if (name.startsWith('on') && typeof attrValue === 'function') {
957
- const eventType = name.slice(2).toLowerCase();
956
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
957
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
958
958
  thead.addEventListener(eventType, attrValue);
959
959
  } else {
960
960
  switch (name) {
@@ -1004,8 +1004,8 @@ export const tbody = (attributes = {}) => {
1004
1004
  let tbody = document.createElement("tbody");
1005
1005
  if (attributes) {
1006
1006
  Object.entries(attributes).forEach(([name, attrValue]) => {
1007
- if (name.startsWith('on') && typeof attrValue === 'function') {
1008
- const eventType = name.slice(2).toLowerCase();
1007
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
1008
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
1009
1009
  tbody.addEventListener(eventType, attrValue);
1010
1010
  } else {
1011
1011
  switch (name) {
@@ -1055,8 +1055,8 @@ export const tr = (attributes = {}) => {
1055
1055
  let tr = document.createElement("tr");
1056
1056
  if (attributes) {
1057
1057
  Object.entries(attributes).forEach(([name, attrValue]) => {
1058
- if (name.startsWith('on') && typeof attrValue === 'function') {
1059
- const eventType = name.slice(2).toLowerCase();
1058
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
1059
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
1060
1060
  tr.addEventListener(eventType, attrValue);
1061
1061
  } else {
1062
1062
  switch (name) {
@@ -1106,8 +1106,8 @@ export const th = (attributes = {}) => {
1106
1106
  let th = document.createElement("th");
1107
1107
  if (attributes) {
1108
1108
  Object.entries(attributes).forEach(([name, attrValue]) => {
1109
- if (name.startsWith('on') && typeof attrValue === 'function') {
1110
- const eventType = name.slice(2).toLowerCase();
1109
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
1110
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
1111
1111
  th.addEventListener(eventType, attrValue);
1112
1112
  } else {
1113
1113
  switch (name) {
@@ -1157,8 +1157,8 @@ export const td = (attributes = {}) => {
1157
1157
  let td = document.createElement("td");
1158
1158
  if (attributes) {
1159
1159
  Object.entries(attributes).forEach(([name, attrValue]) => {
1160
- if (name.startsWith('on') && typeof attrValue === 'function') {
1161
- const eventType = name.slice(2).toLowerCase();
1160
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
1161
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
1162
1162
  td.addEventListener(eventType, attrValue);
1163
1163
  } else {
1164
1164
  switch (name) {
@@ -1208,8 +1208,8 @@ export const img = (attributes = {}) => {
1208
1208
  img.alt = "img...";
1209
1209
  if (attributes) {
1210
1210
  Object.entries(attributes).forEach(([name, attrValue]) => {
1211
- if (name.startsWith('on') && typeof attrValue === 'function') {
1212
- const eventType = name.slice(2).toLowerCase();
1211
+ if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
1212
+ const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
1213
1213
  img.addEventListener(eventType, attrValue);
1214
1214
  } else {
1215
1215
  switch (name) {
@@ -1332,3 +1332,46 @@ export const checkArrays = (arr1, arr2, checkAll = false) => {
1332
1332
  return arr2.some(item => set1.has(item));
1333
1333
  }
1334
1334
  }
1335
+
1336
+ const customTitle = (text) => {
1337
+ const title = div({
1338
+ style: {
1339
+ position: "absolute",
1340
+ background: "rgba(0, 0, 0, 0.8)",
1341
+ color: "white",
1342
+ padding: "6px 10px",
1343
+ borderRadius: "5px",
1344
+ fontSize: "14px",
1345
+ whiteSpace: "nowrap",
1346
+ display: "none",
1347
+ pointerEvents: "none",
1348
+ zIndex: 1000,
1349
+ },
1350
+ value: text
1351
+ });
1352
+ document.body.appendChild(title);
1353
+
1354
+ return title;
1355
+ };
1356
+
1357
+ export const attachCustomTitle = (element, text) => {
1358
+ let tooltip = element._customTooltip;
1359
+
1360
+ if (!tooltip) {
1361
+ tooltip = customTitle(text);
1362
+ element._customTooltip = tooltip;
1363
+ }
1364
+
1365
+ element.addEventListener("mouseenter", () => {
1366
+ tooltip.style.display = "block";
1367
+ });
1368
+
1369
+ element.addEventListener("mousemove", (e) => {
1370
+ tooltip.style.left = `${e.pageX + 10}px`;
1371
+ tooltip.style.top = `${e.pageY + 10}px`;
1372
+ });
1373
+
1374
+ element.addEventListener("mouseleave", () => {
1375
+ tooltip.style.display = "none";
1376
+ });
1377
+ };