function styleIFrameElement(IFRAME_MENU_ELEMENT, iframeStyles) {
const currentStyles = IFRAME_MENU_ELEMENT.style.cssText; let currentStylesString = currentStyles.toString(); const combinedStyles = currentStylesString += iframeStyles IFRAME_MENU_ELEMENT.setAttribute('style', combinedStyles);
}
function setIframeStyles() {
const iframeStyles = ' height: 100%; width: 100%; top: 0px; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);'; return iframeStyles;
}
function createStyleConfigurationObject() {
const styleConfigurationObject = { // Setting all the selectors & the styles they should get. '.goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *': 'color: #544F4B; font-family: "Roboto", sans-serif; width: 100%;', // Change font fam and color! '.goog-te-menu2-item-selected': 'display: none;', // Change menu's padding '.goog-te-menu2': 'overflow-y: scroll; padding: 0px;', // Change menu's padding '.goog-te-menu2-item div': 'padding: 20px;', // Change the padding of the languages '.goog-te-menu2-item': 'width: 100%;', // Change the width of the languages 'td': 'width: 100%; display: block;', // Change the width of the languages '.goog-te-menu2-colpad': 'display: none;', // Change the width of the languages '.goog-te-menu2': 'border: none;', // Change Google's default blue border '.goog-te-menu2': 'height: 100%; width: 100%;' } return styleConfigurationObject;
}
function setStyles(selector, styles, IFRAME_MENU_ELEMENT) {
const content = IFRAME_MENU_ELEMENT.contentWindow; const itemsToStyle = content.document.querySelectorAll(selector); for (let i = 0, len = itemsToStyle.length; i < len; i++) { const items = itemsToStyle[i]; items.setAttribute('style', styles); }
}
function watchForMenuClicks() {
// RESTYLE THE DROPDOWN MENU if (!document.getElementById('google_translate_element')) return; const GOOGLE_TRANSLATE_ELEMENT = document.getElementById('google_translate_element'); const styleConfigurationObject = createStyleConfigurationObject(); const iframeStyles = setIframeStyles(); GOOGLE_TRANSLATE_ELEMENT.addEventListener('click', () => { const IFRAME_MENU_ELEMENT = document.querySelector('iframe[class*="goog-te-menu-frame"]'); //event.preventDefault(); styleIFrameElement(IFRAME_MENU_ELEMENT, iframeStyles); Object.keys(styleConfigurationObject).forEach(function(selector) { setStyles(selector, styleConfigurationObject[selector], IFRAME_MENU_ELEMENT); }); }, false);
}
export default watchForMenuClicks;