Sasserisop
/
MATH201
1
0
Fork 1
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Updated search menu and toolbar

This commit is contained in:
DashCampbell 2023-12-29 16:17:03 -07:00
parent cef502af34
commit 4ddd503616
5 changed files with 444 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
content/temp_index.json Normal file
View File

@ -0,0 +1,93 @@
{
"index": [
{
"permalink": "/heaviside-unit-step-function-lec-18.html",
"summary": "We got a joke! Heaviside (British electrician) was told during a …",
"tags": [
"\n#heaviside",
" #mouc",
" #voparam",
"\n#ex",
" #heaviside",
"\n#end"
],
"thumbnail": "",
"title": "(Heaviside) Unit step function (lec 18)"
},
{
"permalink": "/bernoulli-equations-lec-3.html",
"summary": "Bernoulli's equation: $$\\frac{ dy }{ dx } +P(x)y=Q(x)y^n \\quad\\quad …",
"tags": [
" #de_b_type1",
" #de_s_type1",
"\n#ex",
"\n#end"
],
"thumbnail": "",
"title": "Bernoulli equations (lec 3)"
},
{
"permalink": "/cauchy-euler-equations-lec-10-11.html",
"summary": "We know how to solve second order equations where a, b, c are …",
"tags": [
"\n#cauchy-euler",
" #remember",
"\n#ex",
" #second_order",
" #second_order_nonhomogenous",
" #cauchy-euler",
"\n#end",
" #start"
],
"thumbnail": "",
"title": "Cauchy-Euler equations (lec 10-11)"
},
{
"permalink": "/convolution-lec-19-20.html",
"summary": "Convolution #convolution A convolution is an operation on two …",
"tags": [
"\n#convolution",
"\n#end",
" #start",
"\n#ex",
" #convolution",
" #inv_LT",
" #partial_fractions",
" #remember",
" #IVP",
" #integral-differential"
],
"thumbnail": "",
"title": "Convolution (lec 19-20)"
},
{
"permalink": "/dirak-%CE%B4-function-lec-21.html",
"summary": "#start of lec 21 From newton's second law: $ma=F$ …",
"tags": [
"\n#start",
"\n#dirak_delta",
"\n#ex",
" #second_order_nonhomogenous",
" #dirak_delta",
" #IVP",
" #voparam"
],
"thumbnail": "drawings/Drawing-2023-10-25-13.16.20.excalidraw.png",
"title": "Dirak δ-function (lec 21)"
},
{
"permalink": "/drawings/2023-12-06-13.14.28.excalidraw.html",
"summary": "==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this …",
"tags": [],
"thumbnail": "",
"title": "2023-12-06-13.14.28.excalidraw"
},
{
"permalink": "/drawings/2023-12-18-16.29.58.excalidraw.html",
"summary": "==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this …",
"tags": [],
"thumbnail": "",
"title": "2023-12-18-16.29.58.excalidraw"
}
]
}

243
themes/zettels/assets/js/search.js
View File

