Русский
Русский
English
Статистика
Реклама

Перевод сайта

Кастомный виджет Яндекс.Переводчикдлясайтов

02.05.2021 22:08:33 | Автор: admin

Когда-то я предложил свое решение по кастомизации виджета googleTranslate, тема оказалась действительно полезной и актуальна по сей день. Репозиторий с проектом на gitHub набрал немного звезд, а я рад тому, что мои труды не напрасны. И вот недавно мне понадобилось сделать пользовательский выпадающий список с выбором языков, но уже с виджетом яндекс переводчика. Вообще сам по себе виджет вполне устраивал заказчика, но проблема заключается в том что в нем по умолчанию находится более 90 языков и этот список нельзя никак ограничить. Нельзя выставить 2-3 или 5 необходимых вам языков, будут показаны все 90+, но проблема еще и в том, что виджет не адаптивен, он занимает 1221 пиксель в ширину и никак не подстраивается под размер экрана:

В отличии от виджета гугл переводчика, в котором вся разметка находилась в iframe, в яндекс переводчике можно переопределить стили, но это все не то чего хотелось бы...

На сайте, где генерируется виджет есть ссылка на документацию, и конечно же я её начал изучить, но документация на самом деле об API и никакой информации по работе с виджетом не имеет. Я решил написать в тех. поддержку яндекса:

Текст обращения

Здравствуйте. Виджет переводчика, ведет на документацию в которой вообще о виджете не слова. В частности, как для виджета выбрать для перевода не весь список из 80 языков, а например 5, которые необходимы. И как используя виджет запретить переводить определенные слова в html разметке. Например гугл виджет для этого использует класс notranslate и все что в нем не будет переведено.

И довольно быстро получил ответ:

Текст ответа

Здравствуйте, Виталий!

Такой возможности в нашем виджете сейчас нет.

Спасибо за желание сделать Яндекс.Переводчик удобнее! Я передал ваше предложение команде разработки.

И теперь окончательно убедившись, что готового решения нет, я принялся за дело.

Как будет выглядеть пример:

Разметка демо-страницы
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>Пользовательский виджет yatranslate для сайта на чистом js</title>        <meta name="viewport" content="width=device-width, initial-scale=1">        <!-- yatranslate -->        <script src="./js/yatranslate.js"></script>        <link rel="stylesheet" href="./css/yatranslate.css">        <!-- END yatranslate -->    </head>    <body class="body">        <div class="lang lang_fixed">            <div id="ytWidget" style="display: none;"></div>            <div class="lang__link lang__link_select" data-lang-active>                <img class="lang__img lang__img_select" src="./images/lang/lang__ru.png" alt="Ru">            </div>            <div class="lang__list" data-lang-list>                <a class="lang__link lang__link_sub" data-ya-lang="ru">                    <img class="lang__img" src="./images/lang/lang__ru.png" alt="ru">                </a>                <a class="lang__link lang__link_sub" data-ya-lang="en">                    <img class="lang__img" src="./images/lang/lang__en.png" alt="en">                </a>                <a class="lang__link lang__link_sub" data-ya-lang="de">                    <img class="lang__img" src="./images/lang/lang__de.png" alt="de">                </a>                <a class="lang__link lang__link_sub" data-ya-lang="zh">                    <img class="lang__img" src="./images/lang/lang__zh.png" alt="zh">                </a>                <a class="lang__link lang__link_sub" data-ya-lang="fr">                    <img class="lang__img" src="./images/lang/lang__fr.png" alt="fr">                </a>            </div>        </div>        <section class="content">            <h1 class="content__title">Автоматический перевод сайта</h1>            <div class="content__desc">                <p>Перевод сайта на другие языки при помощи виджета "Яндекс.Переводчик для сайтов"</p>                <p>Пример настраиваемого виджета</p>                <p>Hello World!!!</p>            </div>        </section>        <style>            /* Стили для демонстрации */            /* Styles for demonstration */            body {                display: flex;                justify-content: center;                align-items: center;                min-height: 100vh;                margin: 0;                padding: 0;                font-family: tahoma;            }            .content {                text-align: center;                margin: auto;            }        </style>    </body></html>

Для корректной работы виджета необходимо подключить файлы:

