From a936a343b5806bf1fe2105249c6682bd00a804da Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Tue, 26 Jan 2021 18:19:42 +0100 Subject: [PATCH] feature: improve page loading + intl collator --- src/components/hubl-status.js | 6 +- src/index.pug | 170 ++++++++++-------- src/scripts/intl.js | 4 +- src/scripts/login-element-visibility.js | 3 + .../partials/admin/page-admin-projects.pug | 3 +- src/views/partials/header.pug | 7 - 6 files changed, 102 insertions(+), 91 deletions(-) diff --git a/src/components/hubl-status.js b/src/components/hubl-status.js index c8647aa..3db8bfa 100644 --- a/src/components/hubl-status.js +++ b/src/components/hubl-status.js @@ -3,8 +3,7 @@ import SlimSelect from 'https://cdn.skypack.dev/slim-select@1.23'; const HublStatus = widgetFactory( 'hubl-status', - ``, + `, '', formWidget => { let select = formWidget.querySelector('select'); diff --git a/src/index.pug b/src/index.pug index e63f1e6..2fcae8e 100644 --- a/src/index.pug +++ b/src/index.pug @@ -38,92 +38,106 @@ html(lang="en") script(src="index.js" defer) - body.notLoggedIn.bg-color-grey(style='visibility:hidden;') + body.bg-color-grey if endpoints.get && endpoints.post + .notLoggedIn(style='visibility:hidden;') + sib-auth(style='display:none!important', auto-login) + sib-auth-provider( + data-authority=`${authority}` + data-id=`${authorityName || "authority"}` + data-client-name=`${clientName || "Hubl"}` + ) - include views/partials/notifications.pug - include views/partials/widgets.pug + include views/partials/notifications.pug + include views/partials/widgets.pug - header#header.segment.full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white - include views/partials/header.pug + header#header.segment.full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white + include views/partials/header.pug - nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.quarter.text-disable-selection.jsLeftMenu - include views/partials/menu-left.pug + nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.quarter.text-disable-selection.jsLeftMenu + include views/partials/menu-left.pug - main#content.segment.three-quarter.sm-full.text-top + main#content.segment.three-quarter.sm-full.text-top - if endpoints.get.dashboards - #dashboard(hidden, data-view="dashboard").scrollbar-content - include views/page-dashboard.pug + if endpoints.get.dashboards + #dashboard(hidden, data-view="dashboard").scrollbar-content + include views/page-dashboard.pug - if publicDirectory && endpoints.get.users - #members(hidden, data-view="members", no-render).scrollbar-content - include views/page-directory.pug - - if endpoints.get.projects - #project(hidden, data-view="project").with-sidebar.whitespace-normal - hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.projects") - hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`) - hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`) - hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`) - hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`) - hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`) - hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`) - hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`) - include views/page-project.pug - - if endpoints.get.circles - #circle(hidden, data-view="circle").with-sidebar.whitespace-normal - hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles") - hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`) - hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`) - hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`) - hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`) - hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`) - hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`) - hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`) - include views/page-circle.pug - - if endpoints.get.users - #messages(hidden, data-view="messages", no-render).whitespace-normal - hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts") - include views/page-messages.pug - - if endpoints.get.polls - #polls(hidden, data-view="polls").with-sidebar - include views/page-polls.pug - - if endpoints.get.events - #events(hidden, data-view="events") - include views/page-events.pug - - if endpoints.get.resources - #resources(hidden, data-view="resources") - include views/page-resources.pug - - #admin - include views/page-admin.pug - - #about(hidden, data-view="about", no-render) - include views/page-about.pug + if publicDirectory && endpoints.get.users + #members(hidden, data-view="members", no-render).scrollbar-content + include views/page-directory.pug - if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users - #profile(hidden, data-view="profile", no-render).scrollbar-content - include views/page-profile.pug - - if endpoints.get.joboffers - #job-offers(hidden, data-view="job-offers", no-render).scrollbar-content - hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`) - hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`) - hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`) - hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) - hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) - hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) - hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) - hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) - hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`) - include views/page-job-offers.pug - + if endpoints.get.projects + #project(hidden, data-view="project").with-sidebar.whitespace-normal + hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.projects") + hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`) + hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`) + hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`) + hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`) + include views/page-project.pug + + if endpoints.get.circles + #circle(hidden, data-view="circle").with-sidebar.whitespace-normal + hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles") + hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`) + hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`) + hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`) + hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`) + include views/page-circle.pug + + if endpoints.get.users + #messages(hidden, data-view="messages", no-render).whitespace-normal + hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts") + include views/page-messages.pug + + if endpoints.get.polls + #polls(hidden, data-view="polls").with-sidebar + include views/page-polls.pug + + if endpoints.get.events + #events(hidden, data-view="events") + include views/page-events.pug + + if endpoints.get.resources + #resources(hidden, data-view="resources") + include views/page-resources.pug + + #admin + include views/page-admin.pug + + #about(hidden, data-view="about", no-render) + include views/page-about.pug + + if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users + #profile(hidden, data-view="profile", no-render).scrollbar-content + include views/page-profile.pug + + if endpoints.get.joboffers + #job-offers(hidden, data-view="job-offers", no-render).scrollbar-content + hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) + hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`) + hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`) + hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`) + include views/page-job-offers.pug + + .loggedIn(style='position:absolute;top:calc(50% - 10px);left:calc(50% - 40px);') + div.loader + div + div + div + div + if analytics each provider in analytics if provider.type && provider.url && provider.url diff --git a/src/scripts/intl.js b/src/scripts/intl.js index 30ea140..2decb82 100644 --- a/src/scripts/intl.js +++ b/src/scripts/intl.js @@ -187,13 +187,15 @@ document.addEventListener("DOMContentLoaded", () => { // Detect the lang & initialize, based on the browser or "language" item from localstorage jsI18n.detectLanguage(); + let timer; (new MutationObserver((mutations) => { mutations.forEach(mutation => { 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 - setTimeout(() => jsI18n.processNode(document.querySelector('body')), 1000); + clearTimeout(timer); + timer = setTimeout(() => jsI18n.processNode(document.querySelector('body')), 500); } }); }).observe(document.body, { diff --git a/src/scripts/login-element-visibility.js b/src/scripts/login-element-visibility.js index 5564e30..876065e 100644 --- a/src/scripts/login-element-visibility.js +++ b/src/scripts/login-element-visibility.js @@ -7,6 +7,9 @@ document.addEventListener("DOMContentLoaded", function () { document .querySelectorAll(".notLoggedIn") .forEach(el => (el.style.visibility = "visible")); + document + .querySelectorAll(".loggedIn") + .forEach(el => (el.style.display = "none")); } }); }); \ No newline at end of file diff --git a/src/views/partials/admin/page-admin-projects.pug b/src/views/partials/admin/page-admin-projects.pug index a098d2b..a9d8788 100644 --- a/src/views/partials/admin/page-admin-projects.pug +++ b/src/views/partials/admin/page-admin-projects.pug @@ -127,7 +127,8 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac id="hubl_project_is_admin" fields="is_admin" value-is_admin='true' - widget-is_admin='solid-form-hidden' + widget-is_admin='solid-form-checkbox' + hidden ) solid-widget(name='hubl-project-admins') diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug index f983f3d..9b0eb97 100644 --- a/src/views/partials/header.pug +++ b/src/views/partials/header.pug @@ -122,12 +122,5 @@ div button.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut') button.segment.lg-hidden.icon-menu#toggleMainMenu - - sib-auth(style='display:none!important', auto-login) - sib-auth-provider( - data-authority=`${authority}` - data-id=`${authorityName || "authority"}` - data-client-name=`${clientName || "Hubl"}` - )