fdbq-rails 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -3
- data/lib/fdbq/rails/version.rb +1 -1
- data/vendor/node_modules/@softserveopensource/fdbq/README.md +10 -0
- data/vendor/node_modules/@softserveopensource/fdbq/index.js +72 -43
- data/vendor/node_modules/@softserveopensource/fdbq/package.json +11 -12
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c4bf0784cb1f57930ec68c0d1a29d7bcb84eb556e35a5d45bbdc9442b55b1774
|
4
|
+
data.tar.gz: 25ef57bb693b6d4ca2ac66d23e88741f1f08f2b21170e34086412fbbeab32e9a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 77ea42ecc9115287d9e536e49f1d11b7b8fd275d18a2bf6b8929c8484fb4282b92ccbca13a2bcd00f11fd4d2c74ad959b2c8cd333f2e1c9ce308bbdd3dc106b9
|
7
|
+
data.tar.gz: 6bd832b581f30f4c46f8cbe58ab467f42aa7e31229a6158e8887148bc561a89b557fd3c4136360a2726d35951609ba6a1c0d47ce23fc68b3fa14b792c5b8227e
|
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# Fdbq::Rails
|
2
2
|
|
3
|
-
A Rails integration of
|
3
|
+
A Rails integration of [@softserveopensource/fdbq](https://www.npmjs.com/package/@softserveopensource/fdbq) with an ORM recording of submits.
|
4
4
|
|
5
5
|
## Installation
|
6
6
|
|
@@ -25,7 +25,6 @@ Update configuration for fton-end
|
|
25
25
|
|
26
26
|
## Usage
|
27
27
|
|
28
|
-
|
29
28
|
Aadd to your layout or view plugin
|
30
29
|
+ `fdbq_render`
|
31
30
|
|
@@ -42,7 +41,6 @@ or
|
|
42
41
|
|
43
42
|
## TODO
|
44
43
|
|
45
|
-
- [ ] Add JS plugin
|
46
44
|
- [ ] Add MongoDB support
|
47
45
|
|
48
46
|
## License
|
data/lib/fdbq/rails/version.rb
CHANGED
@@ -119,3 +119,13 @@
|
|
119
119
|
|
120
120
|
|
121
121
|
> Check out a configuration example in `examples/basic/index.html`
|
122
|
+
|
123
|
+
##### Events
|
124
|
+
|
125
|
+
* hook into a submit complete with `fdbq-complete` Event.
|
126
|
+
|
127
|
+
`document.addEventListener("fdbq-complete", function(event) { console.log(event.data, event.instance); });`
|
128
|
+
|
129
|
+
###### TODO:
|
130
|
+
|
131
|
+
- [ ] add more event hooks
|
@@ -1,7 +1,26 @@
|
|
1
|
-
(function() {
|
1
|
+
(function(W, D) {
|
2
2
|
var TOGGLE_REGEX = /(^show | show | show$)/i;
|
3
3
|
var SUCCESS_STATUS_CODE = /^20\d$/;
|
4
4
|
|
5
|
+
if(typeof window.CustomEvent !== "function") {
|
6
|
+
/**
|
7
|
+
* CustomEvent() polyfill
|
8
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
|
9
|
+
*/
|
10
|
+
|
11
|
+
function CustomEvent(event, params) {
|
12
|
+
var evt = document.createEvent("CustomEvent");
|
13
|
+
|
14
|
+
params = params || {bubbles: false, cancelable: false, detail: null};
|
15
|
+
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
|
16
|
+
|
17
|
+
return evt;
|
18
|
+
}
|
19
|
+
|
20
|
+
CustomEvent.prototype = W.Event.prototype;
|
21
|
+
W.CustomEvent = CustomEvent;
|
22
|
+
}
|
23
|
+
|
5
24
|
function parameterize(object) {
|
6
25
|
var parts = [];
|
7
26
|
|
@@ -15,7 +34,7 @@
|
|
15
34
|
function questionID(config) { return (config.name+"").replace(/[^\w\-]+/ig, ""); }
|
16
35
|
|
17
36
|
function queryField(fieldID, instance) {
|
18
|
-
return
|
37
|
+
return D.querySelector('#'+instance.modalSelector+' [data-id="'+fieldID+'"][data-fdbq="field-container"]');
|
19
38
|
}
|
20
39
|
|
21
40
|
function arrayFind(array, prop, value) {
|
@@ -35,7 +54,7 @@
|
|
35
54
|
}
|
36
55
|
|
37
56
|
function buildField(type, options) {
|
38
|
-
var node =
|
57
|
+
var node = D.createElement("div");
|
39
58
|
node.className = FdbqClassName("fdbq-field", "-"+type, options.error ? "has-errors" : "");
|
40
59
|
node.dataset.fdbq = "field-container";
|
41
60
|
node.dataset.id = questionID(options);
|
@@ -43,8 +62,8 @@
|
|
43
62
|
return node;
|
44
63
|
}
|
45
64
|
|
46
|
-
function buildInput(type, props
|
47
|
-
var node =
|
65
|
+
function buildInput(type, props) {
|
66
|
+
var node = D.createElement(type);
|
48
67
|
|
49
68
|
for(var prop in props) {
|
50
69
|
node[prop] = props[prop];
|
@@ -59,17 +78,23 @@
|
|
59
78
|
function httpSubmit(params, instance) {
|
60
79
|
if(!instance.config.submit.url) return;
|
61
80
|
|
62
|
-
var
|
81
|
+
var xhr = new XMLHttpRequest();
|
82
|
+
|
83
|
+
xhr.onreadystatechange = function() {
|
84
|
+
if(xhr.readyState === 4) {
|
85
|
+
if(SUCCESS_STATUS_CODE.test(xhr.status)) {
|
86
|
+
instance.onCloseClick();
|
87
|
+
}
|
63
88
|
|
64
|
-
|
65
|
-
|
66
|
-
|
89
|
+
if(typeof(Fdbq.events["fdbq-complete"]) === "function") {
|
90
|
+
Fdbq.events["fdbq-complete"](xhr, instance);
|
91
|
+
}
|
67
92
|
}
|
68
93
|
};
|
69
94
|
|
70
|
-
|
71
|
-
|
72
|
-
|
95
|
+
xhr.open("POST", instance.config.submit.url, true);
|
96
|
+
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
97
|
+
xhr.send(parameterize(params));
|
73
98
|
}
|
74
99
|
|
75
100
|
function renderModalBody(node, instance) {
|
@@ -90,7 +115,7 @@
|
|
90
115
|
function renderFields(node, instance) {
|
91
116
|
if(!Array.isArray(instance.config.questions) || !instance.config.questions.length) return;
|
92
117
|
|
93
|
-
child =
|
118
|
+
child = D.createElement("div");
|
94
119
|
child.className = "fdbq-modal-fields";
|
95
120
|
child.id = instance.fieldsContainerSelector;
|
96
121
|
|
@@ -102,7 +127,7 @@
|
|
102
127
|
function FdbqFieldsReplaceInvalid(instance) {
|
103
128
|
if(!instance.errors || !instance.config || !instance.config.questions) return;
|
104
129
|
|
105
|
-
var fields =
|
130
|
+
var fields = D.querySelector('#'+instance.modalSelector+' .fdbq-modal-fields');
|
106
131
|
|
107
132
|
if(!fields) return;
|
108
133
|
|
@@ -129,7 +154,7 @@
|
|
129
154
|
}
|
130
155
|
|
131
156
|
function FdbqFieldsReset(instance) {
|
132
|
-
var fields =
|
157
|
+
var fields = D.getElementById(instance.fieldsContainerSelector);
|
133
158
|
|
134
159
|
if(!fields) return;
|
135
160
|
|
@@ -144,7 +169,7 @@
|
|
144
169
|
var fieldID = FdbqUUID("fdbq-field-text-"+inputID);
|
145
170
|
|
146
171
|
if(config.label) {
|
147
|
-
child =
|
172
|
+
child = D.createElement("label");
|
148
173
|
child.innerHTML = (config.required ? '<abbr title="required">*</abbr>' : "")+config.label;
|
149
174
|
child.htmlFor = fieldID;
|
150
175
|
|
@@ -159,7 +184,7 @@
|
|
159
184
|
}, { type: "text", id: inputID }));
|
160
185
|
|
161
186
|
if(config.hint) {
|
162
|
-
child =
|
187
|
+
child = D.createElement("div");
|
163
188
|
child.className = "fdbq-field-hint";
|
164
189
|
child.innerHTML = config.hint;
|
165
190
|
|
@@ -176,7 +201,7 @@
|
|
176
201
|
var fieldID = FdbqUUID("fdbq-field-string-"+inputID);
|
177
202
|
|
178
203
|
if(config.label) {
|
179
|
-
child =
|
204
|
+
child = D.createElement("label");
|
180
205
|
child.innerHTML = (config.required ? '<abbr title="required">*</abbr>' : "")+config.label;
|
181
206
|
child.htmlFor = fieldID;
|
182
207
|
|
@@ -192,7 +217,7 @@
|
|
192
217
|
}, { error: instance.errors.indexOf(config.id) >= 0, type: "string", id: config.id }));
|
193
218
|
|
194
219
|
if(config.hint) {
|
195
|
-
child =
|
220
|
+
child = D.createElement("div");
|
196
221
|
child.className = "fdbq-field-hint";
|
197
222
|
child.innerHTML = config.hint;
|
198
223
|
|
@@ -212,15 +237,15 @@
|
|
212
237
|
}
|
213
238
|
|
214
239
|
function FdbqModalHead(instance) {
|
215
|
-
var node =
|
240
|
+
var node = D.createElement("div");
|
216
241
|
node.className = "fdbq-modal-head";
|
217
242
|
|
218
243
|
// heading;
|
219
|
-
var heading =
|
244
|
+
var heading = D.createElement("h4");
|
220
245
|
heading.innerText = instance.config.modal && instance.config.modal.title || "";
|
221
246
|
|
222
247
|
// close button;
|
223
|
-
var closeButton =
|
248
|
+
var closeButton = D.createElement("button");
|
224
249
|
closeButton.innerHTML = "×";
|
225
250
|
closeButton.className = "close";
|
226
251
|
closeButton.id = instance.modalCloseSelector;
|
@@ -234,12 +259,12 @@
|
|
234
259
|
function FdbqModalBodyHeading(instance) {
|
235
260
|
if(!instance.config.subHeader) return null;
|
236
261
|
|
237
|
-
var node =
|
262
|
+
var node = D.createElement("div");
|
238
263
|
node.className = "fdbq-modal-heading";
|
239
264
|
|
240
265
|
// heading;
|
241
266
|
if(instance.config.subHeader.title) {
|
242
|
-
var child =
|
267
|
+
var child = D.createElement("h5");
|
243
268
|
child.className = "sub-heading";
|
244
269
|
child.innerText = instance.config.subHeader.title;
|
245
270
|
|
@@ -248,7 +273,7 @@
|
|
248
273
|
|
249
274
|
// sub-title;
|
250
275
|
if(instance.config.subHeader.description) {
|
251
|
-
child =
|
276
|
+
child = D.createElement("div");
|
252
277
|
child.className = "sub-heading-description";
|
253
278
|
child.innerHTML = instance.config.subHeader.description;
|
254
279
|
|
@@ -259,10 +284,10 @@
|
|
259
284
|
}
|
260
285
|
|
261
286
|
function FdbqActions(instance) {
|
262
|
-
var node =
|
287
|
+
var node = D.createElement("div");
|
263
288
|
node.className = "fdbq-modal-actions";
|
264
289
|
|
265
|
-
var child =
|
290
|
+
var child = D.createElement("button");
|
266
291
|
child.className = "submit";
|
267
292
|
child.id = instance.modalSubmitSelector;
|
268
293
|
child.innerText = "Submit";
|
@@ -273,7 +298,7 @@
|
|
273
298
|
}
|
274
299
|
|
275
300
|
function FdbqModalBody(instance) {
|
276
|
-
var node =
|
301
|
+
var node = D.createElement("div");
|
277
302
|
node.className = "fdbq-modal-body";
|
278
303
|
|
279
304
|
var child = FdbqModalBodyHeading(instance);
|
@@ -290,8 +315,8 @@
|
|
290
315
|
}
|
291
316
|
|
292
317
|
function FdbqModal(instance) {
|
293
|
-
var overlay =
|
294
|
-
var node =
|
318
|
+
var overlay = D.createElement("div");
|
319
|
+
var node = D.createElement("div");
|
295
320
|
node.className = "fdbq-modal fdbq-"+(instance.config.appearance || "fade");
|
296
321
|
node.id = instance.modalContainerSelector;
|
297
322
|
|
@@ -305,7 +330,7 @@
|
|
305
330
|
}
|
306
331
|
|
307
332
|
function FdbqAction(instance) {
|
308
|
-
var node =
|
333
|
+
var node = D.createElement("button");
|
309
334
|
node.className = FdbqClassName("fdbq-toggle", instance.config.placement);
|
310
335
|
node.id = instance.buttonSelector;
|
311
336
|
node.innerHTML = instance.config.actionHTML || instance.config.actionText || '<i class="fdbq-icon-action"></i>';
|
@@ -313,7 +338,7 @@
|
|
313
338
|
return node;
|
314
339
|
}
|
315
340
|
|
316
|
-
|
341
|
+
W.Fdbq = function(config) {
|
317
342
|
this.init = function() {
|
318
343
|
var modal = FdbqModal(this);
|
319
344
|
var action = FdbqAction(this);
|
@@ -321,9 +346,9 @@
|
|
321
346
|
this.mountNode().appendChild(modal);
|
322
347
|
this.mountNode().appendChild(action);
|
323
348
|
|
324
|
-
var button =
|
325
|
-
var closeButton =
|
326
|
-
var submitButton =
|
349
|
+
var button = D.getElementById(this.buttonSelector);
|
350
|
+
var closeButton = D.getElementById(this.modalCloseSelector);
|
351
|
+
var submitButton = D.getElementById(this.modalSubmitSelector);
|
327
352
|
|
328
353
|
if(button) {
|
329
354
|
button.removeEventListener("click", this.onActionClick);
|
@@ -338,20 +363,20 @@
|
|
338
363
|
submitButton.addEventListener("click", this.onSubmitClick.bind(this));
|
339
364
|
}
|
340
365
|
|
341
|
-
|
342
|
-
|
366
|
+
D.removeEventListener("keydown", this.handleModalKeyboardNavigation);
|
367
|
+
D.addEventListener("keydown", this.handleModalKeyboardNavigation.bind(this));
|
343
368
|
};
|
344
369
|
|
345
|
-
this.mountNode = function() { return
|
370
|
+
this.mountNode = function() { return D.querySelector(this.config.mountNode) || D.body; };
|
346
371
|
this.onActionClick = function(event) {
|
347
|
-
var modal =
|
372
|
+
var modal = D.getElementById(this.modalSelector);
|
348
373
|
|
349
374
|
if(!modal || TOGGLE_REGEX.test(modal.className)) return;
|
350
375
|
|
351
376
|
modal.className = modal.className+" show";
|
352
377
|
};
|
353
378
|
this.onCloseClick = function() {
|
354
|
-
var modal =
|
379
|
+
var modal = D.getElementById(this.modalSelector);
|
355
380
|
|
356
381
|
if(!modal || !TOGGLE_REGEX.test(modal.className)) return;
|
357
382
|
modal.className = modal.className.replace(TOGGLE_REGEX, "").trim();
|
@@ -368,7 +393,7 @@
|
|
368
393
|
for(var i = 0; i < this.config.questions.length; i++) {
|
369
394
|
var q = this.config.questions[i];
|
370
395
|
var id = questionID(q);
|
371
|
-
var field =
|
396
|
+
var field = D.querySelector('.fdbq-modal-fields [data-id="'+id+'"] [data-fdbq="field"]');
|
372
397
|
|
373
398
|
if(!field) continue;
|
374
399
|
|
@@ -390,7 +415,7 @@
|
|
390
415
|
return true;
|
391
416
|
};
|
392
417
|
this.handleModalKeyboardNavigation = function(event) {
|
393
|
-
if(event
|
418
|
+
if(event["keyCode"] === 27 || event.key === "Escape") {
|
394
419
|
this.onCloseClick();
|
395
420
|
}
|
396
421
|
};
|
@@ -406,4 +431,8 @@
|
|
406
431
|
this.modalCloseSelector = this.modalSelector+"-close";
|
407
432
|
this.modalSubmitSelector = this.modalSelector+"-submit";
|
408
433
|
};
|
409
|
-
|
434
|
+
|
435
|
+
W.Fdbq.events = {};
|
436
|
+
W.Fdbq.addEventListener = async function(eventName, callback) { Fdbq.events[eventName] = callback; };
|
437
|
+
W.Fdbq.removeEventListener = async function(eventName) { delete(Fdbq.events[eventName]); };
|
438
|
+
})(window, document);
|
@@ -1,28 +1,27 @@
|
|
1
1
|
{
|
2
|
-
"_from": "@softserveopensource/fdbq
|
3
|
-
"_id": "@softserveopensource/fdbq@0.1.
|
2
|
+
"_from": "@softserveopensource/fdbq@^0.1.2",
|
3
|
+
"_id": "@softserveopensource/fdbq@0.1.2",
|
4
4
|
"_inBundle": false,
|
5
|
-
"_integrity": "sha512-
|
5
|
+
"_integrity": "sha512-mC00T6/y2o9IvdbQvweldfi+jONA4F3zfOWCrhGVUN9Gt138Xvy8XGYg01dFWiZFL5WV/tWaUmr0D75uxqmB0Q==",
|
6
6
|
"_location": "/@softserveopensource/fdbq",
|
7
7
|
"_phantomChildren": {},
|
8
8
|
"_requested": {
|
9
|
-
"type": "
|
9
|
+
"type": "range",
|
10
10
|
"registry": true,
|
11
|
-
"raw": "@softserveopensource/fdbq
|
11
|
+
"raw": "@softserveopensource/fdbq@^0.1.2",
|
12
12
|
"name": "@softserveopensource/fdbq",
|
13
13
|
"escapedName": "@softserveopensource%2ffdbq",
|
14
14
|
"scope": "@softserveopensource",
|
15
|
-
"rawSpec": "0.1.
|
15
|
+
"rawSpec": "^0.1.2",
|
16
16
|
"saveSpec": null,
|
17
|
-
"fetchSpec": "0.1.
|
17
|
+
"fetchSpec": "^0.1.2"
|
18
18
|
},
|
19
19
|
"_requiredBy": [
|
20
|
-
"#USER",
|
21
20
|
"/"
|
22
21
|
],
|
23
|
-
"_resolved": "https://registry.npmjs.org/@softserveopensource/fdbq/-/fdbq-0.1.
|
24
|
-
"_shasum": "
|
25
|
-
"_spec": "@softserveopensource/fdbq
|
22
|
+
"_resolved": "https://registry.npmjs.org/@softserveopensource/fdbq/-/fdbq-0.1.2.tgz",
|
23
|
+
"_shasum": "c5c6c595c6673961ee039708ba25a412f8599087",
|
24
|
+
"_spec": "@softserveopensource/fdbq@^0.1.2",
|
26
25
|
"_where": "/Users/rsolomud/dev/rails/fdbq-rails/vendor",
|
27
26
|
"author": {
|
28
27
|
"name": "SoftServe OpenSource"
|
@@ -58,5 +57,5 @@
|
|
58
57
|
"scripts": {
|
59
58
|
"test": "jest"
|
60
59
|
},
|
61
|
-
"version": "0.1.
|
60
|
+
"version": "0.1.2"
|
62
61
|
}
|