@cntwg/html-helper 0.0.25 → 0.0.26
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/CHANGELOG.md +10 -0
- package/doc/html-ctrls-list.md +13 -13
- package/index.js +2 -1
- package/lib/event-hfunc.js +26 -8
- package/lib/html-ctrls/buttons.js +12 -19
- package/lib/html-ctrls/fields.js +25 -25
- package/lib/html-ctrls/list.js +19 -9
- package/lib/html-ctrls/lists-btn.js +2 -4
- package/lib/html-ctrls/lists-stubs.js +41 -28
- package/lib/html-helper-lib.js +4 -7
- package/package.json +1 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
#### *v0.0.26*
|
|
2
|
+
|
|
3
|
+
Pre-release version.
|
|
4
|
+
|
|
5
|
+
> - `html-ctrls-list.md` updated;
|
|
6
|
+
> - improve a 'THtmlItemsListController' behavior on handling a `click`-event;
|
|
7
|
+
> - change behavior for a `THtmlStubItemsSet`-class constructor (*see docs for details*);
|
|
8
|
+
> - change behavior for a `loadItems`-method of a `THtmlStubItemsSet`-class (*see docs for details*);
|
|
9
|
+
> - some other fixes.
|
|
10
|
+
|
|
1
11
|
#### *v0.0.25*
|
|
2
12
|
|
|
3
13
|
Pre-release version.
|
package/doc/html-ctrls-list.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
>|***rev.*:**|0.1.
|
|
1
|
+
>|***rev.*:**|0.1.24|
|
|
2
2
|
>|:---|---:|
|
|
3
|
-
>|date:|2025-
|
|
3
|
+
>|date:|2025-05-05|
|
|
4
4
|
|
|
5
5
|
## Introduction
|
|
6
6
|
|
|
@@ -625,7 +625,9 @@ The class constructor receives a parameters listed below:
|
|
|
625
625
|
| parameter name | value type | default value | description |
|
|
626
626
|
|:---|---|---:|:---|
|
|
627
627
|
| `host` | `HTMLElement` | --- | points to a host element which holds a list items |
|
|
628
|
-
| `options` | `object`, `array` |
|
|
628
|
+
| `options` | `object`, `array` | --- | contains an object that is send to a class `loadItems` method |
|
|
629
|
+
|
|
630
|
+
> \[!] NOTE: `[since v0.0.26]` a use of a `array` type as a value of an `options` are deprecated and will be dropped soon.
|
|
629
631
|
|
|
630
632
|
##### `options` parameter
|
|
631
633
|
|
|
@@ -633,11 +635,9 @@ The `options` structure has listed below:
|
|
|
633
635
|
|
|
634
636
|
| option name | value type | default value | description |
|
|
635
637
|
|:---|---|---:|:---|
|
|
636
|
-
| `items` | `array` |
|
|
638
|
+
| `items` | `array`, `object` | --- | defines a list of the entries to load. For more details see a description of a [`loadItems`](#THtmlStubItemsSet+loadItems) class method |
|
|
637
639
|
| `defaultItem` | `string` | --- | if set it defines a name of the item used by default |
|
|
638
|
-
| `force` | `boolean` | `false` | if set to `true`, the item which is already present will be replaced with a new one
|
|
639
|
-
|
|
640
|
-
> NOTE: For more details on an `items` element see an description of a [`loadItems`](#THtmlStubItemsSet+loadItems) class method.
|
|
640
|
+
| `force` | `boolean` | `false` | if set to `true`, the item which is already present will be replaced with a new one |
|
|
641
641
|
|
|
642
642
|
#### class properties
|
|
643
643
|
|
|
@@ -754,27 +754,27 @@ This class method is similar to `showItem` method but is performed on a default
|
|
|
754
754
|
This class method is similar to `hideItem` method but is performed on a default item.
|
|
755
755
|
|
|
756
756
|
<a name="THtmlStubItemsSet+loadItems"></a>
|
|
757
|
-
##### **loadItems(
|
|
757
|
+
##### **loadItems(data\[, options])** => `number`
|
|
758
758
|
|
|
759
759
|
This class methods loads an items given by `list` in the set and returned quantity of how many items have been processed successfully.
|
|
760
760
|
|
|
761
761
|
| parameter name | value type | default value | description |
|
|
762
762
|
|:---|---|---:|:---|
|
|
763
|
-
| `
|
|
763
|
+
| `data` | `array`, `object` | --- | an array of entries or a special descriptive object |
|
|
764
764
|
| `options` | `boolean`, `object` | --- | an options |
|
|
765
765
|
|
|
766
766
|
> \[!] NOTE: *`[since v0.0.25]`* the use of a booleans as an `options` value is deprecated and will be dropped soon.
|
|
767
767
|
|
|
768
|
-
If the `
|
|
768
|
+
If the `data` parameter is an `object` that contains the following set of values:
|
|
769
769
|
|
|
770
770
|
| option name | value type | default value | description |
|
|
771
771
|
|:---|---|---:|:---|
|
|
772
772
|
| `items` | `array` | `undefined` | defines a list of the entries to load. Each entry contains a `name`-`element` pair. |
|
|
773
773
|
| `defaultItem` | `string` | --- | if set it defines a name of the item used by default |
|
|
774
774
|
|
|
775
|
-
If the `
|
|
775
|
+
If the `data` parameter is an `array` it used as value of a `data.items` options.
|
|
776
776
|
|
|
777
|
-
Note that each element of a `
|
|
777
|
+
Note that each element of a `data.items` can be:
|
|
778
778
|
|
|
779
779
|
- an `array` which contains a `key-value` pair
|
|
780
780
|
|
|
@@ -788,7 +788,7 @@ If the `options` parameter is an `object` that contains the following set of par
|
|
|
788
788
|
|
|
789
789
|
| option name | value type | default value | description |
|
|
790
790
|
|:---|---|---:|:---|
|
|
791
|
-
| `defaultItem` | `string` | --- | if set it defines a name of the item used by default |
|
|
791
|
+
| `defaultItem` | `string` | --- | (*deprecated **since `v0.0.26`***) if set it defines a name of the item used by default |
|
|
792
792
|
| `useClear` | `boolean` | `true` | if set to `true`, before the load of the items, the list is cleared |
|
|
793
793
|
| `force` | `boolean` | `false` | if set to `true`, the item which is already present will be replaced with a new one |
|
|
794
794
|
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// [v0.1.
|
|
1
|
+
// [v0.1.028-20250503]
|
|
2
2
|
|
|
3
3
|
// === module init block ===
|
|
4
4
|
|
|
@@ -27,6 +27,7 @@ const components = {
|
|
|
27
27
|
|
|
28
28
|
const eventHelper = {
|
|
29
29
|
pushEventHandler: ev_helper.pushEventHandler,
|
|
30
|
+
removeEventHandler: ev_helper.removeEventHandler,
|
|
30
31
|
triggerEventHandler: ev_helper.triggerEventHandler,
|
|
31
32
|
};
|
|
32
33
|
|
package/lib/event-hfunc.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// [v0.1.
|
|
1
|
+
// [v0.1.063-20250503]
|
|
2
2
|
|
|
3
3
|
// === module init block ===
|
|
4
4
|
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
|
|
17
17
|
/**
|
|
18
18
|
* @function pushEventHandler
|
|
19
|
-
* @param {
|
|
19
|
+
* @param {Map<string, Function>} pool - pool object
|
|
20
20
|
* @param {string} name - event name
|
|
21
|
-
* @param {
|
|
21
|
+
* @param {Function} evnt - callback function
|
|
22
22
|
* @returns {void}
|
|
23
23
|
* @inner
|
|
24
24
|
*/
|
|
25
|
-
function pushEventHandler(pool, name, evnt){
|
|
25
|
+
function pushEventHandler(pool, name, evnt) {
|
|
26
26
|
const _name = typeof name === 'string' ? name.trim() : '';
|
|
27
27
|
if (_name !== '' && typeof evnt === 'function') {
|
|
28
28
|
if (!pool.has(_name)) {
|
|
@@ -35,15 +35,32 @@ function pushEventHandler(pool, name, evnt){
|
|
|
35
35
|
};
|
|
36
36
|
};
|
|
37
37
|
|
|
38
|
+
/**
|
|
39
|
+
* @function removeEventHandler
|
|
40
|
+
* @param {Map<string, Function>} pool - pool object
|
|
41
|
+
* @param {string} name - event name
|
|
42
|
+
* @returns {void}
|
|
43
|
+
* @inner
|
|
44
|
+
*/
|
|
45
|
+
function removeEventHandler(pool, name) {
|
|
46
|
+
const key = typeof name === 'string' ? name.trim() : '';
|
|
47
|
+
if (key !== '') {
|
|
48
|
+
/* NOTE:
|
|
49
|
+
* for current you can't reset or set new one on the same event
|
|
50
|
+
*/
|
|
51
|
+
if (pool.has(key)) pool.delete(key);
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
|
|
38
55
|
/**
|
|
39
56
|
* @function triggerEventHandler
|
|
40
|
-
* @param {
|
|
57
|
+
* @param {Map<string, Function>} pool - pool object
|
|
41
58
|
* @param {string} name - event name
|
|
42
59
|
* @param {...any} [args]
|
|
43
60
|
* @returns {void}
|
|
44
61
|
* @inner
|
|
45
62
|
*/
|
|
46
|
-
function triggerEventHandler(pool, name, ...args){
|
|
63
|
+
function triggerEventHandler(pool, name, ...args) {
|
|
47
64
|
const _name = typeof name === 'string' ? name.trim() : '';
|
|
48
65
|
if (_name !== '') {
|
|
49
66
|
if (pool.has(_name)) pool.get(_name)(...args);
|
|
@@ -56,5 +73,6 @@ function triggerEventHandler(pool, name, ...args){
|
|
|
56
73
|
|
|
57
74
|
// === module exports block ===
|
|
58
75
|
|
|
59
|
-
exports.pushEventHandler = pushEventHandler;
|
|
60
|
-
exports.triggerEventHandler = triggerEventHandler;
|
|
76
|
+
module.exports.pushEventHandler = pushEventHandler;
|
|
77
|
+
module.exports.triggerEventHandler = triggerEventHandler;
|
|
78
|
+
module.exports.removeEventHandler = removeEventHandler;
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
// [v0.1.
|
|
1
|
+
// [v0.1.062-20250509]
|
|
2
2
|
|
|
3
3
|
// === module init block ===
|
|
4
4
|
|
|
5
5
|
const {
|
|
6
6
|
isNotEmptyString,
|
|
7
7
|
isPlainObject, valueToArray,
|
|
8
|
-
//TItemsICollection,
|
|
9
8
|
} = require('@ygracs/bsfoc-lib-js');
|
|
10
9
|
|
|
11
10
|
const {
|
|
12
11
|
TItemsICollection,
|
|
13
|
-
} = require('@ygracs/
|
|
12
|
+
} = require('@ygracs/lists-lib-js');
|
|
14
13
|
|
|
15
14
|
const {
|
|
16
15
|
isHTMLElement,
|
|
@@ -25,15 +24,9 @@ const {
|
|
|
25
24
|
} = require('./mod-hfunc.js');
|
|
26
25
|
|
|
27
26
|
const {
|
|
28
|
-
//CSS_CLASS_SELECTED,
|
|
29
27
|
CSS_CLASS_DISABLED,
|
|
30
|
-
//CSS_CLASS_HIDDEN,
|
|
31
28
|
} = CSS_CLASS_STRING;
|
|
32
29
|
|
|
33
|
-
const etlHTagInputForBtn = new Set([
|
|
34
|
-
'button', 'submit', 'reset', 'image',
|
|
35
|
-
]);
|
|
36
|
-
|
|
37
30
|
// === module extra block (helper functions) ===
|
|
38
31
|
|
|
39
32
|
// === module main block ===
|
|
@@ -44,6 +37,10 @@ const etlHTagInputForBtn = new Set([
|
|
|
44
37
|
|
|
45
38
|
const BTS_DEF_GROUP_NAME = 'all';
|
|
46
39
|
|
|
40
|
+
const etlHTagInputForBtn = new Set([
|
|
41
|
+
'button', 'submit', 'reset', 'image',
|
|
42
|
+
]);
|
|
43
|
+
|
|
47
44
|
/***
|
|
48
45
|
* (* function definitions *)
|
|
49
46
|
*/
|
|
@@ -66,9 +63,7 @@ function isHTMLButton(obj) {
|
|
|
66
63
|
result = etlHTagInputForBtn.has(obj.type.toLowerCase());
|
|
67
64
|
break;
|
|
68
65
|
}
|
|
69
|
-
default: {
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
66
|
+
default: {}
|
|
72
67
|
};
|
|
73
68
|
};
|
|
74
69
|
return result;
|
|
@@ -304,15 +299,13 @@ class THtmlButtonsControllerARCSet {
|
|
|
304
299
|
* @description Creates an instance of the buttons set.
|
|
305
300
|
*/
|
|
306
301
|
constructor(opt) {
|
|
307
|
-
// load options
|
|
308
|
-
const _options = isPlainObject(opt) ? opt : {};
|
|
309
302
|
// load controls
|
|
310
303
|
/** @type {arcButtonsDesc} */
|
|
311
304
|
let {
|
|
312
305
|
btnApply,
|
|
313
306
|
btnReset,
|
|
314
307
|
btnCancel,
|
|
315
|
-
} =
|
|
308
|
+
} = isPlainObject(opt) ? opt : {};
|
|
316
309
|
if (!isHTMLButton(btnApply)) btnApply = null;
|
|
317
310
|
if (!isHTMLButton(btnReset)) btnReset = null;
|
|
318
311
|
if (!isHTMLButton(btnCancel)) btnCancel = null;
|
|
@@ -413,9 +406,9 @@ class THtmlButtonsControllerARCSet {
|
|
|
413
406
|
|
|
414
407
|
// === module exports block ===
|
|
415
408
|
|
|
416
|
-
exports.THtmlButtonsSet = THtmlButtonsSet;
|
|
417
|
-
exports.THtmlButtonsControllerARCSet = THtmlButtonsControllerARCSet;
|
|
409
|
+
module.exports.THtmlButtonsSet = THtmlButtonsSet;
|
|
410
|
+
module.exports.THtmlButtonsControllerARCSet = THtmlButtonsControllerARCSet;
|
|
418
411
|
|
|
419
|
-
exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;
|
|
412
|
+
module.exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;
|
|
420
413
|
|
|
421
|
-
exports.isHTMLButton = isHTMLButton;
|
|
414
|
+
module.exports.isHTMLButton = isHTMLButton;
|
package/lib/html-ctrls/fields.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// [v0.1.
|
|
1
|
+
// [v0.1.022-20250509]
|
|
2
2
|
|
|
3
3
|
// === module init block ===
|
|
4
4
|
|
|
@@ -29,14 +29,14 @@ const lpAllowedValues = new Map([
|
|
|
29
29
|
|
|
30
30
|
/**
|
|
31
31
|
* @typedef {Object} ifcTypeDesc
|
|
32
|
-
* @property {string} type - type
|
|
33
|
-
* @property {string} subtype -
|
|
32
|
+
* @property {string} type - field general type
|
|
33
|
+
* @property {string} subtype - field sub-type
|
|
34
34
|
* @description An input field type description
|
|
35
35
|
*/
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
38
|
* @function getInputFieldTypeDescr
|
|
39
|
-
* @param {string} value
|
|
39
|
+
* @param {string} value - field type
|
|
40
40
|
* @returns {ifcTypeDesc}
|
|
41
41
|
* @inner
|
|
42
42
|
* @description Returns field description by a given type.
|
|
@@ -70,13 +70,13 @@ function getInputFieldTypeDescr(value) {
|
|
|
70
70
|
|
|
71
71
|
/**
|
|
72
72
|
* @function getLabelPositionID
|
|
73
|
-
* @param {string} value
|
|
73
|
+
* @param {string} value - label position identifier
|
|
74
74
|
* @returns {number}
|
|
75
75
|
* @inner
|
|
76
76
|
* @description Returns label position ID by its name.
|
|
77
77
|
*/
|
|
78
78
|
function getLabelPositionID(value) {
|
|
79
|
-
let key = readAsString(value, true);
|
|
79
|
+
let key = readAsString(value, { useTrim: true });
|
|
80
80
|
if (!lpAllowedValues.has(key)) key = 'default';
|
|
81
81
|
return lpAllowedValues.get(key);
|
|
82
82
|
};
|
|
@@ -97,14 +97,14 @@ function getLabelPositionID(value) {
|
|
|
97
97
|
|
|
98
98
|
/**
|
|
99
99
|
* @typedef {Object} OPT_ifcdesc
|
|
100
|
-
* @property {
|
|
100
|
+
* @property {HTMLElement} [host] - host element
|
|
101
101
|
* @property {string} [idPref]
|
|
102
|
-
* @property {
|
|
102
|
+
* @property {string} [label] - text of a label
|
|
103
103
|
* @property {object} [labelPosition]
|
|
104
104
|
* @property {boolean} [useDelim]
|
|
105
105
|
* @property {object} [baseClassID]
|
|
106
|
-
* @property {string} [hint]
|
|
107
|
-
* @property {
|
|
106
|
+
* @property {string} [hint] - hint to show when empty
|
|
107
|
+
* @property {string} [type] - field type
|
|
108
108
|
* @property {boolean} [readonly] - mode flag
|
|
109
109
|
* @description An options set for create ifc
|
|
110
110
|
*/
|
|
@@ -113,8 +113,8 @@ function getLabelPositionID(value) {
|
|
|
113
113
|
* @typedef {Object} OPT_ifcsett
|
|
114
114
|
* @property {string} [idPref]
|
|
115
115
|
* @property {(string|string[])} [baseClassID]
|
|
116
|
-
* @property {string} [hint]
|
|
117
|
-
* @property {string} [type]
|
|
116
|
+
* @property {string} [hint] - hint to show when empty
|
|
117
|
+
* @property {string} [type] - field type
|
|
118
118
|
* @property {boolean} [readonly=true] - mode flag
|
|
119
119
|
* @description An options set for `THtmlInputField`-class
|
|
120
120
|
*/
|
|
@@ -143,10 +143,10 @@ class THtmlInputField {
|
|
|
143
143
|
#_options = null;
|
|
144
144
|
/**
|
|
145
145
|
* @typedef {Object} statIFCtrl
|
|
146
|
-
* @property {string} fldType
|
|
147
|
-
* @property {string} fldSubType
|
|
148
|
-
* @property {boolean} isReadOnly
|
|
149
|
-
* @property {boolean} isModified
|
|
146
|
+
* @property {string} fldType - field general type
|
|
147
|
+
* @property {string} fldSubType - field sub-type
|
|
148
|
+
* @property {boolean} isReadOnly - mode flag
|
|
149
|
+
* @property {boolean} isModified - indicates whether any changes was made
|
|
150
150
|
* @inner
|
|
151
151
|
* @description A controller status
|
|
152
152
|
*/
|
|
@@ -271,7 +271,7 @@ class THtmlInputField {
|
|
|
271
271
|
};
|
|
272
272
|
|
|
273
273
|
/**
|
|
274
|
-
* @param {object} e
|
|
274
|
+
* @param {object} e - event
|
|
275
275
|
* @returns {void}
|
|
276
276
|
* @private
|
|
277
277
|
* @fires THtmlInputField#value-changed
|
|
@@ -294,7 +294,7 @@ class THtmlInputField {
|
|
|
294
294
|
};
|
|
295
295
|
|
|
296
296
|
/**
|
|
297
|
-
* @param {object} e
|
|
297
|
+
* @param {object} e - event
|
|
298
298
|
* @returns {void}
|
|
299
299
|
* @private
|
|
300
300
|
* @fires THtmlInputField#value-empty
|
|
@@ -320,7 +320,7 @@ class THtmlInputField {
|
|
|
320
320
|
};
|
|
321
321
|
|
|
322
322
|
/**
|
|
323
|
-
* @param {object} e
|
|
323
|
+
* @param {object} e - event
|
|
324
324
|
* @returns {void}
|
|
325
325
|
* @private
|
|
326
326
|
*/
|
|
@@ -393,7 +393,7 @@ class THtmlInputField {
|
|
|
393
393
|
* @param {OPT_ifcdesc} opt - options
|
|
394
394
|
* @returns {?THtmlInputField}
|
|
395
395
|
* @static
|
|
396
|
-
* @description Creates a new
|
|
396
|
+
* @description Creates a new instance.
|
|
397
397
|
*/
|
|
398
398
|
static create(name, opt) {
|
|
399
399
|
const eholds = THtmlInputField.createElement(name, opt, true);
|
|
@@ -441,18 +441,18 @@ class THtmlInputField {
|
|
|
441
441
|
bcidLabel = valueToClassList(bcidLabel);
|
|
442
442
|
bcidField = valueToClassList(bcidField);
|
|
443
443
|
idPref = valueToIDString(idPref);
|
|
444
|
-
hint = readAsString(hint, true);
|
|
444
|
+
hint = readAsString(hint, { useTrim: true });
|
|
445
445
|
({ type: fldType, subtype: fldSubType } = getInputFieldTypeDescr(fldType));
|
|
446
446
|
if (fldSubType === 'switch') bcidField.push('switch');
|
|
447
447
|
labelPosition = getLabelPositionID(labelPosition);
|
|
448
448
|
if (typeof useDelim !== 'boolean') useDelim = true;
|
|
449
|
-
label = readAsString(label, true);
|
|
449
|
+
label = readAsString(label, { useTrim: true });
|
|
450
450
|
if (label !== '') label = `${label}${useDelim ? ':' : ''}`;
|
|
451
451
|
isReadOnly = readAsBool(isReadOnly, true);
|
|
452
452
|
let fldID = idPref === '' ? id : `${idPref}-${id}`;
|
|
453
453
|
if (!isHTMLElement(host)) {
|
|
454
454
|
host = createNewHTMLElement('div', {
|
|
455
|
-
|
|
455
|
+
classNames: bcidHost,
|
|
456
456
|
});
|
|
457
457
|
};
|
|
458
458
|
let lblHolder = null;
|
|
@@ -466,7 +466,7 @@ class THtmlInputField {
|
|
|
466
466
|
attr: {
|
|
467
467
|
for: fldID,
|
|
468
468
|
},
|
|
469
|
-
|
|
469
|
+
classNames: bcidLabel,
|
|
470
470
|
});
|
|
471
471
|
};
|
|
472
472
|
fldHolder = host.querySelector(`input#${fldID}`);
|
|
@@ -477,7 +477,7 @@ class THtmlInputField {
|
|
|
477
477
|
type: fldType,
|
|
478
478
|
placeholder: hint,
|
|
479
479
|
},
|
|
480
|
-
|
|
480
|
+
classNames: bcidField,
|
|
481
481
|
});
|
|
482
482
|
};
|
|
483
483
|
if (fldHolder) {
|
package/lib/html-ctrls/list.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// [v0.1.
|
|
1
|
+
// [v0.1.070-20250504]
|
|
2
2
|
|
|
3
3
|
// === module init block ===
|
|
4
4
|
|
|
@@ -588,7 +588,7 @@ class THtmlItemsListController extends THtmlItemsListContainer {
|
|
|
588
588
|
}
|
|
589
589
|
|
|
590
590
|
/**
|
|
591
|
-
* @param {object} e
|
|
591
|
+
* @param {object} e - event
|
|
592
592
|
* @returns {void}
|
|
593
593
|
* @private
|
|
594
594
|
*/
|
|
@@ -605,8 +605,8 @@ class THtmlItemsListController extends THtmlItemsListContainer {
|
|
|
605
605
|
//console.log('CHECK: e => ditail:['+e.detail+']');
|
|
606
606
|
//console.log('CHECK: e => phase:['+eventPhase+']');
|
|
607
607
|
const onClickNum = readAsNumber(e.detail, 0);
|
|
608
|
-
const
|
|
609
|
-
const { isSelectionLocked, catchEventOnHost } = _status;
|
|
608
|
+
const host = this.#_host;
|
|
609
|
+
const { isSelectionLocked, catchEventOnHost } = this.#_status;
|
|
610
610
|
let curItem = null;
|
|
611
611
|
switch (eventPhase) {
|
|
612
612
|
//* // NOTE: currently on eventPhase = 2 and 3
|
|
@@ -614,7 +614,7 @@ class THtmlItemsListController extends THtmlItemsListContainer {
|
|
|
614
614
|
/**/// capturing stage
|
|
615
615
|
case 2: {
|
|
616
616
|
/**/// target stage
|
|
617
|
-
if (target !==
|
|
617
|
+
if (target !== host) curItem = target;
|
|
618
618
|
break;
|
|
619
619
|
}
|
|
620
620
|
case 3: {
|
|
@@ -622,9 +622,7 @@ class THtmlItemsListController extends THtmlItemsListContainer {
|
|
|
622
622
|
curItem = catchEventOnHost ? target : currentTarget;
|
|
623
623
|
break;
|
|
624
624
|
}
|
|
625
|
-
default: {
|
|
626
|
-
break;
|
|
627
|
-
}
|
|
625
|
+
default: {}
|
|
628
626
|
};
|
|
629
627
|
if (
|
|
630
628
|
!isSelectionLocked
|
|
@@ -632,7 +630,19 @@ class THtmlItemsListController extends THtmlItemsListContainer {
|
|
|
632
630
|
&& (onClickNum === 0 || onClickNum === 1)
|
|
633
631
|
&& !curItem.classList.contains(CSS_CLASS_DISABLED)
|
|
634
632
|
) {
|
|
635
|
-
//console.log(
|
|
633
|
+
//console.log(`CHECK: e => tag:[${curItem.tagName}]`);
|
|
634
|
+
if (host) {
|
|
635
|
+
// find an actual list element in case when some inner element was clicking
|
|
636
|
+
let tmpItem = curItem;
|
|
637
|
+
while (tmpItem) {
|
|
638
|
+
//console.log(`CHECK: e => target.tag:[${tmpItem.tagName}]`);
|
|
639
|
+
tmpItem = tmpItem.parentElement;
|
|
640
|
+
//console.log(`CHECK: e => next.tag:[${tmpItem.tagName}]`);
|
|
641
|
+
if (tmpItem === host) break;
|
|
642
|
+
if (tmpItem) curItem = tmpItem;
|
|
643
|
+
};
|
|
644
|
+
};
|
|
645
|
+
//console.log(`CHECK: e => tag:[${curItem.tagName}]`);
|
|
636
646
|
this.#_selectItemEx(curItem, {
|
|
637
647
|
ctrlKey: ctrlKey,
|
|
638
648
|
shiftKey: shiftKey,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// [v0.1.
|
|
1
|
+
// [v0.1.054-20250509]
|
|
2
2
|
|
|
3
3
|
// === module init block ===
|
|
4
4
|
|
|
@@ -67,8 +67,6 @@ class THtmlListButtonsController {
|
|
|
67
67
|
* @description Creates an instance of a buttons set.
|
|
68
68
|
*/
|
|
69
69
|
constructor(opt) {
|
|
70
|
-
// load options
|
|
71
|
-
const _options = isPlainObject(opt) ? opt : {};
|
|
72
70
|
// load controls
|
|
73
71
|
/** @type {listButtonsSetDesc} */
|
|
74
72
|
let {
|
|
@@ -76,7 +74,7 @@ class THtmlListButtonsController {
|
|
|
76
74
|
btnPrev,
|
|
77
75
|
btnNext,
|
|
78
76
|
btnLast,
|
|
79
|
-
} =
|
|
77
|
+
} = isPlainObject(opt) ? opt : {};
|
|
80
78
|
if (!isHTMLButton(btnFirst)) btnFirst = null;
|
|
81
79
|
if (!isHTMLButton(btnPrev)) btnPrev = null;
|
|
82
80
|
if (!isHTMLButton(btnNext)) btnNext = null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// [v0.1.
|
|
1
|
+
// [v0.1.049-20250505]
|
|
2
2
|
|
|
3
3
|
// === module init block ===
|
|
4
4
|
|
|
@@ -28,10 +28,26 @@ const {
|
|
|
28
28
|
|
|
29
29
|
/**
|
|
30
30
|
* @typedef {Object} OPT_ldstubs
|
|
31
|
-
* @property {string} [defaultItem] - a default element name
|
|
31
|
+
* @property {string} [defaultItem] - <*deprecated*> a default element name
|
|
32
32
|
* @property {boolean} [useClear=true] - to clear before load an elements
|
|
33
33
|
* @property {boolean} [force=false] - run in a force mode
|
|
34
|
-
* @description A settings to load stub-elements.
|
|
34
|
+
* @description A settings to load a stub-elements.
|
|
35
|
+
* @todo [since v0.0.26] `defaultItem`-option deprecated
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* @typedef {Object} OBJ_stubEList
|
|
40
|
+
* @property {Array} items - array of `name`-`element` pairs
|
|
41
|
+
* @property {string} [defaultItem] - a default element name
|
|
42
|
+
* @description A stub-elements description list.
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* @typedef {Object} OPT_stubconsett
|
|
47
|
+
* @property {(any[])} items - array of `name`-`element` pairs
|
|
48
|
+
* @property {string} [defaultItem] - a default element name
|
|
49
|
+
* @property {boolean} [force=false] - run in a force mode
|
|
50
|
+
* @description A an options set for a `THtmlStubItemsSet`-class constructor
|
|
35
51
|
*/
|
|
36
52
|
|
|
37
53
|
/**
|
|
@@ -47,19 +63,10 @@ class THtmlStubItemsSet {
|
|
|
47
63
|
#_shownItem = null;
|
|
48
64
|
|
|
49
65
|
/**
|
|
50
|
-
* @
|
|
51
|
-
* @
|
|
52
|
-
* @property {string} [defaultItem] - a default element name
|
|
53
|
-
* @description A stub-elements description list.
|
|
54
|
-
*/
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* @param {HTMLElement} host
|
|
58
|
-
* @param {(array|object|OBJ_stubEList)} opt - options
|
|
59
|
-
* @param {(array|object)} opt.items
|
|
60
|
-
* @param {string} opt.defaultItem
|
|
61
|
-
* @param {boolean} opt.force - <*deprecated (since: v0.0.23)*>
|
|
66
|
+
* @param {HTMLElement} host - host element
|
|
67
|
+
* @param {(array|OPT_stubconsett|OBJ_stubEList)} [opt] - options
|
|
62
68
|
* @description Creates an instance of a stub-items set
|
|
69
|
+
* @todo [since v0.0.26] use of an `array`-type as a value of an `opt` is deprecated
|
|
63
70
|
*/
|
|
64
71
|
constructor(host, opt) {
|
|
65
72
|
this.#_host = isHTMLElement(host) ? host : null;
|
|
@@ -67,9 +74,15 @@ class THtmlStubItemsSet {
|
|
|
67
74
|
this.#_defItem = '';
|
|
68
75
|
this.#_shownItem = null;
|
|
69
76
|
if (isObject(opt)) {
|
|
77
|
+
/** @type {(OPT_stubconsett|OBJ_stubEList)} */
|
|
70
78
|
const obj = isArray(opt) ? { items: opt } : opt;
|
|
71
79
|
const { items, defaultItem, force } = obj;
|
|
72
|
-
this.loadItems(
|
|
80
|
+
this.loadItems({
|
|
81
|
+
items,
|
|
82
|
+
defaultItem,
|
|
83
|
+
}, {
|
|
84
|
+
force,
|
|
85
|
+
});
|
|
73
86
|
};
|
|
74
87
|
}
|
|
75
88
|
|
|
@@ -237,33 +250,33 @@ class THtmlStubItemsSet {
|
|
|
237
250
|
}
|
|
238
251
|
|
|
239
252
|
/**
|
|
240
|
-
* @param {(Array|OBJ_stubEList)}
|
|
253
|
+
* @param {(Array|OBJ_stubEList)} data - an array of entries or special object
|
|
241
254
|
* @param {(boolean|OPT_ldstubs)} [opt] - an options
|
|
242
255
|
* @returns {number}
|
|
243
256
|
* @description Adds an items to an instance members.
|
|
244
257
|
* @todo [since 0.0.25] deprecate use of `opt` as `boolean`
|
|
258
|
+
* @todo [since v0.0.26] for `OPT_ldstubs` a `defaultItem`-option deprecated
|
|
245
259
|
*/
|
|
246
|
-
loadItems(
|
|
247
|
-
|
|
248
|
-
if (typeof _options === 'boolean') _options = { useClear: _options };
|
|
249
|
-
if (!isPlainObject(_options)) _options = {};
|
|
250
|
-
/** @type {OPT_ldstubs} */
|
|
260
|
+
loadItems(data, opt) {
|
|
261
|
+
/** @type {OBJ_stubEList} */
|
|
251
262
|
let {
|
|
263
|
+
items,
|
|
252
264
|
defaultItem,
|
|
265
|
+
} = isPlainObject(data) ? data : { items: data };
|
|
266
|
+
/** @type {OPT_ldstubs} */
|
|
267
|
+
let _options = isPlainObject(opt) ? opt : { useClear: opt };
|
|
268
|
+
let {
|
|
253
269
|
useClear,
|
|
254
270
|
force,
|
|
255
271
|
} = _options;
|
|
256
272
|
if (typeof useClear !== 'boolean') useClear = true;
|
|
257
273
|
if (typeof force !== 'boolean') force = false;
|
|
258
|
-
|
|
259
|
-
if (isPlainObject(_list)) {
|
|
260
|
-
({ items: _list, defaultItem } = _list);
|
|
261
|
-
};
|
|
274
|
+
if (defaultItem === undefined) defaultItem = _options.defaultItem; /* deprecated */
|
|
262
275
|
const setDefs = defaultItem !== undefined;
|
|
263
276
|
let count = 0;
|
|
264
|
-
if (isArray(
|
|
277
|
+
if (isArray(items)) {
|
|
265
278
|
if (useClear) this.clear();
|
|
266
|
-
|
|
279
|
+
items.forEach((obj) => {
|
|
267
280
|
if (isArray(obj)) {
|
|
268
281
|
const [ name, item ] = obj;
|
|
269
282
|
if (this.addItem(name, item, force)) count++;
|
package/lib/html-helper-lib.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
// [v0.1.
|
|
1
|
+
// [v0.1.041-20250509]
|
|
2
2
|
|
|
3
3
|
// === module init block ===
|
|
4
4
|
|
|
5
5
|
const {
|
|
6
|
-
readAsString,
|
|
7
6
|
isArray, isObject, isPlainObject, valueToArray,
|
|
8
7
|
valueToIDString,
|
|
9
8
|
} = require('@ygracs/bsfoc-lib-js');
|
|
@@ -202,9 +201,7 @@ function lockHTMLElement(obj) {
|
|
|
202
201
|
obj.disabled = true;
|
|
203
202
|
break;
|
|
204
203
|
}
|
|
205
|
-
default: {
|
|
206
|
-
break;
|
|
207
|
-
}
|
|
204
|
+
default: {}
|
|
208
205
|
};
|
|
209
206
|
};
|
|
210
207
|
return isSUCCEED;
|
|
@@ -389,9 +386,9 @@ function valueToElementID(value) {
|
|
|
389
386
|
* @typedef {Object} elemDesc
|
|
390
387
|
* @property {string} [id] - element ID
|
|
391
388
|
* @property {string} [text] - some text
|
|
392
|
-
* @property {
|
|
389
|
+
* @property {Object<string, any>} [attr] - an attributes list
|
|
393
390
|
* @property {string|string[]} [classNames] - a class names list (added since v0.0.19)
|
|
394
|
-
* @property {
|
|
391
|
+
* @property {Object<string, any>} [data] - a 'dataset'-attributes list
|
|
395
392
|
* @description An element description.
|
|
396
393
|
*/
|
|
397
394
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntwg/html-helper",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.26",
|
|
4
4
|
"description": "A base HTML-helper library for js",
|
|
5
5
|
"author": "ygracs <cs70th-om@rambler.ru>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -32,18 +32,8 @@
|
|
|
32
32
|
"test-bs": "jest base/",
|
|
33
33
|
"test-bs:g1": "jest base/fg-1",
|
|
34
34
|
"test-bs:g2": "jest base/fg-2",
|
|
35
|
-
"test-lc1": "jest THtmlItemsListContainer",
|
|
36
|
-
"test-lc2": "jest THtmlItemsListController",
|
|
37
35
|
"test-lc2:bs": "jest THtmlItemsListController/base",
|
|
38
36
|
"test-lc2:ec": "jest THtmlItemsListController/events",
|
|
39
|
-
"test-sis": "jest THtmlStubItemsSet",
|
|
40
|
-
"test-btn": "jest THtmlButtonsSet",
|
|
41
|
-
"test-lbc": "jest THtmlListButtonsController",
|
|
42
|
-
"test-lbc:bs": "jest THtmlListButtonsController/base",
|
|
43
|
-
"test-lbc:ec": "jest THtmlListButtonsController/events",
|
|
44
|
-
"test-bc1": "jest THtmlButtonsControllerARCSet",
|
|
45
|
-
"test-bc1:bs": "jest THtmlButtonsControllerARCSet/base",
|
|
46
|
-
"test-bc1:ec": "jest THtmlButtonsControllerARCSet/events",
|
|
47
37
|
"build-doc-md": "jsdoc2md",
|
|
48
38
|
"build-doc-html": "jsdoc"
|
|
49
39
|
},
|