morrigan/crabbysearch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ feat: Reducing the amount of js used and improving code functionality (#36) (#37)

Browse source
This commit is contained in:
neon_arch 2023-06-18 19:50:32 +03:00
parent d65958924f
commit 8e9fe4d03a
12 changed files with 337 additions and 662 deletions
Download patch file Download diff file Expand all files Collapse all files

5
public/templates/cookies_tab.html Normal file
View file

@ -0,0 +1,5 @@
<div class="cookies tab">
<h1>Cookies</h1>
<p class="description"></p>
<input type="text" name="cookie_field" value="" readonly />
</div>

31
public/templates/engines_tab.html Normal file
View file

@ -0,0 +1,31 @@
<div class="engines tab">
<h3>select search engines</h3>
<p class="description">
Select the search engines from the list of engines that you want results
from
</p>
<div class="engine_selection">
<div class="toggle_btn">
<label class="switch">
<input type="checkbox" class="select_all" onchange="toggleAllSelection()" />
<span class="slider round"></span>
</label>
Select All
</div>
<hr />
<div class="toggle_btn">
<label class="switch">
<input type="checkbox" class="engine" />
<span class="slider round"></span>
</label>
Duckduckgo
</div>
<div class="toggle_btn">
<label class="switch">
<input type="checkbox" class="engine" />
<span class="slider round"></span>
</label>
Searx
</div>
</div>
</div>

1
public/templates/footer.html
View file

@ -10,6 +10,7 @@
</ul>
</div>
</footer>
<script src="static/settings.js"></script>
</body>
</html>

4
public/templates/general_tab.html Normal file
View file

@ -0,0 +1,4 @@
<div class="general tab active">
<h1>General</h1>
<p class="description">Coming soon!!</p>
</div>

27
public/templates/header.html
View file

@ -1,29 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<title>Websurfx</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <link href="static/colorschemes/{{colorscheme}}.css" rel="stylesheet" type="text/css" /> -->
<!-- <link href="static/themes/{{theme}}.css" rel="stylesheet" type="text/css" /> -->
</head>
<link href="static/colorschemes/{{colorscheme}}.css" rel="stylesheet" type="text/css" />
<link href="static/themes/{{theme}}.css" rel="stylesheet" type="text/css" />
</head>
<body>
<body onload="getClientSettings()">
<header>{{>navbar}}</header>
<script>
const cookies = document.cookie.split(';').map(item => item.split('=')).
reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {});
// Load colorscheme and theme from cookie
function addCss(fileName) {
var head = document.head;
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = fileName;
head.appendChild(link);
}
addCss('static/themes/'+ (cookies["theme"] || '{{theme}}') + '.css');
addCss('static/colorschemes/'+ (cookies["color-sch"] || '{{colorscheme}}') + '.css');
</script>

9
public/templates/navbar.html
View file

@ -1,7 +1,6 @@
<nav>
<ul>
<li><a href="/">search</a></li>
<li><a href="about">about</a></li>
<li><a href="settings">settings</a></li>
</ul>
<ul>
<li><a href="about">about</a></li>
<li><a href="settings">settings</a></li>
</ul>
</nav>

121
public/templates/settings.html
View file

