page note
Per
// ==UserScript==
// @name page_note
// @include *
// @supportURL https://github.com/sxlgkxk/browser_script/issues
// @version 0.1
// @description page note
// @namespace http://sxlgkxk.github.io/
// @author sxlgkxk
// @icon http://sxlgkxk.github.io/im/avatar.jpg
// @license MIT
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
(function () {
//-------------------------------- common functions --------------------------------
function addScript(src) {
var scripts_dom = document.createElement('script');
scripts_dom.src = src;
scripts_dom.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(scripts_dom);
}
addScript('https://unpkg.com/axios/dist/axios.min.js')
function addStyle(html) {
style = document.createElement("div")
document.body.before(style)
style.innerHTML = `<style>` + html + `</style>`
}
//-------------------------------- code snippets --------------------------------
// dom insert
note_dom = document.createElement('div')
document.body.before(note_dom)
note_dom.innerHTML = `
<button class="noteBtn" onclick="document.toggleNotePanle()">note</button>
<textarea class="notePanel" hidden></textarea>
<div id="all_notes_panel" hidden>
<div id="allNotes"></div>
<table id="history_table">
</table>
<button id="note_history_prev" class="pagiBtn">\<</button>
<button id="note_history_next" class="pagiBtn">\></button>
<input id="note_history_input" type="text" value="1" size="3">
<button id="note_history_go" class="pagiBtn">go</button>
<button id="booksNoteUpdateBtn" class="pagiBtn" onclick="document.toggleNotePanle()">update</button>
</div>`
addStyle(`
button.noteBtn {
font-weight: bold;
color: #fff;
background-color: #333;
position: fixed;
bottom: 0px;
right: 50px;
width: 50px;
height: 50px;
opacity: 0.8;
z-index: 3000;
}
div#all_notes_panel pre{
color: #ddd;
}
div#all_notes_panel{
color: #ddd;
background-color: #333;
padding-top: 42px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
z-index: 3000;
}
textarea.notePanel{
font-weight: bold;
color: #fff;
background-color: #333;
position: fixed;
bottom: 50px;
right: 0px;
left: 0px;
top: 50px;
opacity: 0.9;
z-index: 3000;
padding: 30px;
}
[hidden] { display: none !important; }
//div#mw-head, div#mw-panel{display: none !important;}
`)
// hide/show functions
document.hidePanel = () => {
panel = document.querySelector("textarea.notePanel");
if (!panel.hidden) {
text = panel.value;
localStorage.setItem("note_" + location.pathname, text)
panel.hidden = true
}
}
document.showPanel = () => {
panel = document.querySelector("textarea.notePanel");
if (panel.hidden) {
text = localStorage.getItem("note_" + location.pathname)
panel.value = text;
panel.hidden = false
}
}
document.toggleAllNotesPanel = () => {
all_notes_panel = document.querySelector("#all_notes_panel");
if (all_notes_panel.hidden) {
html = ``
for (i = 0; i < localStorage.length; i++) {
key = localStorage.key(i)
if (key.substr(0, 5) == "note_") {
url = new URL(location.origin+key.substring(5))
note = localStorage.getItem(key)
if (!note)
continue
html += `<a href="` + url.href + `" style="color: #8bdb81; font-weight: bold">` + url.pathname + `</a><pre>` + note + `</pre><hr>`
}
}
noteList = document.querySelector("#allNotes")
noteList.innerHTML = html
all_notes_panel.hidden = false
} else {
all_notes_panel.hidden = true
}
}
document.toggleNotePanle = () => {
// all_notes_panel
// if (document.documentElement["scrollTop"] == 0 && ! (window.innerHeight + window.scrollY) >= document.body.scrollHeight){
if (document.documentElement["scrollTop"] <= 50){
document.toggleAllNotesPanel()
} else {
// notePanel
note_panel = document.querySelector("textarea.notePanel");
if (note_panel.hidden)
document.showPanel()
else
document.hidePanel()
}
}
// C-A-e / Esc
document.addEventListener("keydown", function (event) {
panel = document.querySelector("textarea.notePanel");
if (event.ctrlKey && event.altKey && event.key == "e") {
if (document.documentElement["scrollTop"] <=50 ) {
document.toggleAllNotesPanel()
} else {
document.showPanel()
panel.focus()
}
} else if (event.key == "Escape") {
document.hidePanel()
panel.blur()
}
});
})();