Can select multiple languages to monitor (issue #61) (#151)

* Can select multiple languages to monitor (issue #61) * Colour-coded locale labels
mozillabrasil · Jul 4, 2020 · fa4b245 · fa4b245
1 parent ea827aa
commit fa4b245
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 44 deletions.
diff --git a/src/css/app.css b/src/css/app.css
@@ -138,10 +138,77 @@ label > * {
     flex-grow: 0;
 }
 
+#items li div:first-of-type {
+    position: relative;
+}
+
 .item__icon {
     width: 32px;
 }
 
+.one-locale .item__locale {
+    display: none !important;
+}
+
+.item__locale {
+    position: absolute;
+    bottom: 5px;
+    right: 0;
+    font-size: .7rem;
+    padding: 2px 5px;
+    border-radius: 100000px;
+}
+
+.item__locale.cs {
+    background: var(--purple-50);
+    color: white;
+}
+
+.item__locale.en-US {
+    background: var(--blue-60);
+    color: white;
+}
+
+.item__locale.es {
+    background: var(--green-70);
+    color: white;
+}
+
+.item__locale.fi {
+    background: var(--red-70);
+    color: white;
+}
+
+.item__locale.hu {
+    background: var(--orange-60);
+    color: white;
+}
+
+.item__locale.id {
+    background: var(--teal-50);
+    color: black;
+}
+
+.item__locale.pt-BR {
+    background: var(--yellow-50);
+    color: black;
+}
+
+.item__locale.sl {
+    background: var(--magenta-70);
+    color: white;
+}
+
+.item__locale.sr {
+    background: var(--grey-50);
+    color: white;
+}
+
+.item__locale.st {
+    background: #000;
+    color: white;
+}
+
 .item--unread {
     font-weight: bold;
 }

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -63,6 +63,7 @@ <h1>
         <li class="template question-template">
             <div>
                 <img src="../res/products/{PRODUCT}.png" title="{PRODUCT}" class="item__icon">
+                <span class="item__locale"></span>
             </div>
             <div class="item__title">{TITLE}</div>
             <div>

diff --git a/src/html/preferences.html b/src/html/preferences.html
@@ -82,21 +82,38 @@ <h3 data-i18n="products"></h3>
             </label>
 
             <h3 data-i18n="language"></h3>
-            <label for="chooseLanguage">
+            <p>
                 <span data-i18n="choose_language_description"></span>
-                <!-- Use style width to temporarily fix text overflow -->
-                <select id="chooseLanguage" name="chooseLanguage" style="width: 200px">
-                    <option value="cs">Čeština</option>
-                    <option value="en-US" selected>English</option>
-                    <option value="es">Español</option>
-                    <!--<option value="fi">suomi</option>-->
-                    <option value="hu">Magyar</option>
-                    <!--<option value="id">Bahasa Indonesia</option>-->
-                    <option value="pt-BR">Português (do Brasil)</option>
-                    <!--<option value="sl">slovenščina</option>-->
-                    <!--<option value="sr">Српски</option>-->
-                    <!--<option value="st">Sesotho</option>-->
-                </select>
+            </p>
+            <label for="cs">
+                <input id="cs" name="chooseLanguage" type="checkbox" value="cs"> Čeština
+            </label>
+            <label for="en-US">
+                <input id="en-US" name="chooseLanguage" type="checkbox" value="en-US"> English
+            </label>
+            <label for="es">
+                <input id="es" name="chooseLanguage" type="checkbox" value="es"> Español
+            </label>
+            <label for="fi">
+                <input id="fi" name="chooseLanguage" type="checkbox" value="fi"> Suomi
+            </label>
+            <label for="hu">
+                <input id="hu" name="chooseLanguage" type="checkbox" value="hu"> Magyar
+            </label>
+            <label for="id">
+                <input id="id" name="chooseLanguage" type="checkbox" value="id"> Bahasa Indonesia
+            </label>
+            <label for="pt-BR">
+                <input id="pt-BR" name="chooseLanguage" type="checkbox" value="pt-BR"> Português (do Brasil)
+            </label>
+            <label for="sl">
+                <input id="sl" name="chooseLanguage" type="checkbox" value="sl"> Slovenščina
+            </label>
+            <label for="sr">
+                <input id="sr" name="chooseLanguage" type="checkbox" value="sr"> Српски
+            </label>
+            <label for="st">
+                <input id="st" name="chooseLanguage" type="checkbox" value="st"> Sesotho
             </label>
 
             <h3 data-i18n="theme"></h3>

diff --git a/src/js/background.js b/src/js/background.js
@@ -38,6 +38,10 @@ function settingsUpdated(changes, area) {
                 return;
             case 'chooseLanguage':
                 locale = changes[item].newValue;
+                browser.runtime.sendMessage({
+                    task: 'toggle_locale_labels',
+                    multiple: locale.length != 1
+                });
                 callAPI();
                 return;
             case 'showNotifications':
@@ -171,7 +175,12 @@ function dataLoaded(data) {
 
     // Load locale
     if (typeof data.chooseLanguage === 'undefined' || data.chooseLanguage === null) {
-        locale = "en-US";
+        locale = ["en-US"];
+        browser.storage.local.set({
+            chooseLanguage: locale
+        });
+    } else if (typeof data.chooseLanguage === 'string') {
+        locale = [data.chooseLanguage];
         browser.storage.local.set({
             chooseLanguage: locale
         });
@@ -191,7 +200,7 @@ function dataLoaded(data) {
 
     // Load product watch list
     if (typeof data.chooseProduct === 'undefined' || data.chooseProduct === null) {
-        product = "Firefox";
+        product = ["Firefox"];
         browser.storage.local.set({
             chooseProduct: product
         });
@@ -243,26 +252,33 @@ function callAPI() {
     });
 
     // Send requests to SUMO API
-    let requests = Array(product.length);
-    numberOfAPIRequests = product.length;
+    numberOfAPIRequests = product.length * locale.length;
+    let requestCounter = 0;
+    let requests = Array(numberOfAPIRequests);
 
     for (i = 0; i < product.length; i++) {
-        requests[i] = new XMLHttpRequest();
-        let requestAPI = 'https://support.mozilla.org/api/2/question/?format=json&ordering=-id&is_solved=' + is_solved + '&is_spam=' + is_spam + '&is_locked=' + is_locked + '&product=' + product[i] + '&is_taken=' + is_taken + '&is_archived=' + is_archived + '&locale=' + locale + '&num_answers=' + max_answers;
-        requests[i].open('GET', requestAPI, true);
-        requests[i].responseType = 'json';
-        requests[i].send();
-        requests[i].onload = function () {
-            loadRequest(this);
-        };
+        for (j = 0; j < locale.length; j++) {
+            requests[requestCounter] = new XMLHttpRequest();
+            let requestAPI = 'https://support.mozilla.org/api/2/question/?format=json&ordering=-id&is_solved=' + is_solved + '&is_spam=' + is_spam + '&is_locked=' + is_locked + '&product=' + product[i] + '&is_taken=' + is_taken + '&is_archived=' + is_archived + '&locale=' + locale[j] + '&num_answers=' + max_answers;
+            requests[requestCounter].open('GET', requestAPI, true);
+            requests[requestCounter].responseType = 'json';
+            requests[requestCounter].send();
+            requests[requestCounter].onload = function () {
+                loadRequest(this);
+            };
+            requestCounter++;
+        }
     }
 
-    // If the user doesn't have any products selected
-    if (product.length < 1) {
+    // If the user doesn't have any products or locales selected
+    if (product.length < 1 || locale.length < 1) {
         browser.runtime.sendMessage({
             task: 'no_api_call'
         });
         questionList = [];
+        browser.storage.local.set({
+            'questions': questionList
+        });
         updateQuestionCount();
     }
 }
@@ -318,7 +334,7 @@ function loadRequest(request) {
     }
 
     // Clean and save question list in Storage API
-    removeOld(responseSUMO.results, responseSUMO.results[0].product);
+    removeOld(responseSUMO.results, responseSUMO.results[0].product, responseSUMO.results[0].locale);
     questionList = newQuestionList.concat(questionList);
     browser.storage.local.set({
         'questions': questionList
@@ -394,19 +410,22 @@ function updateQuestionCount() {
  * @param {Array} list
  * @param {string} prod Current product list to check
  */
-function removeOld(questions, productToCheck) {
+function removeOld(questions, productToCheck, localeToCheck) {
     // Convert watch list to lowercase
     let productList = product.map(function (value) {
         return value.toLowerCase();
     });
+    let localeList = locale.map(function (value) {
+        return value.toLowerCase();
+    });
 
     let i = 0;
     while (i < questionList.length) {
         let x = 0;
         let found = false;
         let skip = false;
-        let matchesList = (questionList[i].product.toLowerCase() == productToCheck);
-        let isPossible = productList.includes(questionList[i].product.toLowerCase());
+        let matchesList = (questionList[i].product.toLowerCase() == productToCheck) && (questionList[i].locale.toLowerCase() == localeToCheck.toLowerCase());
+        let isPossible = productList.includes(questionList[i].product.toLowerCase()) && localeList.includes(questionList[i].locale.toLowerCase());
 
         // Question is for a product on the watch list, but not for the product currently being checked (keep the question in the list)
         if (isPossible && !matchesList) {

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -109,6 +109,9 @@ function handleMessage(message) {
             questionList = [];
             addQuestions([], true);
             return;
+        case 'toggle_locale_labels':
+            showLocaleLabels(message.multiple);
+            return;
     }
 }
 
@@ -118,6 +121,7 @@ function handleMessage(message) {
  */
 function dataLoaded(data) {
     setCurrentTheme(data.chooseTheme);
+    showLocaleLabels(data.chooseLanguage.length != 1);
 
     questionList = data.questions;
 
@@ -126,7 +130,7 @@ function dataLoaded(data) {
             questionList[i].product.toLowerCase(),
             questionList[i].title,
             questionList[i].id,
-            data.chooseLanguage,
+            questionList[i].locale,
             questionList[i].new
         );
     }
@@ -210,6 +214,7 @@ function createQuestionUI(product, title, id, locale, isNew) {
     let list = document.getElementById('items');
     let item = questionTemplate.cloneNode(true);
     let productIcon = item.getElementsByClassName('item__icon')[0];
+    let productLocale = item.getElementsByClassName('item__locale')[0];
     let questionTitle = item.getElementsByClassName('item__title')[0];
     let button = item.getElementsByClassName('item__link')[0];
     let url = 'https://support.mozilla.org/' + locale + '/questions/' + id;
@@ -226,6 +231,10 @@ function createQuestionUI(product, title, id, locale, isNew) {
     productIcon.src = '../res/products/' + product + '.png';
     productIcon.title = browser.i18n.getMessage('product_' + product);
 
+    // Add question locale
+    productLocale.textContent = locale.substring(0, 2).toUpperCase();
+    productLocale.classList.add(locale);
+
     // Add question title
     questionTitle.textContent = title;
 
@@ -267,6 +276,15 @@ function toggleQuestionList() {
     }
 }
 
+/**
+ * Show/Hide locale labels on question list
+ * @param {boolean} show 
+ */
+function showLocaleLabels(show) {
+    if (show) questionListUI.classList.remove('one-locale');
+    else questionListUI.classList.add('one-locale');
+}
+
 /**
  * Mark a question as read
  * @param {number} id

diff --git a/src/js/preferences.js b/src/js/preferences.js
@@ -56,10 +56,6 @@ function handleMessage(message) {
  */
 function loadSettings(data) {
     setCurrentTheme(data.chooseTheme);
-
-    if (data.chooseLanguage) {
-        document.settings.chooseLanguage.value = data.chooseLanguage;
-    }
 
     if (data.frequencySeekNewQuestions) {
         document.settings.frequencySeekNewQuestions.value = data.frequencySeekNewQuestions;
@@ -81,6 +77,13 @@ function loadSettings(data) {
     } else {
         document.settings.chooseProduct[i].checked = true;
     }
+
+    if (data.chooseLanguage) {
+        let languages = data.chooseLanguage;
+        for (i = 0; i < languages.length; i++) {
+            document.getElementById(languages[i]).checked = true;
+        }
+    }
 
     if (data.chooseTheme) {
         document.settings.chooseTheme.value = data.chooseTheme;
@@ -97,8 +100,8 @@ function saveChange(element) {
     let preference;
     let preferenceObject = {};
 
-    if (element.target.name == 'chooseProduct') {
-        preference = getProductList();
+    if (element.target.name == 'chooseProduct' || element.target.name == 'chooseLanguage') {
+        preference = getList(element.target.name);
     } else if (element.target.type == 'checkbox') {
         preference = element.target.checked;
     } else {
@@ -110,15 +113,15 @@ function saveChange(element) {
 }
 
 /**
- * Generate list of products to watch
+ * Generate preference array
  * @return {Array.<string>}
  */
-function getProductList() {
+function getList(option) {
     let preference = [];
 
-    for (i = 0; i < document.settings.chooseProduct.length; i++) {
-        if (document.settings.chooseProduct[i].checked) {
-            preference.push(document.settings.chooseProduct[i].value);
+    for (i = 0; i < document.settings[option].length; i++) {
+        if (document.settings[option][i].checked) {
+            preference.push(document.settings[option][i].value);
         }
     }