turbolinks-form 0.0.6 → 0.0.7
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/app/assets/javascripts/turbolinks-form-core.js +115 -118
- data/lib/turbolinks/form/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 68b295d51c1948564055c96aa9633189b406fe99
|
4
|
+
data.tar.gz: a0f9a39e4266b8677eca99642688490115dd9ae3
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 48b377206054822b6e8e9917715a7debd49d0b85846d67fb50c835adc049a47dd5cb380ae8715d5bfdf8b988d10c433199bd02d74142c5528f9c4659297e8635
|
7
|
+
data.tar.gz: e730d8f0d459c64082dd184a4941d37b5c9817d703fcf827b5fc5b891b7dcf16bcb308a515b4bbefa00e1df952fcc1fc667056d625bc3831395b93cf8047136d
|
@@ -1,134 +1,131 @@
|
|
1
|
+
// As documented on the reference below, turbolinks 5 does not treat a render
|
2
|
+
// after a form submit by default, leaving the users to implement their own
|
3
|
+
// solutions.
|
4
|
+
//
|
5
|
+
// https://github.com/turbolinks/turbolinks/issues/85#issuecomment-323446272
|
6
|
+
//
|
7
|
+
// The code below imitates the behavior of turbolinks when treating regular GET
|
8
|
+
// responses. Namely, it:
|
9
|
+
// - Replaces only the body of the page
|
10
|
+
// - It runs all script tags on the body of the new page
|
11
|
+
// - It fires the turbolinks:load event
|
12
|
+
//
|
13
|
+
// This doesn't mean it does ALL what turbolinks does. For example, we don't
|
14
|
+
// merge script tags from old and new page <head> elements.
|
15
|
+
// This also doesn't change the browser history or does any change to the URL.
|
16
|
+
// The reason we don't do such things is simply that this is a solution to
|
17
|
+
// render errors in forms, and usually we render the same page/form rendered
|
18
|
+
// before the submit.
|
19
|
+
|
20
|
+
var TurbolinksForm = function(){};
|
21
|
+
|
22
|
+
TurbolinksForm.handleResponse = function(response) {
|
23
|
+
// parses response
|
24
|
+
var newDom = new DOMParser().parseFromString(response.responseText, "text/html");
|
25
|
+
|
26
|
+
// Some browsers (PhantomJS and earlier versions of Firefox and IE) don't implement
|
27
|
+
// parsing from string for "text/html" format. So we use an alternative method
|
28
|
+
// described here:
|
29
|
+
// https://developer.mozilla.org/en-US/Add-ons/Code_snippets/HTML_to_DOM#Parsing_Complete_HTML_to_DOM
|
30
|
+
if (newDom == null) {
|
31
|
+
newDom = document.implementation.createHTMLDocument("document");
|
32
|
+
newDom.documentElement.innerHTML = response.responseText;
|
33
|
+
}
|
1
34
|
|
35
|
+
if (newDom == null) {
|
36
|
+
console.error("turbolinks-form was not able to parse response from server.");
|
37
|
+
}
|
2
38
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
//
|
7
|
-
|
8
|
-
//
|
9
|
-
//
|
10
|
-
//
|
11
|
-
//
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
// This also doesn't change the browser history or does any change to the URL.
|
20
|
-
// The reason we don't do such things is simply that this is a solution to
|
21
|
-
// render errors in forms, and usually we render the same page/form rendered
|
22
|
-
// before the submit.
|
23
|
-
var handleResponse = function(response) {
|
24
|
-
// parses response
|
25
|
-
var newDom = new DOMParser().parseFromString(response.responseText, "text/html");
|
26
|
-
|
27
|
-
// Some browsers (PhantomJS and earlier versions of Firefox and IE) don't implement
|
28
|
-
// parsing from string for "text/html" format. So we use an alternative method
|
29
|
-
// described here:
|
30
|
-
// https://developer.mozilla.org/en-US/Add-ons/Code_snippets/HTML_to_DOM#Parsing_Complete_HTML_to_DOM
|
31
|
-
if (newDom == null) {
|
32
|
-
newDom = document.implementation.createHTMLDocument("document");
|
33
|
-
newDom.documentElement.innerHTML = response.responseText;
|
34
|
-
}
|
35
|
-
|
36
|
-
if (newDom == null) {
|
37
|
-
console.error("turbolinks-form was not able to parse response from server.");
|
38
|
-
}
|
39
|
+
// dispatches turbolinks event
|
40
|
+
Turbolinks.dispatch('turbolinks:before-render', {data: {newBody: newDom.body}});
|
41
|
+
|
42
|
+
// console.log('before-render')
|
43
|
+
|
44
|
+
// Removes/saves all script tags contents.
|
45
|
+
// Most browsers don't run the new <script> tags when we replace the page body,
|
46
|
+
// but some do (like PhantomJS). So we clear all script tags to ensure nothing
|
47
|
+
// will run on any browser.
|
48
|
+
var newBodyScripts = newDom.body.getElementsByTagName('script');
|
49
|
+
var newBodyScriptContents = [];
|
50
|
+
for (var i=0; i<newBodyScripts.length; i++) {
|
51
|
+
var script = newBodyScripts[i];
|
52
|
+
newBodyScriptContents.push(script.text);
|
53
|
+
script.text = "";
|
54
|
+
}
|
39
55
|
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
var newBodyScripts = newDom.body.getElementsByTagName('script');
|
50
|
-
var newBodyScriptContents = [];
|
51
|
-
for (var i=0; i<newBodyScripts.length; i++) {
|
52
|
-
var script = newBodyScripts[i];
|
53
|
-
newBodyScriptContents.push(script.text);
|
54
|
-
script.text = "";
|
56
|
+
// if there is no target, replaces whole body
|
57
|
+
var target;
|
58
|
+
if (!response.getResponseHeader('turbolinks-form-render-target')) {
|
59
|
+
document.body = newDom.body;
|
60
|
+
target = document.body;
|
61
|
+
} else {
|
62
|
+
target = $(response.getResponseHeader('turbolinks-form-render-target'), document.body)[0];
|
63
|
+
while (target.firstChild) {
|
64
|
+
target.removeChild(target.firstChild);
|
55
65
|
}
|
56
|
-
|
57
|
-
|
58
|
-
var target;
|
59
|
-
if (!response.getResponseHeader('turbolinks-form-render-target')) {
|
60
|
-
document.body = newDom.body;
|
61
|
-
target = document.body;
|
62
|
-
} else {
|
63
|
-
target = $(response.getResponseHeader('turbolinks-form-render-target'), document.body)[0];
|
64
|
-
while (target.firstChild) {
|
65
|
-
target.removeChild(target.firstChild);
|
66
|
-
}
|
67
|
-
while (newDom.body.firstChild) {
|
68
|
-
target.appendChild(newDom.body.removeChild(newDom.body.firstChild));
|
69
|
-
}
|
66
|
+
while (newDom.body.firstChild) {
|
67
|
+
target.appendChild(newDom.body.removeChild(newDom.body.firstChild));
|
70
68
|
}
|
69
|
+
}
|
71
70
|
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
// console.log('render')
|
71
|
+
// dispatches turbolinks event
|
72
|
+
Turbolinks.dispatch('turbolinks:render');
|
76
73
|
|
77
|
-
|
78
|
-
var bodyScripts = target.getElementsByTagName('script');
|
79
|
-
for (var i=0; i<bodyScripts.length; i++) {
|
80
|
-
var script = bodyScripts[i];
|
81
|
-
var newScript = document.createElement("script");
|
82
|
-
newScript.text = newBodyScriptContents[i];
|
83
|
-
script.parentNode.replaceChild(newScript, script);
|
84
|
-
}
|
74
|
+
// console.log('render')
|
85
75
|
|
86
|
-
|
87
|
-
|
76
|
+
// Add scripts to body, so they are run on any browser
|
77
|
+
var bodyScripts = target.getElementsByTagName('script');
|
78
|
+
for (var i=0; i<bodyScripts.length; i++) {
|
79
|
+
var script = bodyScripts[i];
|
80
|
+
var newScript = document.createElement("script");
|
81
|
+
newScript.text = newBodyScriptContents[i];
|
82
|
+
script.parentNode.replaceChild(newScript, script);
|
88
83
|
}
|
89
84
|
|
85
|
+
scrollTo(0, 0);
|
86
|
+
Turbolinks.dispatch("turbolinks:load");
|
87
|
+
}
|
88
|
+
|
89
|
+
|
90
|
+
// This code is only activated if:
|
91
|
+
// 1) HTTP status code is 422 unprocessable_entity
|
92
|
+
// 2) Response has the 'turbolinks-form-render' header
|
93
|
+
//
|
94
|
+
// PS: it is also activated on errors with code 500, so that we can know the
|
95
|
+
// error is happening and not that the site is unresponsive
|
96
|
+
$(document).on("ajax:error", function(e, response) {
|
97
|
+
// dispatches turbolinks event
|
98
|
+
Turbolinks.dispatch('turbolinks:request-end', {data: {xhr: response}});
|
99
|
+
|
100
|
+
var isError500 = (response.status == 500)
|
101
|
+
var isFormErrorResponse = (response.status == 422 && response.getResponseHeader('turbolinks-form-render'));
|
102
|
+
if (isError500 || isFormErrorResponse) {
|
103
|
+
TurbolinksForm.handleResponse(response);
|
104
|
+
}
|
105
|
+
});
|
90
106
|
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
//
|
96
|
-
|
97
|
-
$(document).on("ajax:error", function(e, response) {
|
98
|
-
// dispatches turbolinks event
|
99
|
-
Turbolinks.dispatch('turbolinks:request-end', {data: {xhr: response}});
|
100
|
-
|
101
|
-
var isError500 = (response.status == 500)
|
102
|
-
var isFormErrorResponse = (response.status == 422 && response.getResponseHeader('turbolinks-form-render'));
|
103
|
-
if (isError500 || isFormErrorResponse) {
|
104
|
-
handleResponse(response);
|
105
|
-
}
|
106
|
-
});
|
107
|
-
|
108
|
-
// This code is only activated if:
|
109
|
-
// 1) HTTP status code is 200
|
110
|
-
// 2) Response has 'turbolinks-form-render' header and 'turbolinks-form-render-when-success' header
|
111
|
-
$(document).on("ajax:success", function(e, data, status, response) {
|
112
|
-
// dispatches turbolinks event
|
113
|
-
Turbolinks.dispatch('turbolinks:request-end', {data: {xhr: response}});
|
114
|
-
|
115
|
-
var isFormSuccessResponse = (response.status == 200 && response.getResponseHeader('turbolinks-form-render') && response.getResponseHeader('turbolinks-form-render-when-success'));
|
116
|
-
if (isFormSuccessResponse) {
|
117
|
-
handleResponse(response);
|
118
|
-
}
|
119
|
-
});
|
107
|
+
// This code is only activated if:
|
108
|
+
// 1) HTTP status code is 200
|
109
|
+
// 2) Response has 'turbolinks-form-render' header and 'turbolinks-form-render-when-success' header
|
110
|
+
$(document).on("ajax:success", function(e, data, status, response) {
|
111
|
+
// dispatches turbolinks event
|
112
|
+
Turbolinks.dispatch('turbolinks:request-end', {data: {xhr: response}});
|
120
113
|
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
114
|
+
var isFormSuccessResponse = (response.status == 200 && response.getResponseHeader('turbolinks-form-render') && response.getResponseHeader('turbolinks-form-render-when-success'));
|
115
|
+
if (isFormSuccessResponse) {
|
116
|
+
TurbolinksForm.handleResponse(response);
|
117
|
+
}
|
118
|
+
});
|
126
119
|
|
127
|
-
|
128
|
-
|
120
|
+
// Sets up event delegation to forms with data-turbolinks-form attribute
|
121
|
+
$(document).on("ajax:beforeSend", "[data-turbolinks-form]", function(e, xhr, settings) {
|
122
|
+
// adds the turbolinks-form-submit header for forms with data-turbolinks-form attribute being submitted,
|
123
|
+
// so the controller knows it has to put the turbolinks-form-render header on the response
|
124
|
+
xhr.setRequestHeader('turbolinks-form-submit', '1');
|
129
125
|
|
130
|
-
|
131
|
-
|
132
|
-
});
|
126
|
+
// changes default Accept header to say we preferably want an HTML content as a response
|
127
|
+
xhr.setRequestHeader('Accept', '*/*;q=0.5, text/javascript;q=0.9, application/javascript;q=0.9, application/ecmascript;q=0.9, application/x-ecmascript;q=0.9, text/html')
|
133
128
|
|
129
|
+
// dispatches turbolinks event
|
130
|
+
Turbolinks.dispatch('turbolinks:request-start', {data: {xhr: xhr}});
|
134
131
|
});
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: turbolinks-form
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.7
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Henrique Gubert
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2019-04-24 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|