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.
data/package.json CHANGED
@@ -1,14 +1,11 @@
1
1
  {
2
2
  "name": "abyme",
3
- "version": "0.3.1",
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": "^2.0.0"
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",
@@ -1,14 +1,14 @@
1
- import { Controller } from 'stimulus';
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 = ['template', 'associations', 'fields', 'newFields']
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 === 'end' ? 'beforeend' : 'afterbegin';
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('limit-reached')
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('before-add');
66
+ this.create_event("before-add");
65
67
  this.associationsTarget.insertAdjacentHTML(this.position, html);
66
- this.create_event('after-add');
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('before-remove');
86
+ this.create_event("before-remove");
85
87
  this.mark_for_destroy(event);
86
- this.create_event('after-remove');
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}`, { detail: {controller: this, content: html} });
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 === 'before-add' && this.abymeBeforeAdd) this.abymeBeforeAdd(event);
107
- if (stage === 'after-add' && this.abymeAfterAdd) this.abymeAfterAdd(event);
108
- if (stage === 'before-remove' && this.abymeBeforeRemove) this.abymeBeforeAdd(event);
109
- if (stage === 'after-remove' && this.abymeAfterRemove) this.abymeAfterRemove(event);
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
- .match(/<template[\s\S]+<\/template>/)[0]
141
- .replace(/(\[\d{12,}\])(\[[^\[\]]+\]"){1}/g, `[NEW_RECORD]$2`);
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('.abyme--fields');
161
+ let item = event.target.closest(".abyme--fields");
159
162
  item.querySelector("input[name*='_destroy']").value = 1;
160
- item.style.display = 'none';
161
- item.classList.add('abyme--marked-for-destroy')
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 (this.newFieldsTargets
173
- .filter(item => !item.classList.contains('abyme--marked-for-destroy'))).length
174
- >= parseInt(this.element.dataset.limit)
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
  }