110swag / flashy-frontend

Download as
Browse Code ยป

Commit 17907a95c7a56da82008ccfe4d7749847bf79d90

Authored by Andrew Buss
1 parent 62d8453e5c
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

fixed up settingscontroller; added callbacks on deck for push/pull

Showing 3 changed files with 218 additions and 213 deletions Inline Diff

scripts/CardGridController.js View file @ 17907a9
angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).CardGridController = 1 1 angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).CardGridController =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
$scope.cards = []; 3 3 $scope.cards = [];
$scope.deck = []; 4 4 $scope.deck = [];
$scope.cardCols = []; // organized data 5 5 $scope.cardCols = []; // organized data
$scope.numCols = 0; 6 6 $scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card} 7 7 $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId); 8 8 $scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId}); 9 9 $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
$scope.showGrid = false; 10 10 $scope.showGrid = false;
$scope.moveQueue = []; 11 11 $scope.moveQueue = [];
$rootScope.currentSection = $scope.section; 12 12 $rootScope.currentSection = $scope.section;
13 13
if (!UserService.isInSection($scope.sectionId)) { 14 14 if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId); 15 15 console.log('user is not enrolled in ' + $scope.sectionId);
$state.go('addclass'); 16 16 $state.go('addclass');
} 17 17 }
18 18
$scope.refreshColumnWidth = function() { 19 19 $scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17; 20 20 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 21 21 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 22 22 $('.cardColumn').css({
width: width + 'px', 23 23 width: width + 'px',
'font-size': 100 * width / 250 + '%' 24 24 'font-size': 100 * width / 250 + '%'
}); 25 25 });
$('.cardColumn .card.flashy').css({ 26 26 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 27 27 width: width - 12 + 'px',
height: (width * 3 / 5) + 'px' 28 28 height: (width * 3 / 5) + 'px'
}); 29 29 });
}; 30 30 };
$scope.refreshLayout = function() { 31 31 $scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250)); 32 32 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
33 33
// check if we actually need to refresh the whole layout 34 34 // check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth(); 35 35 if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols; 36 36 $scope.numCols = numCols;
console.log('refreshing layout for ' + numCols + ' columns'); 37 37 console.log('refreshing layout for ' + numCols + ' columns');
$scope.cardCols = []; 38 38 $scope.cardCols = [];
var cols = []; 39 39 var cols = [];
for (var i = 0; i < numCols; i++) cols.push([]); 40 40 for (var i = 0; i < numCols; i++) cols.push([]);
var n = 0; 41 41 var n = 0;
$scope.cards.forEach(function(card, j) { 42 42 $scope.cards.forEach(function(card, j) {
card.colNum = n++ % numCols; 43 43 card.colNum = n++ % numCols;
cols[card.colNum].push(card); 44 44 cols[card.colNum].push(card);
}); 45 45 });
for (i in cols) $scope.updateColRanks(cols[i]); 46 46 for (i in cols) $scope.updateColRanks(cols[i]);
console.log(cols); 47 47 console.log(cols);
return $timeout(function() { 48 48 return $timeout(function() {
$scope.cardCols = cols; 49 49 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 50 50 $timeout($scope.refreshColumnWidth);
}); 51 51 });
52 52
}; 53 53 };
54 54
angular.element($window).bind('resize', $scope.refreshLayout); 55 55 angular.element($window).bind('resize', $scope.refreshLayout);
56 56
$scope.ws_host = window.location.origin.replace('http', 'ws'); 57 57 $scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user'); 58 58 $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() { 59 59 $scope.deck_ws.onOpen(function() {
console.log('deck ws open'); 60 60 console.log('deck ws open');
}); 61 61 });
62 62
$scope.deck_ws.onMessage(function(message) { 63 63 $scope.deck_ws.onMessage(function(message) {
data = JSON.parse(message.data); 64 64 data = JSON.parse(message.data);
console.log('message', data); 65 65 console.log('message', data);
card = new Flashcard(data.flashcard.id); 66 66 card = new Flashcard(data.flashcard);
if (data.event_type == 'card_pulled') { 67 67 if (data.event_type == 'card_pulled') {
$scope.deck[card.id] = card; 68 68 $scope.deck[card.id] = card;
69 if ($scope.deckPullCallback) $scope.deckPullCallback(card);
} 69 70 }
if (data.event_type == 'card_unpulled') { 70 71 if (data.event_type == 'card_unpulled') {
$scope.deck[card.id] = undefined; 71 72 $scope.deck[card.id] = undefined;
73 if ($scope.deckUnpullCallback) $scope.deckUnpullCallback(card);
} 72 74 }
if (data.event_type == 'card_hidden') { 73 75 if (data.event_type == 'card_hidden') {
$scope.hideCardFromGrid(card); 74 76 $scope.hideCardFromGrid(card);
} 75 77 }
}); 76 78 });
77 79
$scope.cardInDeck = function(id) { 78 80 $scope.cardInDeck = function(id) {
return $scope.deck[id]; 79 81 return $scope.deck[id];
}; 80 82 };
$scope.addCardToGrid = function(card) { 81 83 $scope.addCardToGrid = function(card) {
var colNum = 0; 82 84 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 83 85 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 84 86 var lowestColNum = 0;
while (colNum < $scope.numCols) { 85 87 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 86 88 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 87 89 lowestCol = $scope.cardCols[colNum];
break; 88 90 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 89 91 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 90 92 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 91 93 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 92 94 lowestColLen = $scope.cardCols[colNum].length;
} 93 95 }
colNum++; 94 96 colNum++;
} 95 97 }
console.log(card); 96 98 console.log(card);
$scope.cards.push(data); 97 99 $scope.cards.push(data);
lowestCol.unshift(card); 98 100 lowestCol.unshift(card);
card.colNum = lowestColNum; 99 101 card.colNum = lowestColNum;
$scope.updateColRanks(lowestCol); 100 102 $scope.updateColRanks(lowestCol);
$timeout($scope.refreshColumnWidth); 101 103 $timeout($scope.refreshColumnWidth);
102 104
}; 103 105 };
104 106
$scope.updateColRanks = function(col) { 105 107 $scope.updateColRanks = function(col) {
for (i in col) 106 108 for (i in col)
col[i].colRank = parseInt(i); 107 109 col[i].colRank = parseInt(i);
}; 108 110 };
109 111
$scope.hideCardFromGrid = function(card) { 110 112 $scope.hideCardFromGrid = function(card) {
console.log('hiding', card); 111 113 console.log('hiding', card);
$scope.cardCols[card.colNum].splice(card.colRank, 1); 112 114 $scope.cardCols[card.colNum].splice(card.colRank, 1);
$scope.updateColRanks($scope.cardCols[card.colNum]); 113 115 $scope.updateColRanks($scope.cardCols[card.colNum]);
console.log($scope.cardCols); 114 116 console.log($scope.cardCols);
}; 115 117 };
116 118
scripts/DeckController.js View file @ 17907a9
angular.module('flashy.DeckController', ['ui.router', 'ngWebSocket']). 1 1 angular.module('flashy.DeckController', ['ui.router', 'ngWebSocket']).
2 2
controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) { 3 3 controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
angular.module('flashy.CardGridController').CardGridController.apply(this, arguments).then(function() { 4 4 angular.module('flashy.CardGridController').CardGridController.apply(this, arguments).then(function() {
$scope.refreshLayout(); 5 5 $scope.refreshLayout();
}); 6 6 });
$scope.cards = $scope.deck; 7 7 $scope.cards = $scope.deck;
8 $scope.deckPullCallback = $scope.addCardToGrid;
9 $scope.deckUnpullCallback = $scope.hideCardFromGrid;
10
} 8 11 }
scripts/SettingsController.js View file @ 17907a9
angular.module('flashy.SettingsController', ['ui.router']). 1 1 angular.module('flashy.SettingsController', ['ui.router']).
2 2
controller('SettingsController', function($scope, $http) { 3 3 controller('SettingsController', function($scope, $http) {
$scope.changePassword = function(oldPassword, newPassword, confirmedNewPassword) { 4 4 $scope.changePassword = function(oldPassword, newPassword, confirmedNewPassword) {
5 5
}; 6 6 };
console.log('checking to see if chrome'); 7 7 console.log('checking to see if chrome');
if (!chrome) { 8 8 if (!chrome) {
return; 9 9 return;
} 10 10 }
console.log('chrome'); 11 11 console.log('chrome');
}); 12
13 12
console.log('executing things outside of module'); 14 13 console.log('executing things outside of module');
var PUSH_SERVER_URL = '/app/subscribe/'; 15 14 var PUSH_SERVER_URL = '/app/subscribe/';
16 15
function onPushSubscription(pushSubscription) { 17 16 function onPushSubscription(pushSubscription) {
console.log('pushSubscription = ', pushSubscription.endpoint); 18 17 console.log('pushSubscription = ', pushSubscription.endpoint);
// Here we would normally send the endpoint 19 18 // Here we would normally send the endpoint
// and subscription ID to our server. 20 19 // and subscription ID to our server.
// In this demo we just use send these values to 21 20 // In this demo we just use send these values to
// our server via XHR which sends a push message. 22 21 // our server via XHR which sends a push message.
23 22
console.log('pushSubscription: ', pushSubscription); 24 23 console.log('pushSubscription: ', pushSubscription);
25 24
// Code to handle the XHR 26 25 // Code to handle the XHR
var formData = new FormData(); 27 26 var formData = new FormData();
28 27
var endpoint = pushSubscription.endpoint; 29 28 var endpoint = pushSubscription.endpoint;
30 29
if ('subscriptionId' in pushSubscription) { 31 30 if ('subscriptionId' in pushSubscription) {
// Make the endpoint always contain the subscriptionId 32 31 // Make the endpoint always contain the subscriptionId
// so the server is always consistent 33 32 // so the server is always consistent
if (!endpoint.includes(pushSubscription.subscriptionId)) { 34 33 if (!endpoint.includes(pushSubscription.subscriptionId)) {
endpoint += '/' + pushSubscription.subscriptionId; 35 34 endpoint += '/' + pushSubscription.subscriptionId;
} 36 35 }
} 37 36 }
38 37
formData.append('registration_id', endpoint); 39 38 formData.append('registration_id', endpoint);
console.log('registration_id: ', endpoint); 40 39 console.log('registration_id: ', endpoint);
41 40
console.log('tryna push'); 42 41 console.log('tryna push');
43 42
var req = new XMLHttpRequest(); 44 43 var req = new XMLHttpRequest();
req.addEventListener('load', function(response) { 45 44 req.addEventListener('load', function(response) {
console.log('response: ', response); 46 45 console.log('response: ', response);
}); 47 46 });
req.addEventListener('error', function(error) { 48 47 req.addEventListener('error', function(error) {
console.log('error: ', error); 49 48 console.log('error: ', error);
}); 50 49 });
req.open('POST', PUSH_SERVER_URL); 51 50 req.open('POST', PUSH_SERVER_URL);
req.send(formData); 52 51 req.send(formData);
console.log('pushed?'); 53 52 console.log('pushed?');
54 53
} 55 54 }
56 55
function subscribeDevice() { 57 56 function subscribeDevice() {
// We need the service worker registration to access the push manager 58 57 // We need the service worker registration to access the push manager
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 59 58 navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe() 60 59 serviceWorkerRegistration.pushManager.subscribe()
.then(onPushSubscription) 61 60 .then(onPushSubscription)
.catch(function(e) { 62 61 .catch(function(e) {
console.log('Error in subscribing'); 63 62 console.log('Error in subscribing');
// Check for a permission prompt issue 64 63 // Check for a permission prompt issue
if ('permissions' in navigator) { 65 64 if ('permissions' in navigator) {
navigator.permissions.query({name: 'push', userVisibleOnly: true}) 66 65 navigator.permissions.query({name: 'push', userVisibleOnly: true})
.then(function(permissionStatus) { 67 66 .then(function(permissionStatus) {
console.log('subscribe() Error: Push permission status = ', 68 67 console.log('subscribe() Error: Push permission status = ',
permissionStatus); 69 68 permissionStatus);
if (permissionStatus.status === 'denied') { 70 69 if (permissionStatus.status === 'denied') {
// The user blocked the permission prompt 71 70 // The user blocked the permission prompt
71 console.log('Ooops Notifications are Blocked',
72 'Unfortunately you just permanently blocked notifications. ' +
73 'Please unblock / allow them to switch on push ' +
74 'notifications.');
75 } else {
76 console.log('Ooops Push Couldn\'t Register',
77 '<p>When we tried to ' +
78 'get the subscription ID for GCM, something went wrong,' +
79 ' not sure why.</p>' +
80 '<p>Have you defined "gcm_sender_id" and ' +
81 '"gcm_user_visible_only" in the manifest?</p>' +
82 '<p>Error message: ' +
83 e.message +
84 '</p>');
85 }
86 }).catch(function(err) {
87 console.log('Ooops Push Couldn\'t Register',
88 '<p>When we tried to ' +
89 'get the subscription ID for GCM, something went wrong, not ' +
90 'sure why.</p>' +
91 '<p>Have you defined "gcm_sender_id" and ' +
92 '"gcm_user_visible_only" in the manifest?</p>' +
93 '<p>Error message: ' +
94 err.message +
95 '</p>');
96 });
97 } else {
98 // Use notification permission to do something
99 if (Notification.permission === 'denied') {
console.log('Ooops Notifications are Blocked', 72 100 console.log('Ooops Notifications are Blocked',
'Unfortunately you just permanently blocked notifications. ' + 73 101 'Unfortunately you just permanently blocked notifications. ' +
'Please unblock / allow them to switch on push ' + 74 102 'Please unblock / allow them to switch on push notifications.');
'notifications.'); 75
} else { 76 103 } else {
console.log('Ooops Push Couldn\'t Register', 77 104 console.log('Ooops Push Couldn\'t Register',
'<p>When we tried to ' + 78 105 '<p>When we tried to ' +
'get the subscription ID for GCM, something went wrong,' + 79 106 'get the subscription ID for GCM, something went wrong, not ' +
' not sure why.</p>' + 80 107 'sure why.</p>' +
'<p>Have you defined "gcm_sender_id" and ' + 81 108 '<p>Have you defined "gcm_sender_id" and ' +
'"gcm_user_visible_only" in the manifest?</p>' + 82 109 '"gcm_user_visible_only" in the manifest?</p>' +
'<p>Error message: ' + 83 110 '<p>Error message: ' +
e.message + 84 111 e.message +
'</p>'); 85 112 '</p>');
} 86 113 }
}).catch(function(err) { 87 114 }
console.log('Ooops Push Couldn\'t Register', 88 115 });
'<p>When we tried to ' + 89
'get the subscription ID for GCM, something went wrong, not ' + 90
'sure why.</p>' + 91
'<p>Have you defined "gcm_sender_id" and ' + 92
'"gcm_user_visible_only" in the manifest?</p>' + 93
'<p>Error message: ' + 94
err.message + 95
'</p>'); 96
}); 97
} else { 98
// Use notification permission to do something 99
if (Notification.permission === 'denied') { 100
console.log('Ooops Notifications are Blocked', 101
'Unfortunately you just permanently blocked notifications. ' + 102
'Please unblock / allow them to switch on push notifications.'); 103
} else { 104
console.log('Ooops Push Couldn\'t Register', 105
'<p>When we tried to ' + 106
'get the subscription ID for GCM, something went wrong, not ' + 107
'sure why.</p>' + 108
'<p>Have you defined "gcm_sender_id" and ' + 109
'"gcm_user_visible_only" in the manifest?</p>' + 110
'<p>Error message: ' + 111
e.message + 112
'</p>'); 113
} 114
} 115
}); 116 116 });
}); 117 117 }
} 118
119 118
function unsubscribeDevice() { 120 119 function unsubscribeDevice() {
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 121 120 navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.getSubscription().then( 122 121 serviceWorkerRegistration.pushManager.getSubscription().then(
function(pushSubscription) { 123 122 function(pushSubscription) {
// Check we have everything we need to unsubscribe 124 123 // Check we have everything we need to unsubscribe
if (!pushSubscription) { 125 124 if (!pushSubscription) {
return; 126 125 return;
} 127 126 }
128 127
// TODO: Remove the device details from the server 129 128 // TODO: Remove the device details from the server
// i.e. the pushSubscription.subscriptionId and 130 129 // i.e. the pushSubscription.subscriptionId and
// pushSubscription.endpoint 131 130 // pushSubscription.endpoint
132 131
pushSubscription.unsubscribe().then(function(successful) { 133 132 pushSubscription.unsubscribe().then(function(successful) {
console.log('Unsubscribed from push: ', successful); 134 133 console.log('Unsubscribed from push: ', successful);
if (!successful) { 135 134 if (!successful) {
// The unsubscribe was unsuccessful, but we can 136 135 // The unsubscribe was unsuccessful, but we can
// remove the subscriptionId from our server 137 136 // remove the subscriptionId from our server
// and notifications will stop 138 137 // and notifications will stop
// This just may be in a bad state when the user returns 139 138 // This just may be in a bad state when the user returns
console.error('We were unable to unregister from push'); 140 139 console.error('We were unable to unregister from push');
} 141 140 }
142 141
}).catch(function(e) { 143 142 }).catch(function(e) {
console.log('Unsubscribtion error: ', e); 144 143 console.log('Unsubscribtion error: ', e);
}); 145 144 });
}.bind(this)).catch(function(e) { 146 145 }.bind(this)).catch(function(e) {
console.error('Error thrown while revoking push notifications. ' + 147 146 console.error('Error thrown while revoking push notifications. ' +
'Most likely because push was never registered', e); 148 147 'Most likely because push was never registered', e);
148 });
}); 149 149 });
}); 150 150 }
} 151
152 151
function permissionStatusChange(permissionStatus) { 153 152 function permissionStatusChange(permissionStatus) {
console.log('permissionStatusChange = ', permissionStatus); 154 153 console.log('permissionStatusChange = ', permissionStatus);
// If the notification permission is denied, it's a permanent block 155 154 // If the notification permission is denied, it's a permanent block
switch (permissionStatus.status) { 156 155 switch (permissionStatus.status) {
case 'denied': 157 156 case 'denied':
console.log('Ooops Push has been Blocked', 158 157 console.log('Ooops Push has been Blocked',
'Unfortunately the user permanently blocked push. Please unblock / ' + 159 158 'Unfortunately the user permanently blocked push. Please unblock / ' +
'allow them to switch on push notifications.'); 160 159 'allow them to switch on push notifications.');
break; 161 160 break;
case 'granted': 162 161 case 'granted':
// Set the state of the push switch 163 162 // Set the state of the push switch
console.log('case granted'); 164 163 console.log('case granted');
break; 165 164 break;
case 'prompt': 166 165 case 'prompt':
console.log('case prompt'); 167 166 console.log('case prompt');
break; 168 167 break;
} 169 168 }
} 170 169 }
171 170
function setUpPushPermission() { 172 171 function setUpPushPermission() {
navigator.permissions.query({name: 'push', userVisibleOnly: true}) 173 172 navigator.permissions.query({name: 'push', userVisibleOnly: true})
.then(function(permissionStatus) { 174 173 .then(function(permissionStatus) {
// Set the initial state 175 174 // Set the initial state
permissionStatusChange(permissionStatus); 176 175 permissionStatusChange(permissionStatus);
177 176
// Handle Permission State Changes 178 177 // Handle Permission State Changes
permissionStatus.onchange = function() { 179 178 permissionStatus.onchange = function() {
permissionStatusChange(this); 180 179 permissionStatusChange(this);
}; 181 180 };
182 181
182 // Check if push is supported and what the current state is
183 navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
184 // Let's see if we have a subscription already
185 serviceWorkerRegistration.pushManager.getSubscription()
186 .then(function(subscription) {
187 if (!subscription) {
188 // NOOP
189 return;
190 }
191
192 // Update the current state with the
193 // subscriptionid and endpoint
194 onPushSubscription(subscription);
195 })
196 .catch(function(e) {
197 console.log('An error occured while calling getSubscription()', e);
198 });
199 });
200 }).catch(function(err) {
201 console.log('Ooops Unable to check the permission',
202 'Unfortunately the permission for push notifications couldn\'t be ' +
203 'checked. Are you on Chrome 43+?');
204 });
205 }
206
207 function setUpNotificationPermission() {
208 // If the notification permission is denied, it's a permanent block
209 if (Notification.permission === 'denied') {
210 console.log('Ooops Notifications are Blocked',
211 'Unfortunately notifications are permanently blocked. Please unblock / ' +
212 'allow them to switch on push notifications.');
213 return;
214 } else if (Notification.permission === 'default') {
215 console.log('notification permissions === default');
216 return;
217 }
218
// Check if push is supported and what the current state is 183 219 // Check if push is supported and what the current state is
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 184 220 navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
// Let's see if we have a subscription already 185 221 // Let's see if we have a subscription already
serviceWorkerRegistration.pushManager.getSubscription() 186 222 serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) { 187 223 .then(function(subscription) {
if (!subscription) { 188 224 if (!subscription) {
// NOOP 189 225 // NOOP
226 console.log('not subscription');
return; 190 227 return;
} 191 228 }
192 229
// Update the current state with the 193 230 // Update the current state with the
// subscriptionid and endpoint 194 231 // subscriptionid and endpoint
232 console.log('onpushsubscription should be entered');
onPushSubscription(subscription); 195 233 onPushSubscription(subscription);
}) 196 234 })
.catch(function(e) { 197 235 .catch(function(e) {
console.log('An error occured while calling getSubscription()', e); 198 236 console.log('An error occured while calling getSubscription()', e);
}); 199 237 });
}); 200 238 });
}).catch(function(err) { 201 239 }
console.log('Ooops Unable to check the permission', 202
'Unfortunately the permission for push notifications couldn\'t be ' + 203
'checked. Are you on Chrome 43+?'); 204
}); 205
} 206
207 240
function setUpNotificationPermission() { 208 241 // Once the service worker is registered set the initial state
// If the notification permission is denied, it's a permanent block 209 242 function initialiseState() {
if (Notification.permission === 'denied') { 210 243 // Is the Permissions API supported
console.log('Ooops Notifications are Blocked', 211 244 if ('permissions' in navigator) {
'Unfortunately notifications are permanently blocked. Please unblock / ' + 212 245 console.log('setting push permissions');
'allow them to switch on push notifications.'); 213 246 setUpPushPermission();
return; 214 247 return;
} else if (Notification.permission === 'default') { 215 248 } else {
console.log('notification permissions === default'); 216 249 console.log('setting notification permissions');
return; 217 250 setUpNotificationPermission();
} 218 251 }
252 }
219 253
// Check if push is supported and what the current state is 220 254 var enablePushSwitch = $('.js-checkbox');
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 221 255 enablePushSwitch.change(function(e) {
// Let's see if we have a subscription already 222 256 console.log('checkbox changed');
serviceWorkerRegistration.pushManager.getSubscription() 223 257 if (e.target.checked) {
.then(function(subscription) { 224 258 console.log('subscribing device');
if (!subscription) { 225 259 subscribeDevice();
// NOOP 226 260 } else {
console.log('not subscription'); 227 261 console.log('unsubscribing device');
return; 228 262 unsubscribeDevice();
} 229 263 }
264 });
230 265
// Update the current state with the 231 266 // Check that service workers are supported
// subscriptionid and endpoint 232 267 if ('serviceWorker' in navigator) {
console.log('onpushsubscription should be entered'); 233 268 navigator.serviceWorker.register('scripts/service-worker.js')
onPushSubscription(subscription); 234 269 .then(initialiseState);
}) 235
.catch(function(e) { 236
console.log('An error occured while calling getSubscription()', e); 237
}); 238
}); 239
} 240
241
// Once the service worker is registered set the initial state 242
function initialiseState() { 243
// Is the Permissions API supported 244
if ('permissions' in navigator) { 245
console.log('setting push permissions'); 246
setUpPushPermission(); 247
return; 248
} else { 249
console.log('setting notification permissions'); 250
setUpNotificationPermission(); 251
} 252
} 253
window.addEventListener('load', function() { 254
// When the toggle switch changes, enabled / disable push 255
// messaging 256
var enablePushSwitch = document.querySelector('.js-checkbox'); 257
enablePushSwitch.addEventListener('change', function(e) { 258
if (e.target.checked) { 259
subscribeDevice(); 260
} else { 261 270 } else {
unsubscribeDevice(); 262 271 // Service Workers aren't supported so you should hide the push UI
272 // If it's currently visible.
273 console.log('Ooops Service Workers aren\'t Supported',
274 'Service Workers aren\'t supported in this browser. ' +
275 'For this demo be sure to use ' +
276 '<a href="https://www.google.co.uk/chrome/browser/canary.html">Chrome Canary</a>' +
277 ' or version 42.');
} 263 278 }
}); 264 279 });
265
// Check that service workers are supported 266
if ('serviceWorker' in navigator) { 267
navigator.serviceWorker.register('scripts/service-worker.js') 268
.then(initialiseState); 269
} else { 270
// Service Workers aren't supported so you should hide the push UI 271
// If it's currently visible. 272
console.log('Ooops Service Workers aren\'t Supported', 273
'Service Workers aren\'t supported in this browser. ' + 274
'For this demo be sure to use ' + 275
'<a href="https://www.google.co.uk/chrome/browser/canary.html">Chrome Canary</a>' + 276
' or version 42.'); 277
} 278
}); 279
280 280