diff --git a/pages/options/options.css b/pages/options/options.css index f362a0c3bb396843bf5177e0741a04095da74bd6..612a56fd2d7917640757554983e71bc9126397f1 100644 --- a/pages/options/options.css +++ b/pages/options/options.css @@ -62,7 +62,7 @@ body { } .input-text { - margin-left: 29px !important; + margin-left: 29px; } /** @@ -92,3 +92,26 @@ body { align-items: center; display: flex; } + +/** + * Right to Left + */ + +body[dir="rtl"] .badge { + margin-left: 0; + margin-right: 6px; +} + +body[dir="rtl"] .description-option { + margin-left: 0; + margin-right: 29px; +} + +body[dir="rtl"] .input-checkbox { + margin: 0 0 0 4px; +} + +body[dir="rtl"] .input-text { + margin-left: 0; + margin-right: 29px; +} diff --git a/pages/options/options.js b/pages/options/options.js index 6d6773b276ce2bdc3d5b9147f48a16018cde00e4..80b10517a161fd246d8abe000dfd2f4322a9ecd7 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -31,6 +31,21 @@ const VALUE_SEPARATOR = ';'; * Private Methods */ +options._determineScriptDirection = function (language) { + + let rightToLeftLanguages, scriptDirection; + + rightToLeftLanguages = ['ar', 'he']; + + if (rightToLeftLanguages.indexOf(language) !== -1) { + scriptDirection = 'rtl'; + } else { + scriptDirection = 'ltr'; + } + + return scriptDirection; +}; + options._getOptionElement = function (optionKey) { return document.querySelector('[data-option=' + optionKey + ']'); }; @@ -41,9 +56,11 @@ options._getOptionElement = function (optionKey) { document.addEventListener('DOMContentLoaded', function () { - let i18nElements, optionElements; + let i18nElements, scriptDirection, optionElements; i18nElements = document.querySelectorAll('[data-i18n-content]'); + scriptDirection = options._determineScriptDirection(navigator.language); + document.body.setAttribute('dir', scriptDirection); i18nElements.forEach(function (i18nElement) { diff --git a/pages/popup/popup.js b/pages/popup/popup.js index b7474cfbaab9ffab514f93b925527d7b0e47180d..6bdb5f6665ef91467b9e6839a654a56a74a53a26 100644 --- a/pages/popup/popup.js +++ b/pages/popup/popup.js @@ -27,25 +27,49 @@ const WEB_DOMAIN_EXPRESSION = /:\/\/(.[^\/]+)(.*)/; const WEB_PREFIX_VALUE = 'www.'; const WEB_PREFIX_LENGTH = WEB_PREFIX_VALUE.length; +/** + * Private Methods + */ + +popup._determineScriptDirection = function (language) { + + let rightToLeftLanguages, scriptDirection; + + rightToLeftLanguages = ['ar', 'he']; + + if (rightToLeftLanguages.indexOf(language) !== -1) { + scriptDirection = 'rtl'; + } else { + scriptDirection = 'ltr'; + } + + return scriptDirection; +}; + /** * Initializations */ document.addEventListener('DOMContentLoaded', function () { - let optionsButtonElement, i18nElements; + let optionsButtonElement, optionsTitle, scriptDirection, i18nElements; optionsButtonElement = document.getElementById('options-button'); + optionsTitle = chrome.i18n.getMessage('optionsTitle'); + + scriptDirection = popup._determineScriptDirection(navigator.language); - let optionsTitle = chrome.i18n.getMessage('optionsTitle'); optionsButtonElement.setAttribute('title', optionsTitle); + optionsButtonElement.setAttribute('dir', scriptDirection); i18nElements = document.querySelectorAll('[data-i18n-content]'); i18nElements.forEach(function (i18nElement) { let i18nMessageName = i18nElement.getAttribute('data-i18n-content'); + i18nElement.innerText = chrome.i18n.getMessage(i18nMessageName); + i18nElement.setAttribute('dir', scriptDirection); }); chrome.storage.local.get('amountInjected', function (items) { @@ -103,7 +127,9 @@ document.addEventListener('DOMContentLoaded', function () { protectionToggleElement.setAttribute('class', 'button button-toggle active'); let disableProtectionTitle = chrome.i18n.getMessage('disableProtectionTitle'); + protectionToggleElement.setAttribute('title', disableProtectionTitle); + protectionToggleElement.setAttribute('dir', scriptDirection); protectionToggleElement.addEventListener('click', function () {