autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

major: startinblox-feature-requests#181

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier
2021-02-22 21:27:58 +01:00
parent 5cc3e9b7f4
commit e28af8a048
97 changed files with 2166 additions and 1625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/scripts/firefox-scroll.js
View File

@ -1,60 +0,0 @@
// document.addEventListener("DOMContentLoaded", () => {
// const resizeChat = () => {
// let isMobile = window.innerWidth < 993;
// let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
// let isFirefoxMobile = navigator.platform.toLowerCase().indexOf("mobile") > -1 || navigator.platform.toLowerCase().indexOf("tablet") > -1;
// let chatBox = Array.from(document.querySelectorAll("solid-xmpp-chat"))
// .map((el) => el.shadowRoot ? el.shadowRoot.getElementById("conversejs") : false)
// .filter((el) => el)
// .pop();
// if (chatBox) {
// let chatTextArea = chatBox.querySelector(".message-form-container");
// let ischatTextArea = setInterval(() => {
// chatTextArea = chatBox.querySelector(".message-form-container");
// if (chatTextArea) {
// clearInterval(ischatTextArea);
// if (
// chatBox.getBoundingClientRect().height -
// chatTextArea.getBoundingClientRect().height !=
// chatTextArea.offsetTop
// ) {
// let viewportChat = Array.from(
// document.querySelectorAll("#viewport .chat-view")
// );
// viewportChat.forEach(
// (c) => (c.style.height = isMobile ? (isFirefox && isFirefoxMobile) ? "calc(100vh - 106px - 57px)" : "calc(100vh - 106px)" : "calc(100vh - 64px - 83px)")
// );
// }
// }
// }, 15);
// }
// };
// resizeChat();
// let isbody = setInterval(() => {
// if (document.body) {
// clearInterval(isbody);
// resizeChat();
// }
// }, 50);
// window.addEventListener("load", () => {
// setTimeout(() => {
// resizeChat();
// }, 0);
// });
// let windowResizing;
// window.addEventListener("resize", () => {
// windowResizing = setTimeout(() => {
// clearInterval(windowResizing);
// resizeChat();
// }, 50);
// });
// document.addEventListener("navigate", () => {
// setTimeout(() => {
// resizeChat();
// }, 0);
// });
// });

12
src/scripts/intl.js
View File

@ -41,8 +41,8 @@ class JsI18n {
} else {
// https://git.startinblox.com/framework/sib-core/issues/733
if (attr.startsWith('label-')) {
let label = node.querySelector('[name="'+attr.replace("label-", "")+'"] > label');
if(label != null) {
let label = node.querySelector('[name="' + attr.replace("label-", "") + '"] > label');
if (label != null) {
this.translateNodeContent(label, k);
}
}
@ -61,14 +61,14 @@ class JsI18n {
if (node != null && translation != undefined) {
if (node.nodeType == 1) { //Element
try {
if(node.innerHTML != translation)
if (node.innerHTML != translation)
node.innerHTML = translation;
} catch (e) {
if(node.text != translation)
if (node.text != translation)
node.text = translation;
}
} else if (node.nodeType == 2) { //Attribute
if(node.value != translation)
if (node.value != translation)
node.value = translation;
}
}
@ -185,7 +185,7 @@ document.addEventListener("DOMContentLoaded", () => {
let timer;
(new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if(mutation.target.attributes["data-trans"] != null) {
if (mutation.target.attributes["data-trans"] != null) {
// Render the target of the mutation instantly
jsI18n.processNode(mutation.target);
// Then wait one arbitrary second to re-render the whole document in case a widget re-rendered

88
src/scripts/login-element-visibility.js
View File

@ -1,55 +1,59 @@
window.requestLogin = false;
document.addEventListener("DOMContentLoaded", function () {
document
.querySelector("sib-auth")
.getUser()
.then(user => {
if (user !== null) {
document
.querySelectorAll(".notLoggedIn")
.forEach(el => (el.style.visibility = "visible"));
document
.querySelectorAll(".loggedIn")
.forEach(el => (el.style.display = "none"));
document
.querySelectorAll(".loggedIn-loader")
.forEach(el => (el.style.display = "none"));
} else {
window.requestLogin = true;
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: "login",
wanted: true
}
}),
);
document
.querySelectorAll(".loggedIn-loader")
.forEach(el => (el.style.display = "none"));
}
});
const sibAuth = document.querySelector("sib-auth");
if (sibAuth) {
sibAuth.getUser()
.then(user => {
if (user !== null) {
document
.querySelectorAll(".notLoggedIn")
.forEach(el => (el.style.visibility = "visible"));
document
.querySelectorAll(".loggedIn")
.forEach(el => (el.style.display = "none"));
document
.querySelectorAll(".loggedIn-loader")
.forEach(el => (el.style.display = "none"));
} else {
window.requestLogin = true;
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: "login",
wanted: true
}
}),
);
document
.querySelectorAll(".loggedIn-loader")
.forEach(el => (el.style.display = "none"));
}
});
}
});
window.addEventListener("navigate", e => {
if (e.detail.route == "login" && !window.requestLogin) {
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: "dashboard"
route: window.hubl.getRoute("dashboard", true)
}
}),
);
}
});
document.querySelector('#loginButton').addEventListener('click', () => {
document
.querySelectorAll(".loggedIn")
.forEach(el => (el.style.display = "none"));
document
.querySelectorAll(".loggedIn-loader")
.forEach(el => (el.style.display = "flex"));
setTimeout(() => {
document.querySelector('#something-goes-wrong').removeAttribute('hidden');
}, 5000);
document.querySelector('sib-auth').login();
});
const loginButton = document.querySelector('#loginButton');
if (loginButton) {
loginButton.addEventListener('click', () => {
document
.querySelectorAll(".loggedIn")
.forEach(el => (el.style.display = "none"));
document
.querySelectorAll(".loggedIn-loader")
.forEach(el => (el.style.display = "flex"));
setTimeout(() => {
document.querySelector('#something-goes-wrong').removeAttribute('hidden');
}, 5000);
document.querySelector('sib-auth').login();
});
}

