Implement html frontend on duplicated templates

This commit is contained in:
ilyaigpetrov 2025-09-21 07:27:04 +05:00
parent 06813f6c34
commit 60b89ec6bc
3 changed files with 108 additions and 20 deletions

View File

@ -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>

View File

@ -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) {

View File

@ -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);