From f33a23b0bbca0de432a0a260c840a6576b159f53 Mon Sep 17 00:00:00 2001 From: xyzroe Date: Sun, 21 Apr 2024 22:08:40 +0300 Subject: [PATCH] Add google-translate.js v1.0.4 using Earth emoji, add Google Analytics, some changes to the web install page design. --- docs/assets/javascripts/custom.js | 43 +++++++ docs/assets/javascripts/google-translate.js | 113 +++++++++++++++++++ docs/assets/stylesheets/custom.css | 67 +++++++++++ docs/assets/stylesheets/google-translate.css | 26 +++++ docs/guide.md | 2 +- docs/install.md | 65 +++++------ mkdocs.yml | 7 ++ 7 files changed, 284 insertions(+), 39 deletions(-) create mode 100644 docs/assets/javascripts/custom.js create mode 100644 docs/assets/javascripts/google-translate.js create mode 100644 docs/assets/stylesheets/google-translate.css diff --git a/docs/assets/javascripts/custom.js b/docs/assets/javascripts/custom.js new file mode 100644 index 0000000..2cd4725 --- /dev/null +++ b/docs/assets/javascripts/custom.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", function () { + var titleElement = document.querySelector('.md-header__title'); + if (titleElement) { + var customBlock = document.createElement('div'); + customBlock.innerHTML = ` +
+
🌍
+ +
`; + 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'; + } + }); +}); + + diff --git a/docs/assets/javascripts/google-translate.js b/docs/assets/javascripts/google-translate.js new file mode 100644 index 0000000..ee5ff9e --- /dev/null +++ b/docs/assets/javascripts/google-translate.js @@ -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"); + } +} diff --git a/docs/assets/stylesheets/custom.css b/docs/assets/stylesheets/custom.css index b936847..41f12e5 100644 --- a/docs/assets/stylesheets/custom.css +++ b/docs/assets/stylesheets/custom.css @@ -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; } \ No newline at end of file diff --git a/docs/assets/stylesheets/google-translate.css b/docs/assets/stylesheets/google-translate.css new file mode 100644 index 0000000..7d415fc --- /dev/null +++ b/docs/assets/stylesheets/google-translate.css @@ -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; +} diff --git a/docs/guide.md b/docs/guide.md index 736af58..6f905db 100644 --- a/docs/guide.md +++ b/docs/guide.md @@ -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 diff --git a/docs/install.md b/docs/install.md index 95b1a8c..1ba6645 100644 --- a/docs/install.md +++ b/docs/install.md @@ -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; } @@ -37,6 +25,7 @@ Flash or Find your device using next options:
  • Get XZG firmware installed and connected in less than 3 minutes!
    • +