245
src/scripts/navigate-event.js
View File

@ -1,120 +1,136 @@
// auxiliary function closes the user profile menu
function closeUserControls() {
let userControls = Array.from(document.querySelectorAll(".user-controls"));
userControls.forEach(e => e.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(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-right').setAttribute('hidden', '');
el.querySelector('.text-left').removeAttribute('hidden');
});
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(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-left').setAttribute('hidden', '');
el.querySelector('.text-right').removeAttribute('hidden');
});
let userControls = Array.from(document.querySelectorAll(".user-controls"));
userControls.forEach(e => e.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(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-right').setAttribute('hidden', '');
el.querySelector('.text-left').removeAttribute('hidden');
});
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(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-left').setAttribute('hidden', '');
el.querySelector('.text-right').removeAttribute('hidden');
});
Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
vC.classList.toggle("sidebar-is-closed")
);
}
document.addEventListener("DOMContentLoaded", function () {
const componentSet = new Set(window.hubl.components.map(c => c.type));
// Workaround - No "navigate" event after the login on `/login`
if (window.location.pathname == "/login") {
const sibAuth = document.querySelector("sib-auth");
if (sibAuth) {
sibAuth.getUser()
.then(user => {
if (user !== null) {
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: window.hubl.getRoute("dashboard", true)
}
}),
);
}
});
}
}
document.addEventListener("DOMContentLoaded", function() {
//- View change event
window.addEventListener("navigate", e => {
if(e.detail.route.startsWith('admin-')) {
document.querySelector('.only-on-admin').removeAttribute('hidden');
} else {
document.querySelector('.only-on-admin').setAttribute('hidden','');
//- View change event
window.addEventListener("navigate", e => {
if (componentSet.has('admin')) {
const onlyAdmin = document.querySelector('.only-on-admin');
if (onlyAdmin) {
if (e.detail.route.startsWith('admin-')) {
onlyAdmin.removeAttribute('hidden');
} else {
onlyAdmin.setAttribute('hidden', '');
}
}
if(e.detail.route.startsWith("admin-communities")) {
document.querySelector('solid-route[name="admin-communities"]').setAttribute('active','');
document.querySelector('.jsRightMenu solid-link[next="admin-communities"]').setAttribute('active','');
} else {
document.querySelector('solid-route[name="admin-communities"]').removeAttribute('active');
document.querySelector('.jsRightMenu solid-link[next="admin-communities"]').removeAttribute('active');
for (component of window.hubl.components) {
let adminTarget = document.querySelector(`solid-route[name="admin-${component.route}"]`);
let adminTargetTwo = document.querySelector(`.jsRightMenu solid-link[next="admin-${component.route}"]`);
if (e.detail.route.startsWith(`admin-${component.route}`)) {
if (adminTarget) adminTarget.setAttribute('active', '');
if (adminTargetTwo) adminTargetTwo.setAttribute('active', '');
} else {
if (adminTarget) adminTarget.removeAttribute('active');
if (adminTargetTwo) adminTargetTwo.removeAttribute('active');
}
}
if(e.detail.route.startsWith("admin-circles")) {
document.querySelector('solid-route[name="admin-circles"]').setAttribute('active','');
document.querySelector('.jsRightMenu solid-link[next="admin-circles"]').setAttribute('active','');
} else {
document.querySelector('solid-route[name="admin-circles"]').removeAttribute('active');
document.querySelector('.jsRightMenu solid-link[next="admin-circles"]').removeAttribute('active');
}
if(e.detail.route.startsWith("admin-projects")) {
document.querySelector('solid-route[name="admin-projects"]').setAttribute('active','');
document.querySelector('.jsRightMenu solid-link[next="admin-projects"]').setAttribute('active','');
} else {
let adminProjects = document.querySelector('solid-route[name="admin-projects"]');
let rightMenu = document.querySelector('.jsRightMenu solid-link[next="admin-projects"]');
if( adminProjects ) adminProjects.removeAttribute('active');
if( rightMenu ) rightMenu.removeAttribute('active');
}
closeLeftMenu();
closeUserControls();
if(e.detail.route.startsWith('login')) {
document
.querySelector("sib-auth")
.getUser()
}
closeLeftMenu();
closeUserControls();
if (e.detail.route.startsWith('login')) {
const sibAuth = document.querySelector("sib-auth");
if (sibAuth) {
sibAuth.getUser()
.then(user => {
if (user !== null) {
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: "dashboard"
route: window.hubl.getRoute("dashboard", true)
}
}),
);
}
});
}
});
// 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.closest(".jsOffsiteToggle")
) {
closeRightMenu();
}
});
}
});
// 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.closest(".jsOffsiteToggle")
) {
closeRightMenu();
}
});
// listen for keypress
document.onkeydown = e => {
e = e || window.event;
if (e.key === "Escape" || e.key === "Esc") {
closeUserControls();
closeLeftMenu();
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", () => {
const toggleMainMenu = document.querySelector("#toggleMainMenu")
if (toggleMainMenu) {
toggleMainMenu.addEventListener("click", () => {
let leftMenu = document.querySelector("#main__menu");
if (leftMenu.hasAttribute("open")) {
closeLeftMenu();
@ -122,24 +138,25 @@ document.addEventListener("DOMContentLoaded", function() {
leftMenu.setAttribute("open", "");
}
});
}
const rightMenus = Array.from(document.querySelectorAll("nav.jsRightMenu"));
rightMenus.forEach(rightMenu => {
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
btnRightMenu.addEventListener("click", () => {
if (rightMenu.hasAttribute("open")) {
closeRightMenu();
} else {
openRightMenu();
}
});
});
Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
el => {
el.addEventListener("click", () => {
openRightMenu();
});
const rightMenus = Array.from(document.querySelectorAll("nav.jsRightMenu"));
rightMenus.forEach(rightMenu => {
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
btnRightMenu.addEventListener("click", () => {
if (rightMenu.hasAttribute("open")) {
closeRightMenu();
} else {
openRightMenu();
}
);
});
});
});
Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
el => {
el.addEventListener("click", () => {
openRightMenu();
});
}
);
});

