Move scoreboard javascript to JS file so browser can cache it.

Author: nickygerritsen

webapp/public/js/domjudge.js

@@ -824,3 +824,52 @@ function setupPreviewClarification($input, $previewDiv, previewInitial) {
 $(function () {
     $('[data-toggle="tooltip"]').tooltip();
 });
+
+// Make sure the items in the desktop scoreboard fit
+document.querySelectorAll(".desktop-scoreboard .forceWidth:not(.toolong)").forEach(el => {
+    if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
+        el.classList.add("toolong");
+    }
+});
+
+/**
+ * Helper method to resize mobile team names and problem badges
+ */
+function resizeMobileTeamNamesAndProblemBadges() {
+    // Make team names fit on the screen, but only when the mobile
+    // scoreboard is visible
+    const mobileScoreboard = document.querySelector('.mobile-scoreboard');
+    if (mobileScoreboard.offsetWidth === 0) {
+        return;
+    }
+    const windowWidth = document.body.offsetWidth;
+    const teamNameMaxWidth = Math.max(10, windowWidth - 150);
+    const problemBadgesMaxWidth = Math.max(10, windowWidth - 78);
+    document.querySelectorAll(".mobile-scoreboard .forceWidth:not(.toolong)").forEach(el => {
+        el.classList.remove("toolong");
+        el.style.maxWidth = teamNameMaxWidth + 'px';
+        if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
+            el.classList.add("toolong");
+        } else {
+            el.classList.remove("toolong");
+        }
+    });
+    document.querySelectorAll(".mobile-scoreboard .mobile-problem-badges:not(.toolong)").forEach(el => {
+        el.classList.remove("toolong");
+        el.style.maxWidth = problemBadgesMaxWidth + 'px';
+        if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
+            el.classList.add("toolong");
+            const scale = el.offsetWidth / el.scrollWidth;
+            const offset = -1 * (el.scrollWidth - el.offsetWidth) / 2;
+            el.style.transform = `scale(${scale}) translateX(${offset}px)`;
+        } else {
+            el.classList.remove("toolong");
+            el.style.transform = null;
+        }
+    });
+}
+
+if (document.querySelector('.mobile-scoreboard')) {
+    window.addEventListener('resize', resizeMobileTeamNamesAndProblemBadges);
+    resizeMobileTeamNamesAndProblemBadges();
+}

webapp/templates/partials/scoreboard_table.html.twig

@@ -587,47 +587,3 @@
         }
     {% endfor %}
 </style>
-<script>
-    document.querySelectorAll(".desktop-scoreboard .forceWidth:not(.toolong)").forEach(el => {
-        if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
-            el.classList.add("toolong");
-        }
-    });
-    window.resizeMobileTeamNames = function() {
-        // Make team names fit on the screen, but only when the mobile
-        // scoreboard is visible
-        const mobileScoreboard = document.querySelector('.mobile-scoreboard');
-        if (mobileScoreboard.offsetWidth === 0) {
-            return;
-        }
-        const windowWidth = document.body.offsetWidth;
-        const teamNameMaxWidth = Math.max(10, windowWidth - 150);
-        const problemBadgesMaxWidth = Math.max(10, windowWidth - 78);
-        document.querySelectorAll(".mobile-scoreboard .forceWidth:not(.toolong)").forEach(el => {
-            el.classList.remove("toolong");
-            el.style.maxWidth = teamNameMaxWidth + 'px';
-            if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
-                el.classList.add("toolong");
-            } else {
-                el.classList.remove("toolong");
-            }
-        });
-        document.querySelectorAll(".mobile-scoreboard .mobile-problem-badges:not(.toolong)").forEach(el => {
-            el.classList.remove("toolong");
-            el.style.maxWidth = problemBadgesMaxWidth + 'px';
-            if (el instanceof Element && el.scrollWidth > el.offsetWidth) {
-                el.classList.add("toolong");
-                const scale = el.offsetWidth / el.scrollWidth;
-                const offset = -1 * (el.scrollWidth - el.offsetWidth) / 2;
-                el.style.transform = `scale(${scale}) translateX(${offset}px)`;
-            } else {
-                el.classList.remove("toolong");
-                el.style.transform = null;
-            }
-        });
-    };
-    window.addEventListener('resize', () => {
-        resizeMobileTeamNames();
-    });
-    resizeMobileTeamNames();
-</script>

webapp/templates/public/scoreboard.html.twig

@@ -56,7 +56,7 @@
                 {% if static and refresh is defined %}
                 disableRefreshOnModal();
                 {% endif %}
-                resizeMobileTeamNames();
+                resizeMobileTeamNamesAndProblemBadges();
             };
 
             {% if static and refresh is defined %}