devol
/
libredirect
mirror of https://codeberg.org/LibRedirect/libredirect.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improved design of sidebar and customize popup https://github.com/libredirect/libredirect/issues/369

This commit is contained in:
ManeraKai 2022-11-01 19:32:49 +03:00
parent 73cc5ce38d
commit cf7afda7e0
No known key found for this signature in database
GPG Key ID: 5ABC31FFD562E337
4 changed files with 332 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/config/config.json
View File

@ -22,8 +22,12 @@
"frontends": { "frontends": {
"invidious": { "invidious": {
"preferences": { "preferences": {
"cookies": ["PREFS"], "cookies": [
"localstorage": ["dark_mode"] "PREFS"
],
"localstorage": [
"dark_mode"
]
}, },
"name": "Invidious", "name": "Invidious",
"embeddable": true, "embeddable": true,
@ -59,7 +63,9 @@
}, },
"pipedMaterial": { "pipedMaterial": {
"preferences": { "preferences": {
"localstorage": ["PREFERENCES"] "localstorage": [
"PREFERENCES"
]
}, },
"name": "Piped-Material", "name": "Piped-Material",
"embeddable": false, "embeddable": false,
@ -109,7 +115,9 @@
"frontends": { "frontends": {
"beatbump": { "beatbump": {
"preferences": { "preferences": {
"localstorage": ["settings"], "localstorage": [
"settings"
],
"indexeddb": "beatbump" "indexeddb": "beatbump"
}, },
"name": "Beatbump", "name": "Beatbump",
@ -117,14 +125,26 @@
}, },
"hyperpipe": { "hyperpipe": {
"preferences": { "preferences": {
"localstorage": ["api", "authapi", "codec", "locale", "next", "pipedapi", "quality", "theme", "vol"], "localstorage": [
"api",
"authapi",
"codec",
"locale",
"next",
"pipedapi",
"quality",
"theme",
"vol"
],
"indexeddb": "hyperpipedb" "indexeddb": "hyperpipedb"
}, },
"name": "Hyperpipe", "name": "Hyperpipe",
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}music\\.youtube\\.com(\\/|$)"], "targets": [
"^https?:\\/{2}music\\.youtube\\.com(\\/|$)"
],
"name": "YT Music", "name": "YT Music",
"options": { "options": {
"enabled": true, "enabled": true,
@ -190,7 +210,9 @@
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}(www\\.)?instagram\\.com\\/?(p\\/|$)"], "targets": [
"^https?:\\/{2}(www\\.)?instagram\\.com\\/?(p\\/|$)"
],
"name": "Instagram", "name": "Instagram",
"options": { "options": {
"enabled": true "enabled": true
@ -203,13 +225,18 @@
"frontends": { "frontends": {
"proxiTok": { "proxiTok": {
"preferences": { "preferences": {
"cookies": ["api-test_endpoints", "theme"] "cookies": [
"api-test_endpoints",
"theme"
]
}, },
"name": "ProxiTok", "name": "ProxiTok",
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}(www\\.|)tiktok\\.com(\\/|$)"], "targets": [
"^https?:\\/{2}(www\\.|)tiktok\\.com(\\/|$)"
],
"name": "TikTok", "name": "TikTok",
"options": { "options": {
"enabled": true "enabled": true
@ -222,7 +249,20 @@
"frontends": { "frontends": {
"libreddit": { "libreddit": {
"preferences": { "preferences": {
"cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"] "cookies": [
"theme",
"front_page",
"layout",
"wide",
"post_sort",
"comment_sort",
"show_nsfw",
"autoplay_videos",
"use_hls",
"hide_hls_notification",
"subscriptions",
"filters"
]
}, },
"name": "Libreddit", "name": "Libreddit",
"instanceList": true "instanceList": true
@ -253,13 +293,29 @@
}, },
"ferrit": { "ferrit": {
"preferences": { "preferences": {
"cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"] "cookies": [
"theme",
"front_page",
"layout",
"wide",
"post_sort",
"comment_sort",
"show_nsfw",
"autoplay_videos",
"use_hls",
"hide_hls_notification",
"subscriptions",
"filters"
]
}, },
"name": "Ferrit", "name": "Ferrit",
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com(?=\\/u(ser)?\\/|\\/r\\/|\\/?$)", "^https?:\\/{2}(i|(external-)?preview)\\.redd\\.it"], "targets": [
"^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com(?=\\/u(ser)?\\/|\\/r\\/|\\/?$)",
"^https?:\\/{2}(i|(external-)?preview)\\.redd\\.it"
],
"name": "Reddit", "name": "Reddit",
"options": { "options": {
"enabled": true, "enabled": true,
@ -277,7 +333,9 @@
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"], "targets": [
"^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"
],
"name": "Imgur", "name": "Imgur",
"options": { "options": {
"enabled": true, "enabled": true,
@ -291,13 +349,18 @@
"frontends": { "frontends": {
"wikiless": { "wikiless": {
"preferences": { "preferences": {
"cookies": ["theme", "default_lang"] "cookies": [
"theme",
"default_lang"
]
}, },
"name": "Wikiless", "name": "Wikiless",
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org(\\/|$)"], "targets": [
"^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org(\\/|$)"
],
"name": "Wikipedia", "name": "Wikipedia",
"options": { "options": {
"enabled": false "enabled": false
@ -345,13 +408,17 @@
"frontends": { "frontends": {
"quetre": { "quetre": {
"preferences": { "preferences": {
"localstorage": ["theme"] "localstorage": [
"theme"
]
}, },
"name": "Quetre", "name": "Quetre",
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}([a-zA-Z0-9-]+\\.)*quora\\.com(\\/|$)"], "targets": [
"^https?:\\/{2}([a-zA-Z0-9-]+\\.)*quora\\.com(\\/|$)"
],
"name": "Quora", "name": "Quora",
"options": { "options": {
"enabled": true "enabled": true
@ -364,13 +431,17 @@
"frontends": { "frontends": {
"libremdb": { "libremdb": {
"preferences": { "preferences": {
"localstorage": ["theme"] "localstorage": [
"theme"
]
}, },
"name": "libremdb", "name": "libremdb",
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}(?:www\\.|m\\.|)imdb\\.com\\/title"], "targets": [
"^https?:\\/{2}(?:www\\.|m\\.|)imdb\\.com\\/title"
],
"name": "IMDb", "name": "IMDb",
"options": { "options": {
"enabled": true "enabled": true
@ -386,7 +457,9 @@
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}(www\\.|)reuters\\.com(\\/|$)"], "targets": [
"^https?:\\/{2}(www\\.|)reuters\\.com(\\/|$)"
],
"name": "Reuters", "name": "Reuters",
"options": { "options": {
"enabled": false "enabled": false
@ -402,7 +475,9 @@
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}(?:[a-zA-Z0-9-]+\\.)?(?:fandom|wikia)\\.com(?=\\/wiki|\\/?$)"], "targets": [
"^https?:\\/{2}(?:[a-zA-Z0-9-]+\\.)?(?:fandom|wikia)\\.com(?=\\/wiki|\\/?$)"
],
"name": "Fandom", "name": "Fandom",
"options": { "options": {
"enabled": true "enabled": true
@ -431,8 +506,18 @@
"frontends": { "frontends": {
"librarian": { "librarian": {
"preferences": { "preferences": {
"cookies": ["nsfw", "theme"], "cookies": [
"localstorage": ["autoplay", "autoplayNextVid", "collapseComments", "plyr", "sb_categories", "showRelated"] "nsfw",
"theme"
],
"localstorage": [
"autoplay",
"autoplayNextVid",
"collapseComments",
"plyr",
"sb_categories",
"showRelated"
]
}, },
"name": "Librarian", "name": "Librarian",
"embeddable": true, "embeddable": true,
@ -444,7 +529,10 @@
"instanceList": false "instanceList": false
} }
}, },
"targets": ["^https?:\\/{2}odysee\\.com(\\/|$)", "^https?:\\/{2}lbry\\.tv(\\/|$)"], "targets": [
"^https?:\\/{2}odysee\\.com(\\/|$)",
"^https?:\\/{2}lbry\\.tv(\\/|$)"
],
"name": "LBRY", "name": "LBRY",
"options": { "options": {
"enabled": true, "enabled": true,
@ -517,13 +605,26 @@
}, },
"librex": { "librex": {
"preferences": { "preferences": {
"cookies": ["bibliogram", "disable_frontends", " disable_special", "invidious", "libreddit", "nitter", "proxitok", "save", "theme", "wikiless"] "cookies": [
"bibliogram",
"disable_frontends",
" disable_special",
"invidious",
"libreddit",
"nitter",
"proxitok",
"save",
"theme",
"wikiless"
]
}, },
"name": "LibreX", "name": "LibreX",
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}search\\.libredirect\\.invalid"], "targets": [
"^https?:\\/{2}search\\.libredirect\\.invalid"
],
"name": "Search", "name": "Search",
"options": { "options": {
"enabled": true, "enabled": true,
@ -537,14 +638,24 @@
"frontends": { "frontends": {
"simplyTranslate": { "simplyTranslate": {
"preferences": { "preferences": {
"cookies": ["from_lang", "to_lang", "tts_enabled", "use_text_fields"] "cookies": [
"from_lang",
"to_lang",
"tts_enabled",
"use_text_fields"
]
}, },
"name": "SimplyTranslate", "name": "SimplyTranslate",
"instanceList": true "instanceList": true
}, },
"lingva": { "lingva": {
"preferences": { "preferences": {
"localstorage": ["isauto", "source", "target", "chakra-ui-color-mode"] "localstorage": [
"isauto",
"source",
"target",
"chakra-ui-color-mode"
]
}, },
"name": "Lingva Translate", "name": "Lingva Translate",
"instanceList": true "instanceList": true
@ -554,7 +665,10 @@
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/", "^https?:\\/{2}translate\\.libredirect\\.invalid"], "targets": [
"^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/",
"^https?:\\/{2}translate\\.libredirect\\.invalid"
],
"name": "Translate", "name": "Translate",
"options": { "options": {
"enabled": true, "enabled": true,
@ -576,7 +690,10 @@
"singleInstance": "https://www.openstreetmap.org" "singleInstance": "https://www.openstreetmap.org"
} }
}, },
"targets": ["^https?:\\/{2}maps\\.libredirect\\.invalid", "^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"], "targets": [
"^https?:\\/{2}maps\\.libredirect\\.invalid",
"^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"
],
"name": "Maps", "name": "Maps",
"options": { "options": {
"enabled": false, "enabled": false,
@ -593,7 +710,11 @@
"instanceList": "true" "instanceList": "true"
} }
}, },
"targets": ["^https?:\\/{2}send\\.libredirect\\.invalid", "^https?:\\/{2}send\\.firefox\\.com\\/?$", "^https?:\\/{2}sendfiles\\.online\\/?$"], "targets": [
"^https?:\\/{2}send\\.libredirect\\.invalid",
"^https?:\\/{2}send\\.firefox\\.com\\/?$",
"^https?:\\/{2}sendfiles\\.online\\/?$"
],
"name": "Send Files", "name": "Send Files",
"options": { "options": {
"enabled": true "enabled": true
@ -609,7 +730,9 @@
"instanceList": true "instanceList": true
} }
}, },
"targets": ["^https?:\\/{2}paste\\.libredirect\\.invalid"], "targets": [
"^https?:\\/{2}paste\\.libredirect\\.invalid"
],
"name": "Paste Text", "name": "Paste Text",
"options": { "options": {
"enabled": true "enabled": true
@ -630,4 +753,4 @@
"color": "grey" "color": "grey"
} }
} }
} }

185
src/pages/options/widgets/general.ejs
View File

@ -1,102 +1,87 @@
<section class="option-block" id="general_page"> <section class="option-block" id="general_page">
<div class="some-block option-block"> <div class="some-block option-block">
<h1 data-localise="__MSG_general__">General</h1> <h1 data-localise="__MSG_general__">General</h1>
</div> </div>
<hr> <hr />
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_theme__">Theme</h4> <h4 data-localise="__MSG_theme__">Theme</h4>
<select id="theme"> <select id="theme">
<option value="detect" data-localise="__MSG_detect__">Detect</option> <option value="detect" data-localise="__MSG_detect__">Detect</option>
<option value="light" data-localise="__MSG_light__">Light</option> <option value="light" data-localise="__MSG_light__">Light</option>
<option value="dark" data-localise="__MSG_dark__">Dark</option> <option value="dark" data-localise="__MSG_dark__">Dark</option>
</select> </select>
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_network__">Network</h4> <h4 data-localise="__MSG_network__">Network</h4>
<select id="network"> <select id="network">
<% for (const network in config.networks) { -%> <% for (const network in config.networks) { -%>
<option value="<%= network %>"><%= config.networks[network].name %></option> <option value="<%= network %>"><%= config.networks[network].name %></option>
<% }; %> <% }; %>
</select> </select>
</div> </div>
<div id="network-fallback"> <div id="network-fallback">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_networkFallback__">Fallback to clearnet if no instances are available for the current network</h4> <h4 data-localise="__MSG_networkFallback__">Fallback to clearnet if no instances are available for the current network</h4>
<input id="network-fallback-checkbox" type="checkbox"> <input id="network-fallback-checkbox" type="checkbox" />
</div> </div>
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_autoRedirect__"></h4> <h4 data-localise="__MSG_autoRedirect__"></h4>
<input id="auto-redirect" type="checkbox"> <input id="auto-redirect" type="checkbox" />
</div> </div>
<form> <form>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_latencyThreshold">Latency Threshold</h4> <h4 data-localise="__MSG_latencyThreshold">Latency Threshold</h4>
<output id="latency-output" for="latencyInput" name="latencyOutput"></output> <output id="latency-output" for="latencyInput" name="latencyOutput"></output>
<input id="latency-input" type="range" min="50" max="5000" value="1000" name="latencyInput" step="50"> <input id="latency-input" type="range" min="50" max="5000" value="1000" name="latencyInput" step="50" />
</div> </div>
</form> </form>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_exceptions__"></h4> <h4 data-localise="__MSG_exceptions__"></h4>
</div> </div>
<form id="custom-exceptions-instance-form"> <form id="custom-exceptions-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<div class="some-block" style="padding:0;"> <div class="some-block" style="padding: 0">
<input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url">&nbsp; <input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" />&nbsp;
<select id="exceptions-custom-instance-type"> <select id="exceptions-custom-instance-type">
<option value="url">URL</option> <option value="url">URL</option>
<option value="regex">Regex</option> <option value="regex">Regex</option></select
</select>&nbsp; >&nbsp;
</div> </div>
<button class="add" id="exceptions-add-instance" type="submit"> <button class="add" id="exceptions-add-instance" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
</svg> </svg>
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="exceptions-custom-checklist"></div> <div class="checklist" id="exceptions-custom-checklist"></div>
<div class="buttons buttons-inline"><a class="button button-inline" id="update-instances"> <div class="buttons buttons-inline">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> <a class="button button-inline" id="update-instances">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
</svg> <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
<x data-localise="__MSG_updateInstances__">Update Instances</x></a>&nbsp; &nbsp;</div> </svg>
<div class="buttons buttons-inline"> <x data-localise="__MSG_updateInstances__">Update Instances</x></a
<label class="button button-inline" id="import_settings_text" for="import-settings"> >&nbsp; &nbsp;
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> </div>
<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> <div class="buttons buttons-inline">
</svg>&nbsp; <label class="button button-inline" id="import_settings_text" for="import-settings">
<x data-localise="__MSG_importSettings__">Import Settings</x> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
</label> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path></svg
<input class="button button-inline" id="import-settings" type="file" style="display:none;">&nbsp; &nbsp;<a class="button button-inline" id="export-settings"> >&nbsp;
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> <x data-localise="__MSG_importSettings__">Import Settings</x>
<path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path> </label>
</svg>&nbsp; <input class="button button-inline" id="import-settings" type="file" style="display: none" />&nbsp; &nbsp;<a class="button button-inline" id="export-settings">
<x data-localise="__MSG_exportSettings__">Export Settings</x></a>&nbsp; &nbsp;<a class="button button-inline" id="reset-settings"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg
<path d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"></path> >&nbsp; <x data-localise="__MSG_exportSettings__">Export Settings</x></a
<path d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z"></path> >&nbsp; &nbsp;<a class="button button-inline" id="reset-settings">
</svg> <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
<x data-localise="__MSG_resetSettings__">Reset Settings</x></a> <path d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"></path>
</div> <path d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z"></path>
<hr> </svg>
<div class="some-block option-block"> <x data-localise="__MSG_resetSettings__">Reset Settings</x></a
<h4 data-localise="__MSG_customPopup__">Customize Popup</h4> >
</div> </div>
<div class="checklist-popup" id="popup-frontends-checklist"> <script type="module" src="./widgets/general.js"></script>
<% for (const service in config.services) { -%>
<div>
<div>
<% if (config.services[service].imageType != "svgMono") { _%>
<img src="../../../assets/images/<%= service %>-icon.<%= config.services[service].imageType %>">
<% } else { _%>
<%- include ('src/assets/images/' + service + '-icon.svg') %>
<% } _%>
<label data-localise="__MSG_<%= service %>__" for="<%= service %>"><%= config.services[service].name %></label>
</div>
<input id="<%= service %>" type="checkbox">
</div>
<% }; %>
</div>
<script type="module" src="./widgets/general.js"></script>
</section> </section>

160
src/pages/options/widgets/services.ejs
View File

@ -1,86 +1,84 @@
<% for (const service in config.services) { -%> <% for (const service in config.services) { -%>
<section class="option-block" id="<%= service %>_page"> <section class="option-block" id="<%= service %>_page">
<div class="some-block option-block"> <div class="some-block option-block">
<h1 data-localise="__MSG_<%= service %>__"><%= config.services[service].name %></h1> <h1 data-localise="__MSG_<%= service %>__"><%= config.services[service].name %></h1>
</div> </div>
<hr> <hr />
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_enable__">Enable</h4> <h4 data-localise="__MSG_enable__">Enable</h4>
<input id="<%= service %>-enabled" type="checkbox"> <input id="<%= service %>-enabled" type="checkbox" />
</div> </div>
<% if (Object.keys(config.services[service].frontends).length > 1) { %> <div class="some-block option-block">
<div class="some-block option-block"> <h4 data-localise="__MSG_show_in_popup__">Show in Popup</h4>
<h4 data-localise="__MSG_frontend__">Frontend</h4> <input id="<%= service %>" type="checkbox" />
<select id="<%= service %>-frontend"> </div>
<% for (const frontend in config.services[service].frontends) { -%> <% if (Object.keys(config.services[service].frontends).length> 1) { %>
<option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option> <div class="some-block option-block">
<% } %> <h4 data-localise="__MSG_frontend__">Frontend</h4>
</select> <select id="<%= service %>-frontend">
</div> <% for (const frontend in config.services[service].frontends) { -%>
<% if (config.services[service].embeddable) { _%> <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option>
<div class="some-block option-block"> <% } %>
<h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4> </select>
<select id="<%= service %>-embedFrontend"> </div>
<% for (const frontend in config.services[service].frontends) { -%> <% if (config.services[service].embeddable) { _%>
<% if (config.services[service].frontends[frontend].embeddable) { _%> <div class="some-block option-block">
<option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option> <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
<% } _%> <select id="<%= service %>-embedFrontend">
<% } %> <% for (const frontend in config.services[service].frontends) { -%> <% if (config.services[service].frontends[frontend].embeddable) { _%>
</select> <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option>
</div> <% } _%> <% } %>
<% } _%> </select>
<% } _%> </div>
<% if (config.services[service].embeddable) { _%> <% } _%> <% } _%> <% if (config.services[service].embeddable) { _%>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_redirectType__">Redirect Type</h4> <h4 data-localise="__MSG_redirectType__">Redirect Type</h4>
<select id="<%= service %>-redirectType"> <select id="<%= service %>-redirectType">
<option value="both" data-localise="__MSG_both__">both</option> <option value="both" data-localise="__MSG_both__">both</option>
<option value="sub_frame" data-localise="__MSG_onlyEmbedded__">Only Embedded</option> <option value="sub_frame" data-localise="__MSG_onlyEmbedded__">Only Embedded</option>
<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option> <option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>
</select> </select>
</div> </div>
<% } _%> <% } _%>
<hr> <hr />
<% for (const frontend in config.services[service].frontends) { -%> <% for (const frontend in config.services[service].frontends) { -%> <% if (config.services[service].frontends[frontend].instanceList) { _%>
<% if (config.services[service].frontends[frontend].instanceList) { _%> <div id="<%= frontend %>">
<div id="<%= frontend %>"> <% for (const network in config.networks) { -%>
<% for (const network in config.networks) { -%> <div class="<%= network %>">
<div class="<%= network %>"> <div class="some-block option-block">
<div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div>
</div> <div class="checklist"></div>
<div class="checklist"></div> <hr />
<hr> <div class="some-block option-block">
<div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div>
</div> <form class="custom-instance-form">
<form class="custom-instance-form"> <div class="some-block option-block">
<div class="some-block option-block"> <input class="custom-instance" placeholder="http://<%= frontend %>.<%= config.networks[network].tld %>" type="url" />
<input class="custom-instance" placeholder="http://<%= frontend %>.<%= config.networks[network].tld %>" type="url"> <button class="add add-instance" type="submit">
<button class="add add-instance" type="submit"> <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
<svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path> </svg>
</svg> </button>
</button> </div>
</div> </form>
</form> <div class="checklist custom-checklist"></div>
<div class="checklist custom-checklist"></div> <% if (network=="clearnet" ) { _%>
<% if (network == "clearnet") { _%> <div class="buttons buttons-inline">
<div class="buttons buttons-inline"> <label class="button button-inline" id="latency-<%= frontend %>-label" for="latency-<%= frontend %>">
<label class="button button-inline" id="latency-<%= frontend %>-label" for="latency-<%= frontend %>"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path></svg
<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> >&nbsp;
</svg>&nbsp; <x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x>
<x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x> </label>
</label> <input class="button button-inline" id="latency-<%= frontend %>" style="display: none" />
<input class="button button-inline" id="latency-<%= frontend %>" style="display:none;"> </div>
</div> <% } _%>
<% } _%> </div>
</div> <% } %>
<% } %> </div>
</div> <% } _%> <% } %>
<% } _%>
<% } %>
</section> </section>
<% } %> <% } %>
<script type="module" src="./widgets/services.js"></script> <script type="module" src="./widgets/services.js"></script>

17
src/pages/stylesheets/styles.css
View File

@ -79,7 +79,6 @@ select {
margin: 0; margin: 0;
max-width: 500px; max-width: 500px;
border-radius: 3px; border-radius: 3px;
cursor: pointer;
} }
input[type="url"], input[type="url"],
@ -110,11 +109,19 @@ section.option-block h2 {
body.option { body.option {
display: flex; display: flex;
padding: 40px; padding: 40px;
width: 900px; width: 1100px;
}
section.links {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 300px;
max-height: 720px;
} }
section.links div { section.links div {
margin: 20px 0; margin: 10px;
width: max-content; width: max-content;
} }
@ -458,7 +465,7 @@ body div section {
display: none; display: none;
} }
div.about > div { div.about>div {
justify-content: start; justify-content: start;
width: 520px; width: 520px;
} }
@ -480,4 +487,4 @@ input:disabled {
div.about a { div.about a {
width: 500px; width: 500px;
display: inline-block; display: inline-block;
} }