Skip to content

Commit

Permalink
Add google-translate.js v1.0.4 using Earth emoji, add Google Analytic…
Browse files Browse the repository at this point in the history
…s, some changes to the web install page design.
  • Loading branch information
xyzroe committed Apr 21, 2024
1 parent cac4d4c commit f33a23b
Show file tree
Hide file tree
Showing 7 changed files with 284 additions and 39 deletions.
43 changes: 43 additions & 0 deletions docs/assets/javascripts/custom.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
document.addEventListener("DOMContentLoaded", function () {
var titleElement = document.querySelector('.md-header__title');
if (titleElement) {
var customBlock = document.createElement('div');
customBlock.innerHTML = `
<div class="language-selector">
<div class="flag-icon">🌍</div>
<div class="language-list" style="display: none;">
<a href="#" alt="EN" data-google-lang="en" class="language__img">🇬🇧</a>
<a href="#" alt="UA" data-google-lang="uk" class="language__img">🇺🇦</a>
<a href="#" alt="PL" data-google-lang="pl" class="language__img">🇵🇱</a>
<a href="#" alt="IL" data-google-lang="iw" class="language__img">🇮🇱</a>
<a href="#" alt="DE" data-google-lang="de" class="language__img">🇩🇪</a>
<a href="#" alt="FR" data-google-lang="fr" class="language__img">🇫🇷</a>
<a href="#" alt="ES" data-google-lang="es" class="language__img">🇪🇸</a>
<a href="#" alt="IT" data-google-lang="it" class="language__img">🇮🇹</a>
<a href="#" alt="NL" data-google-lang="nl" class="language__img">🇳🇱</a>
<a href="#" alt="RU" data-google-lang="ru" class="language__img">🇷🇺</a>
<a href="#" alt="ZH" data-google-lang="zh-CN" class="language__img">🇨🇳</a>
</div>
</div>`;
customBlock.className = 'language';
titleElement.parentNode.insertBefore(customBlock, titleElement.nextSibling);
}
});


document.addEventListener('DOMContentLoaded', function () {
var flagIcon = document.querySelector('.flag-icon');
var languageList = document.querySelector('.language-list');

flagIcon.addEventListener('click', function () {
languageList.style.display = languageList.style.display === 'none' ? 'flex' : 'none';
});

document.addEventListener('click', function (event) {
if (!flagIcon.contains(event.target) && !languageList.contains(event.target)) {
languageList.style.display = 'none';
}
});
});


113 changes: 113 additions & 0 deletions docs/assets/javascripts/google-translate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/*!***************************************************
* google-translate.js v1.0.4
* https://Get-Web.Site/
* author: Vitalii P.
*****************************************************/

const googleTranslateConfig = {
/* Original language */
lang: "en",

/* The language we translate into on the first visit*/
/* Язык, на который переводим при первом посещении */
/* langFirstVisit: 'uk', */

/* Если скрипт не работает или работает неправильно, раскомментируйте и укажите основной домен в свойстве domain */
/* If the script does not work or does not work correctly, uncomment and specify the main domain in the domain property */
domain: "xyzroe.cc"
};

document.addEventListener("DOMContentLoaded", (event) => {
/* Подключаем виджет google translate */
/* Connecting the google translate widget */
let script = document.createElement("script");
script.src = `//translate.google.com/translate_a/element.js?cb=TranslateWidgetIsLoaded`;
document.getElementsByTagName("head")[0].appendChild(script);
});

function TranslateWidgetIsLoaded() {
TranslateInit(googleTranslateConfig);
}

function TranslateInit(config) {
if (config.langFirstVisit && !Cookies.get("googtrans")) {
/* Если установлен язык перевода для первого посещения и куки не назначены */
/* If the translation language is installed for the first visit and cookies are not assigned */
TranslateCookieHandler("/auto/" + config.langFirstVisit);
}

let code = TranslateGetCode(config);

TranslateHtmlHandler(code);

if (code == config.lang) {
/* Если язык по умолчанию, совпадает с языком на который переводим, то очищаем куки */
/* If the default language is the same as the language we are translating into, then we clear the cookies */
TranslateCookieHandler(null, config.domain);
}

/* Инициализируем виджет с языком по умолчанию */
/* Initialize the widget with the default language */
new google.translate.TranslateElement({
pageLanguage: config.lang,
});

/* Вешаем событие клик на флаги */
/* Assigning a handler to the flags */
TranslateEventHandler("click", "[data-google-lang]", function (e) {
TranslateCookieHandler(
"/" + config.lang + "/" + e.getAttribute("data-google-lang"),
config.domain
);
/* Перезагружаем страницу */
/* Reloading the page */
window.location.reload();
});
}

