├── .gitattributes ├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE ├── README.md ├── css └── yatranslate.css ├── images └── lang │ ├── lang__ar.png │ ├── lang__de.png │ ├── lang__en.png │ ├── lang__es.png │ ├── lang__fr.png │ ├── lang__it.png │ ├── lang__nl.png │ ├── lang__pt.png │ ├── lang__ru.png │ ├── lang__sv.png │ └── lang__zh.png ├── index.html └── js └── yatranslate.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: ['https://yoomoney.ru/to/410018011293312'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # parcel-bundler cache (https://parceljs.org/) 61 | .cache 62 | 63 | # next.js build output 64 | .next 65 | 66 | # nuxt.js build output 67 | .nuxt 68 | 69 | # vuepress build output 70 | .vuepress/dist 71 | 72 | # Serverless directories 73 | .serverless 74 | 75 | # FuseBox cache 76 | .fusebox/ 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 get-web 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # yandex-translate-custom-widget 2 | 3 | ![](https://raw.githubusercontent.com/get-web/Examples/main/yandex-translate-custom-widget/yandex-translate-custom-widget.gif) 4 | 5 | # Install: 6 | 7 | ### Add Files 8 | 9 | ``` 10 | 11 | 12 | ``` 13 | 14 | ### Add html: 15 | 16 | ``` 17 |
18 | 19 |
20 | Ru 21 |
22 |
23 | 24 | ru 25 | 26 | 27 | en 28 | 29 | 30 | de 31 | 32 | 33 | zh 34 | 35 | 36 | fr 37 | 38 |
39 |
40 | ``` 41 | 42 | ## Add new lang: 43 | 44 | ``` 45 | data-ya-lang="{CODE}" 46 | ``` 47 | 48 | All available languages and their code can be found [here](https://yandex.ru/dev/translate/doc/dg/concepts/api-overview.html). 49 | 50 | ### Example 51 | 52 | [Demo Page](http://demo.l2banners.ru/yandex-translate-custom-widget) 53 | 54 | ## More 55 | 56 | Sometimes there may be some content on your page that you don't want to 57 | translate. You can now add translate="no" to any HTML element to prevent 58 | that element from being translated. For example, you may want to do something 59 | like: 60 | 61 | `Email us at sales at mydomain dot com` 62 | 63 | 64 | ### Поддержать проект: 65 | 66 | Данная модификация предоставляется абсолютно бесплатно, поэтому вы можете 67 | отправить **благодарность по реквизитам**: 68 | 69 | - Visa (usd) - 4149629331519363 70 | - Visa (uah) - 4731185620908514 71 | - Binance pay id: 463795904 72 | - USDT trc-20: TUDPzTVicb51L6sH1KyDVxNx6TJrncN5X7 73 | - Карта МИР: 2204120117672887 74 | - https://yoomoney.ru/to/410018011293312 75 | 76 | _Любая ваша поддержка это мотивация выкладывать в общий доступ другие наработки 77 | и поддерживать их._ 78 | 79 | -------------------------------------------------------------------------------- /css/yatranslate.css: -------------------------------------------------------------------------------- 1 | /* lang */ 2 | 3 | .lang { 4 | position: relative; 5 | z-index: 10; 6 | text-align: center; 7 | background: rgba(157, 157, 157, 0.3); 8 | perspective: 700px; 9 | } 10 | 11 | .lang_fixed { 12 | position: fixed; 13 | right: 20px; 14 | top: 20px; 15 | } 16 | 17 | .lang__link { 18 | cursor: pointer; 19 | transition: .3s all; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | flex-direction: column; 24 | flex-shrink: 0; 25 | box-sizing: border-box; 26 | text-decoration: none; 27 | border-radius: 2px; 28 | padding: 4px; 29 | } 30 | 31 | .lang__img { 32 | width: 30px; 33 | height: 18px; 34 | flex-shrink: 0; 35 | font-size: 10px; 36 | display: block; 37 | transition: .3s all; 38 | } 39 | 40 | .lang__link_sub:hover { 41 | filter: drop-shadow(0 0 3px rgb(136, 136, 136)) brightness(130%); 42 | } 43 | 44 | 45 | .lang__name { 46 | color: #737b84; 47 | font-size: 12px; 48 | line-height: 12px; 49 | flex-shrink: 0; 50 | text-transform: uppercase; 51 | } 52 | 53 | .lang__link_sub { 54 | width: 100%; 55 | height: auto; 56 | position: relative; 57 | padding: 0; 58 | margin-bottom: 2px; 59 | } 60 | 61 | .lang__list { 62 | background: rgba(157, 157, 157, 0.3); 63 | display: flex; 64 | justify-content: center; 65 | align-items: center; 66 | flex-direction: column; 67 | width: 100%; 68 | opacity: 0; 69 | visibility: hidden; 70 | transition: .3s all; 71 | transform: rotateX(-90deg); 72 | position: absolute; 73 | left: 0; 74 | top: 100%; 75 | z-index: 10; 76 | line-height: 13px; 77 | padding: 4px; 78 | transform-origin: center top; 79 | box-sizing: border-box; 80 | } 81 | 82 | .lang:hover .lang__list { 83 | opacity: 1; 84 | visibility: visible; 85 | transform: rotateX(0); 86 | } 87 | 88 | .lang__link_select { 89 | align-items: flex-start; 90 | text-align: center; 91 | font-size: 0; 92 | } -------------------------------------------------------------------------------- /images/lang/lang__ar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__ar.png -------------------------------------------------------------------------------- /images/lang/lang__de.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__de.png -------------------------------------------------------------------------------- /images/lang/lang__en.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__en.png -------------------------------------------------------------------------------- /images/lang/lang__es.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__es.png -------------------------------------------------------------------------------- /images/lang/lang__fr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__fr.png -------------------------------------------------------------------------------- /images/lang/lang__it.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__it.png -------------------------------------------------------------------------------- /images/lang/lang__nl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__nl.png -------------------------------------------------------------------------------- /images/lang/lang__pt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__pt.png -------------------------------------------------------------------------------- /images/lang/lang__ru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__ru.png -------------------------------------------------------------------------------- /images/lang/lang__sv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__sv.png -------------------------------------------------------------------------------- /images/lang/lang__zh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/get-web/yandex-translate-custom-widget/90b0018799cb5439bc80a5dff2f9a3f5ffa89c4d/images/lang/lang__zh.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Пользовательский виджет yatranslate для сайта на чистом js 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | Ru 22 |
23 |
24 | 25 | ru 26 | 27 | 28 | en 29 | 30 | 31 | de 32 | 33 | 34 | zh 35 | 36 | 37 | fr 38 | 39 |
40 |
41 | 42 |
43 |

Автоматический перевод сайта

44 |
45 |

Перевод сайта на другие языки при помощи виджета "Яндекс.Переводчик для сайтов"

46 |

Пример настраиваемого виджета

47 |

Hello World!!!

48 |
49 |
50 | 51 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /js/yatranslate.js: -------------------------------------------------------------------------------- 1 | /*!*************************************************** 2 | * yatranslate.js v1.0.0 3 | * https://Get-Web.Site/ 4 | * author: Vitalii P. 5 | *****************************************************/ 6 | 7 | const yatranslate = { 8 | /* Original language */ 9 | lang: "ru", 10 | /* The language we translate into on the first visit */ 11 | /* Язык, на который переводим при первом посещении */ 12 | // langFirstVisit: 'en', 13 | }; 14 | 15 | document.addEventListener('DOMContentLoaded', function () { 16 | // Start 17 | yaTranslateInit(); 18 | }) 19 | 20 | function yaTranslateInit() { 21 | 22 | if (yatranslate.langFirstVisit && !localStorage.getItem('yt-widget')) { 23 | /* Если установлен язык перевода для первого посещения и в localStorage нет yt-widget */ 24 | /* If the translation language is installed for the first visit and in localStorage no yt-widget */ 25 | yaTranslateSetLang(yatranslate.langFirstVisit); 26 | } 27 | 28 | // Подключаем виджет yandex translate 29 | // Connecting the yandex translate widget 30 | let script = document.createElement('script'); 31 | script.src = `https://translate.yandex.net/website-widget/v1/widget.js?widgetId=ytWidget&pageLang=${yatranslate.lang}&widgetTheme=light&autoMode=false`; 32 | document.getElementsByTagName('head')[0].appendChild(script); 33 | 34 | // Получаем и записываем язык на который переводим 35 | // We get and write down the language into which we translate 36 | let code = yaTranslateGetCode(); 37 | 38 | // Показываем текущий язык в меню 39 | // Show the current language in the menu 40 | yaTranslateHtmlHandler(code); 41 | 42 | // Вешаем событие клик на флаги 43 | // We hang the event click on the flags 44 | yaTranslateEventHandler('click', '[data-ya-lang]', function (el) { 45 | yaTranslateSetLang(el.getAttribute('data-ya-lang')); 46 | // Перезагружаем страницу 47 | // Reloading the page 48 | window.location.reload(); 49 | }) 50 | } 51 | 52 | function yaTranslateSetLang(lang) { 53 | // Записываем выбранный язык в localStorage объект yt-widget 54 | // Writing the selected language to localStorage 55 | localStorage.setItem('yt-widget', JSON.stringify({ 56 | "lang": lang, 57 | "active": true 58 | })); 59 | } 60 | 61 | function yaTranslateGetCode() { 62 | // Возвращаем язык на который переводим 63 | // Returning the language to which we are translating 64 | return (localStorage["yt-widget"] != undefined && JSON.parse(localStorage["yt-widget"]).lang != undefined) ? JSON.parse(localStorage["yt-widget"]).lang : yatranslate.lang; 65 | } 66 | 67 | function yaTranslateHtmlHandler(code) { 68 | // Получаем язык на который переводим и производим необходимые манипуляции с DOM 69 | // We get the language to which we translate and produce the necessary manipulations with DOM 70 | document.querySelector('[data-lang-active]').innerHTML = `${code}`; 71 | document.querySelector(`[data-ya-lang="${code}"]`).remove(); 72 | } 73 | 74 | function yaTranslateEventHandler(event, selector, handler) { 75 | document.addEventListener(event, function (e) { 76 | let el = e.target.closest(selector); 77 | if (el) handler(el); 78 | }); 79 | } --------------------------------------------------------------------------------