Fixes & Hubl branding
This commit is contained in:
Jean-Baptiste Pasquier
committed by
Rachel
Rachel
parent
35a0a20119
commit
40792273fe
@ -1,363 +0,0 @@
|
||||
function applyAdapt(prefix, sibDisplay, user) {
|
||||
|
||||
//- Allow to bind-user on selected attribute
|
||||
if (sibDisplay.getAttribute(prefix + "-user-id")) {
|
||||
sibDisplay.setAttribute(
|
||||
sibDisplay.getAttribute(prefix + "-user-id"),
|
||||
user["@id"]
|
||||
);
|
||||
}
|
||||
|
||||
//- Allow to set data-src to a children sib-form
|
||||
if (sibDisplay.getAttribute(prefix + "-bind-resources")) {
|
||||
let form = sibDisplay.querySelector(
|
||||
sibDisplay.getAttribute(prefix + "-bind-resources") + " sib-form"
|
||||
);
|
||||
if (form) {
|
||||
form.setAttribute(
|
||||
"data-src",
|
||||
sibDisplay.component.resourceId.replace("members/", "")
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//- Allow to put user on a targetted search field
|
||||
if (sibDisplay.getAttribute(prefix + "-bind-user2input")) {
|
||||
sibDisplay.querySelector(
|
||||
sibDisplay.getAttribute(prefix + "-bind-user2input")
|
||||
).value = user["@id"];
|
||||
}
|
||||
}
|
||||
|
||||
function recursiveAdaptWidgets(prefix, element, user) {
|
||||
|
||||
element.addEventListener("populate", () => {
|
||||
|
||||
//- This function is a workaround for the currently unworking populate
|
||||
//- Feel free to see examples on page-circles-
|
||||
element.querySelectorAll("[" + prefix + "-user-id]").forEach(el => {
|
||||
el.setAttribute(el.getAttribute(prefix + "-user-id"), user["@id"]);
|
||||
});
|
||||
applyAdapt(prefix, element, user);
|
||||
|
||||
document.querySelectorAll('sib-display, sib-form').forEach(sibDisplay => {
|
||||
applyAdapt(prefix, sibDisplay, user);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// auxiliary function closes the user profile menu
|
||||
function closeUserControls() {
|
||||
let userControls = document.querySelector("#user-controls");
|
||||
if (userControls) userControls.removeAttribute("open");
|
||||
}
|
||||
|
||||
function closeLeftMenu() {
|
||||
let leftMenu = document.querySelector("#main__menu");
|
||||
if (leftMenu) leftMenu.removeAttribute("open");
|
||||
}
|
||||
|
||||
function closeRightMenu() {
|
||||
let rightMenu = document.querySelectorAll(".jsRightMenu");
|
||||
if (Array.from(rightMenu).filter(el => el.hasAttribute("open")).length > 0) {
|
||||
Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
|
||||
vC.classList.toggle("sidebar-is-closed")
|
||||
);
|
||||
Array.from(rightMenu).forEach(el => el.removeAttribute("open"));
|
||||
}
|
||||
}
|
||||
|
||||
function openRightMenu() {
|
||||
let rightMenu = document.querySelectorAll(".jsRightMenu");
|
||||
Array.from(rightMenu).forEach(el => el.setAttribute("open", ""));
|
||||
Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
|
||||
vC.classList.toggle("sidebar-is-closed")
|
||||
);
|
||||
}
|
||||
|
||||
//auxiliary function clears cache & refreshes sib-displays for a given resource ID
|
||||
function refreshSibDisplays(resourceId, clearCache = true) {
|
||||
let cacheCleared = false;
|
||||
|
||||
Array.from(document.querySelectorAll("sib-display"))
|
||||
.filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
|
||||
.forEach(e => {
|
||||
//clear cache if we were unable to before
|
||||
if ((clearCache && !cacheCleared) && e.component.resource != null) {
|
||||
e.component.resource.clearCache();
|
||||
cacheCleared = true;
|
||||
}
|
||||
e.dataset.src = e.dataset.src;
|
||||
}); // and update them
|
||||
}
|
||||
|
||||
async function updateSources(resource) {
|
||||
let res = resource.split('/');
|
||||
res.splice(3, 0, 'sources');
|
||||
let cacheCleared = false;
|
||||
if (event.target.component.resource != null) {
|
||||
event.target.component.resource.clearCache();
|
||||
cacheCleared = true;
|
||||
}
|
||||
refreshSibDisplays(res.join('/'),cacheCleared);
|
||||
}
|
||||
|
||||
//auxiliary function updates displays using a given resource
|
||||
//NOTE: this is a temporary workaround and should be replaced by a reactive storage
|
||||
//https://git.happy-dev.fr/startinblox/framework/sib-core/issues/524
|
||||
async function refreshResource(event) {
|
||||
|
||||
// if of the edited resource || id of the container of the created resource
|
||||
const resourceId = event.detail.resource["@id"] || event.target.dataset.src;
|
||||
updateSources(resourceId, event);
|
||||
let resource = document
|
||||
.querySelector('[data-src="' + resourceId + '"]')
|
||||
.component.resource.getResourceData();
|
||||
|
||||
//special case: refresh circles/X/ from circle-members/Y/
|
||||
let partnerId = null;
|
||||
if (resourceId.includes("circle-members")) {
|
||||
partnerId = resource["http://happy-dev.fr/owl/#circle"]["@id"];
|
||||
} else if (resourceId.includes("project-members")) {
|
||||
partnerId = resource["http://happy-dev.fr/owl/#project"]["@id"];
|
||||
}
|
||||
|
||||
//refresh all resources using the partner ID
|
||||
if (partnerId != null) {
|
||||
refreshSibDisplays(partnerId);
|
||||
refreshSibDisplays(partnerId + "members/");
|
||||
}
|
||||
|
||||
//special cases updating users/X/circles for the left-side-menu (leaving or joining circle)
|
||||
let user = await document.querySelector('sib-auth').getUser();
|
||||
if(resourceId.includes('circle') && user != null) {
|
||||
let userId = user['@id'];
|
||||
refreshSibDisplays(userId + "circles/");
|
||||
refreshSibDisplays(resourceId.split('/').slice(0,4).join('/')+'/joinable/');
|
||||
}
|
||||
|
||||
//clear cache on this resource
|
||||
//NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
|
||||
let cacheCleared = false;
|
||||
if (event.target.component.resource != null) {
|
||||
event.target.component.resource.clearCache();
|
||||
cacheCleared = true;
|
||||
}
|
||||
|
||||
//update all displays which use this resource
|
||||
refreshSibDisplays(resourceId, cacheCleared);
|
||||
}
|
||||
|
||||
//auxiliary function performs a redirect
|
||||
//NOTE: currently a sib-display is required to dispatch the requestNavigation event
|
||||
function performRedirect(route) {
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("requestNavigation", {
|
||||
bubbles: true,
|
||||
detail: { route: route }
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
//auxiliary function redirects after leaving a project/circle
|
||||
//NOTE: this is a temporary workaround until the following issues are resolved:
|
||||
//https://git.happy-dev.fr/startinblox/framework/sib-core/issues/476
|
||||
//https://git.happy-dev.fr/startinblox/framework/sib-core/issues/546
|
||||
async function checkForPostLeaveRedirect(event) {
|
||||
//a redirect will only be required if I left in the information page of the resource
|
||||
if(!window.location.href.includes('-information')) return;
|
||||
//first need to get a sib-display with this resource id (to have access to the target Proxy, containing model fields)
|
||||
const resourceId = event.detail.resource['@id'] || event.target.dataset.src;
|
||||
let target = document.querySelector('[data-src="' + resourceId + '"]');
|
||||
let resource = target.component.resource.getResourceData();
|
||||
|
||||
//no redirect is required for public circles
|
||||
let targetCircleId = resource["http://happy-dev.fr/owl/#circle"]["@id"];
|
||||
if(targetCircleId != undefined) {
|
||||
let targetCircle = document.querySelector('[data-src="' + targetCircleId + '"]');
|
||||
let targetCircleResource = targetCircle.component.resource.getResourceData();
|
||||
if(targetCircleResource['http://happy-dev.fr/owl/#status'] == 'Public') return;
|
||||
}
|
||||
|
||||
//a redirect will only be required if I've deleted myself
|
||||
let targetUser = resource['http://happy-dev.fr/owl/#user'];
|
||||
|
||||
//compare with current user
|
||||
let user = await document.querySelector('sib-auth').getUser();
|
||||
if(targetUser['@id'] != user['@id'] && targetUser['@id'] != undefined) return;
|
||||
|
||||
//perform the redirect
|
||||
if(resourceId.includes('circle')) performRedirect('circle-left');
|
||||
else if(resourceId.includes('project')) performRedirect('project-left');
|
||||
}
|
||||
|
||||
//- Update badges from notifications list
|
||||
async function updateBadges(element) {
|
||||
const unreadNotifications = new Map();
|
||||
const notifications = element.component.resource;
|
||||
if (!notifications) return;
|
||||
// Generate unread map
|
||||
for (let notification of notifications['ldp:contains']) {
|
||||
if (await notification['unread']) {
|
||||
const object = await notification['object'];
|
||||
unreadNotifications.set(object['@id'], (unreadNotifications.get(object['@id']) || 0) + 1);
|
||||
}
|
||||
}
|
||||
// update badges
|
||||
unreadNotifications.forEach((notifNumber, objectId) => {
|
||||
const badge = document.querySelector(`sib-fix-badge[data-src="${objectId}"]`);
|
||||
if (badge) {
|
||||
badge.innerText = notifNumber || '';
|
||||
badge.style.display = notifNumber ? 'block' : 'none';
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
const menuWrappers = Array.from(document.querySelectorAll(".menu-wrapper"));
|
||||
|
||||
//- View change event
|
||||
window.addEventListener("navigate", event => {
|
||||
closeLeftMenu();
|
||||
closeUserControls();
|
||||
});
|
||||
|
||||
//- Toggle sub-menus
|
||||
menuWrappers.forEach(menuWrapper => {
|
||||
const menu = menuWrapper.querySelector(".menu");
|
||||
menu.addEventListener("click", e => {
|
||||
menuWrapper.classList.toggle("is-closed");
|
||||
});
|
||||
});
|
||||
|
||||
//- Watch every sib-forms & update data-src of linked sib-display
|
||||
document.querySelector("body").addEventListener("save", event => {
|
||||
refreshResource(event);
|
||||
});
|
||||
document.querySelector("body").addEventListener("resourceDeleted", event => {
|
||||
//I might need to be redirected from this page
|
||||
checkForPostLeaveRedirect(event).then(refreshResource(event));
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector("sib-auth")
|
||||
.getUser()
|
||||
.then(user => {
|
||||
if (user !== null) {
|
||||
document
|
||||
.querySelectorAll(".notLoggedIn")
|
||||
.forEach(el => (el.style.visibility = "visible"));
|
||||
// Hide login button if already logged
|
||||
document
|
||||
.querySelector('.loggedIn')
|
||||
.setAttribute("style", "display:none !important");
|
||||
document.querySelectorAll('sib-display, sib-form').forEach(element => {
|
||||
// Set current user id on set-user-id of sib-display
|
||||
recursiveAdaptWidgets("hd-inherit", element, user);
|
||||
});
|
||||
for (leaveBtn of document.querySelectorAll(
|
||||
"admin-circle-leave > sib-ac-checker:not([hidden])"
|
||||
)) {
|
||||
leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute(
|
||||
"style",
|
||||
"display:none !important"
|
||||
); // Hide Join button
|
||||
}
|
||||
} else {
|
||||
document.querySelector('sib-auth').login();
|
||||
}
|
||||
})
|
||||
.catch(error => console.log(error));
|
||||
|
||||
// Document -> close menu
|
||||
document.addEventListener("click", event => {
|
||||
if (!event.target.closest("#user-controls")) {
|
||||
closeUserControls();
|
||||
}
|
||||
if (
|
||||
!event.target.closest("#main__menu") &&
|
||||
event.target.id != "toggleMainMenu"
|
||||
) {
|
||||
closeLeftMenu();
|
||||
}
|
||||
if (
|
||||
!event.target.className.includes("jsMobileSidebarOpenButton") &&
|
||||
!event.target.className.includes("jsOffsiteToggle")
|
||||
) {
|
||||
closeRightMenu();
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector("#toggleMainMenu").addEventListener("click", event => {
|
||||
let leftMenu = document.querySelector("#main__menu");
|
||||
if (leftMenu.hasAttribute("open")) {
|
||||
closeLeftMenu();
|
||||
} else {
|
||||
leftMenu.setAttribute("open", "");
|
||||
}
|
||||
});
|
||||
|
||||
Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
|
||||
el => {
|
||||
el.addEventListener("click", event => {
|
||||
openRightMenu();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const rightMenus = Array.from(document.querySelectorAll("nav.jsRightMenu"));
|
||||
rightMenus.forEach(rightMenu => {
|
||||
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
|
||||
btnRightMenu.addEventListener("click", e => {
|
||||
if (rightMenu.hasAttribute("open")) {
|
||||
closeRightMenu();
|
||||
} else {
|
||||
openRightMenu();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// listen for keypress
|
||||
document.onkeydown = e => {
|
||||
e = e || window.event;
|
||||
if (e.key === "Escape" || e.key === "Esc") {
|
||||
closeUserControls();
|
||||
closeLeftMenu();
|
||||
closeRightMenu();
|
||||
}
|
||||
};
|
||||
|
||||
//- Fix badges performances
|
||||
// on load time
|
||||
const checkNotificationMenuExist = setInterval(function () { // wait for notification menu to exist
|
||||
const notifsMenu = document.getElementById('notifications-list');
|
||||
if (notifsMenu) {
|
||||
clearInterval(checkNotificationMenuExist);
|
||||
notifsMenu.addEventListener('populate', (event) => {
|
||||
const checkExist = setInterval(function () { // wait for left menus to exist
|
||||
const subMenus = document.querySelectorAll('.sub-menu > sib-display > div');
|
||||
if (subMenus.length >= 2) {
|
||||
updateBadges(event.target);
|
||||
clearInterval(checkExist);
|
||||
}
|
||||
}, 500);
|
||||
}, { once: true });
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// on refresh notification list
|
||||
window.addEventListener('notificationsRefresh', () => {
|
||||
document.getElementById('notifications-list').addEventListener('populate', (event) => {
|
||||
updateBadges(event.target);
|
||||
}, { once: true });
|
||||
});
|
||||
|
||||
// on read notification
|
||||
window.addEventListener('read', (event) => {
|
||||
if (event.detail && event.detail.resource && event.detail.resource['@id']) {
|
||||
const badge = document.querySelector(`sib-fix-badge[data-src="${event.detail.resource['@id']}"]`);
|
||||
if (badge) badge.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
17
src/scripts/login-element-visibility.js
Normal file
17
src/scripts/login-element-visibility.js
Normal file
@ -0,0 +1,17 @@
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
document
|
||||
.querySelector("sib-auth")
|
||||
.getUser()
|
||||
.then(user => {
|
||||
if (user !== null) {
|
||||
document
|
||||
.querySelectorAll(".notLoggedIn")
|
||||
.forEach(el => (el.style.visibility = "visible"));
|
||||
document
|
||||
.querySelector('.loggedIn')
|
||||
.setAttribute("style", "display:none !important");
|
||||
} else {
|
||||
document.querySelector('sib-auth').login();
|
||||
}
|
||||
});
|
||||
});
|
||||
94
src/scripts/navigate-event.js
Normal file
94
src/scripts/navigate-event.js
Normal file
@ -0,0 +1,94 @@
|
||||
// auxiliary function closes the user profile menu
|
||||
function closeUserControls() {
|
||||
let userControls = document.querySelector("#user-controls");
|
||||
if (userControls) userControls.removeAttribute("open");
|
||||
}
|
||||
|
||||
function closeLeftMenu() {
|
||||
let leftMenu = document.querySelector("#main__menu");
|
||||
if (leftMenu) leftMenu.removeAttribute("open");
|
||||
}
|
||||
|
||||
function closeRightMenu() {
|
||||
let rightMenu = document.querySelectorAll(".jsRightMenu");
|
||||
if (Array.from(rightMenu).filter(el => el.hasAttribute("open")).length > 0) {
|
||||
Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
|
||||
vC.classList.toggle("sidebar-is-closed")
|
||||
);
|
||||
Array.from(rightMenu).forEach(el => el.removeAttribute("open"));
|
||||
}
|
||||
}
|
||||
|
||||
function openRightMenu() {
|
||||
let rightMenu = document.querySelectorAll(".jsRightMenu");
|
||||
Array.from(rightMenu).forEach(el => el.setAttribute("open", ""));
|
||||
Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
|
||||
vC.classList.toggle("sidebar-is-closed")
|
||||
);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
|
||||
//- View change event
|
||||
window.addEventListener("navigate", event => {
|
||||
closeLeftMenu();
|
||||
closeUserControls();
|
||||
});
|
||||
// Document -> close menu
|
||||
document.addEventListener("click", event => {
|
||||
if (!event.target.closest("#user-controls")) {
|
||||
closeUserControls();
|
||||
}
|
||||
if (
|
||||
!event.target.closest("#main__menu") &&
|
||||
event.target.id != "toggleMainMenu"
|
||||
) {
|
||||
closeLeftMenu();
|
||||
}
|
||||
if (
|
||||
!event.target.className.includes("jsMobileSidebarOpenButton") &&
|
||||
!event.target.className.includes("jsOffsiteToggle")
|
||||
) {
|
||||
closeRightMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// listen for keypress
|
||||
document.onkeydown = e => {
|
||||
e = e || window.event;
|
||||
if (e.key === "Escape" || e.key === "Esc") {
|
||||
closeUserControls();
|
||||
closeLeftMenu();
|
||||
closeRightMenu();
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelector("#toggleMainMenu").addEventListener("click", event => {
|
||||
let leftMenu = document.querySelector("#main__menu");
|
||||
if (leftMenu.hasAttribute("open")) {
|
||||
closeLeftMenu();
|
||||
} else {
|
||||
leftMenu.setAttribute("open", "");
|
||||
}
|
||||
});
|
||||
|
||||
const rightMenus = Array.from(document.querySelectorAll("nav.jsRightMenu"));
|
||||
rightMenus.forEach(rightMenu => {
|
||||
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
|
||||
btnRightMenu.addEventListener("click", e => {
|
||||
if (rightMenu.hasAttribute("open")) {
|
||||
closeRightMenu();
|
||||
} else {
|
||||
openRightMenu();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
|
||||
el => {
|
||||
el.addEventListener("click", event => {
|
||||
openRightMenu();
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
173
src/scripts/reactive-store.js
Normal file
173
src/scripts/reactive-store.js
Normal file
@ -0,0 +1,173 @@
|
||||
//auxiliary function clears cache & refreshes sib-displays for a given resource ID
|
||||
function refreshSibDisplays(resourceId, clearCache = true) {
|
||||
let cacheCleared = false;
|
||||
|
||||
Array.from(document.querySelectorAll("sib-display"))
|
||||
.filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
|
||||
.forEach(async (e) => {
|
||||
//clear cache if we were unable to before
|
||||
if ((clearCache && !cacheCleared) && e.component.resource != null) {
|
||||
await e.component.resource.clearCache();
|
||||
cacheCleared = true;
|
||||
}
|
||||
e.dataset.src = e.dataset.src;
|
||||
}); // and update them
|
||||
}
|
||||
|
||||
async function updateSources(resource) {
|
||||
let res = resource.split('/');
|
||||
res.splice(3, 0, 'sources');
|
||||
let cacheCleared = false;
|
||||
if (event.target.component.resource != null) {
|
||||
await event.target.component.resource.clearCache();
|
||||
cacheCleared = true;
|
||||
}
|
||||
refreshSibDisplays(res.join('/'),cacheCleared);
|
||||
}
|
||||
|
||||
//auxiliary function updates displays using a given resource
|
||||
//NOTE: this is a temporary workaround and should be replaced by a reactive storage
|
||||
//https://git.startinblox.com/framework/sib-core/issues/524
|
||||
async function refreshResource(event) {
|
||||
|
||||
// if of the edited resource || id of the container of the created resource
|
||||
const resourceId = event.detail.resource["@id"] || event.target.dataset.src;
|
||||
updateSources(resourceId, event);
|
||||
let resource;
|
||||
try {
|
||||
resource = document
|
||||
.querySelector('[data-src="' + resourceId + '"]')
|
||||
.component.resource.getResourceData();
|
||||
} catch (e) {
|
||||
try {
|
||||
resource = document
|
||||
.querySelector('[data-src="' + resourceId.replace('circle-members','circles').split('/').slice(0, 4).join('/') + '/"]')
|
||||
.component.resource.getResourceData();
|
||||
} catch (e) {
|
||||
try {
|
||||
resource = document
|
||||
.querySelector('[nested-field="' + resourceId.split('/').slice(3, 4).join('').replace('circle-members','circles') + '"]')
|
||||
.component.resource.getResourceData();
|
||||
} catch (e) {
|
||||
resource = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(resource) {
|
||||
//special case: refresh circles/X/ from circle-members/Y/
|
||||
let partnerId = null;
|
||||
if (resourceId.includes("circle-members")) {
|
||||
partnerId = resource["http://happy-dev.fr/owl/#circle"]["@id"];
|
||||
} else if (resourceId.includes("project-members")) {
|
||||
partnerId = resource["http://happy-dev.fr/owl/#project"]["@id"];
|
||||
}
|
||||
//refresh all resources using the partner ID
|
||||
if (partnerId != null) {
|
||||
refreshSibDisplays(partnerId);
|
||||
refreshSibDisplays(partnerId + "members/");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//special cases updating users/X/circles for the left-side-menu (leaving or joining circle)
|
||||
let user = await document.querySelector('sib-auth').getUser();
|
||||
if(resourceId.includes('circle') && user != null) {
|
||||
let userId = user['@id'];
|
||||
refreshSibDisplays(userId + "circles/");
|
||||
refreshSibDisplays(resourceId.replace('circle-members','circles').split('/').slice(0, 3).join('/') + '/circles/joinable/');
|
||||
refreshSibDisplays(resourceId.replace('circle-members','circles').split('/').slice(0, 3).join('/') + '/sources/circlesjoinable/');
|
||||
}
|
||||
|
||||
if(resourceId.includes('users')) {
|
||||
refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/users/');
|
||||
refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/sources/users/');
|
||||
}
|
||||
|
||||
//clear cache on this resource
|
||||
//NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
|
||||
let cacheCleared = false;
|
||||
if (event.target.component.resource != null) {
|
||||
await event.target.component.resource.clearCache();
|
||||
cacheCleared = true;
|
||||
}
|
||||
|
||||
//update all displays which use this resource
|
||||
refreshSibDisplays(resourceId, cacheCleared);
|
||||
}
|
||||
|
||||
//auxiliary function performs a redirect
|
||||
//NOTE: currently a sib-display is required to dispatch the requestNavigation event
|
||||
function performRedirect(route) {
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("requestNavigation", {
|
||||
bubbles: true,
|
||||
detail: { route: route }
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
//auxiliary function redirects after leaving a project/circle
|
||||
//NOTE: this is a temporary workaround until the following issues are resolved:
|
||||
//https://git.startinblox.com/framework/sib-core/issues/476
|
||||
//https://git.startinblox.com/framework/sib-core/issues/546
|
||||
async function checkForPostLeaveRedirect(event) {
|
||||
//a redirect will only be required if I left in the information page of the resource
|
||||
if(!window.location.href.includes('-information')) {
|
||||
return;
|
||||
}
|
||||
//first need to get a sib-display with this resource id (to have access to the target Proxy, containing model fields)
|
||||
const resourceId = event.detail.resource['@id'] || event.target.dataset.src;
|
||||
let target = document.querySelector('[data-src="' + resourceId + '"]');
|
||||
let resource = target.component.resource.getResourceData();
|
||||
|
||||
//no redirect is required for public circles
|
||||
let targetCircleId = resource["http://happy-dev.fr/owl/#circle"];
|
||||
if(targetCircleId != undefined) {
|
||||
let targetCircle = document.querySelector('[data-src="' + targetCircleId["@id"] + '"]');
|
||||
let targetCircleResource = targetCircle.component.resource.getResourceData();
|
||||
if(targetCircleResource['http://happy-dev.fr/owl/#status'] == 'Public') {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//a redirect will only be required if I've deleted myself
|
||||
let targetUser = resource['http://happy-dev.fr/owl/#user'];
|
||||
if(targetUser != undefined) {
|
||||
//compare with current user
|
||||
let user = await document.querySelector('sib-auth').getUser();
|
||||
if(targetUser['@id'] != user['@id'] && targetUser['@id'] != undefined) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//perform the redirect
|
||||
if(resourceId.includes('circle')) {
|
||||
performRedirect('circle-left');
|
||||
} else if(resourceId.includes('project')) {
|
||||
performRedirect('project-left');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
const menuWrappers = Array.from(document.querySelectorAll(".menu-wrapper"));
|
||||
|
||||
//- Toggle sub-menus
|
||||
menuWrappers.forEach(menuWrapper => {
|
||||
const menu = menuWrapper.querySelector(".menu");
|
||||
menu.addEventListener("click", e => {
|
||||
menuWrapper.classList.toggle("is-closed");
|
||||
});
|
||||
});
|
||||
|
||||
//- Watch every sib-forms & update data-src of linked sib-display
|
||||
document.querySelector("body").addEventListener("save", event => {
|
||||
refreshResource(event);
|
||||
});
|
||||
document.querySelector("body").addEventListener("resourceDeleted", event => {
|
||||
//I might need to be redirected from this page
|
||||
checkForPostLeaveRedirect(event).then(refreshResource(event));
|
||||
});
|
||||
|
||||
});
|
||||
60
src/scripts/sib-notifications.js
Normal file
60
src/scripts/sib-notifications.js
Normal file
@ -0,0 +1,60 @@
|
||||
//- Update badges from notifications list
|
||||
async function updateBadges(element) {
|
||||
const unreadNotifications = new Map();
|
||||
const notifications = element.component.resource;
|
||||
if (!notifications) return;
|
||||
// Generate unread map
|
||||
for (let notification of notifications['ldp:contains']) {
|
||||
if (await notification['unread']) {
|
||||
const object = await notification['object'];
|
||||
unreadNotifications.set(object['@id'], (unreadNotifications.get(object['@id']) || 0) + 1);
|
||||
}
|
||||
}
|
||||
// update badges
|
||||
unreadNotifications.forEach((notifNumber, objectId) => {
|
||||
const badge = document.querySelector(`sib-fix-badge[data-src="${objectId}"]`);
|
||||
if (badge) {
|
||||
badge.innerText = notifNumber || '';
|
||||
badge.style.display = notifNumber ? 'block' : 'none';
|
||||
}
|
||||
})
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
|
||||
//- Fix badges performances
|
||||
// on load time
|
||||
const checkNotificationMenuExist = setInterval(function () { // wait for notification menu to exist
|
||||
const notifsMenu = document.getElementById('notifications-list');
|
||||
if (notifsMenu) {
|
||||
clearInterval(checkNotificationMenuExist);
|
||||
notifsMenu.addEventListener('populate', (event) => {
|
||||
const checkExist = setInterval(function () { // wait for left menus to exist
|
||||
const subMenus = document.querySelectorAll('.sub-menu > sib-display > div');
|
||||
if (subMenus.length >= 2) {
|
||||
updateBadges(event.target);
|
||||
clearInterval(checkExist);
|
||||
}
|
||||
}, 500);
|
||||
}, {
|
||||
once: true
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// on refresh notification list
|
||||
window.addEventListener('notificationsRefresh', () => {
|
||||
document.getElementById('notifications-list').addEventListener('populate', (event) => {
|
||||
updateBadges(event.target);
|
||||
}, {
|
||||
once: true
|
||||
});
|
||||
});
|
||||
|
||||
// on read notification
|
||||
window.addEventListener('read', (event) => {
|
||||
if (event.detail && event.detail.resource && event.detail.resource['@id']) {
|
||||
const badge = document.querySelector(`sib-fix-badge[data-src="${event.detail.resource['@id']}"]`);
|
||||
if (badge) badge.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
15
src/scripts/unreads-menu.js
Normal file
15
src/scripts/unreads-menu.js
Normal file
@ -0,0 +1,15 @@
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
window.addEventListener('newMessage', event => {
|
||||
let jid = event.detail.jid;
|
||||
Array.from(document.querySelectorAll('[data-jabberID="'+jid+'"]')).forEach(el => {
|
||||
el.parentElement.parentElement.classList.add('unread');
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('read', (event) => {
|
||||
if (event.detail && event.detail.resource && event.detail.resource['@id']) {
|
||||
const badge = document.querySelector(`sib-fix-badge[data-src="${event.detail.resource['@id']}"]`);
|
||||
if (badge) badge.parentElement.parentElement.classList.remove('unread');
|
||||
}
|
||||
});
|
||||
});
|
||||
68
src/scripts/widget-extension.js
Normal file
68
src/scripts/widget-extension.js
Normal file
@ -0,0 +1,68 @@
|
||||
function applyAdapt(prefix, sibDisplay, user) {
|
||||
|
||||
//- Allow to bind-user on selected attribute
|
||||
if (sibDisplay.getAttribute(prefix + "-user-id")) {
|
||||
sibDisplay.setAttribute(
|
||||
sibDisplay.getAttribute(prefix + "-user-id"),
|
||||
user["@id"]
|
||||
);
|
||||
}
|
||||
|
||||
//- Allow to set data-src to a children sib-form
|
||||
if (sibDisplay.getAttribute(prefix + "-bind-resources")) {
|
||||
let form = sibDisplay.querySelector(
|
||||
sibDisplay.getAttribute(prefix + "-bind-resources") + " sib-form"
|
||||
);
|
||||
if (form) {
|
||||
form.setAttribute(
|
||||
"data-src",
|
||||
sibDisplay.component.resourceId.replace("members/", "")
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//- Allow to put user on a targetted search field
|
||||
if (sibDisplay.getAttribute(prefix + "-bind-user2input")) {
|
||||
let qS = sibDisplay.querySelector(
|
||||
sibDisplay.getAttribute(prefix + "-bind-user2input")
|
||||
);
|
||||
if(qS) qS.value = user["@id"];
|
||||
}
|
||||
}
|
||||
|
||||
//- This function is a workaround for the currently unworking populate
|
||||
//- Feel free to see examples on page-circles-
|
||||
function recursiveAdaptWidgets(prefix, element, user) {
|
||||
element.addEventListener("populate", () => {
|
||||
element.querySelectorAll("[" + prefix + "-user-id]").forEach(el => {
|
||||
el.setAttribute(el.getAttribute(prefix + "-user-id"), user["@id"]);
|
||||
});
|
||||
applyAdapt(prefix, element, user);
|
||||
document.querySelectorAll('sib-display, sib-form').forEach(sibDisplay => {
|
||||
applyAdapt(prefix, sibDisplay, user);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
document
|
||||
.querySelector("sib-auth")
|
||||
.getUser()
|
||||
.then(user => {
|
||||
if (user !== null) {
|
||||
document.querySelectorAll('sib-display, sib-form').forEach(element => {
|
||||
// Set current user id on set-user-id of sib-display
|
||||
recursiveAdaptWidgets("hubl-inherit", element, user);
|
||||
});
|
||||
for (leaveBtn of document.querySelectorAll(
|
||||
"admin-circle-leave > sib-ac-checker:not([hidden])"
|
||||
)) {
|
||||
// Hide Join button
|
||||
leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute(
|
||||
"style",
|
||||
"display:none !important"
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user