feature: improve page loading + intl collator

This commit is contained in:
Jean-Baptiste Pasquier 2021-01-26 18:19:42 +01:00
parent 7c0f237bd0
commit a936a343b5
6 changed files with 102 additions and 91 deletions

View File

@ -3,8 +3,7 @@ import SlimSelect from 'https://cdn.skypack.dev/slim-select@1.23';
const HublStatus = widgetFactory(
'hubl-status',
`<label>
<div>\${label}</div>
`<label>\${label}</label>
<select
data-holder
name="\${name}">
@ -14,8 +13,7 @@ const HublStatus = widgetFactory(
<option
value="Private"
\${value=="Private" ? 'selected' : ''} data-trans="hublStatus.private">Privé</option>
</select>
</label>`,
</select>`,
'',
formWidget => {
let select = formWidget.querySelector('select');

View File

@ -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

View File

@ -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, {

View File

@ -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"));
}
});
});

View File

@ -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')

View File

@ -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"}`
)