From 60b89ec6bcd7e7f4456c0c08a1e6cc2cd359cddd Mon Sep 17 00:00:00 2001
From: ilyaigpetrov <ilyaigpetrov@gmail.com>
Date: Sun, 21 Sep 2025 07:27:04 +0500
Subject: [PATCH] Implement html frontend on duplicated templates

---
 src/pages/options/index.html | 105 ++++++++++++++++++++++++++++++-----
 src/pages/options/index.mjs  |  11 ++--
 src/pages/options/repeat.mjs |  12 ++++
 3 files changed, 108 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/options/repeat.mjs

diff --git a/src/pages/options/index.html b/src/pages/options/index.html
index 8bcca1d..dfa9411 100644
--- a/src/pages/options/index.html
+++ b/src/pages/options/index.html
@@ -183,23 +183,97 @@
     <nav>
       <form id="pacChooserForm">
         <menu id="radios">
-          <template id="pacRecordTemplate">
-            <div>
-              <span id="attributes" hidden>
+          <my-li>
+          <template shadowrootmode="open">
+            <slot name="pacRecords">PAC_RECORDS</slot>
+          </template>
+          <pac-record slot="pacRecords">
+            <template shadowrootmode="open">
+              <span class="template-inputs" hidden>
                 <slot name="id">ID</slot>
                 <slot name="value">VALUE</slot>
                 <slot name="for">FOR</slot>
               </span>
-              <slot name="input">INPUT</slot>
-              <label data-attrs="for">
-                <slot name="label">LABEL</slot>
-              </label>
-              <a href title="Обновить">[обновить]</a>
-              <a href title="Приостановить">[⏸]</a>
-              <a href title="Информация о PAC-скрипте" style="float: right">[ℹ]</a>
+              <div class="template-body">
+                <slot name="inputElement">INPUT_ELEMENT</slot>
+                <label for="for">
+                  <slot name="label">LABEL</slot>
+                </label>
+                <a href title="Обновить">[обновить]</a>
+                <a href title="Приостановить">[⏸]</a>
+                <a href title="Информация о PAC-скрипте" style="float: right">[ℹ]</a>
+              </div>
+            </template>
+            <my-input slot="inputElement">
+              <template shadowrootmode="open">
+                <span class="template-inputs" hidden>
+                  <slot name="id">ID</slot>
+                  <slot name="value">VALUE</slot>
+                </span>
+                <slot name="input"></slot>
+              </template>
+              <input slot="input" type="radio" name="pacScript" form="pacChooserForm" id="id1" value="value1" />
+              <span slot="id">antizapret</span>
+              <span slot="value">antizapret</span>
+            </my-input>
+            <span slot="label">Антизапрет</span>
+          </pac-record>
+          <pac-record slot="pacRecords">
+            <template shadowrootmode="open">
+              <span class="template-inputs" hidden>
+                <slot name="id">ID</slot>
+                <slot name="value">VALUE</slot>
+                <slot name="for">FOR</slot>
+              </span>
+              <div class="template-body">
+                <slot name="inputElement">INPUT_ELEMENT</slot>
+                <label for="for">
+                  <slot name="label">LABEL</slot>
+                </label>
+                <a href title="Обновить">[обновить]</a>
+                <a href title="Приостановить">[⏸]</a>
+                <a href title="Информация о PAC-скрипте" style="float: right">[ℹ]</a>
+              </div>
+            </template>
+            <my-input slot="inputElement">
+              <template shadowrootmode="open">
+                <span id="templateInputs" hidden>
+                  <slot name="id">ID</slot>
+                  <slot name="value">VALUE</slot>
+                </span>
+                <slot name="input"></slot>
+              </template>
+              <input slot="input" type="radio" name="pacScript" form="pacChooserForm" id="id2" value="value2" />
+              <span slot="id">anticensority</span>
+              <span slot="value">anticensority</span>
+            </my-input>
+            <span slot="label">Антицензорити</span>
+          </pac-record>
+            <!--script src="./repeat.mjs?times=2" type="module"></script-->
+            <!--Light DOM>
+            <div>
+              <span slot="label">Антизапрет</span>
+              <span slot="id">antizapret</span>
+              <span slot="value">antizapret</span>
+              <span slot="for">antizapret</span>
+              <input slot="input" type="radio" name="pacScript" form="pacChooserForm" data-attrs="id value" />
             </div>
