@cntwg/html-helper 0.0.27 → 0.1.1

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.
@@ -1,386 +0,0 @@
1
- // [v0.1.064-20250827]
2
-
3
- // === module init block ===
4
-
5
- const {
6
- isNotEmptyString,
7
- isPlainObject, valueToArray,
8
- } = require('@ygracs/bsfoc-lib-js');
9
-
10
- const {
11
- TItemsICollection,
12
- } = require('@ygracs/lists-lib-js');
13
-
14
- const {
15
- isHTMLElement, isHTMLButton,
16
- valueToIDString,
17
- lockHTMLElement, unlockHTMLElement,
18
- CSS_CLASS_STRING,
19
- } = require('../html-helper-lib.js');
20
-
21
- const {
22
- pushEventHandler, triggerEventHandler,
23
- readOnClickEventInfo,
24
- } = require('./mod-hfunc.js');
25
-
26
- const {
27
- CSS_CLASS_DISABLED,
28
- } = CSS_CLASS_STRING;
29
-
30
- // === module extra block (helper functions) ===
31
-
32
- // === module main block ===
33
-
34
- /***
35
- * (* constant definitions *)
36
- */
37
-
38
- const BTS_DEF_GROUP_NAME = 'all';
39
-
40
- /***
41
- * (* function definitions *)
42
- */
43
-
44
- /***
45
- * (* class definitions *)
46
- */
47
-
48
- /**
49
- * @classdesc This class implements an interface of a buttons set
50
- */
51
- class THtmlButtonsSet {
52
- /** @type {TItemsICollection} */
53
- #_btnCol;
54
-
55
- /**
56
- * Creates an instance of a buttons set
57
- */
58
- constructor() {
59
- // define default functions for manipulators
60
- const __user_index_getter = (value) => {
61
- return valueToIDString(value);
62
- };
63
- const __user_item_getter = (value) => {
64
- return THtmlButtonsSet.isHTMLButton(value) ? value : null;
65
- };
66
- this.#_btnCol = new TItemsICollection({
67
- userFn: {
68
- checkIndexFn: isNotEmptyString,
69
- readIndexFn: __user_index_getter,
70
- checkItemFn: THtmlButtonsSet.isHTMLButton,
71
- readItemFn: __user_item_getter,
72
- },
73
- });
74
- }
75
-
76
- /**
77
- * Contains a list of an element names
78
- * @type {string[]}
79
- * @readonly
80
- * @see TItemsICollection.ItemNames
81
- */
82
- get ItemNames() {
83
- return this.#_btnCol.ItemNames;
84
- }
85
-
86
- /**
87
- * Contains a list of an elements group names
88
- * @type {string[]}
89
- * @readonly
90
- * @see TItemsICollection.CategoryNames
91
- */
92
- get GroupNames() {
93
- return this.#_btnCol.CategoryNames;
94
- }
95
-
96
- /**
97
- * Checks whether a target item with a given name exists.
98
- * @param {string} name - element name
99
- * @returns {boolean}
100
- * @see TItemsICollection.hasItem
101
- */
102
- hasItem(name) {
103
- return this.#_btnCol.hasItem(name);
104
- }
105
-
106
- /**
107
- * Adds buttons to a set members.
108
- * @param {string} name - element name
109
- * @param {any} item - element
110
- * @param {...string} [group] - name of a target groups
111
- * @returns {boolean}
112
- * @see TItemsICollection.addItem
113
- */
114
- addItem(...args) {
115
- return this.#_btnCol.addItem(...args);
116
- }
117
-
118
- /**
119
- * Adds button to a listed groups.
120
- * @param {string} name - element name
121
- * @param {...string} [group] - name of a target groups
122
- * @returns {boolean}
123
- * @see TItemsICollection.addItemToCategory
124
- */
125
- addItemToGroup(...args) {
126
- return this.#_btnCol.addItemToCategory(...args);
127
- }
128
-
129
- /**
130
- * Deletes button from a set members.
131
- * @param {string} name - element name
132
- * @returns {boolean}
133
- * @see TItemsICollection.delItem
134
- */
135
- delItem(name) {
136
- return this.#_btnCol.delItem(name);
137
- }
138
-
139
- /**
140
- * Deletes button from a listed groups.
141
- * @param {string} name - element name
142
- * @param {...string} [group] - name of a target groups
143
- * @returns {boolean}
144
- * @see TItemsICollection.delItemFromGroup
145
- */
146
- delItemFromGroup(...args) {
147
- return this.#_btnCol.delItemFromGroup(...args);
148
- }
149
-
150
- /**
151
- * Renames button in a set.
152
- * @param {string} name - old name
153
- * @param {string} value - new name
154
- * @returns {boolean}
155
- * @see TItemsICollection.renameItem
156
- */
157
- renameItem(name, value) {
158
- return this.#_btnCol.renameItem(name, value, false);
159
- }
160
-
161
- /**
162
- * Tries to enable button.
163
- * @param {string} name - element name
164
- * @returns {void}
165
- */
166
- enableItem(name) {
167
- unlockHTMLElement(this.#_btnCol.getItem(name));
168
- }
169
-
170
- /**
171
- * Tries to disable button.
172
- * @param {string} name - element name
173
- * @returns {void}
174
- */
175
- disableItem(name) {
176
- lockHTMLElement(this.#_btnCol.getItem(name));
177
- }
178
-
179
- /**
180
- * Checks whether a target group with a given name exists.
181
- * @param {string} name - group name
182
- * @returns {boolean}
183
- * @see TItemsICollection.hasCategory
184
- */
185
- hasGroup(name) {
186
- return this.#_btnCol.hasCategory(name);
187
- }
188
-
189
- /**
190
- * Adds a group with a given name.
191
- * @param {string} name - group name
192
- * @returns {boolean}
193
- * @see TItemsICollection.addCategory
194
- */
195
- addGroup(name) {
196
- return this.#_btnCol.addCategory(name);
197
- }
198
-
199
- /**
200
- * Deletes a group with a given name.
201
- * @param {string} name - group name
202
- * @returns {boolean}
203
- * @see TItemsICollection.delCategory
204
- */
205
- delGroup(name) {
206
- return this.#_btnCol.delCategory(name);
207
- }
208
-
209
- /**
210
- * Renames group in a set.
211
- * @param {string} name - old name
212
- * @param {string} value - new name
213
- * @returns {boolean}
214
- * @see TItemsICollection.renameCategory
215
- */
216
- renameGroup(name, value) {
217
- return this.#_btnCol.renameCategory(name, value, false);
218
- }
219
-
220
- /**
221
- * Enables all buttons in a given group.
222
- * @param {string} value - group name
223
- * @returns {void}
224
- */
225
- enableGroup(value) {
226
- const group = this.#_btnCol.getCategory(value);
227
- valueToArray(group).forEach(item => unlockHTMLElement(item));
228
- }
229
-
230
- /**
231
- * Disables all buttons in a given group.
232
- * @param {string} value - group name
233
- * @returns {void}
234
- */
235
- disableGroup(value) {
236
- const group = this.#_btnCol.getCategory(value);
237
- valueToArray(group).forEach(item => lockHTMLElement(item));
238
- }
239
-
240
- /**
241
- * Returns a function wich do a validation check.
242
- * @type {isHTMLButton}
243
- * @static
244
- */
245
- static get isHTMLButton() {
246
- return isHTMLButton;
247
- }
248
-
249
- };
250
-
251
- /**
252
- * A description for ARC-buttons set.
253
- * @typedef {Object} arcButtonsDesc
254
- * @property {?HTMLElement} btnApply - button 'apply'
255
- * @property {?HTMLElement} btnReset - button 'reset'
256
- * @property {?HTMLElement} btnCancel - button 'cancel'
257
- */
258
-
259
- /**
260
- * @classdesc This class implements an interface of a pre-defined buttons set.
261
- * A set provide a three button: <apply>, <reset> and <cancel>.
262
- */
263
- class THtmlButtonsControllerARCSet {
264
- /** @type {THtmlButtonsSet} */
265
- #_btnSet;
266
- /** @type {Map<string, Function>} */
267
- #_events;
268
-
269
- /**
270
- * Creates an instance of the buttons set.
271
- * @param {arcButtonsDesc} opt - an option
272
- */
273
- constructor(opt) {
274
- // load controls
275
- /** @type {arcButtonsDesc} */
276
- let {
277
- btnApply,
278
- btnReset,
279
- btnCancel,
280
- } = isPlainObject(opt) ? opt : {};
281
- if (!isHTMLButton(btnApply)) btnApply = null;
282
- if (!isHTMLButton(btnReset)) btnReset = null;
283
- if (!isHTMLButton(btnCancel)) btnCancel = null;
284
- // init buttons set
285
- const _btnSet = new THtmlButtonsSet();
286
- this.#_btnSet = _btnSet;
287
- _btnSet.addGroup('main');
288
- _btnSet.addGroup('all');
289
- if (btnApply) {
290
- _btnSet.addItem('btn_apply', btnApply, 'main', 'all');
291
- btnApply.addEventListener('click', e => this.#_on_btn_pressed(e, 'apply'));
292
- };
293
- if (btnReset) {
294
- _btnSet.addItem('btn_reset', btnReset, 'main', 'all');
295
- btnReset.addEventListener('click', e => this.#_on_btn_pressed(e, 'reset'));
296
- };
297
- if (btnCancel) {
298
- _btnSet.addItem('btn_cancel', btnCancel, 'all');
299
- btnCancel.addEventListener('click', e => this.#_on_btn_pressed(e, 'cancel'));
300
- };
301
- _btnSet.disableGroup('main');
302
- // init events controller
303
- this.#_events = new Map();
304
- }
305
-
306
- /**
307
- * @param {object} e - event
308
- * @param {string} key - button ID
309
- * @returns {void}
310
- * @private
311
- */
312
- #_on_btn_pressed = (e, key) => {
313
- //console.log(`THtmlListButtonsController._on_btn_pressed().key(${key}) ==> was called...`);
314
- //e.preventDefault(); /* need to reconsider reason for use */
315
- const { item, onClickNum } = readOnClickEventInfo(e);
316
- if (
317
- item instanceof HTMLElement
318
- && (onClickNum === 0 || onClickNum === 1)
319
- && !item.classList.contains(CSS_CLASS_DISABLED)
320
- ) {
321
- this.#_triggerEvent(`btn-${key}-pressed`, e);
322
- };
323
- }
324
-
325
- /**
326
- * @param {string} name - event name
327
- * @param {...any} args
328
- * @returns {void}
329
- * @private
330
- * @see triggerEventHandler
331
- */
332
- #_triggerEvent = (name, ...args) => {
333
- triggerEventHandler(this.#_events, name, ...args);
334
- }
335
-
336
- /**
337
- * Disables all buttons in 'main' group.
338
- * @returns {void}
339
- */
340
- disableMain() {
341
- this.#_btnSet.disableGroup('main');
342
- }
343
-
344
- /**
345
- * Enables all buttons in 'main' group.
346
- * @returns {void}
347
- */
348
- enableMain() {
349
- this.#_btnSet.enableGroup('main');
350
- }
351
-
352
- /**
353
- * Disables all buttons.
354
- * @returns {void}
355
- */
356
- disableAll() {
357
- this.#_btnSet.disableGroup('all');
358
- }
359
-
360
- /**
361
- * Enables all buttons.
362
- * @returns {void}
363
- */
364
- enableAll() {
365
- this.#_btnSet.enableGroup('all');
366
- }
367
-
368
- /**
369
- * Sets a callback function to handle event.
370
- * @param {string} name - event name
371
- * @param {func} evnt - a callback function
372
- * @returns {void}
373
- */
374
- on(name, evnt) {
375
- pushEventHandler(this.#_events, name, evnt);
376
- }
377
- };
378
-
379
- // === module exports block ===
380
-
381
- module.exports.THtmlButtonsSet = THtmlButtonsSet;
382
- module.exports.THtmlButtonsControllerARCSet = THtmlButtonsControllerARCSet;
383
-
384
- module.exports.BTS_DEF_GROUP_NAME = BTS_DEF_GROUP_NAME;
385
-
386
- module.exports.isHTMLButton = isHTMLButton;