From 1cb1ec2b3fd53b861c5097bbd4dd9642f9f869c8 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Thu, 30 Dec 2021 10:23:47 +0100 Subject: [PATCH] Show banners --- assets/css/components/menuBar/banner.css | 41 +++++++++++ .../{menuBar.css => menuBar/base.css} | 0 assets/css/pages/passwordForgotten/main.css | 2 +- assets/js/common/langs.js | 10 +++ assets/js/common/page.js | 2 +- assets/js/components/menuBar/authenticated.js | 15 ++-- assets/js/components/menuBar/banner.js | 71 +++++++++++++++++++ assets/js/components/menuBar/common.js | 6 +- .../js/components/menuBar/notAuthenticated.js | 4 +- assets/js/pages/login.js | 3 + assets/js/typings/ServerConfig.d.ts | 9 +++ assets/templates/pages/login/loginPage.tpl | 3 + system/config/dev.config.php | 4 +- 13 files changed, 159 insertions(+), 11 deletions(-) create mode 100644 assets/css/components/menuBar/banner.css rename assets/css/components/{menuBar.css => menuBar/base.css} (100%) create mode 100644 assets/js/components/menuBar/banner.js diff --git a/assets/css/components/menuBar/banner.css b/assets/css/components/menuBar/banner.css new file mode 100644 index 00000000..ea9b970b --- /dev/null +++ b/assets/css/components/menuBar/banner.css @@ -0,0 +1,41 @@ +/** + * Global banner + * + * @author Pierre Hubert + */ + +.banner { + padding: 1px 15px; + text-align: left; + min-height: unset !important; + margin-bottom: 0px; +} + +.banner button { + right: unset !important; +} + +.banner a { + margin-left: 5px; +} + +.content-wrapper + .content-wrapper, +.content-wrapper + div + .content-wrapper, +.content-wrapper + div + div + .content-wrapper, +.content-wrapper + div + div + div + .content-wrapper { + padding-top: 1px; +} + +@media screen and (max-width: 767px) { + .banner.content-wrapper { + margin-top: 50px; + } + + .content-wrapper + .content-wrapper, + .content-wrapper + div + .content-wrapper, + .content-wrapper + div + div + .content-wrapper, + .content-wrapper + div + div + div + .content-wrapper { + margin-top: 0px !important; + padding-top: 2px !important; + } +} \ No newline at end of file diff --git a/assets/css/components/menuBar.css b/assets/css/components/menuBar/base.css similarity index 100% rename from assets/css/components/menuBar.css rename to assets/css/components/menuBar/base.css diff --git a/assets/css/pages/passwordForgotten/main.css b/assets/css/pages/passwordForgotten/main.css index 383d05a4..6c72d7bd 100644 --- a/assets/css/pages/passwordForgotten/main.css +++ b/assets/css/pages/passwordForgotten/main.css @@ -7,5 +7,5 @@ .box-password-forgotten { max-width: 350px; margin: auto; - margin-top: 20px; + margin-top: 30px; } \ No newline at end of file diff --git a/assets/js/common/langs.js b/assets/js/common/langs.js index 1466a651..4859cc88 100644 --- a/assets/js/common/langs.js +++ b/assets/js/common/langs.js @@ -121,4 +121,14 @@ ComunicWeb.common.langs = { return string; }, +} + + +/** + * Get current language + * + * @returns {string} + */ +function currLang() { + return ComunicWeb.common.langs.current(); } \ No newline at end of file diff --git a/assets/js/common/page.js b/assets/js/common/page.js index bdac68ba..968168b0 100644 --- a/assets/js/common/page.js +++ b/assets/js/common/page.js @@ -252,7 +252,7 @@ const Page = { (document.body.className.includes("sidebar-collapse") ? " sidebar-collapse " : ""); //We load the menubar - ComunicWeb.components.menuBar.common.display(); + MenuBar.display(); //Bottom ComunicWeb.components.bottom.main.display(); diff --git a/assets/js/components/menuBar/authenticated.js b/assets/js/components/menuBar/authenticated.js index 7bf34c4d..188c8c9c 100644 --- a/assets/js/components/menuBar/authenticated.js +++ b/assets/js/components/menuBar/authenticated.js @@ -4,7 +4,7 @@ * @author Pierre HUBERT */ -ComunicWeb.components.menuBar.authenticated = { +const AuthenticatedMenuBar = { /** * Dropdown menu links list @@ -28,8 +28,8 @@ ComunicWeb.components.menuBar.authenticated = { //Dark theme { innerLang: "menu_bar_action_dark_theme", - onclick: function(b){ComunicWeb.components.menuBar.authenticated.darkThemeButtonClicked(true, b)}, - oninit: function(b){ComunicWeb.components.menuBar.authenticated.darkThemeButtonClicked(false, b)}, + onclick: function(b){AuthenticatedMenuBar.darkThemeButtonClicked(true, b)}, + oninit: function(b){AuthenticatedMenuBar.darkThemeButtonClicked(false, b)}, icon: "fa-sun-o" }, @@ -56,7 +56,7 @@ ComunicWeb.components.menuBar.authenticated = { */ addElements: function(container){ - // Site logo + // Site name createElem2({ appendTo: container, type: "a", @@ -112,6 +112,13 @@ ComunicWeb.components.menuBar.authenticated = { //Add dropdown menu this.addDropdown(navbarRightElemList); + + // Banner + const banner = MenubarBanner.addBanner(undefined) + if(banner) { + container.parentNode.insertBefore(banner, container.nextElementSibling) + banner.classList.add("content-wrapper") + } }, diff --git a/assets/js/components/menuBar/banner.js b/assets/js/components/menuBar/banner.js new file mode 100644 index 00000000..b875005c --- /dev/null +++ b/assets/js/components/menuBar/banner.js @@ -0,0 +1,71 @@ +/** + * Menu bar banner + * + * @author Pierre Hubert + */ + +let hasClosedBanner = false; + +const MenubarBanner = { + /** + * Add menubar banner if required + * + * @param {HTMLElement} target Target element + * @returns {HTMLElement} The banner (if it was created) + */ + addBanner: function(target) { + if(hasClosedBanner || + !ServerConfig.conf.banner || + !ServerConfig.conf.banner.enabled && + ServerConfig.conf.banner.expire < ComunicDate.time()) + return; + + const banner = ServerConfig.conf.banner; + + const rootEl = createElem2({ + appendTo: target, + type: "div", + class: "banner alert alert-dismissible alert-" +(banner.nature == "information" ? "info" : (banner.nature == "success" ? "success" : "danger")) + }) + + // Close button + createElem2({ + appendTo: rootEl, + type: "button", + class: "close", + elemType: "button", + innerHTML: "x", + onclick: () => { + rootEl.remove(); + hasClosedBanner = true; + } + }) + + // icon + createElem2({ + appendTo: rootEl, + type: "i", + class: "icon fa "+(banner.nature == "information" ? "fa-info" : (banner.nature == "success" ? "fa-check" : "fa-warning")) + }) + + // message + createElem2({ + appendTo: rootEl, + type: "span", + innerHTML: banner.message.hasOwnProperty(currLang()) ? banner.message[currLang()] : banner.message["en"] + }) + + // link + if (banner.link) { + const link = createElem2({ + appendTo: rootEl, + type: "a", + href: banner.link, + innerHTML: tr("Learn more") + }) + link.target = "_blank"; + } + + return rootEl; + } +}; \ No newline at end of file diff --git a/assets/js/components/menuBar/common.js b/assets/js/components/menuBar/common.js index 7e7cf67f..a114b49f 100644 --- a/assets/js/components/menuBar/common.js +++ b/assets/js/components/menuBar/common.js @@ -4,7 +4,7 @@ * @author Pierre HUBERT */ -ComunicWeb.components.menuBar.common = { +const MenuBar = { /** * Display menu bar * @@ -61,11 +61,11 @@ ComunicWeb.components.menuBar.common = { //Call specific menu if(signed_in()){ //Call authenticated menubar - ComunicWeb.components.menuBar.authenticated.addElements(menuContainer); + AuthenticatedMenuBar.addElements(menuContainer); } else { //Call not-logged-in menubar - ComunicWeb.components.menuBar.notAuthenticated.addElements(menuContainer); + NotAuthenticatedMenuBar.addElements(menuContainer); } }, diff --git a/assets/js/components/menuBar/notAuthenticated.js b/assets/js/components/menuBar/notAuthenticated.js index 1c6dc8bd..4ff2c4ee 100644 --- a/assets/js/components/menuBar/notAuthenticated.js +++ b/assets/js/components/menuBar/notAuthenticated.js @@ -4,7 +4,7 @@ * @author Pierre HUBERT */ -ComunicWeb.components.menuBar.notAuthenticated = { +const NotAuthenticatedMenuBar = { /** * Add not-authenticated user specific elements * @@ -124,5 +124,7 @@ ComunicWeb.components.menuBar.notAuthenticated = { //Block form return false; } + + MenubarBanner.addBanner(menuHeader) } } \ No newline at end of file diff --git a/assets/js/pages/login.js b/assets/js/pages/login.js index d04bcd4e..b3334185 100644 --- a/assets/js/pages/login.js +++ b/assets/js/pages/login.js @@ -78,6 +78,9 @@ ComunicWeb.pages.login = { //Check if we have to display a login failed message if(additionnalData.loginFailedMessage) ComunicWeb.pages.login.displayLoginError(); + + // Add menu banner + MenubarBanner.addBanner(byId("login_banner")) }; //Apply template diff --git a/assets/js/typings/ServerConfig.d.ts b/assets/js/typings/ServerConfig.d.ts index d2782174..79f4e481 100644 --- a/assets/js/typings/ServerConfig.d.ts +++ b/assets/js/typings/ServerConfig.d.ts @@ -41,6 +41,14 @@ declare interface AccountInformationPolicy { max_location_length: number, } +declare interface Banner { + enabled: boolean, + expire ?: number, + nature: "information"|"warning"|"success", + message: Map, + link ?: string, +} + declare interface StaticServerConfig { terms_url: string, privacy_policy_url: string, @@ -50,4 +58,5 @@ declare interface StaticServerConfig { data_conservation_policy: DataConservationPolicySettings, conversations_policy: ConversationPolicy, account_info_policy: AccountInformationPolicy, + banner?: Banner, } \ No newline at end of file diff --git a/assets/templates/pages/login/loginPage.tpl b/assets/templates/pages/login/loginPage.tpl index 555f30dd..c5579ab6 100644 --- a/assets/templates/pages/login/loginPage.tpl +++ b/assets/templates/pages/login/loginPage.tpl @@ -5,6 +5,9 @@