Skip to content

Commit 20e370b

Browse files
kn0wnkn0wn
authored
Merge pull request #1 from rcco/0.1.0
feat: added option to replace insights
2 parents 0b6217b + 6e216ba commit 20e370b

4 files changed

Lines changed: 143 additions & 54 deletions

File tree

‎dist/language_switcher.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"version": "0.1.0",
23
"scripts": {
34
"build": "npx swc ./webflow/language_switcher.js -o ./dist/language_switcher.min.js --config-file .swcrc",
45
"build:new": "./compile.js"

‎webflow/language_switcher.js‎

Lines changed: 141 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,36 @@
1-
const LANG_IDENTIFIER = "data-lang";
2-
const DEFAULT_LANG = "en";
3-
const WF_LANG_SELECTOR = ".weglot-lang-selection";
4-
const WF_LANG_CURRENT = ".weglot-current";
5-
const DEV = false;
1+
/**
2+
* Setup the default options for the script
3+
4+
* @returns {Object}
5+
*/
6+
const weglotDefaultOptions = {
7+
LANG_IDENTIFIER: "data-lang",
8+
DEFAULT_LANG: "en",
9+
WF_LANG_SELECTOR: ".weglot-lang-selection",
10+
WF_LANG_CURRENT: ".weglot-current",
11+
DEV: false,
12+
INSIGHTS: {
13+
enabled: false,
14+
domain: "",
15+
prefix: "insights",
16+
},
17+
};
18+
19+
/**
20+
* Allows the user to override the default options.
21+
*
22+
* @param {Object} options
23+
* @returns {Object}
24+
* @example
25+
* window.weglotCustomOptions = {
26+
* DEV: true,
27+
* }
28+
*/
29+
const weglotOptions = Object.assign(
30+
{},
31+
weglotDefaultOptions,
32+
window.weglotCustomOptions
33+
);
634

735
/**
836
* Example of initializing the library.
@@ -22,60 +50,121 @@ const DEV = false;
2250
* @docs https://developers.weglot.com/javascript/javascript-functions#languagechanged
2351
*/
2452
Weglot.on("languageChanged", (newLang, prevLang) => {
25-
log(`Language changed from ${prevLang} to ${newLang}`);
53+
weglotImpl.setup(newLang, prevLang);
54+
});
55+
56+
/**
57+
* On initial load of the weglot, here we just want to attach click events
58+
* to the buttons.
59+
*/
60+
Weglot.on("initialized", () => {
61+
weglotImpl.setupEventListeners();
62+
});
63+
64+
const weglotImpl = {
65+
setup(newLang, prevLang) {
66+
weglotImpl.log(`Language changed from ${prevLang} to ${newLang}`);
67+
68+
const otherLangOptions = document.querySelectorAll(
69+
weglotOptions.WF_LANG_SELECTOR
70+
);
71+
const wfCurrent = document.querySelector(weglotOptions.WF_LANG_CURRENT);
72+
const previous = prevLang || weglotOptions.DEFAULT_LANG;
2673

27-
const otherLangOptions = document.querySelectorAll(WF_LANG_SELECTOR);
28-
const wfCurrent = document.querySelector(WF_LANG_CURRENT);
29-
const previous = prevLang || DEFAULT_LANG;
74+
wfCurrent.textContent = newLang.toUpperCase();
3075

31-
wfCurrent.textContent = newLang.toUpperCase();
76+
const otherLangOptionsArray = Array.from(otherLangOptions);
3277

33-
const otherLangOptionsArray = Array.from(otherLangOptions);
78+
const elementToUpdate = otherLangOptionsArray.find(
79+
(option) => option.getAttribute(weglotOptions.LANG_IDENTIFIER) === newLang
80+
);
3481

35-
const elementToUpdate = otherLangOptionsArray.find(
36-
(option) => option.getAttribute(LANG_IDENTIFIER) === newLang
37-
);
82+
elementToUpdate.setAttribute(weglotOptions.LANG_IDENTIFIER, previous);
83+
elementToUpdate.textContent = previous.toUpperCase();
3884

39-
elementToUpdate.setAttribute(LANG_IDENTIFIER, previous);
40-
elementToUpdate.textContent = previous.toUpperCase();
85+
if (weglotOptions.INSIGHTS.enabled) {
86+
weglotImpl.updateInsightsLinks(newLang, prevLang);
87+
}
4188

89+
/**
90+
* Rerun the event listeners to update the language
91+
*/
92+
weglotImpl.setupEventListeners();
93+
},
4294
/**
43-
* Rerun the event listeners to update the language
95+
* Using the WF_LANG_SELECTOR, we want to attach click events to all of the
96+
* language buttons.
4497
*/
45-
setupEventListeners();
46-
});
98+
setupEventListeners() {
99+
const otherLangOptions = document.querySelectorAll(
100+
weglotOptions.WF_LANG_SELECTOR
101+
);
47102

48-
/**
49-
* On initial load of the weglot, here we just want to attach click events
50-
* to the buttons.
51-
*/
52-
Weglot.on("initialized", () => {
53-
setupEventListeners();
54-
});
103+
otherLangOptions.forEach((link) => {
104+
link.removeEventListener("click", weglotImpl.weglotClickAttacher);
105+
link.addEventListener("click", weglotImpl.weglotClickAttacher);
106+
});
107+
},
108+
weglotClickAttacher(e) {
109+
const lang = e.currentTarget.getAttribute(weglotOptions.LANG_IDENTIFIER);
110+
e.preventDefault();
55111

56-
/**
57-
* Using the WF_LANG_SELECTOR, we want to attach click events to all of the
58-
* language buttons.
59-
*/
60-
function setupEventListeners() {
61-
const otherLangOptions = document.querySelectorAll(WF_LANG_SELECTOR);
62-
63-
otherLangOptions.forEach((link) => {
64-
link.removeEventListener("click", weglotClickAttacher);
65-
link.addEventListener("click", weglotClickAttacher);
66-
});
67-
}
68-
69-
function weglotClickAttacher(e) {
70-
const lang = e.currentTarget.getAttribute(LANG_IDENTIFIER);
71-
e.preventDefault();
72-
73-
Weglot.switchTo(lang);
74-
log("Setup listener for", lang);
75-
}
76-
77-
function log(message) {
78-
if (DEV) {
79-
console.log(message);
80-
}
81-
}
112+
Weglot.switchTo(lang);
113+
weglotImpl.log("Setup listener for", lang);
114+
},
115+
/**
116+
* The implementation is built specifcally around how hubspot handle duplicate
117+
* articles that are shared across languages.
118+
*
119+
* @example
120+
* const url = 'https://article_url.com/${es}/article_title-${es}'
121+
*
122+
* @param {*} newLang
123+
* @param {*} prevLang
124+
*/
125+
updateInsightsLinks(newLang, prevLang) {
126+
const links = document.getElementsByTagName("a");
127+
const insightsLinks = Array.from(links).filter((link) =>
128+
link.href.includes(weglotOptions.INSIGHTS.prefix)
129+
);
130+
131+
weglotImpl.log(`Found ${insightsLinks.length} insights links`);
132+
133+
insightsLinks.forEach((link) => {
134+
/**
135+
* Remove the text from the links that have the previous lang at the end of the url
136+
*/
137+
const url = link.href.replace(new RegExp(`-${prevLang}$`), "");
138+
139+
/**
140+
* Separate the url into into two parts
141+
*/
142+
const [fullUrl, params = ""] = url.split("?");
143+
144+
/**
145+
* Used to check if there is a article title in the url
146+
*/
147+
const separateBlog = fullUrl.split("/blog");
148+
149+
/**
150+
* We want to detect if there is an article name after the blog
151+
*/
152+
const articleName = separateBlog[1] ? separateBlog[1] : "";
153+
154+
if (newLang !== weglotOptions.DEFAULT_LANG) {
155+
link.href = `${weglotOptions.INSIGHTS.domain}/${newLang}/blog${
156+
articleName.length ? articleName : ""
157+
}${articleName.length ? `-${newLang}` : ""}${params}`;
158+
} else {
159+
link.href = `${weglotOptions.INSIGHTS.domain}/${newLang}/blog${
160+
articleName.length ? articleName : ""
161+
}${params}`;
162+
}
163+
});
164+
},
165+
log(message) {
166+
if (weglotOptions.DEV) {
167+
console.log(message);
168+
}
169+
},
170+
};

‎webflow/language_switcher.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)