From 10b545bb861e5991406a19631d8b8210c78b4d7e Mon Sep 17 00:00:00 2001 From: Marvin Dalheimer Date: Mon, 1 Apr 2019 21:35:46 +0200 Subject: [PATCH 1/4] Added option for language selector Implemented a language selector submenu that can be turned on or off by a config value. Resolves: panr/hugo-theme-terminal#31 --- README.md | 2 ++ USERS.md | 2 ++ layouts/partials/menu.html | 23 +++++++++++++++++++++++ source/css/header.css | 22 ++++++++++++++++++++++ source/js/languageSelector.js | 12 ++++++++++++ webpack.config.js | 6 +++++- 6 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 source/js/languageSelector.js diff --git a/README.md b/README.md index d07e40a..c45c26f 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,8 @@ paginate = 5 themeColor = "orange" # if you set this to 0, only submenu trigger will be visible showMenuItems = 2 + # show selector to switch language + showLanguageSelector = false # set theme to full screen width fullWidthTheme = false # center theme with default width diff --git a/USERS.md b/USERS.md index de0ce66..40c3126 100644 --- a/USERS.md +++ b/USERS.md @@ -6,3 +6,5 @@ TEMPLATE: - https://radoslawkoziel.pl — **Radek Kozieł** (Software designer and developer) --> + +- [rinma.dev](https://rinma.dev) - **Marvin Dalheimer** (Software Developer) diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 9fe6e60..bab60fa 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -26,6 +26,21 @@ {{ end }} {{ end }} {{ end }} + + {{ if $.Site.Params.showLanguageSelector }} +
+
+ +
+
  • {{ .Language.LanguageName }} ▾
    • +
    + +
    + {{ end }} diff --git a/source/css/header.css b/source/css/header.css index f585b4f..d912bfe 100644 --- a/source/css/header.css +++ b/source/css/header.css @@ -121,6 +121,28 @@ } } + .spacer { + flex-grow: 1; + } + + .language-selector { + position: relative; + + .language-selector-actual { + list-style-type: none; + display: flex; + flex-direction: row; + color: var(--accent); + cursor: pointer; + } + + .language-selector-more { + @mixin menu; + top: 35px; + right: 0; + } + } + &-trigger { color: var(--accent); border: 2px solid; diff --git a/source/js/languageSelector.js b/source/js/languageSelector.js new file mode 100644 index 0000000..0ea72e2 --- /dev/null +++ b/source/js/languageSelector.js @@ -0,0 +1,12 @@ +const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth"); +const isMobile = () => window.matchMedia(mobileQuery).matches; + +if(!isMobile()) { + languageSelector = document.getElementsByClassName("language-selector-actual")[0]; + moreLanguagesContainer = document.getElementsByClassName("language-selector-more")[0]; + + languageSelector && languageSelector.addEventListener("click", e => { + e.stopPropagation(); + moreLanguagesContainer.classList.toggle("hidden"); + }); +} diff --git a/webpack.config.js b/webpack.config.js index e5ae108..e965665 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,7 +14,11 @@ module.exports = { modules: ["source", "node_modules"], }, entry: { - "main.js": [join("source", "js", "main.js"), join("source", "js", "menu.js")], + "main.js": [ + join("source", "js", "main.js"), + join("source", "js", "menu.js"), + join("source", "js", "languageSelector.js") + ], "prism.js": join("source", "js", "prism.js"), "style.css": join("source", "css", "style.css"), "red.css": join("source", "css", "color", "red.css"), From 270a135fcab4f1b09c3dd27b6544f766e3982b22 Mon Sep 17 00:00:00 2001 From: Marvin Dalheimer Date: Tue, 13 Aug 2019 08:44:06 +0200 Subject: [PATCH 2/4] Add body listener for trigger closing language box --- source/js/languageSelector.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/source/js/languageSelector.js b/source/js/languageSelector.js index 0ea72e2..3002786 100644 --- a/source/js/languageSelector.js +++ b/source/js/languageSelector.js @@ -5,6 +5,12 @@ if(!isMobile()) { languageSelector = document.getElementsByClassName("language-selector-actual")[0]; moreLanguagesContainer = document.getElementsByClassName("language-selector-more")[0]; + document.body.addEventListener("click", () => { + if (moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) { + moreLanguagesContainer.classList.add("hidden"); + } + }); + languageSelector && languageSelector.addEventListener("click", e => { e.stopPropagation(); moreLanguagesContainer.classList.toggle("hidden"); From 28dd0fadf9ecb0e3fa438124c4219ea2a0f2883d Mon Sep 17 00:00:00 2001 From: Marvin Dalheimer Date: Tue, 13 Aug 2019 08:44:40 +0200 Subject: [PATCH 3/4] Use ul instead of div and BEM naming --- layouts/partials/menu.html | 17 ++++++++--------- source/css/header.css | 7 +++++-- source/js/languageSelector.js | 4 ++-- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index bab60fa..689ebdb 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -29,17 +29,16 @@ {{ if $.Site.Params.showLanguageSelector }}
    -
    - -
    -
  • {{ .Language.LanguageName }} ▾
    • -
    - -
    + + {{ end }} diff --git a/source/css/header.css b/source/css/header.css index d912bfe..2f73def 100644 --- a/source/css/header.css +++ b/source/css/header.css @@ -127,16 +127,19 @@ .language-selector { position: relative; + list-style: none; + margin: 0; - .language-selector-actual { + &-current { list-style-type: none; display: flex; flex-direction: row; color: var(--accent); cursor: pointer; + margin: 0; } - .language-selector-more { + &__more { @mixin menu; top: 35px; right: 0; diff --git a/source/js/languageSelector.js b/source/js/languageSelector.js index 3002786..104f28e 100644 --- a/source/js/languageSelector.js +++ b/source/js/languageSelector.js @@ -2,8 +2,8 @@ const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWid const isMobile = () => window.matchMedia(mobileQuery).matches; if(!isMobile()) { - languageSelector = document.getElementsByClassName("language-selector-actual")[0]; - moreLanguagesContainer = document.getElementsByClassName("language-selector-more")[0]; + languageSelector = document.querySelector(".language-selector-current"); + moreLanguagesContainer = document.querySelector(".language-selector__more"); document.body.addEventListener("click", () => { if (moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) { From 63b2c69f85fb293aacf8fc76aa15dbc5db611872 Mon Sep 17 00:00:00 2001 From: Marvin Dalheimer Date: Tue, 13 Aug 2019 13:16:18 +0200 Subject: [PATCH 4/4] Remove unused css classes --- layouts/partials/menu.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index 689ebdb..9a215b4 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -51,8 +51,8 @@ {{ if $.Site.Params.showLanguageSelector }}
    {{ range $.Site.Home.AllTranslations }} -
  • - {{ .Language.LanguageName }} +
  • + {{ .Language.LanguageName }}
    • {{ end }} {{ end }}