+            <div>
+              <span slot="label">Антицензорити</span>
+              <span slot="id">anticensority</span>
+              <span slot="value">anticensority</span>
+              <span slot="for">anticensority</span>
+              <input slot="input" type="radio" name="pacScript" form="pacChooserForm" data-attrs="id value" />
+            </div>
+            <!--
+            <div>
+              <my-input slot="input" name="first" />
+              <my-input slot="input" name="second" />
+            </div>
+            <!--/Light DOM>
+          </pac-record>
           </template>
-          <li>
+          <!--li>
             <pac-record>
               <span slot="label">Антизапрет</span>
               <span slot="id">antizapret</span>
@@ -215,7 +289,8 @@
               <span slot="value">anticensority</span>
               <span slot="for">anticensority</span>
             </pac-record>
-          </li>
+          </li-->
+          </my-li>
           <li>
             <input type="radio" value="own" name="pacScript" id="ownRadio" disabled>
             <label for="ownRadio">Свой:</label>
@@ -252,9 +327,9 @@
       </form>
     </nav>
     <footer style="text-align: center">
-        <a id="donate" target="_blank" data-localize="__MSG_Donate__"
-          href="https://github.com/anticensority/runet-censorship-bypass/wiki/Поддержать"
-        >Donate ❤</a>
+      <a id="donate" target="_blank" data-localize="__MSG_Donate__"
+        href="https://github.com/anticensority/runet-censorship-bypass/wiki/Поддержать"
+      >Donate ❤</a>
     </footer>
     <script src="./index.mjs" type="module"></script>
   </body>
diff --git a/src/pages/options/index.mjs b/src/pages/options/index.mjs
index 093283d..d917453 100644
--- a/src/pages/options/index.mjs
+++ b/src/pages/options/index.mjs
@@ -1,5 +1,5 @@
 console.log('Options page is opening...');
-
+/*
 customElements.define('pac-record',
   class extends HTMLElement {
     static formAssociated = true;
@@ -18,10 +18,10 @@ customElements.define('pac-record',
         (da) => {
           da.dataset.attrs.split(' ').forEach(
             (attr) => {
-                console.log(shadow.querySelector(`#attributes > slot[name=${attr}]`));
+                console.log(shadow.querySelector(`#VARIABLES > slot[name=${attr}]`));
                 da.setAttribute(
                   attr,
-                  shadow.querySelector(`#attributes > slot[name=${attr}]`).assignedNodes()?.[0]?.textContent,
+                  shadow.querySelector(`#VARIABLES > slot[name=${attr}]`).assignedNodes()?.[0]?.textContent,
                 );
             },
           );
@@ -57,13 +57,14 @@ customElements.define('pac-record',
           })
       });
 
-      /*
+      /
       const input = fragment.querySelector('div > input');
       const label = fragment.querySelector('div > label');
       /*const node = pacRecordTemplate.content.cloneNode(true);
       const input = node.querySelector('div > input');
       const label = node.querySelector('div > label');
-      input.id = input.value = label.htmlFor = this.dataset.id;*/
+      input.id = input.value = label.htmlFor = this.dataset.id;
+      /
 
     }
     attributeChangedCallback(name, oldValue, newValue) {
diff --git a/src/pages/options/repeat.mjs b/src/pages/options/repeat.mjs
new file mode 100644
index 0000000..b06eda7
--- /dev/null
+++ b/src/pages/options/repeat.mjs
@@ -0,0 +1,12 @@
+console.log('HELLO FROM REPEATER');
+console.log('IMPORT META URL:', import.meta.url);
+const times = new URL(import.meta.url).searchParams.get("times");
+console.log(`REPEAT ${times} TIMES`);
+const htmlFile = window.location.pathname;
+console.log('HTML FILE IS:', htmlFile);
+console.log('DOCUMENT', document);
+console.log('DOC CURRENT SCRIPT:', document.currentScript);
+console.log('DOC.SCRIPTS', document.scripts);
+const thisScript = document.scripts[0];
+const scriptHost = thisScript.parentElement;
+console.log('SCRIPT HOST', scriptHost);
\ No newline at end of file