<script src="./js/yatranslate.js"></script><link rel="stylesheet" href="./css/yatranslate.css">
Содержимое yatranslate.css
/* lang */.lang {    position: relative;    z-index: 10;    text-align: center;    background: rgba(157, 157, 157, 0.3);    perspective: 700px;}.lang_fixed {    position: fixed;    right: 20px;    top: 20px;}.lang__link {    cursor: pointer;    transition: .3s all;    display: flex;    justify-content: center;    align-items: center;    flex-direction: column;    flex-shrink: 0;    box-sizing: border-box;    text-decoration: none;    border-radius: 2px;    padding: 4px;}.lang__img {    width: 30px;    height: 18px;    flex-shrink: 0;    font-size: 10px;    display: block;    transition: .3s all;}.lang__link_sub:hover {    filter: drop-shadow(0 0 3px rgb(136, 136, 136)) brightness(130%);}.lang__name {    color: #737b84;    font-size: 12px;    line-height: 12px;    flex-shrink: 0;    text-transform: uppercase;}.lang__link_sub {    width: 100%;    height: auto;    position: relative;    padding: 0;    margin-bottom: 2px;}.lang__list {    background: rgba(157, 157, 157, 0.3);    display: flex;    justify-content: center;    align-items: center;    flex-direction: column;    width: 100%;    opacity: 0;    visibility: hidden;    transition: .3s all;    transform: rotateX(-90deg);    position: absolute;    left: 0;    top: 100%;    z-index: 10;    line-height: 13px;    padding: 4px;    transform-origin: center top;    box-sizing: border-box;}.lang:hover .lang__list {    opacity: 1;    visibility: visible;    transform: rotateX(0);}.lang__link_select {    align-items: flex-start;    text-align: center;    font-size: 0;}
Содержимое yatranslate.js
/*!*************************************************** * yatranslate.js v1.0.0 * author: Vitalii P. *****************************************************/const yatranslate = {    /* Original language */    lang: "ru",    /* The language we translate into on the first visit */    /* Язык, на который переводим при первом посещении */    // langFirstVisit: 'en',};document.addEventListener('DOMContentLoaded', function () {    // Start    yaTranslateInit();})function yaTranslateInit() {    if (yatranslate.langFirstVisit && !localStorage.getItem('yt-widget')) {        /* Если установлен язык перевода для первого посещения и в localStorage нет yt-widget */        /* If the translation language is installed for the first visit and in localStorage no yt-widget */        yaTranslateSetLang(yatranslate.langFirstVisit);    }    // Подключаем виджет yandex translate    // Connecting the yandex translate widget    let script = document.createElement('script');    script.src = `https://translate.yandex.net/website-widget/v1/widget.js?widgetId=ytWidget&pageLang=${yatranslate.lang}&widgetTheme=light&autoMode=false`;    document.getElementsByTagName('head')[0].appendChild(script);    // Получаем и записываем язык на который переводим    // We get and write down the language into which we translate    let code = yaTranslateGetCode();    // Показываем текущий язык в меню    // Show the current language in the menu    yaTranslateHtmlHandler(code);    // Вешаем событие клик на флаги    // We hang the event click on the flags    yaTranslateEventHandler('click', '[data-ya-lang]', function (el) {        yaTranslateSetLang(el.getAttribute('data-ya-lang'));        // Перезагружаем страницу        // Reloading the page        window.location.reload();    })}function yaTranslateSetLang(lang) {    // Записываем выбранный язык в localStorage объект yt-widget     // Writing the selected language to localStorage     localStorage.setItem('yt-widget', JSON.stringify({        "lang": lang,        "active": true    }));}function yaTranslateGetCode() {    // Возвращаем язык на который переводим    // Returning the language to which we are translating    return (localStorage["yt-widget"] != undefined && JSON.parse(localStorage["yt-widget"]).lang != undefined) ? JSON.parse(localStorage["yt-widget"]).lang : yatranslate.lang;}function yaTranslateHtmlHandler(code) {    // Получаем язык на который переводим и производим необходимые манипуляции с DOM    // We get the language to which we translate and produce the necessary manipulations with DOM     document.querySelector('[data-lang-active]').innerHTML = `<img class="lang__img lang__img_select" src="./images/lang/lang__${code}.png" alt="${code}">`;    document.querySelector(`[data-ya-lang="${code}"]`).remove();}function yaTranslateEventHandler(event, selector, handler) {    document.addEventListener(event, function (e) {        let el = e.target.closest(selector);        if (el) handler(el);    });}
Используемые флаги

Логика виджета довольно простая. При выборе языка в локальное хранилище записывается объект с ключем yt-widget. В объекте хранится язык на который будет переведен сайт:

{"lang":"en","active":true}

К локальному хранилищу без проблем можно получить доступ и я применил ту же технику что и с гугл переводчиком. Виджет яндекса прячем, а кликая на свой кастоный флажок с атрибутом data-ya-lang назначаем записаный в нем язык свойству lang и перезагружаем страницу. После перезагрузки страницы язык, который мы сами установили, будет подхвачен виджетом и сайт будет на него переведен. В функции yaTranslateHtmlHandler проводим необходимые манипуляции с разметкой, в моем случае я показываю флаг текущего языка перевода и удаляю его из общего списка. В js каждый этап я разбил на функции и добавил описание, чтобы было легче доработать код под себя.

Репозиторий с проектом на GitHub

Демонстрация

Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru