Skip to content

Commit 18b6d1a

Browse files
stephanediondevstephanediondev
committed
refactoring JS
1 parent 4081110 commit 18b6d1a

File tree

3 files changed

+89
-82
lines changed

3 files changed

+89
-82
lines changed

‎assets/app-subscription.js

+74
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import $ from 'jquery';
2+
import { serviceWorkerEnabled, createToast } from 'app';
3+
14
function deleteSubscription(url) {
25
window.location.href = url;
36
}
@@ -64,6 +67,77 @@ function pushManagerUnsubscribe(url) {
6467
}
6568
}
6669

70+
function urlBase64ToUint8Array(base64String) {
71+
var padding = '='.repeat((4 - base64String.length % 4) % 4);
72+
var base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
73+
74+
var rawData = window.atob(base64);
75+
var outputArray = new Uint8Array(rawData.length);
76+
77+
for(var i = 0; i < rawData.length; ++i) {
78+
outputArray[i] = rawData.charCodeAt(i);
79+
}
80+
return outputArray;
81+
}
82+
83+
function getSubscriptionCreate() {
84+
if (true == serviceWorkerEnabled) {
85+
navigator.serviceWorker.ready.then(function(ServiceWorkerRegistration) {
86+
if ('pushManager' in ServiceWorkerRegistration) {
87+
ServiceWorkerRegistration.pushManager.getSubscription()
88+
.then(function(PushSubscription) {
89+
if (PushSubscription && 'object' === typeof PushSubscription) {
90+
var toJSON = PushSubscription.toJSON();
91+
92+
var endpoint = document.getElementById('data_endpoint');
93+
endpoint.value = PushSubscription.endpoint;
94+
95+
var publicKey = document.getElementById('data_public_key');
96+
publicKey.value = toJSON.keys.p256dh;
97+
98+
var authenticationSecret = document.getElementById('data_authentication_secret');
99+
authenticationSecret.value = toJSON.keys.auth;
100+
101+
var contentEncoding = document.getElementById('data_content_encoding');
102+
contentEncoding.value = (PushManager.supportedContentEncodings || ['aesgcm'])[0];
103+
}
104+
});
105+
}
106+
});
107+
}
108+
}
109+
110+
function pushManagerSubscribe() {
111+
if (true == serviceWorkerEnabled) {
112+
navigator.serviceWorker.ready.then(function(ServiceWorkerRegistration) {
113+
if ('pushManager' in ServiceWorkerRegistration) {
114+
ServiceWorkerRegistration.pushManager.permissionState({userVisibleOnly: true}).then(function(permissionState) {
115+
if (permissionState == 'prompt' || permissionState == 'granted') {
116+
ServiceWorkerRegistration.pushManager.subscribe(
117+
{'applicationServerKey': urlBase64ToUint8Array(applicationServerKey), 'userVisibleOnly': true}
118+
)
119+
.then(function(PushSubscription) {
120+
121+
if (PushSubscription && 'object' === typeof PushSubscription) {
122+
getSubscriptionCreate();
123+
}
124+
});
125+
}
126+
});
127+
}
128+
});
129+
}
130+
}
131+
132+
var allowNotifications = document.getElementById('allow-notifications');
133+
if (allowNotifications) {
134+
allowNotifications.addEventListener('click', function(event) {
135+
event.preventDefault();
136+
137+
pushManagerSubscribe();
138+
});
139+
}
140+
67141
$(document).ready(function() {
68142
getSubscription();
69143

‎assets/app.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -72,16 +72,18 @@ slug.charmap['/'] = '-';
7272
slug.charmap['?'] = '-';
7373
slug.charmap['='] = '-';
7474

75-
var createToast = function createToast(body) {
75+
export function createToast(body) {
7676
var toast = `<div class="toast bg-dark text-light border border-secondary" role="alert" aria-live="assertive" aria-atomic="true">
7777
<div class="toast-body">
7878
${body}
7979
</div>
8080
</div>`;
8181
$('#toast-container').prepend(toast);
82-
var toastObject = $('#toast-container .toast').first();
83-
toastObject.toast({'autohide': true, 'delay': 5000});
84-
toastObject.toast('show')
82+
var toastEl = $('#toast-container .toast').first();
83+
if (toastEl) {
84+
var toast = new Toast(toastEl, {'autohide': true, 'delay': 2500});
85+
toast.show();
86+
}
8587
}
8688

8789
function messageToServiceWorker(content) {
@@ -111,7 +113,7 @@ if (buttonInstall) {
111113
});
112114
}
113115

114-
var serviceWorkerEnabled = false;
116+
export let serviceWorkerEnabled = false;
115117

116118
if('serviceWorker' in navigator && 'https:' == window.location.protocol) {
117119
navigator.serviceWorker.register(app_base_url + 'serviceworker.js')

‎templates/Modules/subscription/subscription_create.html.twig

+8-77
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@
1111
{% include 'Modules/subscription/subscription_tabs.html.twig' with {'active': 'create_subscription_' ~ type} %}
1212
{% endblock %}
1313

14+
{% block importmap %}
15+
<script>
16+
var applicationServerKey = '{{ applicationServerKey }}';
17+
</script>
18+
19+
{{ importmap(['app', 'app-subscription']) }}
20+
{% endblock %}
21+
1422
{% block main_content %}
1523
{% embed 'Embed/block_embed.html.twig' %}
1624
{% import 'Import/app_import.html.twig' as appImport %}
@@ -44,80 +52,3 @@
4452
{% endblock %}
4553
{% endembed %}
4654
{% endblock %}
47-
48-
{% block scripts %}
49-
{{ parent() }}
50-
51-
{% if applicationServerKey and 'push' == type %}
52-
<script type="text/javascript">
53-
function urlBase64ToUint8Array(base64String) {
54-
var padding = '='.repeat((4 - base64String.length % 4) % 4);
55-
var base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
56-
57-
var rawData = window.atob(base64);
58-
var outputArray = new Uint8Array(rawData.length);
59-
60-
for(var i = 0; i < rawData.length; ++i) {
61-
outputArray[i] = rawData.charCodeAt(i);
62-
}
63-
return outputArray;
64-
}
65-
66-
function getSubscription() {
67-
if (true == serviceWorkerEnabled) {
68-
navigator.serviceWorker.ready.then(function(ServiceWorkerRegistration) {
69-
if ('pushManager' in ServiceWorkerRegistration) {
70-
ServiceWorkerRegistration.pushManager.getSubscription()
71-
.then(function(PushSubscription) {
72-
if (PushSubscription && 'object' === typeof PushSubscription) {
73-
var toJSON = PushSubscription.toJSON();
74-
75-
var endpoint = document.getElementById('data_endpoint');
76-
endpoint.value = PushSubscription.endpoint;
77-
78-
var publicKey = document.getElementById('data_public_key');
79-
publicKey.value = toJSON.keys.p256dh;
80-
81-
var authenticationSecret = document.getElementById('data_authentication_secret');
82-
authenticationSecret.value = toJSON.keys.auth;
83-
84-
var contentEncoding = document.getElementById('data_content_encoding');
85-
contentEncoding.value = (PushManager.supportedContentEncodings || ['aesgcm'])[0];
86-
}
87-
});
88-
}
89-
});
90-
}
91-
}
92-
93-
function pushManagerSubscribe() {
94-
if (true == serviceWorkerEnabled) {
95-
navigator.serviceWorker.ready.then(function(ServiceWorkerRegistration) {
96-
if ('pushManager' in ServiceWorkerRegistration) {
97-
ServiceWorkerRegistration.pushManager.permissionState({userVisibleOnly: true}).then(function(permissionState) {
98-
if (permissionState == 'prompt' || permissionState == 'granted') {
99-
ServiceWorkerRegistration.pushManager.subscribe(
100-
{'applicationServerKey': urlBase64ToUint8Array('{{ applicationServerKey }}'), 'userVisibleOnly': true}
101-
)
102-
.then(function(PushSubscription) {
103-
104-
if (PushSubscription && 'object' === typeof PushSubscription) {
105-
getSubscription();
106-
}
107-
});
108-
}
109-
});
110-
}
111-
});
112-
}
113-
}
114-
115-
var allowNotifications = document.getElementById('allow-notifications');
116-
allowNotifications.addEventListener('click', function(event) {
117-
event.preventDefault();
118-
119-
pushManagerSubscribe();
120-
});
121-
</script>
122-
{% endif %}
123-
{% endblock %}

0 commit comments

Comments
 (0)