Enables a custom language selector by mapping change events from a select element to the Google Translate Widget. Observes the html lang attribute and switches stylesheets based on the changed language (if the stylesheet is provided).
import TranslateElement from '@nycopportunity/pttrn-scripts/src/google-translate-element/google-translate-element';
new TranslateElement(document.querySelector(TranslateElement.selector));<div id="js-google-translate" class="hidden" aria-hidden="true"></div>
<label for="js-google-translate-control">
<div>
<svg with="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 16C4.5 15.1667 8 12.5 10 9.5C12 6.5 11.5 4 11.5 4M14.5 4H8.5M2.5 4H8.5M8.5 4V2.5M4.5 7C5.5 10 7.5 12.5 10 14.5M12 21L13.35 18M21 21L19.65 18M13.35 18L16.5 10.5C17.7302 13.2337 18.4198 15.2663 19.65 18M13.35 18H19.65"></path>
</svg>
<select id="js-google-translate-control" name="js-google-translate-control" style="line-height: initial; min-width: auto;">
<option value="restore" selected="true" disabled="true">Select a Language</option>
<option value="es">Español</option>
<option value="ru">Русский</option>
<option value="ko">한국어</option>
<option value="ar">العربية</option>
<option value="ht">Kreyol</option>
<option value="zh-CN">繁體中文</option>
<option value="fr">Français</option>
<option value="pl">polski</option>
<option value="ur">اردو </option>
<option value="bn">বাংলা</option>
</select>
</div>
<svg width="175" height="16" role="img">
<title id="icon-logo-google-translate-title">Powered by Google Translate</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.789 4.79395C128.051 4.79395 127.023 5.31595 126.733 6.12728H126.675V4.90261H125.4V11.9999H126.733V8.18395C126.733 6.87995 127.66 6.11261 128.572 6.11261C128.862 6.11261 129.094 6.14128 129.282 6.21395L129.789 4.96861C129.514 4.85261 129.224 4.79395 128.789 4.79395Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M152.801 1.4606H154.133V11.9999H152.801V1.4606Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M148.658 4.79395C147.225 4.79395 145.891 5.59461 145.891 6.84461C145.891 8.05328 147.1 8.60061 147.732 8.75528L149.164 9.09261C149.895 9.27528 150.146 9.65461 150.146 10.0059C150.146 10.5813 149.529 10.9579 148.728 10.9579C147.899 10.9579 147.184 10.5539 146.819 9.66461L145.667 10.1426C146.074 11.1433 147.057 12.1273 148.715 12.1273C150.33 12.1273 151.467 11.1859 151.467 9.96395C151.467 9.12061 150.892 8.27795 149.529 7.95461L148.125 7.63128C147.577 7.50528 147.213 7.26661 147.213 6.83061C147.213 6.26861 147.885 5.96328 148.616 5.96328C149.29 5.96328 149.963 6.23061 150.231 6.87661L151.354 6.41328C150.933 5.35928 149.852 4.79395 148.658 4.79395Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M158.579 10.9286C157.904 10.9286 157.071 10.5813 157.071 9.85128C157.071 9.21928 157.679 8.52861 159.042 8.52861C160.138 8.52861 160.667 8.93795 160.667 8.93795C160.667 10.0619 159.604 10.9286 158.579 10.9286ZM158.859 4.79395C157.131 4.79395 156.158 5.79995 155.919 6.43195L157.099 6.93795C157.338 6.29195 158.171 5.99195 158.887 5.99195C159.857 5.99195 160.667 6.59395 160.667 7.68528V7.88261C160.399 7.72795 159.745 7.46061 158.817 7.46061C157.202 7.46061 155.701 8.26395 155.701 9.82328C155.701 11.2559 156.963 12.1273 158.367 12.1273C159.548 12.1273 160.231 11.4913 160.611 10.9153H160.667V11.9999H161.922V7.74395C161.922 5.80528 160.545 4.79395 158.859 4.79395Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M133.323 10.9286C132.649 10.9286 131.815 10.5813 131.815 9.85128C131.815 9.21928 132.424 8.52861 133.787 8.52861C134.882 8.52861 135.411 8.93795 135.411 8.93795C135.411 10.0619 134.349 10.9286 133.323 10.9286ZM133.604 4.79395C131.876 4.79395 130.902 5.79995 130.663 6.43195L131.843 6.93795C132.083 6.29195 132.915 5.99195 133.632 5.99195C134.601 5.99195 135.411 6.59395 135.411 7.68528V7.88261C135.144 7.72795 134.489 7.46061 133.561 7.46061C131.946 7.46061 130.446 8.26395 130.446 9.82328C130.446 11.2559 131.707 12.1273 133.112 12.1273C134.292 12.1273 134.975 11.4913 135.355 10.9153H135.411V11.9999H136.667V7.74395C136.667 5.80528 135.29 4.79395 133.604 4.79395Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M169.398 7.62328C169.655 6.61995 170.425 5.99195 171.396 5.99195C172.894 5.99195 173.407 7.02728 173.45 7.62328H169.398ZM171.424 4.79395C169.37 4.79395 168 6.50728 168 8.46061C168 10.5399 169.427 12.1273 171.567 12.1273C173.179 12.1273 174.207 11.2279 174.62 10.2446L173.45 9.76728C173.079 10.6386 172.309 10.9286 171.538 10.9286C170.454 10.9286 169.384 10.1606 169.313 8.70728H174.834C174.834 8.70728 174.849 8.55861 174.849 8.46061C174.849 6.24061 173.507 4.79395 171.424 4.79395Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M141.778 4.79395C140.807 4.79395 139.909 5.35861 139.533 6.00995H139.475V4.90261H138.2V11.9999H139.533V8.19728C139.533 7.11128 140.243 6.00995 141.401 6.00995C142.415 6.00995 143.154 6.50261 143.154 7.97995V11.9999H144.487V7.77795C144.487 6.02528 143.589 4.79395 141.778 4.79395Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M165.399 2.79395H164.067V4.90261H162.821V6.12995H164.067V9.85328C164.067 11.3019 164.863 12.1273 166.355 12.1273C166.804 12.1273 167.123 12.0693 167.427 11.9393L166.964 10.7946C166.775 10.8813 166.601 10.9106 166.355 10.9106C165.733 10.9106 165.399 10.5486 165.399 9.75128V6.12995H167.137V4.90261H165.399V2.79395Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M124.95 1.4606H117.733V2.82727H120.667V11.9939H122.017V2.82727H124.95V1.4606Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.16 5.58594V7.22461H76.082C75.9647 8.14661 75.6574 8.81994 75.1894 9.28794C74.618 9.85861 73.7254 10.4879 72.16 10.4879C69.7447 10.4879 67.8574 8.54194 67.8574 6.12727C67.8574 3.71261 69.7447 1.76661 72.16 1.76661C73.462 1.76661 74.4134 2.27861 75.116 2.93727L76.272 1.78061C75.2914 0.844607 73.9894 0.127274 72.16 0.127274C68.8527 0.127274 66.072 2.81994 66.072 6.12727C66.072 9.43461 68.8527 12.1273 72.16 12.1273C73.9447 12.1273 75.2914 11.5419 76.3454 10.4446C77.428 9.36127 77.7647 7.83927 77.7647 6.60994C77.7647 6.22994 77.7354 5.87861 77.6767 5.58594H72.16Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M82.6666 4.25461C80.5253 4.25461 78.7793 5.88328 78.7793 8.12727C78.7793 10.3566 80.5253 11.9999 82.6666 11.9999C84.8086 11.9999 86.554 10.3566 86.554 8.12727C86.554 5.88328 84.8086 4.25461 82.6666 4.25461ZM82.6666 10.4739C81.4933 10.4739 80.4806 9.50594 80.4806 8.12727C80.4806 6.73394 81.4933 5.77994 82.6666 5.77994C83.84 5.77994 84.8526 6.73394 84.8526 8.12727C84.8526 9.50594 83.84 10.4739 82.6666 10.4739Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M101.72 5.12061H101.661C101.279 4.66528 100.546 4.25461 99.622 4.25461C97.686 4.25461 96 5.94127 96 8.12727C96 10.2979 97.686 11.9999 99.622 11.9999C100.546 11.9999 101.279 11.5893 101.661 11.1199H101.72V11.6613C101.72 13.1426 100.928 13.9346 99.6513 13.9346C98.61 13.9346 97.9647 13.1866 97.7007 12.5559L96.2193 13.1719C96.6447 14.1986 97.774 15.4606 99.6513 15.4606C101.647 15.4606 103.333 14.2873 103.333 11.4266V4.45394H101.72V5.12061ZM99.7693 10.4739C98.596 10.4739 97.702 9.47661 97.702 8.12727C97.702 6.76328 98.596 5.77994 99.7693 5.77994C100.929 5.77994 101.837 6.77794 101.837 8.14194C101.837 9.49127 100.929 10.4739 99.7693 10.4739Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M91.3334 4.25461C89.192 4.25461 87.446 5.88328 87.446 8.12727C87.446 10.3566 89.192 11.9999 91.3334 11.9999C93.4754 11.9999 95.2207 10.3566 95.2207 8.12727C95.2207 5.88328 93.4754 4.25461 91.3334 4.25461ZM91.3334 10.4739C90.16 10.4739 89.148 9.50594 89.148 8.12727C89.148 6.73394 90.16 5.77994 91.3334 5.77994C92.5067 5.77994 93.5194 6.73394 93.5194 8.12727C93.5194 9.50594 92.5067 10.4739 91.3334 10.4739Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.667 0.287277H106.34V11.9999H104.667V0.287277Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.51 10.4739C110.645 10.4739 110.029 10.0786 109.632 9.30127L114.81 7.15928L114.634 6.71927C114.311 5.85394 113.329 4.25461 111.319 4.25461C109.324 4.25461 107.667 5.82461 107.667 8.12727C107.667 10.2986 109.309 11.9999 111.51 11.9999C113.285 11.9999 114.311 10.9146 114.737 10.2833L113.417 9.40328C112.977 10.0493 112.375 10.4739 111.51 10.4739ZM111.384 5.70594C112.073 5.70594 112.656 6.05661 112.851 6.55994L109.353 8.00994C109.353 6.37727 110.508 5.70594 111.384 5.70594Z" fill="currentColor"/>
<g>
<path d="M6.17578 8.90039C6.17578 9.86523 5.95508 10.6426 5.51367 11.2324C5.07227 11.8223 4.47461 12.1172 3.7207 12.1172C2.95117 12.1172 2.3457 11.873 1.9043 11.3848V14.4375H0.820312V5.66016H1.81055L1.86328 6.36328C2.30469 5.81641 2.91797 5.54297 3.70312 5.54297C4.46484 5.54297 5.06641 5.83008 5.50781 6.4043C5.95312 6.97852 6.17578 7.77734 6.17578 8.80078V8.90039ZM5.0918 8.77734C5.0918 8.0625 4.93945 7.49805 4.63477 7.08398C4.33008 6.66992 3.91211 6.46289 3.38086 6.46289C2.72461 6.46289 2.23242 6.75391 1.9043 7.33594V10.3652C2.22852 10.9434 2.72461 11.2324 3.39258 11.2324C3.91211 11.2324 4.32422 11.0273 4.62891 10.6172C4.9375 10.2031 5.0918 9.58984 5.0918 8.77734Z" fill="currentColor"/>
<path d="M7.27148 8.77148C7.27148 8.15039 7.39258 7.5918 7.63477 7.0957C7.88086 6.59961 8.2207 6.2168 8.6543 5.94727C9.0918 5.67773 9.58984 5.54297 10.1484 5.54297C11.0117 5.54297 11.709 5.8418 12.2402 6.43945C12.7754 7.03711 13.043 7.83203 13.043 8.82422V8.90039C13.043 9.51758 12.9238 10.0723 12.6855 10.5645C12.4512 11.0527 12.1133 11.4336 11.6719 11.707C11.2344 11.9805 10.7305 12.1172 10.1602 12.1172C9.30078 12.1172 8.60352 11.8184 8.06836 11.2207C7.53711 10.623 7.27148 9.83203 7.27148 8.84766V8.77148ZM8.36133 8.90039C8.36133 9.60352 8.52344 10.168 8.84766 10.5938C9.17578 11.0195 9.61328 11.2324 10.1602 11.2324C10.7109 11.2324 11.1484 11.0176 11.4727 10.5879C11.7969 10.1543 11.959 9.54883 11.959 8.77148C11.959 8.07617 11.793 7.51367 11.4609 7.08398C11.1328 6.65039 10.6953 6.43359 10.1484 6.43359C9.61328 6.43359 9.18164 6.64648 8.85352 7.07227C8.52539 7.49805 8.36133 8.10742 8.36133 8.90039Z" fill="currentColor"/>
<path d="M20.0156 10.5059L21.2344 5.66016H22.3184L20.4727 12H19.5938L18.0527 7.19531L16.5527 12H15.6738L13.834 5.66016H14.9121L16.1602 10.4062L17.6367 5.66016H18.5098L20.0156 10.5059Z" fill="currentColor"/>
<path d="M26.0566 12.1172C25.1973 12.1172 24.498 11.8359 23.959 11.2734C23.4199 10.707 23.1504 9.95117 23.1504 9.00586V8.80664C23.1504 8.17773 23.2695 7.61719 23.5078 7.125C23.75 6.62891 24.0859 6.24219 24.5156 5.96484C24.9492 5.68359 25.418 5.54297 25.9219 5.54297C26.7461 5.54297 27.3867 5.81445 27.8438 6.35742C28.3008 6.90039 28.5293 7.67773 28.5293 8.68945V9.14062H24.2344C24.25 9.76562 24.4316 10.2715 24.7793 10.6582C25.1309 11.041 25.5762 11.2324 26.1152 11.2324C26.498 11.2324 26.8223 11.1543 27.0879 10.998C27.3535 10.8418 27.5859 10.6348 27.7852 10.377L28.4473 10.8926C27.916 11.709 27.1191 12.1172 26.0566 12.1172ZM25.9219 6.43359C25.4844 6.43359 25.1172 6.59375 24.8203 6.91406C24.5234 7.23047 24.3398 7.67578 24.2695 8.25H27.4453V8.16797C27.4141 7.61719 27.2656 7.19141 27 6.89062C26.7344 6.58594 26.375 6.43359 25.9219 6.43359Z" fill="currentColor"/>
<path d="M32.8535 6.63281C32.6895 6.60547 32.5117 6.5918 32.3203 6.5918C31.6094 6.5918 31.127 6.89453 30.873 7.5V12H29.7891V5.66016H30.8438L30.8613 6.39258C31.2168 5.82617 31.7207 5.54297 32.373 5.54297C32.584 5.54297 32.7441 5.57031 32.8535 5.625V6.63281Z" fill="currentColor"/>
<path d="M36.3691 12.1172C35.5098 12.1172 34.8105 11.8359 34.2715 11.2734C33.7324 10.707 33.4629 9.95117 33.4629 9.00586V8.80664C33.4629 8.17773 33.582 7.61719 33.8203 7.125C34.0625 6.62891 34.3984 6.24219 34.8281 5.96484C35.2617 5.68359 35.7305 5.54297 36.2344 5.54297C37.0586 5.54297 37.6992 5.81445 38.1562 6.35742C38.6133 6.90039 38.8418 7.67773 38.8418 8.68945V9.14062H34.5469C34.5625 9.76562 34.7441 10.2715 35.0918 10.6582C35.4434 11.041 35.8887 11.2324 36.4277 11.2324C36.8105 11.2324 37.1348 11.1543 37.4004 10.998C37.666 10.8418 37.8984 10.6348 38.0977 10.377L38.7598 10.8926C38.2285 11.709 37.4316 12.1172 36.3691 12.1172ZM36.2344 6.43359C35.7969 6.43359 35.4297 6.59375 35.1328 6.91406C34.8359 7.23047 34.6523 7.67578 34.582 8.25H37.7578V8.16797C37.7266 7.61719 37.5781 7.19141 37.3125 6.89062C37.0469 6.58594 36.6875 6.43359 36.2344 6.43359Z" fill="currentColor"/>
<path d="M39.8379 8.77734C39.8379 7.80469 40.0684 7.02344 40.5293 6.43359C40.9902 5.83984 41.5938 5.54297 42.3398 5.54297C43.082 5.54297 43.6699 5.79688 44.1035 6.30469V3H45.1875V12H44.1914L44.1387 11.3203C43.7051 11.8516 43.1016 12.1172 42.3281 12.1172C41.5938 12.1172 40.9941 11.8164 40.5293 11.2148C40.0684 10.6133 39.8379 9.82812 39.8379 8.85938V8.77734ZM40.9219 8.90039C40.9219 9.61914 41.0703 10.1816 41.3672 10.5879C41.6641 10.9941 42.0742 11.1973 42.5977 11.1973C43.2852 11.1973 43.7871 10.8887 44.1035 10.2715V7.35938C43.7793 6.76172 43.2812 6.46289 42.6094 6.46289C42.0781 6.46289 41.6641 6.66797 41.3672 7.07812C41.0703 7.48828 40.9219 8.0957 40.9219 8.90039Z" fill="currentColor"/>
<path d="M55.2188 8.90039C55.2188 9.86914 54.9961 10.6484 54.5508 11.2383C54.1055 11.8242 53.5078 12.1172 52.7578 12.1172C51.957 12.1172 51.3379 11.834 50.9004 11.2676L50.8477 12H49.8516V3H50.9355V6.35742C51.373 5.81445 51.9766 5.54297 52.7461 5.54297C53.5156 5.54297 54.1191 5.83398 54.5566 6.41602C54.998 6.99805 55.2188 7.79492 55.2188 8.80664V8.90039ZM54.1348 8.77734C54.1348 8.03906 53.9922 7.46875 53.707 7.06641C53.4219 6.66406 53.0117 6.46289 52.4766 6.46289C51.7617 6.46289 51.248 6.79492 50.9355 7.45898V10.2012C51.2676 10.8652 51.7852 11.1973 52.4883 11.1973C53.0078 11.1973 53.4121 10.9961 53.7012 10.5938C53.9902 10.1914 54.1348 9.58594 54.1348 8.77734Z" fill="currentColor"/>
<path d="M58.5938 10.4121L60.0703 5.66016H61.2305L58.6816 12.9785C58.2871 14.0332 57.6602 14.5605 56.8008 14.5605L56.5957 14.543L56.1914 14.4668V13.5879L56.4844 13.6113C56.8516 13.6113 57.1367 13.5371 57.3398 13.3887C57.5469 13.2402 57.7168 12.9688 57.8496 12.5742L58.0898 11.9297L55.8281 5.66016H57.0117L58.5938 10.4121Z" fill="currentColor"/>
</g>
</svg>
</label>These blocks provide the paths to multilingual stylesheets required by other languages and initialize the Google Translate Widget.
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=window.googleTranslateInit">
<script type="text/javascript">
/**
* Set multilingual stylesheets to the window.
*
* @type {Array}
*/
window.STYLESHEETS = [
"https:\/\/domain.com\/assets\/styles\/style-ar.css",
"https:\/\/domain.com\/assets\/styles\/style-default.css",
"https:\/\/domain.com\/assets\/styles\/style-es.css",
"https:\/\/domain.com\/assets\/styles\/style-ko.css",
"https:\/\/domain.com\/assets\/styles\/style-ur.css",
"https:\/\/domain.com\/assets\/styles\/style-zh-hant.css"
]
/**
* Callback for the Google Translate Widget.
*
* @type {Function}
*/
window.googleTranslateInit = function() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'es,ru,ko,ar,ht,zh-CN,fr,pl,ur,bn',
autoDisplay: false
}, 'js-google-translate');
}
</script>May be required. These styles ensure the modified markup from the translate widget will retain their functionality.
font, svg {
pointer-events: none;
}
a {
pointer-events: all;
}Optional. These styles hide the translate widget bar.
.goog-te-banner-frame {
display: none !important;
}
body {
top: auto !important;
min-height: auto !important;
position: static !important;
}