Install this theme component
This theme component adds an available language drop-down to the site header. It will be very helpful for the user’s who are not familiar with the default site language.
Note: This feature is only available for logged-in users.
Sponsor
Special thanks to @Richard_Millington for sponsoring this component.
13 Likes
khenmu
(John Sweeney)
October 3, 2022, 7:55am
2
Having this be more prominent & including flags could really help people on multi-language forums.
Awesome addition to the ecosystem.
5 Likes
Heliosurge
(Dan DeMontmorency)
January 22, 2023, 7:26am
6
This is an amazing fantastic feature! It is my recommendation the Team should consider adding this component minimally as a pre installed theme-component in core!
Thank you very kindly for releasing this!
2 Likes
Heliosurge
(Dan DeMontmorency)
January 22, 2023, 7:31pm
7
I have small feature request.
Would it be possible to have drop down link able to adjust on mobile?
If I enable the chat plugin it is going to be very crowded. Perhaps even have it configurable to use flags on Desktop with mobile using the 2 letters similar to wasvit earlier windows? Been Awhile. lol
Though scaling might work to be similar on size as the search mag glass
Heliosurge
(Dan DeMontmorency)
February 11, 2023, 10:16pm
8
Just s9me feedback from one of members.
Great component
the selection of languages with the flags is cool, unfortunately contains some errors. Croatia has not received a flag.
Catalonia is a part of Spain.
Also can you share sime code to reduce flag size on Mobile?
Heliosurge
(Dan DeMontmorency)
March 16, 2023, 5:13pm
9
Would it be possible to have an option to use the country code instead of the flags? Similar to keyboard language on Windows.l?
ie en es etc… The flag is huge on mobile. Or an option to shrink the flag size.
Even a css overide would be handy. Thanks
1 Like
volanar
(Volanar)
July 13, 2023, 3:59pm
10
Yes, this switch needs to be modified to match the general style of discourse. He’s terrible now
1 Like
Canapin
(Coin-coin le Canapin)
July 18, 2023, 12:50pm
11
Screenshots of the current appearance for reference:
Desktop:
Mobile:
volanar
(Volanar)
July 29, 2023, 12:40pm
12
This component does not work for me. Is there anything else to do besides turning it on and selecting a template?
Canapin
(Coin-coin le Canapin)
July 31, 2023, 12:37pm
13
It needs at least a partial rework. If someone want to contribute and send PRs to fix various things, it’s welcomed
1 Like
volanar
(Volanar)
November 5, 2023, 1:23pm
15
The component is broken, but marked as compatible with the latest version
committed 07:02PM - 22 Aug 23 UTC
@volanar That’s not the same component.
1 Like
I’m removing the broken tag.
To begin with, the component was never broken!
There was a misunderstanding about another Discourse theme component that Volanar reported as broken.
I tested the component, which still works on the latest Discourse version.
However, it still requires some updates to modernize it, resolve a deprecation, and fix minor issues so it will work well on the latest Discourse version.
I went ahead and I made a PR (sponsored by @Richard_Millington )
Ahmedgagan:main
← Arkshine:refactor-modernize
opened 09:17PM - 18 Apr 24 UTC
This PR modernizes the components:
* Adds missing lint config files.
* Adds … basic acceptance tests
* Note: Is there a better way to check if a locale has been changed?
* Resolves `addToHeaderIcons` deprecation using the new `headerIcons` API.
* Pins theme component 3.3.0.beta1-dev.
* Fixes a missing Croatia flag image.
* Adjusts CSS (RTL friendly)
* Added a margin
* Adjusted icon size
* Fixed selector (and image height)
Desktop Before:
![EaRGN9PzDx](https://github.com/Ahmedgagan/header-locale-selector/assets/360640/9ffb1749-8de5-455a-b9d0-82927fa1cc43)
Desktop After:
![KO3CFUsU9A](https://github.com/Ahmedgagan/header-locale-selector/assets/360640/eccb3787-3c22-42fe-bf91-46213c32cb6e)
Mobile Before/After:
![v8kcrcydoG](https://github.com/Ahmedgagan/header-locale-selector/assets/360640/77ffa523-0ec4-4e23-9d8d-d174520b3d22)
https://github.com/Ahmedgagan/header-locale-selector/assets/360640/d2b0fa74-5f33-4d1a-a0fc-4e560b9e87b4
5 Likes
The PR has been merged; thanks, Ahmed.
4 Likes
how use 2 or 3 lang and remove others lang ?
btw i optimized code for locale-selector.js
:
import Component from "@ember/component";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import { ajax } from "discourse/lib/ajax";
import { userPath } from "discourse/lib/url";
import { isTesting } from "discourse-common/config/environment";
export default class LocaleSelector extends Component {
@service currentUser;
get availableLocales() {
// Cache filtered locales for performance optimization
if (!this._filteredLocales) {
const allLocales = JSON.parse(this.siteSettings.available_locales);
this._filteredLocales = allLocales.filter(locale => ['en', 'ar'].includes(locale));
}
return this._filteredLocales;
}
@action
onChangeLocale(value) {
this.set("currentUser.locale", value);
ajax(userPath(`${this.currentUser.username_lower}.json`), {
data: { locale: this.currentUser.locale },
type: "PUT",
}).then(() => {
if (!isTesting()) {
location.reload();
}
});
}
defaultItem() {
const currentUserLocale = document.documentElement
.getAttribute("lang")
?.replaceAll("-", "_");
return (
this.content.find((val) => val.value === currentUserLocale) ||
this.content.find((val) => val.value === this.siteSettings.default_locale)
);
}
}
after test it discourse keeping freeze
any idea?