From c48e96a75e893f9336ec5ebe0fb92ce6797f04b2 Mon Sep 17 00:00:00 2001
From: Thomas Rientjes <synzvato@protonmail.com>
Date: Fri, 22 Sep 2017 16:35:36 -0400
Subject: [PATCH] Add support for right-to-left, top-to-bottom scripts
---
pages/options/options.css | 25 ++++++++++++++++++++++++-
pages/options/options.js | 19 ++++++++++++++++++-
pages/popup/popup.js | 30 ++++++++++++++++++++++++++++--
3 files changed, 70 insertions(+), 4 deletions(-)
diff --git a/pages/options/options.css b/pages/options/options.css
index f362a0c..612a56f 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 6d6773b..80b1051 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 b7474cf..6bdb5f6 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 () {
--
GitLab