function TranslateGetCode(config) {
/* Если куки нет, то передаем дефолтный язык */
/* If there are no cookies, then we pass the default language */
let lang =
Cookies.get("googtrans") != undefined && Cookies.get("googtrans") != "null"
? Cookies.get("googtrans")
: config.lang;
return lang.match(/(?!^\/)[^\/]*$/gm)[0];
}

function TranslateCookieHandler(val, domain) {
/* Записываем куки /язык_который_переводим/язык_на_который_переводим */
/* Writing down cookies /language_for_translation/the_language_we_are_translating_into */
Cookies.set("googtrans", val);
Cookies.set("googtrans", val, {
domain: "." + document.domain,
});

if (domain == "undefined") return;
/* записываем куки для домена, если он назначен в конфиге */
/* Writing down cookies for the domain, if it is assigned in the config */
Cookies.set("googtrans", val, {
domain: domain,
});

Cookies.set("googtrans", val, {
domain: "." + domain,
});
}

function TranslateEventHandler(event, selector, handler) {
document.addEventListener(event, function (e) {
let el = e.target.closest(selector);
if (el) handler(el);
});
}

function TranslateHtmlHandler(code) {
/* Получаем язык на который переводим и производим необходимые манипуляции с DOM */
/* We get the language to which we translate and produce the necessary manipulations with DOM */
if (document.querySelector('[data-google-lang="' + code + '"]') !== null) {
document
.querySelector('[data-google-lang="' + code + '"]')
.classList.add("language__img_active");
}
}
67 changes: 67 additions & 0 deletions docs/assets/stylesheets/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -990,4 +990,71 @@ screen and (max-width:600px) {
100% {
opacity: 1;
}
}

.language-selector {
position: relative;
cursor: pointer;
display: inline-block;
}

.flag-icon {
display: inline-block;
font-size: 1em;
}

.language-list {
position: absolute;
list-style: none;
display: none;
right: 150%;
z-index: 1000;
top: -0.1em;
background-color: var(--md-primary-bg-color);
border-radius: 0.5em;
border: 1px solid var(--md-footer-bg-color)
}

.language-list a {
display: block;
color: black;
text-decoration: none;
padding-inline: 5px;
}

.language {
z-index: 999;
display: flex;
flex-direction: row;
font-size: 2em;
}

.language__img {
margin: 2px;
cursor: pointer;
opacity: .8;
}

.language__img:hover,
.language__img_active {
opacity: 1;
}

.web-install {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
width: 20em;
height: auto;
}

.pick-variant select {
background: transparent;
width: 7em;
padding: 0.1em;
font-size: 1.5em;
border: 1px solid #ddd;
height: 2em;
text-align: center;
}
26 changes: 26 additions & 0 deletions docs/assets/stylesheets/google-translate.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/* Виджет назначает height: 100% , что может привести к непредксказуемому результату, если вы этого не планровали */

html {
height: auto !important;
}

/* Фиксируем позицию body, которую меняет панель гугла */

body {
top: 0 !important;
position: static !important;
}

/* Прячем панель гугла */

.skiptranslate {
display: none !important;
}

/* Убираем подсветку ссылок */

.goog-text-highlight {
background-color: inherit;
box-shadow: none;
box-sizing: inherit;
}
2 changes: 1 addition & 1 deletion docs/guide.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Device Operation Guide

!!! question "Check your device"
Not all devices with this firmware support an LED and a button. These features are only available on devices that have them physically present.
Not all devices with this firmware support LEDs and a button. These features are only available on devices that have them physically present.
If your device does not support these features, the corresponding options will not appear in the web interface.

