abyme 0.6.5 → 0.7.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.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/Gemfile.lock +3 -2
- data/README.md +27 -2
- data/dist/abyme.js +1 -1
- data/dist/abyme.js.map +1 -1
- data/dist/abyme.modern.js +1 -1
- data/dist/abyme.modern.js.map +1 -1
- data/dist/abyme.module.js +1 -1
- data/dist/abyme.module.js.map +1 -1
- data/dist/abyme.umd.js +1 -1
- data/dist/abyme.umd.js.map +1 -1
- data/lib/abyme/abyme_builder.rb +12 -3
- data/lib/abyme/version.rb +2 -2
- data/lib/abyme/view_helpers.rb +7 -6
- data/node_modules/.yarn-integrity +388 -442
- data/package.json +3 -5
- data/src/abyme_controller.js +48 -44
- data/yarn.lock +1297 -1685
- metadata +3 -3
data/package.json
CHANGED
@@ -1,14 +1,11 @@
|
|
1
1
|
{
|
2
2
|
"name": "abyme",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.7.0",
|
4
4
|
"description": "JS companion to abyme gem",
|
5
5
|
"files": [
|
6
6
|
"package.json",
|
7
7
|
"src/**/*"
|
8
8
|
],
|
9
|
-
"directories": {
|
10
|
-
"lib": "src"
|
11
|
-
},
|
12
9
|
"repository": {
|
13
10
|
"url": "https://github.com/bear-in-mind/abyme",
|
14
11
|
"type": "git"
|
@@ -19,7 +16,7 @@
|
|
19
16
|
"homepage": "https://github.com/bear-in-mind/abyme",
|
20
17
|
"bugs": "https://github.com/bear-in-mind/abyme/issues",
|
21
18
|
"dependencies": {
|
22
|
-
"stimulus": "^
|
19
|
+
"stimulus": "^3.0.0"
|
23
20
|
},
|
24
21
|
"devDependencies": {
|
25
22
|
"@babel/core": "7.11.6",
|
@@ -37,6 +34,7 @@
|
|
37
34
|
"microbundle": "^0.13.0",
|
38
35
|
"mutationobserver-shim": "^0.3.7"
|
39
36
|
},
|
37
|
+
"source": "src/index.js",
|
40
38
|
"main": "dist/abyme.js",
|
41
39
|
"exports": "./dist/abyme.modern.js",
|
42
40
|
"module": "dist/abyme.module.js",
|
data/src/abyme_controller.js
CHANGED
@@ -1,14 +1,14 @@
|
|
1
|
-
import { Controller } from
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
2
2
|
|
3
3
|
export default class extends Controller {
|
4
4
|
// static targets = ['template', 'associations', 'fields', 'newFields'];
|
5
|
-
// Some applications don't compile correctly with the usual static syntax.
|
5
|
+
// Some applications don't compile correctly with the usual static syntax.
|
6
6
|
// Thus implementing targets with standard getters below
|
7
7
|
|
8
|
-
static targets = [
|
8
|
+
static targets = ["template", "associations", "fields", "newFields"];
|
9
9
|
|
10
10
|
connect() {
|
11
|
-
console.log("Abyme Connected")
|
11
|
+
console.log("Abyme Connected");
|
12
12
|
|
13
13
|
if (this.count) {
|
14
14
|
// If data-count is present,
|
@@ -23,12 +23,14 @@ export default class extends Controller {
|
|
23
23
|
get count() {
|
24
24
|
return this.element.dataset.minCount || 0;
|
25
25
|
}
|
26
|
-
|
26
|
+
|
27
27
|
// return the value of the data-position attribute
|
28
28
|
// if there is no position specified set end as default
|
29
29
|
|
30
30
|
get position() {
|
31
|
-
return this.associationsTarget.dataset.abymePosition ===
|
31
|
+
return this.associationsTarget.dataset.abymePosition === "end"
|
32
|
+
? "beforeend"
|
33
|
+
: "afterbegin";
|
32
34
|
}
|
33
35
|
|
34
36
|
// ADD_ASSOCIATION
|
@@ -41,7 +43,7 @@ export default class extends Controller {
|
|
41
43
|
// will be call without an event so we have to check
|
42
44
|
// this case
|
43
45
|
|
44
|
-
// check for limit reached
|
46
|
+
// check for limit reached
|
45
47
|
// dispatch an event if the limit is reached
|
46
48
|
|
47
49
|
// - call the function build_html that take care
|
@@ -56,14 +58,14 @@ export default class extends Controller {
|
|
56
58
|
}
|
57
59
|
|
58
60
|
if (this.element.dataset.limit && this.limit_check()) {
|
59
|
-
this.create_event(
|
60
|
-
return false
|
61
|
+
this.create_event("limit-reached");
|
62
|
+
return false;
|
61
63
|
}
|
62
64
|
|
63
65
|
const html = this.build_html();
|
64
|
-
this.create_event(
|
66
|
+
this.create_event("before-add");
|
65
67
|
this.associationsTarget.insertAdjacentHTML(this.position, html);
|
66
|
-
this.create_event(
|
68
|
+
this.create_event("after-add");
|
67
69
|
}
|
68
70
|
|
69
71
|
// REMOVE_ASSOCIATION
|
@@ -81,9 +83,9 @@ export default class extends Controller {
|
|
81
83
|
remove_association(event) {
|
82
84
|
event.preventDefault();
|
83
85
|
|
84
|
-
this.create_event(
|
86
|
+
this.create_event("before-remove");
|
85
87
|
this.mark_for_destroy(event);
|
86
|
-
this.create_event(
|
88
|
+
this.create_event("after-remove");
|
87
89
|
}
|
88
90
|
|
89
91
|
// LIFECYCLE EVENTS RELATED
|
@@ -91,11 +93,13 @@ export default class extends Controller {
|
|
91
93
|
// CREATE_EVENT
|
92
94
|
|
93
95
|
// take a stage (String) => before-add, after-add...
|
94
|
-
// create a new custom event
|
96
|
+
// create a new custom event
|
95
97
|
// and dispatch at at the controller level
|
96
98
|
|
97
99
|
create_event(stage, html = null) {
|
98
|
-
const event = new CustomEvent(`abyme:${stage}`, {
|
100
|
+
const event = new CustomEvent(`abyme:${stage}`, {
|
101
|
+
detail: { controller: this, content: html },
|
102
|
+
});
|
99
103
|
this.element.dispatchEvent(event);
|
100
104
|
// WIP
|
101
105
|
this.dispatch(event, stage);
|
@@ -103,23 +107,22 @@ export default class extends Controller {
|
|
103
107
|
|
104
108
|
// WIP : Trying to integrate event handling through controller inheritance
|
105
109
|
dispatch(event, stage) {
|
106
|
-
if (stage ===
|
107
|
-
|
108
|
-
if (stage ===
|
109
|
-
if (stage ===
|
110
|
+
if (stage === "before-add" && this.abymeBeforeAdd)
|
111
|
+
this.abymeBeforeAdd(event);
|
112
|
+
if (stage === "after-add" && this.abymeAfterAdd) this.abymeAfterAdd(event);
|
113
|
+
if (stage === "before-remove" && this.abymeBeforeRemove)
|
114
|
+
this.abymeBeforeAdd(event);
|
115
|
+
if (stage === "after-remove" && this.abymeAfterRemove)
|
116
|
+
this.abymeAfterRemove(event);
|
110
117
|
}
|
111
118
|
|
112
|
-
abymeBeforeAdd(event) {
|
113
|
-
}
|
119
|
+
abymeBeforeAdd(event) {}
|
114
120
|
|
115
|
-
abymeAfterAdd(event) {
|
116
|
-
}
|
121
|
+
abymeAfterAdd(event) {}
|
117
122
|
|
118
|
-
abymeBeforeRemove(event) {
|
119
|
-
}
|
123
|
+
abymeBeforeRemove(event) {}
|
120
124
|
|
121
|
-
abymeAfterRemove(event) {
|
122
|
-
}
|
125
|
+
abymeAfterRemove(event) {}
|
123
126
|
|
124
127
|
// BUILD HTML
|
125
128
|
|
@@ -127,25 +130,25 @@ export default class extends Controller {
|
|
127
130
|
// NEW_RECORD for a generated timestamp
|
128
131
|
// then if there is a sub template in the html (multiple nested level)
|
129
132
|
// set all the sub timestamps back as NEW_RECORD
|
130
|
-
// finally returns the html
|
133
|
+
// finally returns the html
|
131
134
|
|
132
135
|
build_html() {
|
133
136
|
let html = this.templateTarget.innerHTML.replace(
|
134
137
|
/NEW_RECORD/g,
|
135
138
|
new Date().getTime()
|
136
139
|
);
|
137
|
-
|
140
|
+
|
138
141
|
if (html.match(/<template[\s\S]+<\/template>/)) {
|
139
142
|
const template = html
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
+
.match(/<template[\s\S]+<\/template>/)[0]
|
144
|
+
.replace(/(\[\d{12,}\])(\[[^\[\]]+\]"){1}/g, `[NEW_RECORD]$2`);
|
145
|
+
|
143
146
|
html = html.replace(/<template[\s\S]+<\/template>/g, template);
|
144
147
|
}
|
145
148
|
|
146
149
|
return html;
|
147
150
|
}
|
148
|
-
|
151
|
+
|
149
152
|
// MARK_FOR_DESTROY
|
150
153
|
|
151
154
|
// mark association for destruction
|
@@ -155,13 +158,12 @@ export default class extends Controller {
|
|
155
158
|
// add the class of abyme--marked-for-destroy to the element
|
156
159
|
|
157
160
|
mark_for_destroy(event) {
|
158
|
-
let item = event.target.closest(
|
161
|
+
let item = event.target.closest(".abyme--fields");
|
159
162
|
item.querySelector("input[name*='_destroy']").value = 1;
|
160
|
-
item.style.display =
|
161
|
-
item.classList.add(
|
163
|
+
item.style.display = "none";
|
164
|
+
item.classList.add("abyme--marked-for-destroy");
|
162
165
|
}
|
163
166
|
|
164
|
-
|
165
167
|
// LIMIT_CHECK
|
166
168
|
|
167
169
|
// Check if associations limit is reached
|
@@ -169,9 +171,11 @@ export default class extends Controller {
|
|
169
171
|
// persisted fields are ignored
|
170
172
|
|
171
173
|
limit_check() {
|
172
|
-
return (
|
173
|
-
|
174
|
-
|
174
|
+
return (
|
175
|
+
this.newFieldsTargets.filter(
|
176
|
+
(item) => !item.classList.contains("abyme--marked-for-destroy")
|
177
|
+
).length >= parseInt(this.element.dataset.limit)
|
178
|
+
);
|
175
179
|
}
|
176
180
|
|
177
181
|
// ADD_DEFAULT_ASSOCIATION
|
@@ -180,15 +184,15 @@ export default class extends Controller {
|
|
180
184
|
// call sleep function to ensure uniqueness of timestamp
|
181
185
|
|
182
186
|
async add_default_associations() {
|
183
|
-
let i = 0
|
187
|
+
let i = 0;
|
184
188
|
while (i < this.count) {
|
185
|
-
this.add_association()
|
186
|
-
i
|
189
|
+
this.add_association();
|
190
|
+
i++;
|
187
191
|
await this.sleep(1);
|
188
192
|
}
|
189
193
|
}
|
190
194
|
|
191
195
|
sleep(ms) {
|
192
|
-
return new Promise(resolve => setTimeout(resolve, ms));
|
196
|
+
return new Promise((resolve) => setTimeout(resolve, ms));
|
193
197
|
}
|
194
198
|
}
|