feat: Language selector with optional compact

fccn/nau-technical#53
fccn · Dec 11, 2024 · 648342b · 648342b
1 parent bc8702e
commit 648342b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 17 deletions.
diff --git a/src/LanguageSelector/index.jsx b/src/LanguageSelector/index.jsx
@@ -25,30 +25,58 @@ const onLanguageSelected = async (username, selectedLanguageCode) => {
 };
 
 const LanguageSelector = ({
-  intl, options, authenticatedUser, ...props
+  intl, options, authenticatedUser, compact, ...props
 }) => {
+
+  const languageLabel = (languageCode) => {
+    const option = options.find( ({ value, label }) => value === languageCode )
+    return option ? option.label : null
+  }
+
   const handleChange = (languageCode, event) => {
     const previousSiteLanguage = getLocale();
     console.debug(previousSiteLanguage, languageCode, authenticatedUser);
 
     if (previousSiteLanguage !== languageCode) {
       onLanguageSelected(authenticatedUser?.username, languageCode);
     }
+
+    event.target.parentElement.parentElement.querySelector(".languageLabel").innerHTML = languageLabel(languageCode);
   };
 
+  const currentLangLabel = languageLabel(intl.locale)
+  const showLabel = !Boolean(compact || false);
+
   return (
-    <Dropdown className="language-selector" >
-      <Dropdown.Toggle variant="outline-primary">
-        <FontAwesomeIcon icon={faGlobe} />
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-      {options.map(({ value, label }) => (
-        <Dropdown.Item key={value} eventKey={value} onSelect={handleChange}>
-          {label}
-        </Dropdown.Item>
-      ))}
-      </Dropdown.Menu>
-    </Dropdown>
+    <>
+      <Dropdown className="language-selector">
+        <Dropdown.Toggle variant="outline-primary">
+          <FontAwesomeIcon icon={faGlobe} />
+          {showLabel && (
+            currentLangLabel ? (
+              <span class="pl-1 languageLabel">
+                {currentLangLabel}
+              </span>
+            ) : (
+              <span class="pl-1">
+                <FormattedMessage
+                  id="footer.languageForm.select.label"
+                  defaultMessage="Choose Language"
+                  description="The label for the laguage select part of the language selection form."
+                />
+              </span>
+            )
+          )}
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+        {options.map(({ value, label }) => (
+          <Dropdown.Item key={value} eventKey={value} onSelect={handleChange}>
+            {label}
+          </Dropdown.Item>
+        ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
   );
 };
 
@@ -57,6 +85,7 @@ LanguageSelector.propTypes = {
     username: PropTypes.string,
   }).isRequired,
   intl: intlShape.isRequired,
+  compact: PropTypes.bool,
   options: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.string,
     label: PropTypes.string,

diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
@@ -82,10 +82,20 @@ const LearningHeader = ({
         </div>
         {getConfig().ENABLE_HEADER_LANG_SELECTOR && (
           <div className="mx-2 d-md-inline-flex">
-            <LanguageSelector
-              options={JSON.parse(getConfig().SITE_SUPPORTED_LANGUAGES)}
-              authenticatedUser={authenticatedUser}
-            />
+            <Responsive maxWidth={1000}>
+              <LanguageSelector
+                options={JSON.parse(getConfig().SITE_SUPPORTED_LANGUAGES)}
+                compact={true}
+                authenticatedUser={authenticatedUser}
+              />
+            </Responsive>
+            <Responsive minWidth={1000}>
+              <LanguageSelector
+                options={JSON.parse(getConfig().SITE_SUPPORTED_LANGUAGES)}
+                compact={false}
+                authenticatedUser={authenticatedUser}
+              />
+            </Responsive>
           </div>
         )}
         {showUserDropdown && authenticatedUser && (