364 lines
12 KiB
JavaScript
364 lines
12 KiB
JavaScript
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";
|
|
}
|
|
});
|
|
|
|
});
|