@ -3,7 +3,7 @@ loadIndex()
// Highlight with jQuery // Highlight with jQuery
// from: https://stackoverflow.com/questions/41533785/how-to-highlight-search-text-in-html-with-the-help-of-js // from: https://stackoverflow.com/questions/41533785/how-to-highlight-search-text-in-html-with-the-help-of-js
// @todo: This is the only use of jQuery. Find a vanila JS way // @todo: This is the only use of jQuery. Find a vanila JS way
jQuery.fn.highlight = function(pat) { jQuery.fn.highlight = function (pat) {
function innerHighlight(node, pat) { function innerHighlight(node, pat) {
@ -15,16 +15,16 @@ jQuery.fn.highlight = function(pat) {
if (pos >= 0) { if (pos >= 0) {
var spannode = document.createElement('span'); var spannode = document.createElement('span');
spannode.className = 'highlighted'; spannode.className = 'highlighted';
var middlebit = node.splitText(pos); var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length); var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true); var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone); spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit); middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1; skip = 1;
} }
@ -41,15 +41,15 @@ jQuery.fn.highlight = function(pat) {
} }
return this.each(function() { return this.each(function () {
innerHighlight(this, pat.toUpperCase()); innerHighlight(this, pat.toUpperCase());
}); });
}; };
jQuery.fn.removeHighlight = function() { jQuery.fn.removeHighlight = function () {
function newNormalize(node) { function newNormalize(node) {
@ -71,7 +71,7 @@ jQuery.fn.removeHighlight = function() {
if (next == null || next.nodeType != 3) { continue; } if (next == null || next.nodeType != 3) { continue; }
var combined_text = child.nodeValue + next.nodeValue; var combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text); new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child); node.insertBefore(new_node, child);
node.removeChild(child); node.removeChild(child);
@ -83,7 +83,7 @@ jQuery.fn.removeHighlight = function() {
} }
return this.find("span.highlighted").each(function() { return this.find("span.highlighted").each(function () {
var thisParent = this.parentNode; var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this); thisParent.replaceChild(this.firstChild, this);
@ -93,9 +93,9 @@ jQuery.fn.removeHighlight = function() {
}; };
$(function() { $(function () {
$('#search-input').bind('keyup change', function(ev) { $('#search-input').bind('keyup change', function (ev) {
// pull in the new value // pull in the new value
var searchTerm = $(this).val(); var searchTerm = $(this).val();
@ -104,60 +104,68 @@ $(function() {
$('body').removeHighlight(); $('body').removeHighlight();
// disable highlighting if empty // disable highlighting if empty
if ( searchTerm ) { if (searchTerm) {
// highlight the new term // highlight the new term
$('body').highlight( searchTerm ); $('body').highlight(searchTerm);
} }
}); });
}); });
/// ///
var scrollTop = 0 var scrollTop = 0
document.addEventListener("turbolinks:before-render", function() { document.addEventListener("turbolinks:before-render", function () {
var search_index = document.getElementById("search-results"); var search_index = document.getElementById("search-results");
var y = search_index.scrollTop; var y = search_index.scrollTop;
scrollTop = y scrollTop = y
}) })
document.addEventListener("turbolinks:render", function() { document.addEventListener("turbolinks:render", function () {
var search_index = document.getElementById("search-results"); var search_index = document.getElementById("search-results");
search_index.scrollTop = scrollTop search_index.scrollTop = scrollTop
}) })
document.addEventListener("turbolinks:load", function() { document.addEventListener("turbolinks:load", function () {
setNoteWrapperState() setNoteWrapperState()
const current = window.location.href const current = window.location.href
var els = document.getElementsByTagName("a");
for (var i = 0, l = els.length; i < l; i++) {
var el = els[i];
var els = document.getElementsByTagName("a"); if (el.href === current) {
for (var i = 0, l = els.length; i < l; i++) { el.classList.add("selected")
var el = els[i]; } else {
el.classList.remove("selected")
if (el.href === current) { }
el.classList.add("selected") }
} else {
el.classList.remove("selected")
}
}
}) })
function loadIndex() { function loadIndex() {
fetchJSON(function(response) { // On localhost the root url is /MATH201
// On sasserisop the root url is /sasserisop
const localhost = true;
const root = localhost ? "" : "/MATH201";
fetchJSON(function (response) {
const notes = response; const notes = response;
const search_results = document.getElementById('search-results'); const search_results = document.getElementById('search-results');
const tags = document.getElementById('tags'); const tags = document.getElementById('tags');
const current_note = window.location.href; const current_note = window.location.href;
notes.index.forEach(note => {
const title = '<h4>'+ note.title + '</h4>'; // sorted notes by lecture number
const lecture_notes = new Map();
const non_lecture_notes = [];
// Fixed a bug where the search results had unwanted notes.
// The notes are now filtered first.
notes.index.filter(n => !/^Drawing|^20/.test(n.title)).forEach(note => {
const title = '<h4>' + note.title + '</h4>';
const summary = '<div>' + note.summary + '</div>'; const summary = '<div>' + note.summary + '</div>';
const permalink = note.permalink const permalink = note.permalink
@ -179,15 +187,37 @@ function loadIndex() {
const tags = '<span style="display:none">' + note.tags + '</span>' const tags = '<span style="display:none">' + note.tags + '</span>'
var list_content; var list_content;
if (current_note === permalink) { if (current_note === permalink) {
list_content = '<a href="/MATH201' + permalink + '" class="selected search-item" tabindex="0">' + title + summary + '</a>' list_content = '<a href="' + root + permalink + '" class="selected search-item" tabindex="0">' + title + summary + '</a>'
} else { } else {
list_content = '<a href="/MATH201' + permalink + '" class="search-item" tabindex="0">' + title + summary + thumbnail + tags + '</a>' list_content = '<a href="' + root + permalink + '" class="search-item" tabindex="0">' + title + summary + thumbnail + tags + '</a>'
} }
const child = document.createElement("li"); const child = document.createElement("li");
child.innerHTML = list_content; child.innerHTML = list_content;
search_results.append(child)
// Add lecture notes to a dictionary, and then sort them by lecture number.
// second last character of the title may be first digit of lecture number
const d1 = note.title[note.title.length - 2];
// find the lecture number, if there is one
if (/\d/.test(d1)) {
// it has a lecture number
// if the third last character is a digit, then the lecture number is 2 digits
const d2 = note.title[note.title.length - 3];
const lecture_number = /\d/.test(d2) ? Number(d2 + d1) : Number(d1);
lecture_notes.set(lecture_number, child);
} else {
non_lecture_notes.push(child);
}
}); });
// sort notes by lecture number
const sorted_notes = new Map([...lecture_notes.entries()].sort((a, b) => (a[0] - b[0])));
// Add sorted notes first
sorted_notes.forEach(val => {
search_results.append(val);
});
non_lecture_notes.forEach(child => {
search_results.append(child);
})
// @todo: wip // @todo: wip
// notes.tags.forEach(tag => { // notes.tags.forEach(tag => {
@ -196,20 +226,19 @@ function loadIndex() {
// tags.append(child) // tags.append(child)
// }); // });
// //
}); }, root);
} }
function fetchJSON(callback) { function fetchJSON(callback, root) {
const requestURL = root + '/index.json';
const requestURL = '/MATH201/index.json';
const request = new XMLHttpRequest(); const request = new XMLHttpRequest();
request.open('GET', requestURL, true); request.open('GET', requestURL, true);
request.responseType = 'json'; request.responseType = 'json';
request.onreadystatechange = function() { request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) { if (request.readyState === 4 && request.status === 200) {
callback(request.response); callback(request.response);
} }
}; };
request.send(null); request.send(null);
} }
@ -226,57 +255,57 @@ function performSearchWith(query) {
var filter, ul, li, a, i, txtValue; var filter, ul, li, a, i, txtValue;
filter = query.toLowerCase(); filter = query.toLowerCase();
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
var re = new RegExp(filter, 'g'); var re = new RegExp(filter, 'g');
ul = document.getElementById("search-results"); ul = document.getElementById("search-results");
li = ul.getElementsByTagName('li'); li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) { for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0]; a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText; txtValue = a.textContent || a.innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) { if (txtValue.toLowerCase().indexOf(filter) > -1) {
li[i].style.display = "block"; li[i].style.display = "block";
} else { } else {
li[i].style.display = "none"; li[i].style.display = "none";
} }
} }
} }
function performSearch() { function performSearch() {
var input, filter, ul, li, a, i, txtValue; var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('search-input'); input = document.getElementById('search-input');
filter = input.value.toLowerCase(); filter = input.value.toLowerCase();
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
var re = new RegExp(filter, 'g'); var re = new RegExp(filter, 'g');
ul = document.getElementById("search-results"); ul = document.getElementById("search-results");
li = ul.getElementsByTagName('li'); li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) { for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0]; a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText; txtValue = a.textContent || a.innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) { if (txtValue.toLowerCase().indexOf(filter) > -1) {
li[i].style.display = "block"; li[i].style.display = "block";
} else { } else {
li[i].style.display = "none"; li[i].style.display = "none";
} }
} }
} }
// Keyboard shortcuts // Keyboard shortcuts
document.addEventListener('keydown', function(evt) { document.addEventListener('keydown', function (evt) {
if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) { if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) {
document.getElementById("search-input").focus(); document.getElementById("search-input").focus();
@ -315,7 +344,7 @@ function hideNav() {
document.getElementById("search-header").style.width = "0"; document.getElementById("search-header").style.width = "0";
document.getElementById("search").style.opacity = 0; document.getElementById("search").style.opacity = 0;
document.getElementById("search-header").style.opacity = 0; document.getElementById("search-header").style.opacity = 0;
document.getElementById("main").style.marginLeft= "0"; document.getElementById("main").style.marginLeft = "0";
pullNoteWrapper() pullNoteWrapper()
nav_is_visible = false; nav_is_visible = false;
@ -344,54 +373,54 @@ const hoverTime = 300
const fetchers = {} const fetchers = {}
const doc = document.implementation.createHTMLDocument('prefetch') const doc = document.implementation.createHTMLDocument('prefetch')
function fetchPage (url, success) { function fetchPage(url, success) {
const xhr = new XMLHttpRequest() const xhr = new XMLHttpRequest()
xhr.open('GET', url) xhr.open('GET', url)
xhr.setRequestHeader('VND.PREFETCH', 'true') xhr.setRequestHeader('VND.PREFETCH', 'true')
xhr.setRequestHeader('Accept', 'text/html') xhr.setRequestHeader('Accept', 'text/html')
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
if (xhr.readyState !== XMLHttpRequest.DONE) return if (xhr.readyState !== XMLHttpRequest.DONE) return
if (xhr.status !== 200) return if (xhr.status !== 200) return
success(xhr.responseText) success(xhr.responseText)
} }
xhr.send() xhr.send()
} }
function prefetchTurbolink (url) { function prefetchTurbolink(url) {
fetchPage(url, responseText => { fetchPage(url, responseText => {
doc.open() doc.open()
doc.write(responseText) doc.write(responseText)
doc.close() doc.close()
const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement) const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement)
Turbolinks.controller.cache.put(url, snapshot) Turbolinks.controller.cache.put(url, snapshot)
}) })
} }
function prefetch (url) { function prefetch(url) {
if (prefetched(url)) return if (prefetched(url)) return
prefetchTurbolink(url) prefetchTurbolink(url)
} }
function prefetched (url) { function prefetched(url) {
return location.href === url || Turbolinks.controller.cache.has(url) return location.href === url || Turbolinks.controller.cache.has(url)
} }
function prefetching (url) { function prefetching(url) {
return !!fetchers[url] return !!fetchers[url]
} }
function cleanup (event) { function cleanup(event) {
const element = event.target const element = event.target
clearTimeout(fetchers[element.href]) clearTimeout(fetchers[element.href])
element.removeEventListener('mouseleave', cleanup) element.removeEventListener('mouseleave', cleanup)
} }
document.addEventListener('mouseover', event => { document.addEventListener('mouseover', event => {
if (!event.target.dataset.prefetch) return if (!event.target.dataset.prefetch) return
const url = event.target.href const url = event.target.href
if (prefetched(url)) return if (prefetched(url)) return
if (prefetching(url)) return if (prefetching(url)) return
cleanup(event) cleanup(event)
event.target.addEventListener('mouseleave', cleanup) event.target.addEventListener('mouseleave', cleanup)
fetchers[url] = setTimeout(() => prefetch(url), hoverTime) fetchers[url] = setTimeout(() => prefetch(url), hoverTime)
}) })

28
themes/zettels/assets/js/thumbnails.js
View File

@ -1,19 +1,13 @@
var thumbnail_mode = false // Resize images using an input range.
function imageMode() { function resizeImage() {
const note_wrapper = document.getElementById('note-wrapper') // make p tags wrapping img tags inline, to resize images correctly
const images = note_wrapper.getElementsByTagName('img') $("#main p").has("img").css("display", "inline-block");
if (thumbnail_mode) { // toggle vectical input range
var els = note_wrapper.getElementsByTagName('img') $("#toolbar input[type=range][orient=vertical]").slideToggle()
for(var i = 0, all = els.length; i < all; i++){
els[i].classList.remove('thumbnail'); // resize image
} $("#toolbar input[type=range][orient=vertical]").mouseup(function () {
thumbnail_mode = false $("#main p img").css("width", this.value + "%")
} else { });
var els = note_wrapper.getElementsByTagName('img')
for(var i = 0, all = els.length; i < all; i++){
els[i].classList.add('thumbnail');
}
thumbnail_mode = true
}
} }

215
themes/zettels/layouts/partials/search.html
View File

@ -6,130 +6,141 @@
- Focused current note - Focused current note
--> -->
<style> <style>
search-menu { search-menu {
display: block; display: block;
} }
#search { #search {
height: 100%; height: 100%;
width: 0; width: 0;
position: fixed; position: fixed;
background: var(--background-search); background: var(--background-search);
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
border-right: 1px solid var(--separator-color); border-right: 1px solid var(--separator-color);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
opacity: 0; opacity: 0;
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none;
scrollbar-width: none; /* Firefox */ /* IE and Edge */
} scrollbar-width: none;
/* Firefox */
}
#search::-webkit-scrollbar { display: none; } #search::-webkit-scrollbar {
display: none;
}
#search-header { #search-header {
padding: 12px; padding: 12px;
position: fixed; position: fixed;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
background: var(--background-search); background: var(--background-search);
width: 250px; width: 250px;
opacity: 1; opacity: 1;
height: 50px; height: 50px;
z-index: 2; z-index: 2;
border-bottom: 1px solid var(--separator-color); border-bottom: 1px solid var(--separator-color);
} }
#search .input-container { #search .input-container {
position: relative position: relative
} }
#search-input { #search-input {
width: 100%; width: 100%;
height: 24px; height: 24px;
border: 1px solid var(--separator-color); border: 1px solid var(--separator-color);
border-radius: 4px; border-radius: 4px;
padding-left: 16px; padding-left: 24px;
background-color: white; background-color: white;
display: inline-block; display: inline-block;
} }
#search-input:focus { #search-input:focus {
border: 1px solid var(--search-field-focused-color); border: 1px solid var(--search-field-focused-color);
} }
#search-header .input-container .search-icon { #search-header .input-container .search-icon {
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 8px; left: 8px;
fill: darkGray; fill: darkGray;
} }
#search-results img { #search-results img {
width: 122px; width: 122px;
height: 76px; height: 76px;
border: 1px solid var(--separator-color); border: 1px solid var(--separator-color);
object-fit: cover; object-fit: cover;
} }
#search-results { #search-results {
margin-top: 50px; margin-top: 50px;
overflow: auto; overflow: auto;
height: 100%; height: 100%;
} }
#search-results a { #search-results a {
width: 100%; width: 100%;
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
display: inline-block; display: inline-block;
color: var(--text-base-color); color: var(--text-base-color);
border-bottom: 1px solid var(--separator-color); border-bottom: 1px solid var(--separator-color);
border-left: 6px solid var(--background-search); border-left: 6px solid var(--background-search);
} }
#search-results a:first-child:hover, a:first-child:focus, .selected { #search-results a:first-child:hover,
outline: 0; a:first-child:focus,
background-color: var(--note-table-cell-selected-color); .selected {
border-left: 6px solid var(--note-table-cell-ribbon-color) !important; outline: 0;
} background-color: var(--note-table-cell-selected-color);
border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
}
// Reseting default styles inside search component scope /* // Reseting default styles inside search component scope */
#search-results li { text-indent: 0; } #search-results li {
#search-results li:before, text-indent: 0;
#search-results h1:before, }
#search-results h2:before,
#search-results h3:before, #search-results li:before,
#search-results h4:before, #search-results h1:before,
#search-results h5:before, #search-results h2:before,
#search-results h6:before { #search-results h3:before,
content: ""; #search-results h4:before,
visibility: hidden; #search-results h5:before,
display: none; #search-results h6:before {
} content: "";
visibility: hidden;
display: none;
}
</style> </style>
<search-menu id="search" data-turbolinks-permanent> <search-menu id="search" data-turbolinks-permanent>
<header id="search-header"> <header id="search-header">
<div class="input-container"> <div class="input-container">
<svg aria-hidden="true" style="" class="search-icon" width="12" height="12" viewBox="0 0 18 18"> <svg aria-hidden="true" class="search-icon" width="12" height="12" viewBox="0 0 18 18">
<path d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z"> <path
</path> d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z">
</svg> </path>
</svg>
<input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0" placeholder="Search note"> <input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0"
placeholder="Search Notes">
</div> </div>
</header> </header>
<ul id="search-results"></ul> <ul id="search-results"></ul>
</search-menu> </search-menu>

