maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust notification subscriptions JS and css (#3165)

Browse source
This commit is contained in:
Ben Halpern 2019-06-14 18:54:42 -04:00 • committed by GitHub
parent e130400e9e
commit d33cc055dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 78 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/article-show.scss
View file

@ -1159,7 +1159,7 @@ article {
.dropdown-content {
display: none;
position: fixed;
bottom: 60px;
bottom: 55px;
right: 0;
left: 0;
z-index: 100;
@ -1307,6 +1307,8 @@ article {
.selected-emoji {
visibility: hidden;
margin-left: 4px;
font-size: 1.2em;
vertical-align: -0.1em;
}
&.selected {
.selected-emoji {

143
app/javascript/packs/notificationSubscriptionHandler.js
View file

@ -1,81 +1,88 @@
const subscriptionStatusInput = document.getElementById(
'notification-subscription-status',
);
const {notifiableId} = document.getElementById(
'notification-subscriptions-area',
).dataset;
const {notifiableType} = document.getElementById(
'notification-subscriptions-area',
).dataset;
const userStatus = document
.getElementsByTagName('body')[0]
.getAttribute('data-user-status');
if (userStatus === 'logged-in') {
fetch(`/notification_subscriptions/${notifiableType}/${notifiableId}`, {
headers: {
Accept: 'application/json',
'X-CSRF-Token': window.csrfToken,
'Content-Type': 'application/json',
},
credentials: 'same-origin',
})
.then(response => response.json())
.then(result => {
document.getElementById(`notification-subscription-label_${result.config}`).classList.add('selected');
// checkbox.checked = result;
});
}
let updateStatus = () => {};
if (userStatus === 'logged-out') {
updateStatus = () => {
// Disabled because showModal() is globally defined in asset pipeline
// eslint-disable-next-line no-undef
showModal('notification-subscription');
};
} else {
updateStatus = (target) => {
const allButtons = document.getElementsByClassName('notification-subscription-label');
for(let i = 0; i < allButtons.length; i += 1) {
allButtons[i].classList.remove('selected')
}
target.classList.add('selected');
function loadFunctionality() {
if (!document.getElementById(
'notification-subscriptions-area',
)) {
return;
}
const {notifiableId} = document.getElementById(
'notification-subscriptions-area',
).dataset;
const {notifiableType} = document.getElementById(
'notification-subscriptions-area',
).dataset;
const userStatus = document
.getElementsByTagName('body')[0]
.getAttribute('data-user-status');
if (userStatus === 'logged-in') {
fetch(`/notification_subscriptions/${notifiableType}/${notifiableId}`, {
method: 'POST',
headers: {
Accept: 'application/json',
'X-CSRF-Token': window.csrfToken,
'Content-Type': 'application/json',
},
credentials: 'same-origin',
body: JSON.stringify({
config: target.dataset.payload,
// notifiable params are passed via URL
}),
})
.then(response => response.json())
.then(result => {
document.getElementById(`notification-subscription-label_${result.config}`).classList.add('selected');
// checkbox.checked = result;
});
};
}
const subscriptionButtons = document.getElementsByClassName('notification-subscription-label');
for(let i = 0; i < subscriptionButtons.length; i += 1) {
subscriptionButtons[i].addEventListener('click', e => {
e.preventDefault();
updateStatus(e.target);
if (typeof sendHapticMessage !== "undefined") {
sendHapticMessage('medium');
}
});
subscriptionButtons[i].addEventListener('keydown', e => {
if (e.key === 'Enter') {
}
let updateStatus = () => {};
if (userStatus === 'logged-out') {
updateStatus = () => {
// Disabled because showModal() is globally defined in asset pipeline
// eslint-disable-next-line no-undef
showModal('notification-subscription');
};
} else {
updateStatus = (target) => {
const allButtons = document.getElementsByClassName('notification-subscription-label');
for(let i = 0; i < allButtons.length; i += 1) {
allButtons[i].classList.remove('selected')
}
target.classList.add('selected');
fetch(`/notification_subscriptions/${notifiableType}/${notifiableId}`, {
method: 'POST',
headers: {
Accept: 'application/json',
'X-CSRF-Token': window.csrfToken,
'Content-Type': 'application/json',
},
credentials: 'same-origin',
body: JSON.stringify({
config: target.dataset.payload,
// notifiable params are passed via URL
}),
})
};
}
const subscriptionButtons = document.getElementsByClassName('notification-subscription-label');
for(let i = 0; i < subscriptionButtons.length; i += 1) {
subscriptionButtons[i].addEventListener('click', e => {
e.preventDefault();
updateStatus(e.target);
}
});
if (typeof sendHapticMessage !== "undefined") {
sendHapticMessage('medium');
}
});
subscriptionButtons[i].addEventListener('keydown', e => {
if (e.key === 'Enter') {
updateStatus(e.target);
}
});
}
}
window.InstantClick.on('change', () => {
loadFunctionality();
});
loadFunctionality();