feature: improve page loading + intl collator
This commit is contained in:
Jean-Baptiste Pasquier
parent
7c0f237bd0
commit
a936a343b5
@ -3,8 +3,7 @@ import SlimSelect from 'https://cdn.skypack.dev/slim-select@1.23';
|
|||||||
|
|
||||||
const HublStatus = widgetFactory(
|
const HublStatus = widgetFactory(
|
||||||
'hubl-status',
|
'hubl-status',
|
||||||
`<label>
|
`<label>\${label}</label>
|
||||||
<div>\${label}</div>
|
|
||||||
<select
|
<select
|
||||||
data-holder
|
data-holder
|
||||||
name="\${name}">
|
name="\${name}">
|
||||||
@ -14,8 +13,7 @@ const HublStatus = widgetFactory(
|
|||||||
<option
|
<option
|
||||||
value="Private"
|
value="Private"
|
||||||
\${value=="Private" ? 'selected' : ''} data-trans="hublStatus.private">Privé</option>
|
\${value=="Private" ? 'selected' : ''} data-trans="hublStatus.private">Privé</option>
|
||||||
</select>
|
</select>`,
|
||||||
</label>`,
|
|
||||||
'',
|
'',
|
||||||
formWidget => {
|
formWidget => {
|
||||||
let select = formWidget.querySelector('select');
|
let select = formWidget.querySelector('select');
|
||||||
|
|||||||
170
src/index.pug
170
src/index.pug
@ -38,92 +38,106 @@ html(lang="en")
|
|||||||
|
|
||||||
script(src="index.js" defer)
|
script(src="index.js" defer)
|
||||||
|
|
||||||
body.notLoggedIn.bg-color-grey(style='visibility:hidden;')
|
body.bg-color-grey
|
||||||
if endpoints.get && endpoints.post
|
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/notifications.pug
|
||||||
include views/partials/widgets.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
|
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
|
include views/partials/header.pug
|
||||||
|
|
||||||
nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.quarter.text-disable-selection.jsLeftMenu
|
nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.quarter.text-disable-selection.jsLeftMenu
|
||||||
include views/partials/menu-left.pug
|
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
|
if endpoints.get.dashboards
|
||||||
#dashboard(hidden, data-view="dashboard").scrollbar-content
|
#dashboard(hidden, data-view="dashboard").scrollbar-content
|
||||||
include views/page-dashboard.pug
|
include views/page-dashboard.pug
|
||||||
|
|
||||||
if publicDirectory && endpoints.get.users
|
if publicDirectory && endpoints.get.users
|
||||||
#members(hidden, data-view="members", no-render).scrollbar-content
|
#members(hidden, data-view="members", no-render).scrollbar-content
|
||||||
include views/page-directory.pug
|
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 endpoints.get.skills && endpoints.post.uploads && endpoints.post.users
|
if endpoints.get.projects
|
||||||
#profile(hidden, data-view="profile", no-render).scrollbar-content
|
#project(hidden, data-view="project").with-sidebar.whitespace-normal
|
||||||
include views/page-profile.pug
|
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}`)
|
||||||
if endpoints.get.joboffers
|
hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`)
|
||||||
#job-offers(hidden, data-view="job-offers", no-render).scrollbar-content
|
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`)
|
||||||
hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
|
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`)
|
||||||
hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
|
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`)
|
||||||
hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`)
|
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`)
|
||||||
hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
|
hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`)
|
||||||
hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
|
include views/page-project.pug
|
||||||
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/`)
|
if endpoints.get.circles
|
||||||
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
|
#circle(hidden, data-view="circle").with-sidebar.whitespace-normal
|
||||||
hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`)
|
hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles")
|
||||||
include views/page-job-offers.pug
|
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
|
if analytics
|
||||||
each provider in analytics
|
each provider in analytics
|
||||||
if provider.type && provider.url && provider.url
|
if provider.type && provider.url && provider.url
|
||||||
|
|||||||
@ -187,13 +187,15 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
|
|
||||||
// Detect the lang & initialize, based on the browser or "language" item from localstorage
|
// Detect the lang & initialize, based on the browser or "language" item from localstorage
|
||||||
jsI18n.detectLanguage();
|
jsI18n.detectLanguage();
|
||||||
|
let timer;
|
||||||
(new MutationObserver((mutations) => {
|
(new MutationObserver((mutations) => {
|
||||||
mutations.forEach(mutation => {
|
mutations.forEach(mutation => {
|
||||||
if(mutation.target.attributes["data-trans"] != null) {
|
if(mutation.target.attributes["data-trans"] != null) {
|
||||||
// Render the target of the mutation instantly
|
// Render the target of the mutation instantly
|
||||||
jsI18n.processNode(mutation.target);
|
jsI18n.processNode(mutation.target);
|
||||||
// Then wait one arbitrary second to re-render the whole document in case a widget re-rendered
|
// 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, {
|
}).observe(document.body, {
|
||||||
|
|||||||
@ -7,6 +7,9 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
document
|
document
|
||||||
.querySelectorAll(".notLoggedIn")
|
.querySelectorAll(".notLoggedIn")
|
||||||
.forEach(el => (el.style.visibility = "visible"));
|
.forEach(el => (el.style.visibility = "visible"));
|
||||||
|
document
|
||||||
|
.querySelectorAll(".loggedIn")
|
||||||
|
.forEach(el => (el.style.display = "none"));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -127,7 +127,8 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
|
|||||||
id="hubl_project_is_admin"
|
id="hubl_project_is_admin"
|
||||||
fields="is_admin"
|
fields="is_admin"
|
||||||
value-is_admin='true'
|
value-is_admin='true'
|
||||||
widget-is_admin='solid-form-hidden'
|
widget-is_admin='solid-form-checkbox'
|
||||||
|
hidden
|
||||||
)
|
)
|
||||||
|
|
||||||
solid-widget(name='hubl-project-admins')
|
solid-widget(name='hubl-project-admins')
|
||||||
|
|||||||
@ -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.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
|
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"}`
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user