@ -1,107 +1,22 @@
{{>header this}}
<main class="settings">
<h1>Settings</h1>
<hr>
<div class="settings-view">
<div class="settings-sidebar">
<span class="set-name active" data-detailId="all">All</span>
<span class="set-name" data-detailId="searchEng">Search Engine</span>
<span class="set-name" data-detailId="theme">Theme</span>
</div>
<div class="settings-detail">
<form name="settings" onsubmit="submitSettings(); return false;">
<!-- Search engine settings -->
<div class="set-item" data-id="searchEng">
<h3 class="set-name">Select search engines</h3>
<p class="set-desc">Select the search engines from the list of engines that you want results from</p>
<!-- toggle element -->
<input type="hidden" name="searchEng" required value="ddg,searx,">
<div class="searchEng" takeInput>
<div class="searchEng-elem">
<input type="checkbox" id="selectAll-eng" onclick="return selectAllHandler(this);"/>
<div data-isCheckbox data-input="searchEng" data-value="all">
<label for="selectAll-eng"></label>
</div>
<span>Select all</span>
</div>
<hr>
<div class="searchEng-elem">
<input type="checkbox" id="toggle" checked/>
<div data-isCheckbox data-input="searchEng" data-value="ddg">
<label for="toggle"></label>
</div>
<span>Duck duck go</span>
</div>
<div class="searchEng-elem">
<input type="checkbox" id="toggle1" checked/>
<div data-isCheckbox data-input="searchEng" data-value="searx">
<label for="toggle1"></label>
</div>
<span>Searx</span>
</div>
</div>
<!-- End search select -->
</div>
<!-- End search engine setting -->
<!-- Theme selection settings -->
<div class="set-item" data-id="theme">
<h3 class="set-name">Select theme</h3>
<p class="set-desc">Select the theme from the available themes to be used in user interface</p>
<!-- Select element -->
<input type="hidden" name="theme" style="display: none;" required value="simple"></input>
<div class="custom-select" tabindex="0" data-input="theme" data-default="simple" takeInput
data-defaultIfNone="Select">
<svg viewBox="0 0 24 24" width="2rem" height="2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806
13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z">
</path>
</svg>
<div class="options">
<span data-value="simple" selected>simple</span>
</div>
</div>
<!-- End select element -->
</div>
<!-- End theme selection select -->
<!-- Color scheme selection settings -->
<div class="set-item" data-id="theme">
<h3 class="set-name">Select Color Scheme</h3>
<p class="set-desc">Select the color scheme for your theme to be used in user interface</p>
<!-- Select element -->
<input type="hidden" name="color-sch" style="display: none;" required value="catppuccin-mocha"></input>
<div class="custom-select" tabindex="0" data-input="color-sch" data-default="catppuccin-mocha" takeInput
data-defaultIfNone="Select">
<svg viewBox="0 0 24 24" width="2rem" height="2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806
13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z">
</path>
</svg>
<div class="options">
<span data-value="catppuccin-mocha" selected>catppuccin-mocha</span>
<span data-value="dracula">dracula</span>
<span data-value="monokai">monokai</span>
<span data-value="nord">nord</span>
<span data-value="oceanic-next">oceanic-next</span>
<span data-value="solarized-dark">solarized-dark</span>
<span data-value="solarized-light">solarized-light</span>
<span data-value="tomorrow-night">tomorrow-night</span>
</div>
</div>
<!-- End select element -->
</div>
<!-- End color scheme selection -->
<!-- ACTIONS -->
<div class="actions">
<input type="submit" value="Submit" class="submit-btn">
</div>
<!-- End Actions -->
</form>
</div>
</div>
<main class="settings" >
<h1>Settings</h1>
<hr />
<div class="settings_container">
<div class="sidebar">
<div class="btn active" onclick="setActiveTab(this)">general</div>
<div class="btn" onclick="setActiveTab(this)">user interface</div>
<div class="btn" onclick="setActiveTab(this)">engines</div>
<div class="btn" onclick="setActiveTab(this)">cookies</div>
</div>
<div class="main_container">
{{> general_tab}} {{> user_interface_tab}} {{> engines_tab}} {{>
cookies_tab}}
<p class="message"></p>
<button type="submit" onclick="setClientSettings()">Save</button>
</div>
</div>
</main>
<script src="static/ui_plugins.js"></script>
<script src="static/settings.js"></script>
<script src="static/cookies.js"></script>
{{>footer}}

27
public/templates/user_interface_tab.html Normal file
View file

@ -0,0 +1,27 @@
<div class="user_interface tab">
<h3>select theme</h3>
<p class="description">
Select the theme from the available themes to be used in user interface
</p>
<select name="themes">
<option value="simple">simple</option>
</select>
<h3>select color scheme</h3>
<p class="description">
Select the color scheme for your theme to be used in user interface
</p>
<select name="colorschemes">
<option value="catppuccin-mocha">catppuccin mocha</option>
<option value="dark-chocolate">dark chocolate</option>
<option value="dracula">dracula</option>
<option value="gruvbox-dark">gruvbox dark</option>
<option value="monokai">monokai</option>
<option value="nord">nord</option>
<option value="oceanic-next">oceanic next</option>
<option value="one-dark">one dark</option>
<option value="solarized-dark">solarized dark</option>
<option value="solarized-light">solarized light</option>
<option value="tokyo-night">tokyo night</option>
<option value="tomorrow-night">tomorrow night</option>
</select>
</div>