12
src/scripts/register-sw.js
View File

@ -1,11 +1,11 @@
if('serviceWorker' in navigator) {
if ('serviceWorker' in navigator) {
var refreshing;
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (refreshing) {
return;
}
refreshing = true;
window.location.reload();
if (refreshing) {
return;
}
refreshing = true;
window.location.reload();
});
navigator.serviceWorker.register('/sw.js');
}

5
src/scripts/theme-checker.js
View File

@ -1,6 +1,5 @@
document.addEventListener("DOMContentLoaded", () => {
if( !document.querySelector('.input-color') ) return
if (!document.querySelector('.input-color')) return
const params = new URLSearchParams(window.location.search);
const currentPrimary = getComputedStyle(document.documentElement).getPropertyValue('--color-primary')
const defaultPrimary = params.has('p') ? "#" + params.get('p') : currentPrimary ? currentPrimary.trim() : "#FF0055";
@ -94,4 +93,4 @@ document.addEventListener("DOMContentLoaded", () => {
params.set('cd', String(color.toHEXA()).substr(1));
cCd.applyColor();
});
});
});

10
src/scripts/timeout-goeswrong.js
View File

@ -1,5 +1,11 @@
setTimeout(() => {
if(document.querySelector('.loggedIn-loader').style.display != 'none') {
document.querySelector('#something-goes-wrong').removeAttribute('hidden')
const loggedinLoader = document.querySelector('.loggedIn-loader');
if (loggedinLoader) {
if (loggedinLoader.style.display != 'none') {
const somethingGoesWrong = document.querySelector('#something-goes-wrong');
if (somethingGoesWrong) {
somethingGoesWrong.removeAttribute('hidden');
}
}
}
}, 10000);

13
src/scripts/user-creation-form.js
View File

@ -1,7 +1,10 @@
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#user-creation-form').addEventListener('save', event => {
if(event.originalTarget.id == 'user-creation-form') {
document.querySelector("sib-auth").login();
}
});
const userCreationForm = document.querySelector('#user-creation-form');
if (userCreationForm) {
userCreationForm.addEventListener('save', event => {
if (event.originalTarget.id == 'user-creation-form') {
document.querySelector("sib-auth").login();
}
});
}
});