mirror of
https://github.com/anticensority/runet-censorship-bypass.git
synced 2025-10-02 09:56:40 +03:00
Add urls of actual pac scripts to the interface. Experiment with native components
This commit is contained in:
ilyaigpetrov
parent
60b89ec6bc
commit
f90c1adb2a
1
src/pages/options/bottom.mjs
Normal file
1
src/pages/options/bottom.mjs
Normal file
|
|
@ -0,0 +1 @@
|
|||
console.log('The BOTTOM script of the options page started.');
|
||||
35
src/pages/options/components/PacRecord.html
Normal file
35
src/pages/options/components/PacRecord.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<pac-record slot="pacRecords">
|
||||
<!--T-BODY-->
|
||||
<template shadowrootmode="open">
|
||||
<input type="radio" name="pacScript" form="pacChooserForm" id="{{id}}" value="{{value}}" />
|
||||
<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>
|
||||
</template>
|
||||
<!--T-INPUTS-->
|
||||
<slot name="id">ID</slot>
|
||||
<slot name="value">VALUE</slot>
|
||||
<slot name="for">FOR</slot>
|
||||
<slot name="label">LABEL</slot>
|
||||
</pac-record>
|
||||
|
||||
<!--
|
||||
|
||||
<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>
|
||||
|
||||
</light-dom>
|
||||
</pac-record>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./top.mjs" type="module"></script>
|
||||
<style>
|
||||
/*
|
||||
Josh's Custom CSS Reset
|
||||
|
|
@ -183,135 +184,32 @@
|
|||
<nav>
|
||||
<form id="pacChooserForm">
|
||||
<menu id="radios">
|
||||
<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>
|
||||
<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>
|
||||
<pac-record>
|
||||
<span slot="label">Антизапрет</span>
|
||||
<span slot="id">antizapret</span>
|
||||
<span slot="value">antizapret</span>
|
||||
<span slot="for">antizapret</span>
|
||||
<input slot="input" attrs-line='type="radio" name="pacScript" form="pacChooserForm"' data-attrs="id value">
|
||||
<li>
|
||||
<pac-record label="Антизапрет" value="antizapret">
|
||||
<pac-url>https://e.cen.rodeo:18443/proxy.pac</pac-url>
|
||||
<pac-url>https://e.cen.rodeo:8443/proxy.pac</pac-url>
|
||||
<pac-url>https://e.cen.rodeo/proxy.pac</pac-url>
|
||||
<pac-url>https://antizapret.prostovpn.org:18443/proxy.pac</pac-url>
|
||||
<pac-url>https://antizapret.prostovpn.org:8443/proxy.pac</pac-url>
|
||||
<pac-url>https://antizapret.prostovpn.org/proxy.pac</pac-url>
|
||||
</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 label="Антицензорити" value="anticensority">
|
||||
<pac-url>https://anticensority.github.io/generated-pac-scripts/anticensority.pac</pac-url>
|
||||
<pac-url>https://raw.githubusercontent.com/anticensority/generated-pac-scripts/master/anticensority.pac</pac-url>
|
||||
</pac-record>
|
||||
</li-->
|
||||
</my-li>
|
||||
<li>
|
||||
<input type="radio" value="own" name="pacScript" id="ownRadio" disabled>
|
||||
<label for="ownRadio">Свой:</label>
|
||||
<div id="ownInputs">
|
||||
<input id="customPacUrl" type="url" placeholder="https://example.com/proxy.pac"
|
||||
size="27"
|
||||
spellcheck="false" autocorrect="off" autocapitalize="off"
|
||||
required
|
||||
>
|
||||
<div class="unlockPanel">
|
||||
<button id="editPacUrlButton" title="Редактировать">🖉</button>
|
||||
</div>
|
||||
<div class="editPanel">
|
||||
<button id="savePacUrlButton" title="Сохранить">🗸</button>
|
||||
<button id="cancelPacUrlButton" title="Отмена">🗙</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" value="disabled" name="pacScript" id="disabledRadio" checked>
|
||||
<label for="disabledRadio">Отключить / Сброс</label>
|
||||
<pac-record label="Свои скрипты" value="own">
|
||||
<textarea>
|
||||
https://foo.bar:1221
|
||||
https://example.com:1223
|
||||
</textarea>
|
||||
</pac-record>
|
||||
</li>
|
||||
<li>
|
||||
<pac-record label="Отключить / Сброс" value="disabled" />
|
||||
</li>
|
||||
</menu>
|
||||
<div id="boxes">
|
||||
|
|
@ -331,6 +229,6 @@
|
|||
href="https://github.com/anticensority/runet-censorship-bypass/wiki/Поддержать"
|
||||
>Donate ❤</a>
|
||||
</footer>
|
||||
<script src="./index.mjs" type="module"></script>
|
||||
<script src="./bottom.mjs" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
336
src/pages/options/old-index.html
Normal file
336
src/pages/options/old-index.html
Normal file
|
|
@ -0,0 +1,336 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/*
|
||||
Josh's Custom CSS Reset
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
*/
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
#root, #__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
/* Reset ends */
|
||||
|
||||
:root {
|
||||
border-color: black;
|
||||
border-radius: 0;
|
||||
/*
|
||||
The initial theme is light but it's quickly inverted to dark.
|
||||
Dark theme should be the first theme user sees by default.
|
||||
TODO: Ponder more. E.g. valid color (green) must remain the
|
||||
same even after invertion. Also a flash/blink of colors
|
||||
during invertion must be avoided.
|
||||
*/
|
||||
/*
|
||||
background-color: white; /* Not transparent. */
|
||||
/*color: black;
|
||||
/*
|
||||
border: 0 none white;
|
||||
outline: 0 none white;*/
|
||||
/*color-scheme: light;
|
||||
/* COLOR INVERTION */
|
||||
filter: invert(0); /* TODO: temporary disabled. */
|
||||
}
|
||||
:root, html, body {
|
||||
/*background: url('./gsbg.png') no-repeat;*/
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
--ribbon-color: #0075ff; /* #4169e1;*/
|
||||
font-family: Ubuntu, Arial, sans-serif;
|
||||
font-size: 80%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
a, a:visited {
|
||||
text-decoration: none;
|
||||
color: var(--ribbon-color);
|
||||
}
|
||||
label {
|
||||
vertical-align: bottom;
|
||||
/*padding: 3px;*/
|
||||
}
|
||||
input {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
input[type="url"] {
|
||||
border: 1px solid black;
|
||||
/*border-width: 0 0 1px 0;
|
||||
border-color: crimson;*/
|
||||
flex-grow: 1;
|
||||
/*padding: 0 3px 0 3px;*/
|
||||
/*width: 100%;*/
|
||||
}
|
||||
input[type="radio"], label {
|
||||
cursor: pointer;
|
||||
}
|
||||
#disabledRadio:checked + label {
|
||||
color: red;
|
||||
}
|
||||
#ownInputs {
|
||||
display: flex;
|
||||
}
|
||||
/*
|
||||
input#ownRadio ~ div:has(> input#customPacUrl):after {
|
||||
border: 5px solid lime;
|
||||
background-color: navy;
|
||||
content: "";
|
||||
}
|
||||
input#ownRadio ~ div:after:not(:empty) {
|
||||
border: 5px solid pink;
|
||||
}
|
||||
*/
|
||||
|
||||
.use-preferred-color-scheme {
|
||||
/*background-color: violet;
|
||||
color: darkred;*/
|
||||
/*color-scheme: light;*/
|
||||
}/*
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.use-preferred-color-scheme {
|
||||
color-scheme: dark;
|
||||
background-color: green;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
.use-preferred-color-scheme {
|
||||
color-scheme: dark;
|
||||
background-color: pink;
|
||||
color: purple;
|
||||
border: 5px solid red;
|
||||
}
|
||||
}
|
||||
/*
|
||||
img.gsbg {
|
||||
z-index: -1;
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
*/
|
||||
/*
|
||||
input:invalid {
|
||||
border: 5px solid red;
|
||||
}*/
|
||||
#customPacUrl:disabled {
|
||||
/*background-color: grey;*/
|
||||
}
|
||||
#ownInputs button {
|
||||
font-family: emoji, monospace;
|
||||
width: 2em;
|
||||
width: 2ch;
|
||||
border-width: 1px 1px 1px 0px;
|
||||
}
|
||||
#ownInputs > input {
|
||||
border-radius: 0;
|
||||
}
|
||||
#ownInputs > div {
|
||||
display: flex;
|
||||
}
|
||||
#customPacUrl:disabled ~ .editPanel {
|
||||
display: none;
|
||||
}
|
||||
#customPacUrl:not(:disabled) ~ .unlockPanel {
|
||||
display: none;
|
||||
}
|
||||
#boxes {
|
||||
padding: 1em 0;
|
||||
padding: 1ch 0;
|
||||
}
|
||||
#boxes > div {
|
||||
/* Don't break sentences on spaces. */
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="use-preferred-color-scheme">
|
||||
<!--img src="./gsbg.png" class="gsbg"-->
|
||||
<header>
|
||||
PAC-скрипт:
|
||||
</header>
|
||||
<nav>
|
||||
<form id="pacChooserForm">
|
||||
<menu id="radios">
|
||||
<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>
|
||||
<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>
|
||||
<pac-record>
|
||||
<span slot="label">Антизапрет</span>
|
||||
<span slot="id">antizapret</span>
|
||||
<span slot="value">antizapret</span>
|
||||
<span slot="for">antizapret</span>
|
||||
<input slot="input" attrs-line='type="radio" name="pacScript" form="pacChooserForm"' data-attrs="id value">
|
||||
</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-->
|
||||
</my-li>
|
||||
<li>
|
||||
<input type="radio" value="own" name="pacScript" id="ownRadio" disabled>
|
||||
<label for="ownRadio">Свой:</label>
|
||||
<div id="ownInputs">
|
||||
<input id="customPacUrl" type="url" placeholder="https://example.com/proxy.pac"
|
||||
size="27"
|
||||
spellcheck="false" autocorrect="off" autocapitalize="off"
|
||||
required
|
||||
>
|
||||
<div class="unlockPanel">
|
||||
<button id="editPacUrlButton" title="Редактировать">🖉</button>
|
||||
</div>
|
||||
<div class="editPanel">
|
||||
<button id="savePacUrlButton" title="Сохранить">🗸</button>
|
||||
<button id="cancelPacUrlButton" title="Отмена">🗙</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" value="disabled" name="pacScript" id="disabledRadio" checked>
|
||||
<label for="disabledRadio">Отключить / Сброс</label>
|
||||
</li>
|
||||
</menu>
|
||||
<div id="boxes">
|
||||
<div>
|
||||
<input type="checkbox" name="resetBox" id="resetBox" checked>
|
||||
<label for="resetBox">Отключать прокси перед скачиванием</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" name="updateBox" id="updateBox" checked>
|
||||
<label for="updateBox">Обновлять каждые 12ч</label>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</footer>
|
||||
<script src="./index.mjs" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
36
src/pages/options/pacRecord.html
Normal file
36
src/pages/options/pacRecord.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<pac-record slot="pacRecords">
|
||||
<!--T-BODY-->
|
||||
<template shadowrootmode="open">
|
||||
</template>
|
||||
<!--T-INPUTS-->
|
||||
<slot name="id">ID</slot>
|
||||
<slot name="value">VALUE</slot>
|
||||
<slot name="for">FOR</slot>
|
||||
<slot name="label">LABEL</slot>
|
||||
</pac-record>
|
||||
|
||||
<pac-record>
|
||||
<input type="radio" name="pacScript" form="pacChooserForm" id="{{id}}" value="{{value}}" />
|
||||
<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>
|
||||
</pac-record>
|
||||
|
||||
<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>
|
||||
|
||||
</light-dom>
|
||||
</pac-record>
|
||||
249
src/pages/options/top.mjs
Normal file
249
src/pages/options/top.mjs
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
console.log('The TOP script of the options page started.');
|
||||
|
||||
/*
|
||||
<pac-record value="antizapret">
|
||||
<span slot="label">Антизапрет</span>
|
||||
</pac-record>
|
||||
*/
|
||||
|
||||
customElements.define('pac-record',
|
||||
class extends HTMLElement {
|
||||
|
||||
static formAssociated = true;
|
||||
// static observedAttributes = ['data-checked'];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.internals = this.attachInternals();
|
||||
const shadow = this.internals.shadowRoot;
|
||||
console.log('Constructor for PacRecord');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/*
|
||||
<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>
|
||||
<light-dom>
|
||||
|
||||
</light-dom>
|
||||
</pac-record>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
class extends HTMLElement {
|
||||
static formAssociated = true;
|
||||
// static observedAttributes = ['data-checked'];
|
||||
constructor() {
|
||||
super();
|
||||
const shadow = this.attachShadow({ mode: 'open' });
|
||||
// const shadow = this.internals.shadowRoot;
|
||||
console.log('Constructor');
|
||||
const fragment = pacRecordTemplate.content.cloneNode(true);
|
||||
shadow.appendChild(fragment);
|
||||
this.internals = this.attachInternals();
|
||||
|
||||
const dataAttrs = shadow.querySelectorAll('*[data-attrs]');
|
||||
dataAttrs.forEach(
|
||||
(da) => {
|
||||
da.dataset.attrs.split(' ').forEach(
|
||||
(attr) => {
|
||||
console.log(shadow.querySelector(`#VARIABLES > slot[name=${attr}]`));
|
||||
da.setAttribute(
|
||||
attr,
|
||||
shadow.querySelector(`#VARIABLES > slot[name=${attr}]`).assignedNodes()?.[0]?.textContent,
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
);
|
||||
//this.internals.setFormValue('');
|
||||
//this.internals.setFormValue('pacScript');
|
||||
//const templateAttrs = shadow.querySelectorAll('#attributes > slot[name]');
|
||||
const namedInputs = shadow.querySelectorAll('input[name]');
|
||||
console.log('NAMED INPUTS:', namedInputs);
|
||||
namedInputs.forEach((ni) => {
|
||||
//this.internals.setFormValue(ni.name);
|
||||
ni.addEventListener('input',
|
||||
(event) => {
|
||||
const t = event.target;
|
||||
const entries = new FormData();
|
||||
//entries.set(ni.getAttribute('name'), ni.getAttribute('value'));
|
||||
entries.append('pacScript', t.value);
|
||||
this.internals.setFormValue(entries);
|
||||
//this.value = t.value;
|
||||
//this.internals.setFormValue(t.value);
|
||||
//ni.toggleAttribute('checked');
|
||||
//this.internals.setFormValue(ni.value);
|
||||
//this.toggleAttribute('checked');
|
||||
//this.toggleAttribute('data-checked');
|
||||
//ni.toggleAttribute('checked');
|
||||
console.log('EVENT TARGET:', event.target);
|
||||
console.log('THIS', this);
|
||||
console.log(this.internals);
|
||||
console.log('EEEE', Array.from(...entries));
|
||||
console.log(`FFFF:${ni.name}=${ni.value}`);
|
||||
ni.click();
|
||||
})
|
||||
});
|
||||
|
||||
/
|
||||
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;
|
||||
/
|
||||
|
||||
}
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
console.log('attributeChangedCallback:', oldValue, '->', newValue);
|
||||
const entries = new FormData();
|
||||
entries.set('pacScript', 'antizapret');
|
||||
this.internals.setFormValue(entries);
|
||||
}
|
||||
}
|
||||
);
|
||||
/*
|
||||
|
||||
|
||||
```
|
||||
<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>
|
||||
<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>
|
||||
<pac-record>
|
||||
<span slot="label">Антизапрет</span>
|
||||
<span slot="id">antizapret</span>
|
||||
<span slot="value">antizapret</span>
|
||||
<span slot="for">antizapret</span>
|
||||
<input slot="input" attrs-line='type="radio" name="pacScript" form="pacChooserForm"' data-attrs="id value">
|
||||
</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-->
|
||||
</my-li>
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user