☰

read_log

read log

  1. // ==UserScript==
  2. // @name         read_log
  3. // @include      *wikipedia*
  4. // @supportURL   https://github.com/sxlgkxk/browser_script/issues
  5. // @version      0.3
  6. // @description  read log
  7. // @namespace    http://sxlgkxk.github.io/
  8. // @author       sxlgkxk
  9. // @icon         http://sxlgkxk.github.io/im/avatar.jpg
  10. // @license      MIT
  11. // @grant        GM_getValue
  12. // @grant        GM_setValue
  13. // @grant        GM_xmlhttpRequest
  14. // ==/UserScript==
  15.  
  16. (function () {
  17.  
  18. 	let blockWidth = 10
  19. 	let blockPadding = 3
  20. 	// weeksCount=53
  21. 	let weeksCount = 30 // 393, 94
  22. 	let canvasWidth = (blockWidth + blockPadding) * weeksCount + blockPadding
  23. 	let canvasHeight = (blockWidth + blockPadding) * 7 + blockPadding
  24.  
  25. 	//-------------------------------- common functions --------------------------------
  26.  
  27. 	function addScript(src) {
  28. 		let scripts_dom = document.createElement('script');
  29. 		scripts_dom.src = src;
  30. 		scripts_dom.type = 'text/javascript';
  31. 		document.getElementsByTagName('head')[0].appendChild(scripts_dom);
  32. 	}
  33. 	addScript('https://unpkg.com/axios/dist/axios.min.js')
  34.  
  35. 	function getScrollPercent() {
  36. 		let h = document.documentElement,
  37. 			b = document.body,
  38. 			st = 'scrollTop',
  39. 			sh = 'scrollHeight';
  40. 		return ((h[st] || b[st]) / ((h[sh] || b[sh])) * 100).toFixed(2);
  41. 	}
  42.  
  43. 	function getGistToken() {
  44. 		let gist_token = localStorage.getItem('gist_token')
  45. 		if (gist_token != null && gist_token.length > 10) {
  46. 			gist_token = prompt('gist_token?')
  47. 			if (gist_token) {
  48. 				localStorage.setItem('gist_token', gist_token)
  49. 			}
  50. 		}
  51. 		return gist_token
  52. 	}
  53.  
  54. 	async function gist_get_async(gist_id, filename) {
  55. 		// gist_get_async("cfa70a44bb181edbb2be19dacbcf6808", "read_log.json").then((content)=>{console.log(content)})
  56. 		let response = await axios.get("https://api.github.com/gists/" + gist_id)
  57. 		let data = response.data
  58. 		let content = data.files[filename].content
  59. 		return content
  60. 	}
  61.  
  62. 	async function gist_set_async(gist_id, filename, content) {
  63. 		// gist_set_async("cfa70a44bb181edbb2be19dacbcf6808", "read_log.json", "[]").then((content)=>{console.log(content)})
  64. 		let files = {}
  65. 		files[filename] = { "content": content }
  66. 		let gist_token = getGistToken()
  67. 		return await axios.patch("https://api.github.com/gists/" + gist_id, { files: files }, { headers: { Authorization: "token " + gist_token } })
  68. 	}
  69.  
  70. 	function addStyle(html) {
  71. 		let style = document.createElement("div")
  72. 		document.body.before(style)
  73. 		style.innerHTML = `<style>` + html + `</style>`
  74. 	}
  75.  
  76. 	//-------------------------------- code snippets --------------------------------
  77.  
  78. 	addStyle(`
  79. 		#wpmArea{
  80. 			position: absolute;
  81. 			right: 10px;
  82. 			left:10px;
  83. 			background-color: rgba(255, 255, 255, 0.2);
  84. 		}
  85. 		#heatmap{
  86. 			background-color: #0d1117;
  87. 			margin: 0 auto;
  88. 			display:block;
  89. 		}
  90. 		table#history_table {
  91. 			border-collapse: collapse;
  92. 			width: 100%;
  93. 		}
  94. 		#history_table th, #history_table td {
  95. 			text-align: left;
  96. 			padding: 8px;
  97. 		}
  98. 		button.pagiBtn{
  99. 			background-color: #333;
  100. 			color: #fff;
  101. 			margin: 4px;
  102. 			padding-left: 15px;
  103. 			padding-right: 15px;
  104. 			padding-top: 9px;
  105. 			padding-bottom: 9px;
  106. 		}
  107. 	`)
  108.  
  109. 	for (let i = 1; i <= 31; i++) {
  110. 		addStyle(`td.historyDay` + i + `{background-color: rgba(` + Math.floor(Math.random() * 255) + `,` + Math.floor(Math.random() * 255) + `,` + Math.floor(Math.random() * 255) + `, 0.5);}`)
  111. 	}
  112.  
  113. 	function getColor(count) {
  114. 		let colors = [
  115. 			"#161b22",
  116. 			"#cef1dd",
  117. 			"#9ee3bb",
  118. 			"#6dd499",
  119. 			"#3cc677",
  120. 			"#33a865",
  121. 			"#2a8b53",
  122. 			"#216d41"
  123. 		]
  124. 		let max_count = 60 * 8
  125. 		return colors[Math.ceil(Math.min(count / max_count, 1) * (colors.length - 1))]
  126. 	}
  127.  
  128. 	function setBlock(x, y, count, ctx) {
  129. 		ctx.fillStyle = getColor(count);
  130. 		ctx.fillRect(x * (blockWidth + blockPadding) - blockWidth, y * (blockWidth + blockPadding) - blockWidth, blockWidth, blockWidth);
  131. 	}
  132.  
  133. 	function getRegularWeekday(date) {
  134. 		let weekday = date.getDay()
  135. 		return weekday ? weekday : 7
  136. 	}
  137.  
  138. 	function sum(array) {
  139. 		return array.reduce((partialSum, a) => partialSum + a, 0)
  140. 	}
  141.  
  142. 	function refreshHeatmap() {
  143. 		let log = localStorage.getItem('readlog')
  144. 		log = log ? JSON.parse(log) : {}
  145.  
  146. 		let now = new Date();
  147. 		let now1 = new Date(now - getRegularWeekday(now) * 3600 * 24 * 1000)
  148.  
  149. 		let canvas = document.querySelector('canvas#heatmap')
  150. 		let ctx = canvas.getContext('2d');
  151. 		ctx.clearRect(0, 0, canvas.width, canvas.height);
  152.  
  153. 		for (let i = 0; i < 365; i++) {
  154. 			let date = new Date(now - i * 3600 * 24 * 1000)
  155. 			let weekday = getRegularWeekday(date)
  156. 			let y = weekday
  157.  
  158. 			let date1 = new Date(date - getRegularWeekday(date) * 3600 * 24 * 1000)
  159. 			let x = weeksCount - (now1 - date1) / 1000 / 3600 / 24 / 7
  160.  
  161. 			let dateStr = getDateStr(date)
  162. 			let uuid = getUuid()
  163. 			let data = log[dateStr]
  164. 			let count = data ? sum(Object.values(data)) : 0
  165.  
  166. 			setBlock(x, y, count, ctx)
  167. 		}
  168. 	}
  169.  
  170. 	function getUuid() {
  171. 		let uuid = localStorage.getItem('uuid')
  172. 		if (!uuid) {
  173. 			uuid = String(Math.random()).substring(2, 4)
  174. 			localStorage.setItem('uuid', uuid)
  175. 		}
  176. 		return uuid
  177. 	}
  178.  
  179. 	function getHistoryDateStr(date = null) {
  180. 		date = new Date(date)
  181. 		let month = String(date.getMonth() + 1)
  182. 		let day = String(date.getDate())
  183. 		return month + "." + day
  184. 	}
  185.  
  186. 	function getDateStr(date = null) {
  187. 		date = date ? date : new Date()
  188. 		let year = String(date.getFullYear()).substring(2, 4)
  189. 		let month = String(date.getMonth() + 1).padStart(2, '0')
  190. 		let day = String(date.getDate()).padStart(2, '0')
  191. 		return year + month + day
  192. 	}
  193.  
  194. 	function updateLocalLog(uuid, date) {
  195. 		let log = localStorage.getItem('readlog')
  196. 		log = log ? JSON.parse(log) : {}
  197. 		if (!log[date]) log[date] = {}
  198. 		if (!log[date][uuid]) log[date][uuid] = 0
  199. 		log[date][uuid] += 1
  200. 		localStorage.setItem('readlog', JSON.stringify(log))
  201. 	}
  202.  
  203. 	function updateGist() {
  204. 		let gist_id = "cfa70a44bb181edbb2be19dacbcf6808"
  205. 		let filename = "read_log.json"
  206.  
  207. 		let log = localStorage.getItem('readlog')
  208. 		log = log ? JSON.parse(log) : {}
  209.  
  210. 		// pull
  211. 		gist_get_async(gist_id, filename).then((content) => {
  212. 			let remoteLog = JSON.parse(content)
  213. 			for (let [date, data] of Object.entries(remoteLog)) {
  214. 				if (!log[date]) {
  215. 					log[date] = data;
  216. 					continue
  217. 				}
  218. 				for (let [uuid, count] of Object.entries(data)) {
  219. 					if (uuid != getUuid()) {
  220. 						log[date][uuid] = count
  221. 					}
  222. 				}
  223. 			}
  224.  
  225. 			// push
  226. 			gist_set_async(gist_id, filename, JSON.stringify(log)).then((response) => { alert("update success") })
  227. 			localStorage.setItem('readlog', JSON.stringify(log))
  228.  
  229. 			refreshHeatmap()
  230. 		})
  231. 	}
  232.  
  233. 	//-------------------------------- statistics --------------------------------
  234.  
  235. 	// chapter_dom = document.querySelector("div.chapter-detail")
  236. 	// if (!chapter_dom) chapter_dom = document.body
  237. 	// heatmap_panel = document.createElement("div")
  238. 	// chapter_dom.before(heatmap_panel)
  239. 	// heatmap_panel.innerHTML = `<canvas id="heatmap" width="` + canvasWidth + `" height="` + canvasHeight + `"></canvas>`
  240.  
  241. 	// canvas = document.querySelector("canvas#heatmap")
  242. 	// canvas.onclick = updateGist
  243.  
  244. 	// refreshHeatmap()
  245.  
  246. 	//-------------------------------- wpm --------------------------------
  247.  
  248. 	// function log(){
  249. 	// 	addLine()
  250.  
  251. 	// 	uuid=getUuid()
  252. 	// 	date=getDateStr()
  253. 	// 	updateLocalLog(uuid, date)
  254.  
  255. 	// 	lastGistUpdateDate=localStorage.getItem('lastGistUpdateDate')
  256. 	// 	if (!lastGistUpdateDate || lastGistUpdateDate!=date){
  257. 	// 		updateGist()
  258. 	// 		localStorage.setItem('lastGistUpdateDate', date)
  259. 	// 	}
  260.  
  261. 	// 	refreshHeatmap()
  262. 	// }
  263. 	// document.log=log
  264.  
  265. 	// setInterval(()=>{document.log()},1000*60)
  266. 	// refreshHeatmap()
  267.  
  268. 	addStyle(`
  269. 		canvas#wpmCanvas {
  270. 			background-color: #333;
  271. 			position: fixed;
  272. 			bottom: 0px;
  273. 			right: 100px;
  274. 			width: 50px;
  275. 			height: 50px;
  276. 			opacity: 0.8;
  277. 			z-index: 3000;
  278. 		}
  279. 	`)
  280. 	// wpm_dom = document.createElement('div')
  281. 	// document.body.before(wpm_dom)
  282. 	// wpm_dom.innerHTML = `<canvas id="wpmCanvas" width="50px" height="50px"></canvas>`
  283. 	// let wpmQueue=[0]
  284.  
  285. 	function drawWpmCanvas(){
  286. 		// console.log('draw')
  287. 		let canvas = document.querySelector("canvas#wpmCanvas")
  288. 		let ctx = canvas.getContext('2d');
  289. 		ctx.clearRect(0, 0, canvas.width, canvas.height);
  290.  
  291. 		// lines
  292. 		ctx.beginPath();
  293. 		ctx.moveTo(50,50-50*Math.min(wpmQueue[wpmQueue.length-1]/500, 1));
  294. 		for(let i=wpmQueue.length-1;i>=0;i--){
  295. 			let y=50*Math.min(wpmQueue[i]/500,1);
  296. 			let x=50-(wpmQueue.length-1-i)*5-5;
  297. 			ctx.lineTo(x, 50-y);
  298. 			// console.log(x, y)
  299. 		}
  300. 		ctx.strokeStyle = "white";
  301. 		ctx.stroke();
  302.  
  303. 		// draw wpm number
  304. 		ctx.font = "16px Arial bold";
  305. 		ctx.fillStyle = "#9aa83a";
  306. 		ctx.fillText(wpmQueue[wpmQueue.length-1], 5, 21);
  307.  
  308. 	}
  309. 	// drawWpmCanvas()
  310.  
  311. 	// let wpmArea = document.createElement("div")
  312. 	// wpmArea.id="wpmArea"
  313. 	// wpmArea.classList.add("wpmArea")
  314. 	// wpmArea.style.top = "0px"
  315. 	// wpmArea.style.height = "0px"
  316. 	// document.body.before(wpmArea)
  317. 	let forceUpdateWpmArea=false;
  318. 	
  319. 	let lastStartTime=new Date().getTime()
  320. 	function updateWpmArea(){
  321. 		let _lineStart=parseInt(wpmArea.style.top.replace("px",""))
  322. 		let _lineEnd=_lineStart+parseInt(wpmArea.style.height.replace("px",""))
  323.  
  324. 		let lineEnd=document.documentElement["scrollTop"]+window.innerHeight*0.2
  325. 		let lineStart=Math.min(_lineEnd, lineEnd)-1;
  326.  
  327. 		// queue push
  328. 		if(new Date().getTime()-lastStartTime>1000*60 || forceUpdateWpmArea){
  329. 			forceUpdateWpmArea=false;
  330. 			lastStartTime=new Date().getTime()
  331. 			wpmArea.style.top=lineStart+"px"
  332. 			wpmQueue.push(wpmArea[wpmQueue.length-1])
  333. 		}
  334. 		wpmArea.style.height=(lineEnd-_lineStart)+"px"
  335.  
  336. 		let words_cnt=countWords(_lineStart, lineEnd)
  337. 		// console.log(_lineStart, lineEnd, words_cnt)
  338. 		wpmQueue[wpmQueue.length-1]=Math.round(words_cnt/((new Date().getTime()-lastStartTime)/1000/60))
  339. 		// drawWpmCanvas()
  340. 	}
  341. 	// let wpmInterval=setInterval(updateWpmArea, 1000)
  342.  
  343. 	// document.querySelector('canvas#wpmCanvas').onclick = function(){
  344. 	// 	forceUpdateWpmArea=true;
  345. 	// 	updateWpmArea()
  346. 	// 	updateWpmArea()
  347. 	// }
  348.  
  349. 	function countWords(lineStart, lineEnd){
  350. 		let items=document.querySelector('div.chapterContent')
  351. 		if(!items) return 0;
  352. 		items=items.querySelectorAll('p')
  353. 		let words_cnt=0;
  354. 		for(let item of items){
  355. 			let top=item.offsetTop;
  356. 			let text=item.innerText;
  357. 			let height=item.offsetHeight;
  358. 			let _words_cnt=text.split(" ").length;
  359. 			let end=top+height;
  360.  
  361. 			if(lineStart > end || lineEnd < top) continue;
  362.  
  363. 			if(lineStart<top && lineEnd>end){
  364. 				words_cnt+=_words_cnt;
  365. 				// console.log("1: "+text)
  366. 			}else if(lineStart<top && lineEnd>top){
  367. 				words_cnt+=_words_cnt*(lineEnd-top)/height;
  368. 				// console.log("2: "+text)
  369. 			}else if(lineStart<end && lineEnd>end){
  370. 				words_cnt+=_words_cnt*(end-lineStart)/height;
  371. 				// console.log("3: "+text)
  372. 			}else if(lineStart>top && lineEnd<end){
  373. 				words_cnt+=_words_cnt*(lineEnd-lineStart)/height;
  374. 				// console.log("4: "+text)
  375. 			}
  376. 		}
  377. 		return Math.round(words_cnt)
  378. 	}
  379. 	let cnt=countWords(0, 100000)
  380. 	console.log(cnt)
  381.  
  382. 	//-------------------------------- history --------------------------------
  383.  
  384. 	let chapter_dom = document.querySelector("div.chapter-detail")
  385. 	if (!chapter_dom) chapter_dom = document.body
  386. 	let history_panel = document.createElement("div")
  387. 	chapter_dom.before(history_panel)
  388. 	history_panel.innerHTML = `<div>
  389. 	<table id="history_table">
  390. 	</table>
  391. 	<button id="history_prev" class="pagiBtn">\<</button>
  392. 	<button id="history_next" class="pagiBtn">\></button>
  393. 	<input id="history_input" type="text" value="1" size="3">
  394. 	<button id="history_go" class="pagiBtn">go</button>
  395. </div>`
  396.  
  397. 	let history_data = localStorage.getItem('history_data')
  398. 	history_data = history_data ? JSON.parse(history_data) : {}
  399. 	history_data[location.href] = { date: new Date().getTime(), title: document.title.replace(" - Wikipedia", ''), url: location.href }
  400. 	localStorage.setItem('history_data', JSON.stringify(history_data))
  401. 	let history_list = Object.values(history_data).sort((a, b) => { return b.date - a.date })
  402.  
  403. 	function setHistoryTable(page) {
  404. 		page = page ? page : 1
  405. 		let history_pageSize = 10
  406. 		let history_table = document.querySelector("#history_table")
  407. 		history_table.innerHTML = ""
  408.  
  409. 		let start = (page - 1) * history_pageSize
  410. 		let end = Math.min(start + history_pageSize, history_list.length)
  411.  
  412. 		for (let i = start; i < end; i++) {
  413. 			let day = new Date(history_list[i].date).getDate()
  414. 			history_table.innerHTML += `<tr>
  415. 			<td class="historyDay`+ day + `">` + getHistoryDateStr(history_list[i].date) + `</td>
  416. 			<td><a href="`+ history_list[i].url + `">` + history_list[i].title + `</a></td>
  417. 		</tr>`
  418. 		}
  419. 	}
  420. 	setHistoryTable(1)
  421.  
  422. 	document.querySelector('#history_prev').onclick = () => {
  423. 		let history_page = document.querySelector('#history_input').value;
  424. 		setHistoryTable(--history_page);
  425. 		document.querySelector('#history_input').value = history_page
  426. 	}
  427. 	document.querySelector('#history_next').onclick = () => {
  428. 		let history_page = document.querySelector('#history_input').value;
  429. 		setHistoryTable(++history_page);
  430. 		document.querySelector('#history_input').value = history_page
  431. 	}
  432.  
  433. 	document.querySelector('#history_go').onclick = () => {
  434. 		let history_page = document.querySelector('#history_input').value;
  435. 		setHistoryTable(history_page);
  436. 	}
  437.  
  438. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址