anticensority/runet-censorship-bypass
1
1
Fork 0
mirror of https://github.com/anticensority/runet-censorship-bypass.git synced 2025-10-02 18:06:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

Implement html frontend on duplicated templates

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/options/index.html
View File

@ -183,23 +183,97 @@
<nav> <nav>
<form id="pacChooserForm"> <form id="pacChooserForm">
<menu id="radios"> <menu id="radios">
<template id="pacRecordTemplate"> <my-li>
<div> <template shadowrootmode="open">
<span id="attributes" hidden> <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="id">ID</slot>
<slot name="value">VALUE</slot> <slot name="value">VALUE</slot>
<slot name="for">FOR</slot> <slot name="for">FOR</slot>
</span> </span>
<slot name="input">INPUT</slot> <div class="template-body">
<label data-attrs="for"> <slot name="inputElement">INPUT_ELEMENT</slot>
<slot name="label">LABEL</slot> <label for="for">
</label> <slot name="label">LABEL</slot>
<a href title="Обновить">[обновить]</a> </label>
<a href title="Приостановить">[⏸]</a> <a href title="Обновить">[обновить]</a>
<a href title="Информация о PAC-скрипте" style="float: right">[ℹ]</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>
<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> </template>
<li> <!--li>
<pac-record> <pac-record>
<span slot="label">Антизапрет</span> <span slot="label">Антизапрет</span>
<span slot="id">antizapret</span> <span slot="id">antizapret</span>
@ -215,7 +289,8 @@
<span slot="value">anticensority</span> <span slot="value">anticensority</span>
<span slot="for">anticensority</span> <span slot="for">anticensority</span>
</pac-record> </pac-record>
</li> </li-->
</my-li>
<li> <li>
<input type="radio" value="own" name="pacScript" id="ownRadio" disabled> <input type="radio" value="own" name="pacScript" id="ownRadio" disabled>
<label for="ownRadio">Свой:</label> <label for="ownRadio">Свой:</label>
@ -252,9 +327,9 @@
</form> </form>
</nav> </nav>
<footer style="text-align: center"> <footer style="text-align: center">
<a id="donate" target="_blank" data-localize="__MSG_Donate__" <a id="donate" target="_blank" data-localize="__MSG_Donate__"
href="https://github.com/anticensority/runet-censorship-bypass/wiki/Поддержать" href="https://github.com/anticensority/runet-censorship-bypass/wiki/Поддержать"
>Donate ❤</a> >Donate ❤</a>
</footer> </footer>
<script src="./index.mjs" type="module"></script> <script src="./index.mjs" type="module"></script>
</body> </body>

11
src/pages/options/index.mjs
View File

@ -1,5 +1,5 @@
console.log('Options page is opening...'); console.log('Options page is opening...');
/*
customElements.define('pac-record', customElements.define('pac-record',
class extends HTMLElement { class extends HTMLElement {
static formAssociated = true; static formAssociated = true;
@ -18,10 +18,10 @@ customElements.define('pac-record',
(da) => { (da) => {
da.dataset.attrs.split(' ').forEach( da.dataset.attrs.split(' ').forEach(
(attr) => { (attr) => {
console.log(shadow.querySelector(`#attributes > slot[name=${attr}]`)); console.log(shadow.querySelector(`#VARIABLES > slot[name=${attr}]`));
da.setAttribute( da.setAttribute(
attr, 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 input = fragment.querySelector('div > input');
const label = fragment.querySelector('div > label'); const label = fragment.querySelector('div > label');
/*const node = pacRecordTemplate.content.cloneNode(true); /*const node = pacRecordTemplate.content.cloneNode(true);
const input = node.querySelector('div > input'); const input = node.querySelector('div > input');
const label = node.querySelector('div > label'); 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) { attributeChangedCallback(name, oldValue, newValue) {

12
src/pages/options/repeat.mjs Normal file
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);