mirror of
https://github.com/anticensority/runet-censorship-bypass.git
synced 2025-07-15 10:42:34 +03:00
Try adding web templates and a custom component to the frontend
This commit is contained in:
parent
8d923cc041
commit
de62b28674
|
@ -60,11 +60,11 @@
|
||||||
body {
|
body {
|
||||||
--ribbon-color: #0075ff; /* #4169e1;*/
|
--ribbon-color: #0075ff; /* #4169e1;*/
|
||||||
font-family: Ubuntu, Arial, sans-serif;
|
font-family: Ubuntu, Arial, sans-serif;
|
||||||
font-size: 75%;
|
font-size: 80%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
menu {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
@ -182,18 +182,43 @@
|
||||||
</header>
|
</header>
|
||||||
<nav>
|
<nav>
|
||||||
<form id="pacChooserForm">
|
<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>
|
<li>
|
||||||
<input type="radio" value="antizapret" name="pacScript" id="antizapret">
|
<pac-record>
|
||||||
<label for="antizapret">Антизапрет</label>
|
<span slot="label">Антизапрет</span>
|
||||||
|
<span slot="id">antizapret</span>
|
||||||
|
<!--span slot="value">antizapret</span>
|
||||||
|
<span slot="for">antizapret</span-->
|
||||||
|
</pac-record>
|
||||||
</li>
|
</li>
|
||||||
<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">
|
<input type="radio" value="anticensority" name="pacScript" id="anticensorityRadio">
|
||||||
<label for="anticensorityRadio">Антицензорити</label>
|
<label for="anticensorityRadio">Антицензорити</label>
|
||||||
<a href title="обновить">[обновить]</a>
|
</li-->
|
||||||
<a href title="приостановить">[⏸]</a>
|
|
||||||
<a href title="информация" style="float: right">[ℹ]</a>
|
|
||||||
</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>
|
||||||
|
@ -216,7 +241,7 @@
|
||||||
<input type="radio" value="disabled" name="pacScript" id="disabledRadio" checked>
|
<input type="radio" value="disabled" name="pacScript" id="disabledRadio" checked>
|
||||||
<label for="disabledRadio">Отключить / Сброс</label>
|
<label for="disabledRadio">Отключить / Сброс</label>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</menu>
|
||||||
<div id="boxes">
|
<div id="boxes">
|
||||||
<div>
|
<div>
|
||||||
<input type="checkbox" name="resetBox" id="resetBox" checked>
|
<input type="checkbox" name="resetBox" id="resetBox" checked>
|
||||||
|
|
|
@ -1,5 +1,39 @@
|
||||||
console.log('Options page is opening...');
|
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) {
|
customPacUrl.addEventListener('change', function (event) {
|
||||||
console.log('ON CHANGE:', event);
|
console.log('ON CHANGE:', event);
|
||||||
pacChooserForm.reportValidity();
|
pacChooserForm.reportValidity();
|
||||||
|
|
Loading…
Reference in New Issue
Block a user