anticensority/runet-censorship-bypass
1
1
Fork 0
mirror of https://github.com/anticensority/runet-censorship-bypass.git synced 2025-04-17 15:52:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Try adding web templates and a custom component to the frontend

Browse Source
This commit is contained in:
ilyaigpetrov 2025-03-24 00:32:04 +05:00
parent 8d923cc041
commit de62b28674
2 changed files with 69 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,11 +60,11 @@
body {
--ribbon-color: #0075ff; /* #4169e1;*/
font-family: Ubuntu, Arial, sans-serif;
font-size: 75%;
font-size: 80%;
padding: 10px;
}
ul {
menu {
list-style: none;
padding: 0;
}
@ -182,18 +182,43 @@
</header>
<nav>
<form id="pacChooserForm">
<ul id="radios">
<menu id="radios">
<template id="pacRecordTemplate">
<div>
<span id="attributes" hidden>
<slot name="id">ID</slot>
<slot name="value"><span slot="id"></span></slot>
<slot name="for">FOR</slot>
</span>
<input type="radio" name="pacScript" data-attrs="id value">
<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>
</template>
<li>
<input type="radio" value="antizapret" name="pacScript" id="antizapret">
<label for="antizapret">Антизапрет</label>
<pac-record>
<span slot="label">Антизапрет</span>
<span slot="id">antizapret</span>
<!--span slot="value">antizapret</span>
<span slot="for">antizapret</span-->
</pac-record>
</li>
<li>
<pac-record>
<span slot="label">Антицензорити</span>
<span slot="id">anticensority</span>
<span slot="value">anticensority</span>
<span slot="for">anticensority</span>
</pac-record>
</li>
<!--li>
<input type="radio" value="anticensority" name="pacScript" id="anticensorityRadio">
<label for="anticensorityRadio">Антицензорити</label>
<a href title="обновить">[обновить]</a>
<a href title="приостановить">[⏸]</a>
<a href title="информация" style="float: right">[ℹ]</a>
</li>
</li-->
<li>
<input type="radio" value="own" name="pacScript" id="ownRadio" disabled>
<label for="ownRadio">Свой:</label>
@ -216,7 +241,7 @@
<input type="radio" value="disabled" name="pacScript" id="disabledRadio" checked>
<label for="disabledRadio">Отключить / Сброс</label>
</li>
</ul>
</menu>
<div id="boxes">
<div>
<input type="checkbox" name="resetBox" id="resetBox" checked>

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

@ -1,5 +1,39 @@
console.log('Options page is opening...');
customElements.define('pac-record',
class extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const fragment = pacRecordTemplate.content.cloneNode(true);
shadow.appendChild(fragment);
const templateAttrs = shadow.querySelectorAll('#attributes > slot[name]');
const dataAttrs = shadow.querySelectorAll('*[data-attrs]');
dataAttrs.forEach(
(da) => {
da.dataset.attrs.split(' ').forEach(
(attr) => {
console.log(shadow.querySelector(`#attributes > slot[name=${attr}]`));
da.setAttribute(
attr,
shadow.querySelector(`#attributes > slot[name=${attr}]`).assignedNodes()[0].textContent,
);
},
);
}
);
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;*/
}
}
);
customPacUrl.addEventListener('change', function (event) {
console.log('ON CHANGE:', event);
pacChooserForm.reportValidity();