Add ESLint for JavaScript files

Fix #713

Author: flodolo

.eslintignore

@@ -0,0 +1 @@
+web/js/sorttable.js

.eslintrc.js

@@ -0,0 +1,53 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "jquery": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+        "Clipboard": true,
+        "supportedLocales": true
+    },
+    "rules": {
+        "camelcase": [
+            2,
+            {
+                "properties": "always"
+            }
+        ],
+        "curly": [
+            2,
+            "all"
+        ],
+        "eqeqeq": [
+            2,
+            "smart"
+        ],
+        "indent": [
+            2,
+            4
+        ],
+        "linebreak-style": [
+            2,
+            "unix"
+        ],
+        "new-cap": 2,
+        "no-spaced-func": 2,
+        "one-var-declaration-per-line": [
+            2,
+            "always"
+        ],
+        "quotes": [
+            2,
+            "single"
+        ],
+        "semi": [
+            2,
+            "always"
+        ],
+        "space-before-function-paren": [
+            2,
+            "never"
+        ]
+    }
+};

.travis.yml

@@ -11,11 +11,14 @@ before_script:
   - composer install --no-interaction --prefer-dist
   ## Travis configuration
   - cp app/config/config.ini-travis app/config/config.ini
+  ## Install ESLint
+  - npm install -g eslint
 script:
   - vendor/atoum/atoum/bin/atoum -d tests/units/
   - php tests/functional/api.php
   - php tests/functional/pages.php
   - vendor/bin/php-cs-fixer --diff --dry-run -v fix
+  - eslint web/js
 notifications:
   irc:
     channels:

README.md

@@ -27,14 +27,19 @@ The Transvision team uses Git and GitHub for both development and issue tracking
 
 ## Dependencies
 
