quince 0.4.1 → 0.4.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/lib/quince/callback.js.erb +2 -1
- data/lib/quince/callback.rb +1 -0
- data/lib/quince/html_tag_components.rb +28 -0
- data/lib/quince/version.rb +1 -1
- data/scripts.js +52 -2
- 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: 896b010bef61ab4914a5cf09ad07c94d2840063788c6637422dfe6544c9bda3c
|
4
|
+
data.tar.gz: e3c39708bc888257d56ae5463619dca5bc65ace9070537af7a488e5457ffd9a4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7693d8919c8bc2f7af200afade98c9300131bf054a9a2614c9c3c80fa0eb90d2c153a092246bb7cf5b23661da2f57fde9038a712970ddecea45938eca4e4bcd5
|
7
|
+
data.tar.gz: da44b43b26aeeab5fe75579877e6e233e4425bf1befc12685ccdcc39aac445c617e16d2f28d571d1623afd1adc960db52a10918f39fc1922587e38c2aa736147
|
data/Gemfile.lock
CHANGED
data/lib/quince/callback.js.erb
CHANGED
@@ -17,7 +17,8 @@ params: Q.f(this),
|
|
17
17
|
rerender: <%= rerender.to_json %>,
|
18
18
|
<% end %>}),
|
19
19
|
`<%= rerender&.dig(:selector)&.to_s || selector %>`,
|
20
|
-
|
20
|
+
`<%= (mode = rerender&.dig(:mode)) ? mode.to_s : "replace" %>`,
|
21
|
+
<%= value.handle_errors.to_json %>,
|
21
22
|
);
|
22
23
|
<% unless push_params_state == "null" %>Q.ps(<%= push_params_state %>);<% end %>
|
23
24
|
<% if value.debounce_ms&.positive? %>
|
data/lib/quince/callback.rb
CHANGED
@@ -92,6 +92,34 @@ module Quince
|
|
92
92
|
contents
|
93
93
|
}
|
94
94
|
end
|
95
|
+
|
96
|
+
ERROR_HANDLING_STYLES = <<~CSS.freeze
|
97
|
+
.quince-err-container {
|
98
|
+
position: absolute;
|
99
|
+
bottom: 32px;
|
100
|
+
width: 300px;
|
101
|
+
height: 50px;
|
102
|
+
background-color: white;
|
103
|
+
border-radius: 4px;
|
104
|
+
border: 1px solid #bbb;
|
105
|
+
z-index: 999;
|
106
|
+
box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
|
107
|
+
padding: 0 24px;
|
108
|
+
left: calc(50vw - 50px);
|
109
|
+
}
|
110
|
+
|
111
|
+
.quince-err-msg {
|
112
|
+
font-size: 1.2em;
|
113
|
+
text-align: center;
|
114
|
+
margin: auto;
|
115
|
+
color: chocolate;
|
116
|
+
}
|
117
|
+
CSS
|
118
|
+
private_constant :ERROR_HANDLING_STYLES
|
119
|
+
|
120
|
+
def error_message_styles
|
121
|
+
style(ERROR_HANDLING_STYLES)
|
122
|
+
end
|
95
123
|
end
|
96
124
|
|
97
125
|
Quince::Component.include HtmlTagComponents
|
data/lib/quince/version.rb
CHANGED
data/scripts.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
const Q = {
|
2
|
-
c: (endpoint, payload, selector, mode
|
2
|
+
c: (endpoint, payload, selector, mode, handleErrors) => {
|
3
3
|
return fetch(
|
4
4
|
endpoint,
|
5
5
|
{
|
@@ -9,7 +9,19 @@ const Q = {
|
|
9
9
|
},
|
10
10
|
body: payload,
|
11
11
|
}
|
12
|
-
).then(resp =>
|
12
|
+
).then(resp => {
|
13
|
+
if (resp.status <= 299) {
|
14
|
+
return resp.text()
|
15
|
+
} else if (resp.status >= 500) {
|
16
|
+
throw Q.em["500"];
|
17
|
+
} else {
|
18
|
+
let msg = Q.em[`${resp.code}`];
|
19
|
+
|
20
|
+
if (!msg && resp.code >= 400) msg = Q.em.generic;
|
21
|
+
|
22
|
+
throw msg;
|
23
|
+
}
|
24
|
+
}).then(html => {
|
13
25
|
const element = document.querySelector(selector);
|
14
26
|
if (!element) {
|
15
27
|
throw `element not found for ${selector}`;
|
@@ -49,6 +61,20 @@ const Q = {
|
|
49
61
|
default:
|
50
62
|
throw `mode ${mode} is not valid`;
|
51
63
|
}
|
64
|
+
}).catch(err => {
|
65
|
+
if (!handleErrors) throw err;
|
66
|
+
|
67
|
+
let msg;
|
68
|
+
if (typeof err === "string") {
|
69
|
+
msg = err;
|
70
|
+
} else if (err.message) {
|
71
|
+
if (err.message.startsWith("NetworkError")) {
|
72
|
+
msg = Q.em.network;
|
73
|
+
} else {
|
74
|
+
msg = err.message;
|
75
|
+
}
|
76
|
+
} else msg = Q.em.generic;
|
77
|
+
Q.e(msg, 2500);
|
52
78
|
})
|
53
79
|
},
|
54
80
|
f: (elem) => {
|
@@ -79,5 +105,29 @@ const Q = {
|
|
79
105
|
url.searchParams.append(p, stateObj[p]);
|
80
106
|
};
|
81
107
|
window.history.pushState({}, document.title, url);
|
108
|
+
},
|
109
|
+
e: (msg, durationMs) => {
|
110
|
+
const containerClassName = "quince-err-container";
|
111
|
+
document.querySelectorAll(`.${containerClassName}`).forEach(e => e.remove());
|
112
|
+
const container = document.createElement("div");
|
113
|
+
const strong = document.createElement("strong");
|
114
|
+
strong.innerText = msg;
|
115
|
+
container.className = containerClassName;
|
116
|
+
strong.className = "quince-err-msg";
|
117
|
+
container.appendChild(strong);
|
118
|
+
document.body.insertAdjacentElement("afterbegin", container);
|
119
|
+
setTimeout(() => container.remove(), durationMs);
|
120
|
+
},
|
121
|
+
em: {
|
122
|
+
400: "Bad request",
|
123
|
+
401: "Unauthorised",
|
124
|
+
402: "Payment required",
|
125
|
+
403: "Forbidden",
|
126
|
+
404: "Not found",
|
127
|
+
422: "Unprocessable entity",
|
128
|
+
429: "Too many requests",
|
129
|
+
500: "Internal server error",
|
130
|
+
generic: "An error occurred",
|
131
|
+
network: "Network error",
|
82
132
|
}
|
83
133
|
};
|