67
themes/zettels/layouts/partials/toolbar.html
View File

@ -1,42 +1,57 @@
<script>
</script>
<style> <style>
#toolbar { #toolbar {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
width: 60px; width: 60px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
transition: 1s; transition: 1s;
opacity: 0.5; opacity: 0.5;
padding: 18px 0px 18px 0px; padding: 18px 0px 18px 0px;
} }
#toolbar:hover { #toolbar:hover {
opacity: 1; opacity: 1;
} }
#close-nav-icon { #close-nav-icon {
display: none; display: none;
} }
#toolbar input[type=range][orient=vertical] {
appearance: slider-vertical;
display: none;
}
</style> </style>
<aside id="toolbar"> <aside id="toolbar">
<span style="cursor:pointer" id="open-nav-icon" onclick="handleNavVisibility()"> <span style="cursor:pointer" id="open-nav-icon" onclick="handleNavVisibility()">
<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle fill="none" stroke="var(--text-base-color)" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="var(--text-base-color)" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg> <svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" stroke="var(--text-base-color)" stroke-width="1.1" cx="9" cy="9" r="7"></circle>
<path fill="none" stroke="var(--text-base-color)" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path>
</svg>
</span> </span>
<span onclick="imageMode()" style="cursor:pointer;margin-top:16px;"> <span style="cursor:pointer;margin-top:16px;" onclick="resizeImage()">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="var(--text-base-color" x=".5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="var(--text-base-color" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="var(--text-base-color)" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg> <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<circle cx="16.1" cy="6.1" r="1.1"></circle>
<rect fill="none" stroke="var(--text-base-color" x=".5" y="2.5" width="19" height="15"></rect>
<polyline fill="none" stroke="var(--text-base-color" stroke-width="1.01" points="4,13 8,9 13,14"></polyline>
<polyline fill="none" stroke="var(--text-base-color)" stroke-width="1.01" points="11,12 12.5,10.5 16,14">
</polyline>
</svg>
</span> </span>
<input type="range" orient="vertical" min="0" max="100" step="0.5" value="100">
</aside> </aside>
<script>
</script>