-- Bash scripting support
-- Python
-- PHP >= 5.6
-- Composer (Dependency Manager for PHP, https://getcomposer.org/)
-- mercurial, git, svn to check out data sources (only for a Full installation for production)
-- php5-xsl and GraphViz packages for generating the documentation with [phpDocumentor][]
-- libpspell-dev, php5-pspell and aspell-en packages for running spell checking in English on [Unlocalized words view][].
-- Apache with mod_rewrite activated
+* Bash scripting support
+* Python
+* PHP >= 5.6
+* Composer (Dependency Manager for PHP, https://getcomposer.org/)
+* mercurial, git, svn to check out data sources (only for a Full installation for production)
+* php5-xsl and GraphViz packages for generating the documentation with [phpDocumentor][]
+* libpspell-dev, php5-pspell and aspell-en packages for running spell checking in English on [Unlocalized words view][]
+* Apache with mod_rewrite activated
+* [npm][] and eslint for JavaScript files (optional)
+```
+npm install -g eslint
+eslint web/js
+```
 
 ## Full Installation (production or heavy development)
 
@@ -71,5 +76,6 @@ MPL 2
 [Transvision classes]: https://transvision-beta.mozfr.org/docs
 [Transvision Project]: https://github.com/mozfr/transvision
 [phpDocumentor]: http://phpdoc.org/
+[npm]: https://www.npmjs.com
 [Unlocalized words view]: https://transvision.mozfr.org/unlocalized
 [Coding Standards]:https://github.com/mozfr/transvision/wiki/Code-conventions

app/views/templates/base.php

@@ -155,7 +155,7 @@
 <?php endforeach?>
 
   <script>
-    var supported_locales = [];
+    var supportedLocales = [];
 <?php
     /*
         Building array of supported locales for JavaScript functions.
@@ -164,7 +164,7 @@
         that json_encode returns an array and not an object.
     */
     foreach (Project::getSupportedRepositories() as $repo_id => $repo_name) {
-        print "      supported_locales['{$repo_id}'] = " .
+        print "      supportedLocales['{$repo_id}'] = " .
              json_encode(array_values(Project::getRepositoryLocales($repo_id))) .
              ";\n";
     }

start.sh

@@ -1,5 +1,17 @@
 #! /usr/bin/env bash
 
+standard_color=$(tput sgr0)
+green=$(tput setab 2)
+red=$(tput setab 1)
+
+function echored() {
+    echo -e "$red$*$standard_color"
+}
+
+function echogreen() {
+    echo -e "$green$*$standard_color"
+}
+
 # Use 'start.sh -remote' if you want to access the server from another machine (or a VM)
 SERVER="localhost:8082"
 
@@ -49,6 +61,16 @@ case "$1" in
         php ./tests/functional/api.php
         php ./tests/functional/pages.php
         vendor/bin/php-cs-fixer --diff --dry-run -v fix
+        echo "Checking JavaScript files with ESLint..."
+        if hash eslint 2>/dev/null
+        then
+            if eslint web/js
+            then
+                echogreen "No issues found in JavaScript files."
+            fi
+        else
+            echored "WARNING: eslint is not available. See README.md for instructions."
+        fi
         exit 1
         ;;
     -tests-server)

tests/functional/pages.php

@@ -13,7 +13,7 @@
     ['productization/', 200, 'Show productization', 'firefox'],
     ['showrepos/?locale=en-GB', 200, 'Health Status for en-GB', 'General metrics'],
     ['stats/', 200, 'Repository status overview', 'Status estimate'],
-    ['string/?entity=browser/chrome/browser/places/places.properties:bookmarkResultLabel&repo=central', 200, 'supported_locales', 'Marque-page'],
+    ['string/?entity=browser/chrome/browser/places/places.properties:bookmarkResultLabel&repo=central', 200, 'supportedLocales', 'Marque-page'],
     ['unchanged/', 200, 'Display a list of strings identical', 'Locale'],
     ['unlocalized/', 200, 'Display the list of the most common untranslated words', 'Occurrences'],
     ['variables/', 200, 'Show potential errors related to', 'no errors found'],

web/js/base.js

@@ -32,31 +32,31 @@ $(document).ready(function() {
     // Associate code to repository switch in simple search form.
     $('#simplesearch_repository').on('change', function(){
         // Store locale currently selected
-        var current_locale = $('#simplesearch_locale').val();
-        var repository_id = this.value;
+        var currentLocale = $('#simplesearch_locale').val();
+        var repositoryID = this.value;
 
         // Empty the select
         $('#simplesearch_locale')
             .find('option')
             .remove();
 
         // Rebuild options with locales for new repository.
-        $.each(supported_locales[this.value], function(key, locale) {
+        $.each(supportedLocales[this.value], function(key, locale) {
             $('#simplesearch_locale')
                 .append($('<option>', {value : locale})
                 .text(locale));
         });
 
         // Hide elements (e.g. filters in Consistency view) if it's not a desktop repository
-        var desktop_repositories = ['central', 'aurora', 'beta', 'release'];
-        if (desktop_repositories.indexOf(repository_id) === -1) {
+        var desktopRepositories = ['central', 'aurora', 'beta', 'release'];
+        if (desktopRepositories.indexOf(repositoryID) === -1) {
             $('.desktop_repo_only').hide();
         } else {
             $('.desktop_repo_only').show();
         }
 
         // Try to select the same locale previously selected.
-        $('#simplesearch_locale option[value="' + current_locale + '"]')
+        $('#simplesearch_locale option[value="' + currentLocale + '"]')
             .prop('selected', true);
     });
 
@@ -71,11 +71,10 @@ $(document).ready(function() {
 
 var clipboard = new Clipboard('.clipboard');
 clipboard.on('success', function(e) {
-       e.trigger.setAttribute('data-title', 'Translation copied!');
-       e.trigger.setAttribute('class', 'clipboard tooltip');
-       setTimeout(function(arg1) {
-           arg1.trigger.setAttribute('class', 'clipboard')
-       }, 1000, e);
-       e.clearSelection();
-   }
-);
+    e.trigger.setAttribute('data-title', 'Translation copied!');
+    e.trigger.setAttribute('class', 'clipboard tooltip');
+    setTimeout(function(arg1) {
+        arg1.trigger.setAttribute('class', 'clipboard');
+    }, 1000, e);
+    e.clearSelection();
+});

web/js/component_filter.js

@@ -3,10 +3,10 @@ $(document).ready(function() {
         e.preventDefault();
         $('#filters a').removeClass('selected');
 
-        var available_searches = [];
+        var availableSearches = [];
         $('.results_table').each(function() {
-            var search_id = $(this).attr('class').split(/\s+/).pop();
-            available_searches.push(search_id);
+            var searchID = $(this).attr('class').split(/\s+/).pop();
+            availableSearches.push(searchID);
         });
 
         if (e.target.id === 'showall') {
@@ -21,20 +21,20 @@ $(document).ready(function() {
         }
 
         // Update results count
-        available_searches.forEach(function(search_id) {
-            var class_name;
-            class_name = e.target.id === 'showall'
-                ? 'tr.' + search_id
-                : 'tr.' + search_id + '.' + e.target.id;
+        availableSearches.forEach(function(searchID) {
+            var className;
+            className = e.target.id === 'showall'
+                ? 'tr.' + searchID
+                : 'tr.' + searchID + '.' + e.target.id;
 
-            var results_count = $(class_name).length;
-            var results_message =
-                results_count == 1
+            var resultsCount = $(className).length;
+            var resultsMessage =
+                resultsCount === 1
                 ? '1 result'
-                : results_count + ' results';
+                : resultsCount + ' results';
 
-            $('.results_count_' + search_id).text(results_message);
-        })
+            $('.results_count_' + searchID).text(resultsMessage);
+        });
     });
 
     // We want URL anchors to also work as filters