forked from Sasserisop/MATH201
Updated search menu and toolbar
This commit is contained in:
parent
cef502af34
commit
4ddd503616
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -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,64 +104,72 @@ $(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");
|
||||||
var els = document.getElementsByTagName("a");
|
for (var i = 0, l = els.length; i < l; i++) {
|
||||||
for (var i = 0, l = els.length; i < l; i++) {
|
var el = els[i];
|
||||||
var el = els[i];
|
|
||||||
|
if (el.href === current) {
|
||||||
if (el.href === current) {
|
el.classList.add("selected")
|
||||||
el.classList.add("selected")
|
} else {
|
||||||
} else {
|
el.classList.remove("selected")
|
||||||
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
|
||||||
|
|
||||||
var thumbnail = ""
|
var thumbnail = ""
|
||||||
if (note.thumbnail === "") {
|
if (note.thumbnail === "") {
|
||||||
thumbnail = ""
|
thumbnail = ""
|
||||||
|
|
@ -175,20 +183,42 @@ function loadIndex() {
|
||||||
// use lazy loading.
|
// use lazy loading.
|
||||||
thumbnail = '<img loading="lazy" src="' + note.thumbnail + '?nf_resize=fit&w=122&h=76"/><span style="display:none";>@attachments</span>'
|
thumbnail = '<img loading="lazy" src="' + note.thumbnail + '?nf_resize=fit&w=122&h=76"/><span style="display:none";>@attachments</span>'
|
||||||
}
|
}
|
||||||
|
|
||||||
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 => {
|
||||||
// const child = document.createElement("li");
|
// const child = document.createElement("li");
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
@ -217,76 +246,76 @@ function fetchJSON(callback) {
|
||||||
function focusTag(a) {
|
function focusTag(a) {
|
||||||
showNav()
|
showNav()
|
||||||
performSearchWith(a.innerText)
|
performSearchWith(a.innerText)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function performSearchWith(query) {
|
function performSearchWith(query) {
|
||||||
|
|
||||||
// document.getElementById('search-input').value = query
|
|
||||||
|
|
||||||
var filter, ul, li, a, i, txtValue;
|
|
||||||
|
|
||||||
filter = query.toLowerCase();
|
|
||||||
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
|
|
||||||
|
|
||||||
var re = new RegExp(filter, 'g');
|
|
||||||
|
|
||||||
ul = document.getElementById("search-results");
|
|
||||||
li = ul.getElementsByTagName('li');
|
|
||||||
|
|
||||||
for (i = 0; i < li.length; i++) {
|
// document.getElementById('search-input').value = query
|
||||||
|
|
||||||
|
var filter, ul, li, a, i, txtValue;
|
||||||
|
|
||||||
|
filter = query.toLowerCase();
|
||||||
|
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
|
||||||
|
|
||||||
|
var re = new RegExp(filter, 'g');
|
||||||
|
|
||||||
|
ul = document.getElementById("search-results");
|
||||||
|
li = ul.getElementsByTagName('li');
|
||||||
|
|
||||||
|
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;
|
|
||||||
input = document.getElementById('search-input');
|
|
||||||
|
|
||||||
filter = input.value.toLowerCase();
|
|
||||||
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
|
|
||||||
|
|
||||||
var re = new RegExp(filter, 'g');
|
|
||||||
|
|
||||||
ul = document.getElementById("search-results");
|
|
||||||
li = ul.getElementsByTagName('li');
|
|
||||||
|
|
||||||
for (i = 0; i < li.length; i++) {
|
var input, filter, ul, li, a, i, txtValue;
|
||||||
|
input = document.getElementById('search-input');
|
||||||
|
|
||||||
|
filter = input.value.toLowerCase();
|
||||||
|
filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&');
|
||||||
|
|
||||||
|
var re = new RegExp(filter, 'g');
|
||||||
|
|
||||||
|
ul = document.getElementById("search-results");
|
||||||
|
li = ul.getElementsByTagName('li');
|
||||||
|
|
||||||
|
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();
|
||||||
handleNavVisibility()
|
handleNavVisibility()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (evt.key === "Escape" || evt.key === "Esc" | evt.keyCode === 27) {
|
if (evt.key === "Escape" || evt.key === "Esc" | evt.keyCode === 27) {
|
||||||
hideNav()
|
hideNav()
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var nav_is_visible = false;
|
var nav_is_visible = false;
|
||||||
|
|
@ -300,13 +329,13 @@ function handleNavVisibility() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function showNav() {
|
function showNav() {
|
||||||
|
|
||||||
document.getElementById("search").style.width = "300px";
|
document.getElementById("search").style.width = "300px";
|
||||||
document.getElementById("search").style.opacity = 1;
|
document.getElementById("search").style.opacity = 1;
|
||||||
document.getElementById("search-header").style.opacity = 1;
|
document.getElementById("search-header").style.opacity = 1;
|
||||||
document.getElementById("search-header").style.width = "299px";
|
document.getElementById("search-header").style.width = "299px";
|
||||||
pushNoteWrapper()
|
pushNoteWrapper()
|
||||||
|
|
||||||
nav_is_visible = true;
|
nav_is_visible = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -315,9 +344,9 @@ 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)
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -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 */
|
|
||||||
scrollbar-width: none; /* Firefox */
|
|
||||||
}
|
|
||||||
|
|
||||||
#search::-webkit-scrollbar { display: none; }
|
|
||||||
|
|
||||||
#search-header {
|
-ms-overflow-style: none;
|
||||||
padding: 12px;
|
/* IE and Edge */
|
||||||
position: fixed;
|
scrollbar-width: none;
|
||||||
padding-left: 12px;
|
/* Firefox */
|
||||||
padding-right: 12px;
|
}
|
||||||
background: var(--background-search);
|
|
||||||
width: 250px;
|
|
||||||
opacity: 1;
|
|
||||||
height: 50px;
|
|
||||||
z-index: 2;
|
|
||||||
border-bottom: 1px solid var(--separator-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
#search .input-container {
|
#search::-webkit-scrollbar {
|
||||||
position: relative
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-input {
|
#search-header {
|
||||||
width: 100%;
|
padding: 12px;
|
||||||
height: 24px;
|
position: fixed;
|
||||||
border: 1px solid var(--separator-color);
|
padding-left: 12px;
|
||||||
border-radius: 4px;
|
padding-right: 12px;
|
||||||
padding-left: 16px;
|
background: var(--background-search);
|
||||||
background-color: white;
|
width: 250px;
|
||||||
display: inline-block;
|
opacity: 1;
|
||||||
}
|
height: 50px;
|
||||||
|
z-index: 2;
|
||||||
|
border-bottom: 1px solid var(--separator-color);
|
||||||
|
}
|
||||||
|
|
||||||
#search-input:focus {
|
#search .input-container {
|
||||||
border: 1px solid var(--search-field-focused-color);
|
position: relative
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-header .input-container .search-icon {
|
#search-input {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
top: 6px;
|
height: 24px;
|
||||||
left: 8px;
|
border: 1px solid var(--separator-color);
|
||||||
fill: darkGray;
|
border-radius: 4px;
|
||||||
}
|
padding-left: 24px;
|
||||||
|
background-color: white;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
#search-results img {
|
#search-input:focus {
|
||||||
width: 122px;
|
border: 1px solid var(--search-field-focused-color);
|
||||||
height: 76px;
|
}
|
||||||
border: 1px solid var(--separator-color);
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
#search-results {
|
#search-header .input-container .search-icon {
|
||||||
margin-top: 50px;
|
position: absolute;
|
||||||
overflow: auto;
|
top: 6px;
|
||||||
height: 100%;
|
left: 8px;
|
||||||
}
|
fill: darkGray;
|
||||||
|
}
|
||||||
|
|
||||||
#search-results a {
|
#search-results img {
|
||||||
width: 100%;
|
width: 122px;
|
||||||
padding-left: 25px;
|
height: 76px;
|
||||||
padding-right: 25px;
|
border: 1px solid var(--separator-color);
|
||||||
padding-top: 12px;
|
object-fit: cover;
|
||||||
padding-bottom: 12px;
|
}
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
color: var(--text-base-color);
|
|
||||||
border-bottom: 1px solid var(--separator-color);
|
|
||||||
border-left: 6px solid var(--background-search);
|
|
||||||
|
|
||||||
}
|
#search-results {
|
||||||
|
margin-top: 50px;
|
||||||
|
overflow: auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
#search-results a:first-child:hover, a:first-child:focus, .selected {
|
#search-results a {
|
||||||
outline: 0;
|
width: 100%;
|
||||||
background-color: var(--note-table-cell-selected-color);
|
padding-left: 25px;
|
||||||
border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
|
padding-right: 25px;
|
||||||
}
|
padding-top: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
// Reseting default styles inside search component scope
|
color: var(--text-base-color);
|
||||||
#search-results li { text-indent: 0; }
|
border-bottom: 1px solid var(--separator-color);
|
||||||
#search-results li:before,
|
border-left: 6px solid var(--background-search);
|
||||||
#search-results h1:before,
|
|
||||||
#search-results h2:before,
|
}
|
||||||
#search-results h3:before,
|
|
||||||
#search-results h4:before,
|
#search-results a:first-child:hover,
|
||||||
#search-results h5:before,
|
a:first-child:focus,
|
||||||
#search-results h6:before {
|
.selected {
|
||||||
content: "";
|
outline: 0;
|
||||||
visibility: hidden;
|
background-color: var(--note-table-cell-selected-color);
|
||||||
display: none;
|
border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
/* // Reseting default styles inside search component scope */
|
||||||
|
#search-results li {
|
||||||
|
text-indent: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-results li:before,
|
||||||
|
#search-results h1:before,
|
||||||
|
#search-results h2:before,
|
||||||
|
#search-results h3:before,
|
||||||
|
#search-results h4:before,
|
||||||
|
#search-results h5:before,
|
||||||
|
#search-results h6:before {
|
||||||
|
content: "";
|
||||||
|
visibility: hidden;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</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>
|
|
||||||
</header>
|
|
||||||
|
</div>
|
||||||
<ul id="search-results"></ul>
|
</header>
|
||||||
|
|
||||||
|
<ul id="search-results"></ul>
|
||||||
</search-menu>
|
</search-menu>
|
||||||
|
|
@ -1,42 +1,57 @@
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#toolbar {
|
#toolbar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
width: 60px;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
display: flex;
|
width: 60px;
|
||||||
flex-direction: column;
|
height: 100%;
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
transition: 1s;
|
|
||||||
opacity: 0.5;
|
|
||||||
|
|
||||||
padding: 18px 0px 18px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar:hover {
|
display: flex;
|
||||||
opacity: 1;
|
flex-direction: column;
|
||||||
}
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
#close-nav-icon {
|
transition: 1s;
|
||||||
display: none;
|
opacity: 0.5;
|
||||||
}
|
|
||||||
|
|
||||||
|
padding: 18px 0px 18px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbar:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#close-nav-icon {
|
||||||
|
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>
|
||||||
</aside>
|
<input type="range" orient="vertical" min="0" max="100" step="0.5" value="100">
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue