read_mark

read mark
Version au 15/05/2022. Voir la dernière version.
Visiter le site de l'auteur pour obtenir de l'aide, poser une question, écrire un avis, ou signaler le script.
Enveloppe les lignes
// ==UserScript==
// @name         read_mark
// @include      *
// @include      http://readonlinefreebook.com/*
// @include      https://readonlinefreebook.com/*
// @include      *wikipedia.org*
// @supportURL   https://github.com/sxlgkxk/browser_script/issues
// @version      0.1
// @description  read mark
// @namespace    http://sxlgkxk.github.io/
// @author       sxlgkxk
// @icon         http://sxlgkxk.github.io/im/avatar.jpg
// @license      MIT
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_xmlhttpRequest
// ==/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 --------------------------------

	addStyle(`
	#markPanel{
		color: #fff;
		background-color: #333;
		position: fixed;
		bottom: 100px;
		right: 0px;
		width: 250px;
		opacity: 0.9;
		z-index: 3000;
		padding: 5px;
	}
	a.markUrl{
		font-weight: bold;
		color: #8bdb81;
		padding-right: 10px;
		font-size: 12px;
	}
	a:visited{
		color: #f5de19 !important;
    }
	button.markBtn, button.highlightBtn{
		background-color: #fff;
		color: #333;
		padding-top: 4px;
		padding-bottom: 4px;
		padding-left: 9px;
		padding-right: 9px;
		margin-bottom: 3px;
		margin-top: 3px;
		border:0px;
	}
	[hidden] { display: none !important; }
`)

	//-------------------------------- latest_panel --------------------------------

	mark_panel = document.createElement('div')
	document.body.before(mark_panel)

	mark_panel_list_html = ""
	for (let i = 0; i < 5; i++) {
		data = localStorage.getItem("mark" + i)
		data = data ? JSON.parse(data) : {}
		url = data.url
		title = data.title
		mark_panel_list_html += `
		<div>
			<button onclick="document.setMark(`+ i + `)" class="markBtn">+</button>
			<a href="`+ url + `" class="markUrl" id="mark` + i + `">` + title + `</a>
		</div>
	`
	}

	highlight_html = `<button class="highlightBtn" onclick="document.promptHighlight()">highlight</button>`

	mark_panel.innerHTML = `<div id="markPanel" hidden>`
		+ mark_panel_list_html
		+ highlight_html
		+ `</div>`

	document.toggleMarkPanel = () => {
		markPanel = document.querySelector("#markPanel");
		if (markPanel.hidden) {
			markPanel.hidden = false
		} else {
			markPanel.hidden = true
		}
	}
	document.setMark = function (val) {
		data = { title: document.title.replace(" - Wikipedia", ''), url: window.location.href }
		localStorage.setItem("mark" + val, JSON.stringify(data))
		document.querySelector("#mark" + val).innerHTML = data.title
		document.querySelector("#mark" + val).href = data.url
	}

	//-------------------------------- mark_button --------------------------------

	body = document.querySelector('body')
	mark_button = document.createElement('button')
	document.body.before(mark_button)

	// move button style
	mark_button.innerHTML = `<style>
	.float_btn{
		font-weight: bold;
		color: #fff;
		background-color: #333;
		position: fixed;
		width: 50px;
		height: 50px;
		opacity: 0.8;
		z-index: 1;
	}
</style`

	// mark_button
	mark_button.innerHTML += 'mark'
	mark_button.id = 'read_mark_btn'
	mark_button.classList.add("float_btn")
	mark_button.style.bottom = '50px'
	mark_button.style.right = '50px'
	mark_button.onclick = () => {
		document.toggleMarkPanel()
	}

	//-------------------------------- highlight --------------------------------

	// style
	function addStyle(html) {
		style = document.createElement("div")
		document.body.before(style)
		style.innerHTML = `<style>` + html + `</style>`
	}
	addStyle(`
		span.highlight{
			color: #555555; 
			font-weight:bold; 
			background-color: #8bdb81;
		}
	`)

	function doHighlight(el=document.body) {
		var keywords=localStorage.getItem("highlight")
		if (!keywords) return;
		keywords=JSON.parse(keywords).join()

		var rQuantifiers = /[-\/\\^$*+?.()|[\]{}]/g;
		keywords = keywords.replace(rQuantifiers, '\\$&').split(',').join('|');
		var pat = new RegExp('(' + keywords + ')', 'gi');
		var span = document.createElement('span');
		// getting all text nodes with a few exceptions
		var snapElements = document.evaluate(
			'.//text()[normalize-space() != "" ' +
			'and not(ancestor::style) ' +
			'and not(ancestor::script) ' +
			'and not(ancestor::textarea) ' +
			'and not(ancestor::code) ' +
			'and not(ancestor::pre)]',
			el, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

		if (!snapElements.snapshotItem(0)) { return; }  // end execution if not found

		for (var i = 0, len = snapElements.snapshotLength; i < len; i++) {
			var node = snapElements.snapshotItem(i);
			// check if it contains the keywords
			if (pat.test(node.nodeValue)) {
				// check that it isn't already highlighted
				if (node.className != "highlight" && node.parentNode.className != "highlight") {
					// create an element, replace the text node with an element
					var sp = span.cloneNode(true);
					sp.innerHTML = node.nodeValue.replace(pat, '<span class="highlight" title="highlight">$1</span>');
					node.parentNode.replaceChild(sp, node);
				}
			}
		}
	}
	doHighlight();

	function promptHighlight(){
		text=prompt("请输入需要高亮的关键词")
		if(text){
			keywords=[text]
			localStorage.setItem("highlight", JSON.stringify(keywords))
			doHighlight()
		}
	}
	document.promptHighlight= promptHighlight
})();