@deltablot/malle 0.1.0 → 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.
- package/dist/main.js +175 -0
- package/dist/main.js.map +1 -0
- package/package.json +1 -1
package/dist/main.js
ADDED
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* This file is part of the "malle" library
|
|
3
|
+
* Copyright 2021 Nicolas CARPi @ Deltablot
|
|
4
|
+
* License MIT
|
|
5
|
+
* https://github.com/deltablot/malle
|
|
6
|
+
*/
|
|
7
|
+
export var InputType;
|
|
8
|
+
(function (InputType) {
|
|
9
|
+
InputType["Email"] = "email";
|
|
10
|
+
InputType["Number"] = "number";
|
|
11
|
+
InputType["Select"] = "select";
|
|
12
|
+
InputType["Text"] = "text";
|
|
13
|
+
InputType["Textarea"] = "textarea";
|
|
14
|
+
InputType["Url"] = "url";
|
|
15
|
+
})(InputType || (InputType = {}));
|
|
16
|
+
export var EventType;
|
|
17
|
+
(function (EventType) {
|
|
18
|
+
EventType["Click"] = "click";
|
|
19
|
+
EventType["Mouseenter"] = "mouseenter";
|
|
20
|
+
EventType["Mouseover"] = "mouseover";
|
|
21
|
+
})(EventType || (EventType = {}));
|
|
22
|
+
export var Action;
|
|
23
|
+
(function (Action) {
|
|
24
|
+
Action["Submit"] = "submit";
|
|
25
|
+
Action["Cancel"] = "cancel";
|
|
26
|
+
Action["Ignore"] = "ignore";
|
|
27
|
+
})(Action || (Action = {}));
|
|
28
|
+
export class Malle {
|
|
29
|
+
constructor(options) {
|
|
30
|
+
this.opt = this.normalizeOptions(options);
|
|
31
|
+
this.debug(`Options: ${JSON.stringify(this.opt)}`);
|
|
32
|
+
if (this.opt.listenNow) {
|
|
33
|
+
this.listen();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
normalizeOptions(options) {
|
|
37
|
+
const defaultOptions = {
|
|
38
|
+
before: undefined,
|
|
39
|
+
cancel: '',
|
|
40
|
+
cancelClasses: [],
|
|
41
|
+
formClasses: [],
|
|
42
|
+
inputClasses: [],
|
|
43
|
+
debug: false,
|
|
44
|
+
event: EventType.Click,
|
|
45
|
+
focus: true,
|
|
46
|
+
fun: () => new Error('No user function defined!'),
|
|
47
|
+
inputType: InputType.Text,
|
|
48
|
+
listenNow: false,
|
|
49
|
+
listenOn: '[data-malleable="true"]',
|
|
50
|
+
onBlur: Action.Submit,
|
|
51
|
+
selectOptions: [],
|
|
52
|
+
submit: '',
|
|
53
|
+
submitClasses: [],
|
|
54
|
+
tooltip: '',
|
|
55
|
+
};
|
|
56
|
+
return Object.assign(defaultOptions, options);
|
|
57
|
+
}
|
|
58
|
+
listen() {
|
|
59
|
+
document.querySelectorAll(this.opt.listenOn)
|
|
60
|
+
.forEach((el) => {
|
|
61
|
+
el.addEventListener(this.opt.event, this.process.bind(this));
|
|
62
|
+
el.style.cursor = 'pointer';
|
|
63
|
+
if (this.opt.tooltip) {
|
|
64
|
+
el.title = this.opt.tooltip;
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
this.debug(`malle now listening for ${this.opt.event} events on elements with selector: ${this.opt.listenOn}`);
|
|
68
|
+
}
|
|
69
|
+
debug(msg) {
|
|
70
|
+
if (this.opt.debug) {
|
|
71
|
+
console.debug(msg);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
submit(event) {
|
|
75
|
+
if (!this.form.reportValidity()) {
|
|
76
|
+
return false;
|
|
77
|
+
}
|
|
78
|
+
const value = this.opt.fun.call(this, this.input.value, this.original, event, this.input);
|
|
79
|
+
this.original.innerText = this.opt.inputType === InputType.Select ? this.input.options[this.input.selectedIndex].text : value;
|
|
80
|
+
this.form.replaceWith(this.original);
|
|
81
|
+
return true;
|
|
82
|
+
}
|
|
83
|
+
cancel(event) {
|
|
84
|
+
this.debug(event);
|
|
85
|
+
this.debug('reverting to original element');
|
|
86
|
+
this.form.replaceWith(this.original);
|
|
87
|
+
}
|
|
88
|
+
handleBlur(event) {
|
|
89
|
+
let blurAction = this.opt.onBlur;
|
|
90
|
+
if (this.original.dataset.maBlur) {
|
|
91
|
+
blurAction = this.original.dataset.maBlur;
|
|
92
|
+
}
|
|
93
|
+
if (blurAction === Action.Ignore) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
this[blurAction](event);
|
|
97
|
+
}
|
|
98
|
+
handleKeypress(event) {
|
|
99
|
+
if (event.key === 'Enter' && this.opt.inputType !== InputType.Textarea) {
|
|
100
|
+
return this.submit(event);
|
|
101
|
+
}
|
|
102
|
+
return false;
|
|
103
|
+
}
|
|
104
|
+
getInput() {
|
|
105
|
+
let inputElement = 'input';
|
|
106
|
+
if (this.opt.inputType === InputType.Textarea) {
|
|
107
|
+
inputElement = 'textarea';
|
|
108
|
+
}
|
|
109
|
+
if (this.opt.inputType === InputType.Select) {
|
|
110
|
+
inputElement = 'select';
|
|
111
|
+
}
|
|
112
|
+
const input = document.createElement(inputElement);
|
|
113
|
+
if (this.opt.inputType !== InputType.Textarea && this.opt.inputType !== InputType.Select) {
|
|
114
|
+
input.type = this.opt.inputType;
|
|
115
|
+
}
|
|
116
|
+
if (this.original.dataset.maType) {
|
|
117
|
+
input.type = this.original.dataset.maType;
|
|
118
|
+
}
|
|
119
|
+
this.opt.inputClasses.forEach(cl => {
|
|
120
|
+
input.classList.add(cl);
|
|
121
|
+
});
|
|
122
|
+
input.value = this.original.innerText;
|
|
123
|
+
if (this.opt.inputType === InputType.Select) {
|
|
124
|
+
this.opt.selectOptions.forEach(o => {
|
|
125
|
+
var _a;
|
|
126
|
+
const option = document.createElement('option');
|
|
127
|
+
option.value = o.value;
|
|
128
|
+
option.innerText = o.text;
|
|
129
|
+
option.selected = (_a = o.selected) !== null && _a !== void 0 ? _a : false;
|
|
130
|
+
input.appendChild(option);
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
input.addEventListener('keypress', this.handleKeypress.bind(this));
|
|
134
|
+
if (this.opt.submit === '' && this.opt.cancel === '') {
|
|
135
|
+
input.addEventListener('blur', this.handleBlur.bind(this));
|
|
136
|
+
}
|
|
137
|
+
return input;
|
|
138
|
+
}
|
|
139
|
+
process(event) {
|
|
140
|
+
this.debug('Event triggered:');
|
|
141
|
+
this.debug(event);
|
|
142
|
+
const el = event.currentTarget;
|
|
143
|
+
this.original = el;
|
|
144
|
+
if (typeof this.opt.before === 'function') {
|
|
145
|
+
if (this.opt.before(this.original, event) !== true) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
const form = document.createElement('form');
|
|
150
|
+
this.opt.formClasses.forEach(cl => {
|
|
151
|
+
form.classList.add(cl);
|
|
152
|
+
});
|
|
153
|
+
const input = this.getInput();
|
|
154
|
+
form.appendChild(input);
|
|
155
|
+
[Action.Submit, Action.Cancel].forEach(action => {
|
|
156
|
+
if (this.opt[action]) {
|
|
157
|
+
const btn = document.createElement('button');
|
|
158
|
+
btn.innerText = this.opt[action];
|
|
159
|
+
const actionClasses = action + 'Classes';
|
|
160
|
+
this.opt[actionClasses].forEach(cl => {
|
|
161
|
+
btn.classList.add(cl);
|
|
162
|
+
});
|
|
163
|
+
btn.addEventListener('click', this[action].bind(this));
|
|
164
|
+
form.appendChild(btn);
|
|
165
|
+
}
|
|
166
|
+
});
|
|
167
|
+
el.replaceWith(form);
|
|
168
|
+
if (this.opt.focus) {
|
|
169
|
+
input.focus();
|
|
170
|
+
}
|
|
171
|
+
this.input = input;
|
|
172
|
+
this.form = form;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"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"}
|