## LED Indicators
Expand Down
65 changes: 27 additions & 38 deletions docs/install.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,6 @@ description: Web Installer for XZG Firmware
.md-content__button {
display: none;
}
.md-main__inner {
width: 65%;
}
.pick-variant select {
background: transparent;
width: 300px;
padding: 1px;
font-size: 16pt;
border: 1px solid #ddd;
height: 51px;
border-radius: 15px;
}
.md-sidebar--primary {
display: none;
}
Expand All @@ -37,6 +25,7 @@ Flash or Find your device using next options:
<li>Get XZG firmware installed and connected in less than 3 minutes!</li>
</ol>

<div class="web-install">
<div class="pick-variant">
<select id="firmwareVersion" onchange="updateManifestUrl()">

Expand All @@ -45,6 +34,7 @@ Flash or Find your device using next options:

<script type="module" src="https://unpkg.com/esp-web-tools@9/dist/web/install-button.js?module"></script>


<esp-web-install-button manifest="" class="button-connect">
<button slot="activate" class="md-button md-button--primary">INSTALL</button>
<span slot="unsupported">Use Chrome Desktop</span>
Expand All @@ -54,42 +44,41 @@ Flash or Find your device using next options:
<div>
<a href="http://xzg.local/" target="_blank"><button class="md-button">Open XZG web UI via local network</button></a>
</div>
</div>

<br>Powered by <a href="https://esphome.github.io/esp-web-tools/" target="_blank">ESP Web Tools</a><br>

<script>

<script>
function loadFirmwareVersions() {
fetch('https://api.github.com/repos/xyzroe/XZG/releases')
.then(response => response.json())
.then(data => {
const select = document.getElementById('firmwareVersion');
select.innerHTML = '';
data.forEach(release => {
const option = document.createElement('option');
option.value = `https://raw.githubusercontent.com/xyzroe/XZG/releases/${release.name}/manifest.json`;
option.textContent = release.name;
select.appendChild(option);
});
updateManifestUrl();
})
.catch(error => console.error('Error fetching releases:', error));
fetch('https://api.github.com/repos/xyzroe/XZG/releases')
.then(response => response.json())
.then(data => {
const select = document.getElementById('firmwareVersion');
select.innerHTML = '';
data.forEach(release => {
const option = document.createElement('option');
option.value = `https://raw.githubusercontent.com/xyzroe/XZG/releases/${release.name}/manifest.json`;
option.textContent = release.name;
select.appendChild(option);
});
updateManifestUrl();
})
.catch(error => console.error('Error fetching releases:', error));
}

function updateManifestUrl() {
var selectedManifest = document.getElementById('firmwareVersion').value;
var installButton = document.querySelector('esp-web-install-button');
installButton.setAttribute('manifest', selectedManifest);
var selectedManifest = document.getElementById('firmwareVersion').value;
var installButton = document.querySelector('esp-web-install-button');
installButton.setAttribute('manifest', selectedManifest);
}

function showSerialHelp() {
document.getElementById('coms').innerHTML = `Hit "Install" and select the correct COM port.<br><br>
You might be missing the drivers for your board.<br>
Here are drivers for one of the most popular chip:
<a href="https://sparks.gogo.co.nz/ch340.html" target="_blank">CH340C</a><br><br>
Make sure your USB cable supports data transfer.<br><br>
`;
document.getElementById('coms').innerHTML = `Hit "Install" and select the correct COM port.<br><br>
You might be missing the drivers for your board.<br>
Here are drivers for one of the most popular chip:
<a href="https://sparks.gogo.co.nz/ch340.html" target="_blank">CH340C</a><br><br>
Make sure your USB cable supports data transfer.<br><br>
`;
}

loadFirmwareVersions();
</script>
7 changes: 7 additions & 0 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -147,14 +147,21 @@ extra:
link: https://github.com/xyzroe
- icon: fontawesome/solid/paper-plane
link: https://t.me/xyzroe
analytics:
provider: google
property: G-VWB99VELNE

extra_javascript:
- https://cdn.jsdelivr.net/npm/[email protected]/src/tablesort.min.js
- assets/javascripts/tables.js
- assets/javascripts/google-translate.js
- https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
- assets/javascripts/custom.js

extra_css:
- assets/stylesheets/custom.css
- https://cdn.jsdelivr.net/gh/rod2ik/cdn@main/mkdocs/css/massilia-columns.css
- assets/stylesheets/google-translate.css

nav:
- Home: index.md
Expand Down

0 comments on commit f33a23b

Please sign in to comment.