chore(js-sample): modify sample

test/sample_scripts/custom_translation.js

@@ -1,3 +1,5 @@
+//@ts-check
+
 (() => {
   // - Custom Transaction
   //   How to apply?
@@ -8,7 +10,7 @@
   // clearCustomTranslation();
 
   function setCustomTranslation() {
-    /** ref: https://github.com/SARDONYX-sard/dar-to-oar/blob/0.6.0/locales/en-US.json */
+    /** ref: https://github.com/SARDONYX-sard/dar-to-oar/blob/0.8.1/locales/en-US.json */
     const i18n = {
       'all-clear-btn': 'All Clear',
       'backup-dialog-all-checked-label': 'Check all',
@@ -53,12 +55,12 @@
       'css-preset-list-tooltip': 'You can choose a CSS preset.',
       'css-preset-list-tooltip2': 'Note: Editing "Preset" will overwrite "Custom".',
       'custom-css-label': 'Currently applied CSS',
-      'custom-js-auto-run-label': 'Auto run',
+      'custom-js-auto-run-label': 'JS Auto run',
       'custom-js-auto-run-tooltip':
         'Automatically run JavaScript on every page transition.(If disabled, it will automatically reload to apply the settings.)',
       'custom-js-auto-run-tooltip2':
         'This configuration item will not be activated unless manually selected by the user.',
-      'custom-js-label': 'Custom JavaScript(Please do not execute untrusted scripts)',
+      'custom-js-label': 'JavaScript to be executed each time you move pages (only when you give permission to do so)',
       'editor-mode-list-label': 'Editor Mode',
       'hide-dar-btn': 'Hide DAR',
       'hide-dar-btn-tooltip': 'After conversion, add ".mohidden" to all DAR files to hide them.(For MO2 user)',
@@ -105,6 +107,10 @@
       'tab-label-editor': 'Editor / Preset',
       'tab-label-lang': 'Language',
       'tab-label-notice': 'Notice',
+      'tab-label-tab': 'Tab',
+      'tab-list-position-bottom': 'Bottom',
+      'tab-list-position-label': 'Tab Position',
+      'tab-list-position-top': 'Top',
       'unhide-dar-btn': 'Unhide DAR',
       'unhide-dar-btn-tooltip': 'Unhide DAR files hidden by "Hide DAR".(For MO2 user)',
       'unhide-dar-failed': 'Could not find files with ".mohidden" extension',

test/sample_scripts/denger_patten.js

@@ -1,3 +1,5 @@
+//@ts-check
+
 /**
  * Examples of what to watch out for in other people's JavaScript (The safest way, of course, is not to do it.)
  * - Obfuscation by base64 encoding (base64 is not encryption)

test/sample_scripts/random_background_img.js

@@ -0,0 +1,60 @@
+//@ts-check
+
+(() => {
+  const preset1 = `
+  --autofill-color: #691c3747;
+  --convert-btn-color: #ab2b7e6e;
+  --error-color: #ff1655;
+  --hover-btn-color: #c9623db3;
+  --hover-convert-btn-color: #cd2c6c95;
+  --main-bg-color: #2223;
+  --theme-color: #ff8e16;`;
+  const preset2 = `
+  --autofill-color: #5eb1ef24;
+  --convert-btn-color: #3369ad7d;
+  --hover-btn-color: #1d5aa58b;
+  --hover-convert-btn-color: #2665b5d1;
+  --theme-color: #5a9ab9;`;
+  const preset4 = `
+  --autofill-color: #a19c0038;
+  --convert-btn-color: #94ce7c6e;
+  --hover-btn-color: #cefb518b;
+  --hover-convert-btn-color: #81c462a3;
+  --main-bg-color: #222a;
+  --theme-color: rgb(185, 185, 90);`;
+
+  let preset = preset2;
+  const getRandomUrl = () => {
+    const imgNumList = [1543801, 1547163, 4589833, 7325003, 14133639];
+
+    const imgNum = imgNumList[Math.floor(Math.random() * imgNumList.length)];
+    if ([1547163, 14133639].includes(imgNum)) {
+      preset = preset1;
+    } else if ([4589833, 7325003].includes(imgNum)) {
+      preset = preset4;
+    }
+    return `https://images.pexels.com/photos/${imgNum}/pexels-photo-${imgNum}.jpeg`;
+  };
+
+  // Change the background on each page.(JS is executed every time, so the same variable is fine.)
+  dynImg(getRandomUrl(), preset);
+
+  /**
+   * Change the background on each page.
+   * @param {string} imgUrl - Image URI
+   * @param {string} preset - CSS
+   */
+  function dynImg(imgUrl, preset) {
+    const commonVariables = `
+        --image-position-x: center;
+        --image-position-y: center;
+        --image-size: cover;
+        --main-bg-color: #222a;
+        ${preset}
+`;
+    const style = document.getElementById('dyn-style') ?? document.createElement('style');
+    style.id = 'dyn-style';
+    style.innerHTML = `:root { ${commonVariables} --image-url: url('${imgUrl}'); }`;
+    document.body.appendChild(style);
+  }
+})();