shuffle template fixed

tarampampam · Mar 24, 2022 · 51f8824 · 51f8824
1 parent e82c02c
commit 51f8824
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 27 deletions.
diff --git a/l10n/l10n.js b/l10n/l10n.js
@@ -215,7 +215,7 @@ Object.defineProperty(window, 'l10n', {
                 if (localized !== undefined) {
                     $el.innerText = localized;
                 } else {
-                    console.debug(`Unsupported l10n token detected: "${token}"`, $el);
+                    console.debug(`Unsupported l10n token detected: "${token}" (locale "${activeLocale}")`, $el);
                 }
             });
         };

diff --git a/templates/connection.html b/templates/connection.html
@@ -1,4 +1,8 @@
 <!DOCTYPE html>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 <html lang="en">
 <head>
     <meta charset="utf-8"/>
@@ -259,4 +263,8 @@ <h2 data-l10n>What can I do?</h2>
         })(document.createElement('script'), document.body);
     }
 </script>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 </html>
diff --git a/templates/shuffle.html b/templates/shuffle.html
@@ -72,7 +72,10 @@
 <body>
 <div class="flex-center full-height">
     <div>
-        <span id="error_text">{{ code }}: <span data-l10n>{{ message }}</span></span>
+        <div id="error_text">
+            <span class="source">{{ code }}: <span data-l10n>{{ message }}</span></span>
+            <span class="target"></span>
+        </div>
         {{ if show_details }}
         <div class="hidden" id="details">
             <table>
@@ -137,46 +140,86 @@
 <script>
     'use strict';
 
-    const $errorText = document.getElementById('error_text'),
-        characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
-    let text = $errorText.innerText, progress = 0;
+    /**
+     * @param {HTMLElement} $el
+     */
+    const Shuffle = function ($el) {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
+            $source = $el.querySelector('.source'), $target = $el.querySelector('.target');
+
+        let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
 
-    const scrambleInterval = window.setInterval(function () {
-        let newText = text;
+        /**
+         * @param {Number} len
+         * @return {string}
+         */
+        const getRandomizedString = function (len) {
+            let s = '';
 
-        for (let i = 0; i < text.length; i++) {
-            if (i >= progress) {
-                newText = newText.substr(0, i) +
-                    characters[Math.round(Math.random() * (characters.length - 1))] +
-                    newText.substr(i + 1);
+            for (let i = 0; i < len; i++) {
+                s += chars[Math.floor(Math.random() * chars.length)];
             }
-        }
 
-        $errorText.innerText = newText;
-    }, 450 / 60);
+            return s;
+        };
+
+        this.start = function () {
+            $source.style.display = 'none';
+            $target.style.display = 'block';
+
+            scrambleInterval = window.setInterval(() => {
+                if (cursor <= $source.innerText.length) {
+                    $target.innerText = $source.innerText.substring(0, cursor) + getRandomizedString($source.innerText.length - cursor);
+                }
+            }, 450 / 30);
+
+            cursorDelayInterval = window.setTimeout(() => {
+                cursorInterval = window.setInterval(() => {
+                    if (cursor > $source.innerText.length - 1) {
+                        this.stop();
+                    }
+
+                    cursor++;
+                }, 70);
+            }, 350);
+        };
+
+        this.stop = function () {
+            $source.style.display = 'block';
+            $target.style.display = 'none';
+            $target.innerText = '';
+            cursor = 0;
+
+            if (scrambleInterval !== undefined) {
+                window.clearInterval(scrambleInterval);
+                scrambleInterval = undefined;
+            }
+
+            if (cursorInterval !== undefined) {
+                window.clearInterval(cursorInterval);
+                cursorInterval = undefined;
+            }
+
+            if (cursorDelayInterval !== undefined) {
+                window.clearInterval(cursorDelayInterval);
+                cursorDelayInterval = undefined;
+            }
+        };
+    };
+
+    (new Shuffle(document.getElementById('error_text'))).start();
 
     // {{ if show_details }}
     window.setTimeout(function () {
         document.getElementById('details').classList.remove('hidden');
     }, 550);
     // {{ end }}
 
-    window.setTimeout(function () {
-        let revealInterval = window.setInterval(function () {
-            if (progress < text.length) {
-                progress++;
-            } else {
-                window.clearInterval(revealInterval);
-                window.clearInterval(scrambleInterval);
-            }
-        }, 70);
-    }, 350);
-
     if (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
         ((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
             s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
             s.async = s.defer = true;
-            s.addEventListener('load', () => {p.removeChild(s); text = $errorText.innerText});
+            s.addEventListener('load', () => p.removeChild(s));
             p.appendChild(s);
         })(document.createElement('script'), document.body);
     }