Modernize the JS

Author: Steven Yeh

assets/js/getting-started.js

@@ -1,19 +1,20 @@
-function setupPageControl(container, pageType) {
-    var buttons = document.querySelectorAll(container + ' .btn-' + pageType);
-    for (var i = 0; i < buttons.length; i++) {
-        buttons[i].addEventListener('click', function () {
+const setupPageControl = (container, pageType) => {
+    const buttons = document.querySelectorAll(container + ' .btn-' + pageType);
+    for (let i = 0; i < buttons.length; i++) {
+        buttons[i].addEventListener('click', () => {
             if (!this.classList.contains('active')) {
-                var activeButtons = document.querySelectorAll(container + ' .btn-' + pageType + '.active');
-                for (var j = 0; j < activeButtons.length; j++) {
+                const activeButtons = document.querySelectorAll(container + ' .btn-' + pageType + '.active');
+                for (let j = 0; j < activeButtons.length; j++) {
                     activeButtons[j].classList.remove('active');
                 }
                 this.classList.add('active');
 
-                var pages = document.querySelectorAll(container + ' .page-' + pageType);
-                for (var j = 0; j < pages.length; j++) {
+                const pages = document.querySelectorAll(container + ' .page-' + pageType);
+                for (let j = 0; j < pages.length; j++) {
                     pages[j].classList.remove('show');
                 }
-                var targetPage = document.getElementById(this.getAttribute('data-page'));
+
+                const targetPage = document.getElementById(this.getAttribute('data-page'));
                 if (targetPage) {
                     targetPage.classList.add('show');
                 }
@@ -22,17 +23,17 @@ function setupPageControl(container, pageType) {
     }
 }
 
-function showContent(slug) {
+const showContent = (slug) => {
     document.querySelector('[data-page="content-'+slug+'"]').click();
 }
 
 setupPageControl('body', 'platform');
 setupPageControl('body', 'extractplatform');
 setupPageControl('body', 'phase');
 
-var platformPages = document.querySelectorAll('.page-platform');
-for (var i = 0; i < platformPages.length; i++) {
-    var container = '#' + platformPages[i].id;
+const platformPages = document.querySelectorAll('.page-platform');
+for (let i = 0; i < platformPages.length; i++) {
+    const container = '#' + platformPages[i].id;
     setupPageControl(container, 'distro');
 }
 

assets/js/home.js

@@ -1,18 +1,21 @@
-// http://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript
-function formatBytes (bytes, decimals) {
-   if(bytes == 0) return '0 Byte';
-   var k = 1000;
-   var dm = decimals + 1 || 3;
-   var sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-   var i = Math.floor(Math.log(bytes) / Math.log(k));
+// https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript
+const formatBytes = (bytes, decimals) => {
+   if (bytes == 0) {
+    return '0 Byte';
+   }
+   const k = 1000;
+   const dm = decimals + 1 || 3;
+   const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+   const i = Math.floor(Math.log(bytes) / Math.log(k));
+
    return (bytes / Math.pow(k, i)).toPrecision(dm) + ' ' + sizes[i];
 }
 
-document.addEventListener('DOMContentLoaded', function () {
-  var link = document.getElementsByClassName('link')[0];
-  var size = document.getElementsByClassName('size')[0];
-  var version = document.getElementsByClassName('version')[0];
-  var platform = document.getElementsByClassName('platform')[0];
+document.addEventListener('DOMContentLoaded', () => {
+  const link = document.getElementsByClassName('link')[0];
+  const size = document.getElementsByClassName('size')[0];
+  const version = document.getElementsByClassName('version')[0];
+  const platform = document.getElementsByClassName('platform')[0];
 
   if (openrct2.currentPlatform !== openrct2.Platform.UNKNOWN) {
     link.href = openrct2.currentPlatform.link;
@@ -21,12 +24,12 @@ document.addEventListener('DOMContentLoaded', function () {
     version.innerHTML = openrct2.currentPlatform.version;
   }
 
-  platform.addEventListener('click', function (e) {
+  platform.addEventListener('click', (e) => {
     e.preventDefault();
 
-    var keys = Object.keys(openrct2.Platform);
+    const keys = Object.keys(openrct2.Platform);
 
-    for (var i = 0; i <= keys.length; i++) {
+    for (let i = 0; i <= keys.length; i++) {
       if (openrct2.Platform[keys[i]].name === platform.innerHTML) {
         if (i + 1 >= keys.length) {
           i = 1;

assets/js/openrct2.website.js

@@ -29,15 +29,17 @@ openrct2.Platform = Object.freeze({
 });  // Object.freeze() prevents this from being futzed with
 
 function getPlatform() {
-    if (navigator.platform.indexOf('Win') >= 0) {
-        if (navigator.userAgent.indexOf("WOW64") === -1 && navigator.userAgent.indexOf("Win64") === -1) {
+    const { platform, userAgent } = navigator;
+    if (platform.includes('Win')) {
+        const win64UserAgents = ["WOW64", "Win64"];
+        if (!win64UserAgents.includes(userAgent)) {
             return openrct2.Platform.WINDOWS32;
         } else {
             return openrct2.Platform.WINDOWS64;  // 64-bit is the default as it is by far the most common these days
         }
-    } else if (navigator.platform.indexOf('Linux') >= 0) {
+    } else if (platform.includes('Linux')) {
         return openrct2.Platform.LINUX;
-    } else if (navigator.platform === 'MacIntel') {
+    } else if (platform.includes('MacIntel')) {
         return openrct2.Platform.MACOS;
     } else {
         return openrct2.Platform.UNKNOWN;