mirror of
https://github.com/anticensority/runet-censorship-bypass.git
synced 2025-10-02 18:06:47 +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>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<script src="./top.mjs" type="module"></script>
|
||||||
<style>
|
<style>
|
||||||
/*
|
/*
|
||||||
Josh's Custom CSS Reset
|
Josh's Custom CSS Reset
|
||||||
|
|
@ -183,135 +184,32 @@
|
||||||
<nav>
|
<nav>
|
||||||
<form id="pacChooserForm">
|
<form id="pacChooserForm">
|
||||||
<menu id="radios">
|
<menu id="radios">
|
||||||
<my-li>
|
<li>
|
||||||
<template shadowrootmode="open">
|
<pac-record label="Антизапрет" value="antizapret">
|
||||||
<slot name="pacRecords">PAC_RECORDS</slot>
|
<pac-url>https://e.cen.rodeo:18443/proxy.pac</pac-url>
|
||||||
</template>
|
<pac-url>https://e.cen.rodeo:8443/proxy.pac</pac-url>
|
||||||
<pac-record slot="pacRecords">
|
<pac-url>https://e.cen.rodeo/proxy.pac</pac-url>
|
||||||
<template shadowrootmode="open">
|
<pac-url>https://antizapret.prostovpn.org:18443/proxy.pac</pac-url>
|
||||||
<span class="template-inputs" hidden>
|
<pac-url>https://antizapret.prostovpn.org:8443/proxy.pac</pac-url>
|
||||||
<slot name="id">ID</slot>
|
<pac-url>https://antizapret.prostovpn.org/proxy.pac</pac-url>
|
||||||
<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>
|
</pac-record>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<pac-record>
|
<pac-record label="Антицензорити" value="anticensority">
|
||||||
<span slot="label">Антицензорити</span>
|
<pac-url>https://anticensority.github.io/generated-pac-scripts/anticensority.pac</pac-url>
|
||||||
<span slot="id">anticensority</span>
|
<pac-url>https://raw.githubusercontent.com/anticensority/generated-pac-scripts/master/anticensority.pac</pac-url>
|
||||||
<span slot="value">anticensority</span>
|
|
||||||
<span slot="for">anticensority</span>
|
|
||||||
</pac-record>
|
</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>
|
||||||
<li>
|
<li>
|
||||||
<input type="radio" value="disabled" name="pacScript" id="disabledRadio" checked>
|
<pac-record label="Свои скрипты" value="own">
|
||||||
<label for="disabledRadio">Отключить / Сброс</label>
|
<textarea>
|
||||||
|
https://foo.bar:1221
|
||||||
|
https://example.com:1223
|
||||||
|
</textarea>
|
||||||
|
</pac-record>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<pac-record label="Отключить / Сброс" value="disabled" />
|
||||||
</li>
|
</li>
|
||||||
</menu>
|
</menu>
|
||||||
<div id="boxes">
|
<div id="boxes">
|
||||||
|
|
@ -331,6 +229,6 @@
|
||||||
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="./bottom.mjs" type="module"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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