☰

lorify-ng

Юзерскрипт для сайта linux.org.ru поддерживающий загрузку комментариев через технологию WebSocket, а так же уведомления об ответах через системные оповещения.

  1. // ==UserScript==
  2. // @name        lorify-ng
  3. // @description Юзерскрипт для сайта linux.org.ru поддерживающий загрузку комментариев через технологию WebSocket, а так же уведомления об ответах через системные оповещения.
  4. // @namespace   https://github.com/OpenA
  5. // @include     https://www.linux.org.ru/*
  6. // @include     http://www.linux.org.ru/*
  7. // @version     2.0.7
  8. // @grant       none
  9. // @homepageURL https://www.linux.org.ru/forum/talks/12371302
  10. // @icon        https://rawgit.com/OpenA/lorify-ng/master/icons/penguin-32.png
  11. // @run-at      document-start
  12. // ==/UserScript==
  13.  
  14. const USER_SETTINGS = {
  15. 	'Realtime Loader': true,
  16. 	'CSS3 Animation' : true,
  17. 	'Delay Open Preview': 0,
  18. 	'Delay Close Preview': 800,
  19. 	'Desktop Notification': true
  20. }
  21.  
  22. const pagesCache    = new Object;
  23. const ResponsesMap  = new Object;
  24. const CommentsCache = new Object;
  25. const LoaderSTB     = _setup('div', { html: '<div class="page-loader"></div>' });
  26. const LOR           = parseLORUrl(location.pathname);
  27. const [,TOKEN = ''] = document.cookie.match(/CSRF_TOKEN="?([^;"]*)/);
  28. const Timer         = {
  29. 	// clear timer by name
  30. 	clear: function(name) {
  31. 		clearTimeout(this[name]);
  32. 	},
  33. 	// set/replace timer by name
  34. 	set: function(name, func, t = 50) {
  35. 		this.clear(name);
  36. 		this[name] = setTimeout(func, USER_SETTINGS['Delay '+ name] || t);
  37. 	}
  38. }
  39. document.documentElement.append(
  40. 	_setup('script', { text: '('+ startRWS.toString() +')(window)', id: 'start-rws'}),
  41. 	_setup('style' , { text: `
  42. 		.newadded  { border: 1px solid #006880; }
  43. 		.msg-error { color: red; font-weight: bold; }
  44. 		.broken    { color: inherit !important; cursor: default; }
  45. 		.response-block, .response-block > a { padding: 0 3px !important; }
  46. 		.pushed { position: relative; }
  47. 		.pushed:after {
  48. 			content: attr(push);
  49. 			position: absolute;
  50. 			font-size: 12px;
  51. 			top: -6px;
  52. 			color: white;
  53. 			background: #3d96ab;
  54. 			line-height: 12px;
  55. 			padding: 3px;
  56. 			border-radius: 5px;
  57. 		}
  58. 		.deleted > .title:before {
  59. 			content: "Сообщение удалено";
  60. 			font-weight: bold;
  61. 			display: block;
  62. 		}
  63. 		.page-loader {
  64. 			border: 5px solid #f3f3f3;
  65. 			-webkit-animation: spin 1s linear infinite;
  66. 			animation: spin 1s linear infinite;
  67. 			border-top: 5px solid #555;
  68. 			border-radius: 50%;
  69. 			width: 50px;
  70. 			height: 50px;
  71. 			margin: 500px auto;
  72. 		}
  73. 		.terminate {
  74. 			animation-duration: .4s;
  75. 			position: relative;
  76. 		}
  77. 		.preview {
  78. 			animation-duration: .3s;
  79. 			position: absolute;
  80. 			z-index: 300;
  81. 			border: 1px solid grey;
  82. 		}
  83. 		.slide-down {
  84. 			max-height: 9999px;
  85. 			overflow-y: hidden;
  86. 			animation: slideDown 1.5s ease-in-out;
  87. 		}
  88. 		.slide-up {
  89. 			max-height: 0;
  90. 			overflow-y: hidden;
  91. 			animation: slideUp 1s ease-out;
  92. 		}
  93. 		
  94. 		@-webkit-keyframes slideDown { from { max-height: 0; } to { max-height: 3000px; } }
  95. 		@keyframes slideDown { from { max-height: 0; } to { max-height: 3000px; } }
  96. 		
  97. 		@-webkit-keyframes slideUp { from { max-height: 2000px; } to { max-height: 0; } }
  98. 		@keyframes slideUp { from { max-height: 2000px; } to { max-height: 0; } }
  99. 		
  100. 		@-webkit-keyframes toHide { from { opacity: 1; } to { opacity: 0; } }
  101. 		@keyframes toHide { from { opacity: 1; } to { opacity: 0; } }
  102. 		
  103. 		@-webkit-keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  104. 		@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  105. 		
  106. 		@-webkit-keyframes slideToShow { 0% { right: 100%; opacity: 0; } 100% { right: 0%; opacity: 1; } }
  107. 		@keyframes slideToShow { 0% { right: 100%; opacity: 0; } 100% { right: 0%; opacity: 1; } }
  108. 		
  109. 		@-webkit-keyframes slideToShow-reverse { 0% { left: 100%; opacity: 0; } 100% { left: 0%; opacity: 1; } }
  110. 		@keyframes slideToShow-reverse { 0% { left: 100%; opacity: 0; } 100% { left: 0%; opacity: 1; } }
  111. `}));
  112.  
  113. const Navigation = {
  114. 	
  115. 	pagesCount: 1,
  116. 	
  117. 	bar: _setup('div', { class: 'nav', html: `
  118. 		<a class="page-number prev" href="#prev">←</a>
  119. 		<a class="page-number next" href="#next">→</a>
  120. 	`, onclick: navBarHandle }),
  121. 	
  122. 	addToBar: function(pNumEls) {
  123. 		
  124. 		this.pagesCount = pNumEls.length - 2;
  125. 		
  126. 		var i = this.bar.children.length - 1;
  127. 		var pageLinks = '';
  128. 		
  129. 		for (; i <= this.pagesCount; i++) {
  130. 			let lp = pNumEls[i].pathname || LOR.path +'#comments';
  131. 			pageLinks += '\t\t<a id="page_'+ (i - 1) +'" class="page-number" href="'+ lp +'">'+ i +'</a>\n';
  132. 		}
  133. 		this.bar.lastElementChild.insertAdjacentHTML('beforebegin', pageLinks);
  134. 		
  135. 		if (LOR.page === 0) {
  136. 			this.bar.firstElementChild.classList.add('broken');
  137. 			this.bar.lastElementChild.href = this.bar.children['page_'+ (LOR.page + 1)].href;
  138. 		} else 
  139. 		if (LOR.page === this.pagesCount - 1) {
  140. 			this.bar.lastElementChild.classList.add('broken');
  141. 			this.bar.firstElementChild.href = this.bar.children['page_'+ (LOR.page - 1)].href;
  142. 		}
  143. 		this.bar.children['page_'+ LOR.page].className = 'page-number broken';
  144. 		
  145. 		return this.bar;
  146. 	}
  147. }
  148.  
  149. function navBarHandle(e) {
  150. 	e.target.classList.contains('broken') && e.preventDefault();
  151. }
  152.  
  153. _setup(window, null, {
  154. 	dblclick: () => {
  155. 		var newadded = document.querySelectorAll('.newadded');
  156. 		newadded.forEach(nwc => nwc.classList.remove('newadded'));
  157. 		Tinycon.setBubble(
  158. 			(Tinycon.index -= newadded.length)
  159. 		);
  160. 	}
  161. });
  162.  
  163. _setup(document, null, {
  164. 	
  165. 	'DOMContentLoaded': function onDOMReady() {
  166. 		
  167. 		this.removeEventListener('DOMContentLoaded', onDOMReady);
  168. 		this.getElementById('start-rws').remove();
  169. 		
  170. 		appInit();
  171. 		
  172. 		if (!LOR.topic) {
  173. 			return;
  174. 		}
  175. 		
  176. 		Tinycon.index = 0;
  177. 		sessionStorage['rtload'] = +USER_SETTINGS['Realtime Loader'];
  178. 		
  179. 		const pagesElements = this.querySelectorAll('.messages > .nav > .page-number');
  180. 		const comments      = this.getElementById('comments');
  181. 		
  182. 		if (pagesElements.length) {
  183. 			
  184. 			let bar = Navigation.addToBar(pagesElements);
  185. 			let nav = pagesElements[0].parentNode;
  186. 			
  187. 			nav.parentNode.replaceChild(bar, nav);
  188. 			
  189. 			_setup(comments.querySelector('.nav'), { html: bar.innerHTML, onclick: navBarHandle });
  190. 		}
  191. 		pagesCache[LOR.page] = comments;
  192. 		
  193. 		addToCommentsCache( comments.querySelectorAll('.msg[id^="comment-"]') );
  194. 	},
  195. 	
  196. 	'webSocketData': onWSData
  197. });
  198.  
  199. function onWSData({ detail }) {
  200. 	// Get an HTML containing the comment
  201. 	fetch(detail.path +'?cid='+ detail[0] +'&skipdeleted=true', { credentials: 'same-origin' }).then(
  202. 		response => {
  203. 			if (response.ok) {
  204. 				const { page } = parseLORUrl(response.url);
  205. 				const  topic   = document.getElementById('topic-'+ LOR.topic);
  206. 				response.text().then(html => {
  207. 					
  208. 					const comms = getCommentsContent(html);
  209. 					
  210. 					comms.querySelectorAll('a[itemprop="replyToUrl"]').forEach(a => { a.onclick = toggleForm });
  211. 					
  212. 					if (page in pagesCache) {
  213. 					
  214. 						let parent = pagesCache[page];
  215. 						
  216. 						parent.querySelectorAll('.msg[id^="comment-"]').forEach(msg => {
  217. 							if (msg.id in comms.children) {
  218. 								var cand = comms.children[msg.id],
  219. 								    sign = cand.querySelector('.sign_more > time');
  220. 								if (sign && sign.dateTime !== (msg['last_modifed'] || {}).dateTime) {
  221. 									msg['last_modifed']    = sign;
  222. 									msg['edit_comment']    = cand.querySelector('.reply a[href^="/edit_comment"]');
  223. 									msg['response_block'] && cand.querySelector('.reply > ul')
  224. 										.appendChild(msg['response_block']);
  225. 									
  226. 									_setup(cand.querySelector('a[itemprop="replyToUrl"]'), { onclick: toggleForm })
  227. 									
  228. 									for (var R = msg.children.length; 0 < (R--);) {
  229. 										parent.replaceChild(cand.children[R], parent.children[R]);
  230. 									}
  231. 								} else if (msg['edit_comment']) {
  232. 									msg['edit_comment'].hidden = !cand.querySelector('.reply a[href^="/edit_comment"]');
  233. 								}
  234. 							} else {
  235. 								_setup(msg, { id: undefined, class: 'msg deleted' });
  236. 							}
  237. 						});
  238. 						
  239. 						for (var i = 0, arr = []; i < detail.length; i++) {
  240. 						
  241. 							let comment = _setup(comms.children['comment-'+ detail[i]], { class: 'msg newadded' });
  242. 							
  243. 							if (!comment) {
  244. 								detail.splice(0, i);
  245. 								onWSData({ detail });
  246. 								break;
  247. 							}
  248. 							arr.push( parent.appendChild(comment) );
  249. 						}
  250. 						Tinycon.index += i;
  251. 						if (LOR.page !== page) {
  252. 							let push = i + (
  253. 								Number ( Navigation.bar.children['page_'+ page].getAttribute('push') ) || 0
  254. 							);
  255. 							
  256. 							_setup(      Navigation.bar.children['page_'+ page], { class: 'page-number pushed', push: push });
  257. 							_setup( parent.querySelector('.nav > #page_'+ page), { class: 'page-number pushed', push: push });
  258. 						}
  259. 						addToCommentsCache( arr );
  260. 					} else {
  261. 						pagesCache[page] = comms;
  262. 						let nav = comms.querySelector('.nav');
  263. 						let bar = Navigation.addToBar(nav.children);
  264. 						let msg = comms.querySelectorAll('.msg[id^="comment-"]');
  265. 						
  266. 						bar.children['page_'+ page].setAttribute('push', msg.length);
  267. 						bar.children['page_'+ page].classList.add('pushed');
  268. 						if (!bar.parentNode) {
  269. 							let rt = document.getElementById('realtime');
  270. 							rt.parentNode.insertBefore(bar, rt.nextSibling);
  271. 							pagesCache[LOR.page].insertBefore(_setup(bar.cloneNode(true), { onclick: navBarHandle }),
  272. 								pagesCache[LOR.page].firstElementChild.nextSibling);
  273. 						} else {
  274. 							_setup(pagesCache[LOR.page].querySelector('.nav'), {
  275. 								html: bar.innerHTML, onclick: navBarHandle });
  276. 						}
  277. 						addToCommentsCache( msg );
  278. 						Tinycon.index += msg.length;
  279. 					}
  280. 					Tinycon.setBubble(Tinycon.index);
  281. 					history.replaceState(null, document.title, location.pathname);
  282. 				});
  283. 			} else {
  284. 				
  285. 			}
  286. 		});
  287. }
  288.  
  289. function startRWS(win) {
  290. 	if ('WebSocket' in win || 'MozWebSocket' in win && (win.WebSocket = MozWebSocket)) {
  291. 		var timer, detail = new Array(0);
  292. 		Object.defineProperty(win, 'startRealtimeWS', {
  293. 			value: function(topic, path, cid, wss) {
  294. 				var wS = new WebSocket(wss +'ws'),
  295. 				    qA = false;
  296. 				wS.onmessage = function(e) {
  297. 					detail.push( (cid = e.data) );
  298. 					clearTimeout( timer );
  299. 					timer = setTimeout(function() {
  300. 						var realtime = document.getElementById('realtime');
  301. 						if (sessionStorage['rtload'] == '1') {
  302. 							detail.path = path;
  303. 							document.dispatchEvent(
  304. 								new CustomEvent('webSocketData', { detail })
  305. 							);
  306. 							detail = new Array(0);
  307. 							realtime.style.display = 'none';
  308. 						} else {
  309. 							realtime.innerHTML = 'Был добавлен новый комментарий.\n<a href="'+
  310. 								path + '?cid=' + cid +'">Обновить.</a>';
  311. 							realtime.style.display = null;
  312. 						}
  313. 					}, 2e3);
  314. 				}
  315. 				wS.onopen = function(e) {
  316. 					wS.send(topic + (cid == 0 ? '' : ' '+ cid));
  317. 				}
  318. 				wS.onclose = function(e) {
  319. 					setTimeout(function() {
  320. 						startRealtimeWS(topic, path, cid, wss)
  321. 					}, 5e3);
  322. 				}
  323. 			}
  324. 		});
  325. 	}
  326. }
  327.  
  328. function addToCommentsCache(els) {
  329. 	
  330. 	for (var i = 0; i < els.length; i++) {
  331. 		
  332. 		let el  = els[i],
  333. 			cid = el.id.replace('comment-', '');
  334. 		
  335. 		el['last_modifed'] = el.querySelector('.sign_more > time');
  336. 		el['edit_comment'] = el.querySelector('.reply a[href^="/edit_comment"]');
  337. 		
  338. 		addPreviewHandler(
  339. 			(CommentsCache[cid] = el)
  340. 		);
  341. 		
  342. 		let acid = el.querySelector('.title > a[href*="cid="]');
  343. 		
  344. 		if (acid) {
  345. 			// Extract reply comment ID from the 'search' string
  346. 			let num = acid.search.match(/cid=(\d+)/)[1];
  347. 			let url = el.ownerDocument.evaluate('//*[@class="reply"]/ul/li/a[contains(text(), "Ссылка")]/@href',el,null,2,null);
  348. 			// Write special attributes
  349. 			_setup(acid, { class: 'link-pref', cid: num });
  350. 			// Create new response-map for this comment
  351. 			if (!(num in ResponsesMap)) {
  352. 				ResponsesMap[num] = new Array(0);
  353. 			}
  354. 			ResponsesMap[num].push({
  355. 				text: (el.querySelector('a[itemprop="creator"]') || { textContent: 'anonymous' }).textContent,
  356. 				href: url.stringValue,
  357. 				cid : cid
  358. 			});
  359. 		}
  360. 	}
  361. 	
  362. 	for (var cid in ResponsesMap) {
  363. 		if ( cid in CommentsCache ) {
  364. 			
  365. 			let comment = CommentsCache[cid];
  366. 			
  367. 			if(!comment['response_block']) {
  368. 				comment['response_block'] = comment.querySelector('.reply > ul')
  369. 				.appendChild( _setup('li', { class: 'response-block', text: 'Ответы:' }) );
  370. 			}
  371. 			
  372. 			ResponsesMap[cid].forEach(attrs => {
  373. 				attrs['class' ] = 'link-pref';
  374. 				attrs['search'] = '?cid='+ attrs.cid;
  375. 				comment['response_block'].appendChild( _setup('a', attrs) );
  376. 			});
  377. 			
  378. 			delete ResponsesMap[cid];
  379. 		}
  380. 	}
  381. }
  382.  
  383. function addPreviewHandler(comment) {
  384. 	
  385. 	comment.addEventListener('mouseover', function(e) {
  386. 		switch (e.target.classList[0]) {
  387. 			case 'link-pref':
  388. 				Timer.clear('Close Preview');
  389. 				Timer.set('Open Preview', () => showPreview(e));
  390. 				e.preventDefault();
  391. 		}
  392. 	});
  393. 	
  394. 	comment.addEventListener('mouseout', function(e) {
  395. 		switch (e.target.classList[0]) {
  396. 			case 'link-pref':
  397. 				Timer.clear('Open Preview');
  398. 		}
  399. 	});
  400. 	
  401. 	comment.addEventListener('click', function(e) {
  402. 		switch (e.target.classList[0]) {
  403. 			case 'link-pref':
  404. 				let view = document.getElementById('comment-'+ e.target.getAttribute('cid'));
  405. 				if (view) {
  406. 					view.scrollIntoView({ block: 'start', behavior: 'smooth' });
  407. 					e.preventDefault();
  408. 				}
  409. 		}
  410. 	});
  411. }
  412.  
  413. function getCommentsContent(html) {
  414. 	// Create new DOM tree
  415. 	const old = document.getElementById('topic-'+ LOR.topic);
  416. 	const doc = new DOMParser().parseFromString(html, 'text/html'),
  417. 	    topic = doc.getElementById('topic-'+ LOR.topic),
  418. 	    comms = doc.getElementById('comments');
  419. 	// Remove banner scripts
  420. 	comms.querySelectorAll('script').forEach(s => s.remove());
  421. 	// Replace topic if modifed
  422. 	if (old.textContent !== topic.textContent) {
  423. 		tpc.parentNode.replaceChild(topic, old);
  424. 		topic_memories_form_setup(0, true, LOR.topic, TOKEN);
  425. 		topic_memories_form_setup(0, false, LOR.topic, TOKEN);
  426. 		_setup(topic.querySelector('a[href="comment-message.jsp?topic='+ LOR.topic +'"]'), { onclick: toggleForm })
  427. 	}
  428. 	return comms;
  429. }
  430.  
  431. function showPreview(e) {
  432. 	
  433. 	// Get comment's ID from custom attribute 
  434. 	var commentID = e.target.getAttribute('cid'),
  435. 	    commentEl;
  436.  
  437. 	// Let's reduce an amount of GET requests
  438. 	// by searching a cache of comments first
  439. 	if (commentID in CommentsCache) {
  440. 		commentEl = document.getElementById('preview-'+ commentID);
  441. 		if (!commentEl) {
  442. 			// Without the 'clone' call we'll just move the original comment
  443. 			commentEl = CommentsCache[commentID].cloneNode(
  444. 				(e.isNew = true)
  445. 			);
  446. 		}
  447. 	} else {
  448. 		// Add Loading Process stub
  449. 		commentEl = _setup('article', { class: 'msg preview', text: 'Загрузка...'});
  450. 		// Get an HTML containing the comment
  451. 		fetch(e.target.href, { credentials: 'same-origin' }).then(
  452. 			response => {
  453. 				if (response.ok) {
  454. 					const { page } = parseLORUrl(response.url);
  455. 					response.text().then(html => {
  456. 						pagesCache[page] = getCommentsContent(html);
  457. 						
  458. 						addToCommentsCache(
  459. 							pagesCache[page].querySelectorAll('.msg[id^="comment-"]')
  460. 						);
  461. 						
  462. 						if (commentEl.parentNode) {
  463. 							commentEl.remove();
  464. 							showCommentInternal(
  465. 								pagesCache[page].children['comment-'+ commentID].cloneNode((e.isNew = true)),
  466. 								commentID,
  467. 								e
  468. 							);
  469. 						}
  470. 					})
  471. 				} else {
  472. 					commentEl.textContent = response.status +' '+ response.statusText;
  473. 					commentEl.classList.add('msg-error');
  474. 				}
  475. 			});
  476. 	}
  477. 	showCommentInternal(
  478. 		commentEl,
  479. 		commentID,
  480. 		e
  481. 	);
  482. }
  483.  
  484. const openPreviews = document.getElementsByClassName('preview');
  485.  
  486. function removePreviews(comment) {
  487. 	var c = openPreviews.length - 1;
  488. 	while (openPreviews[c] !== comment) {
  489. 		openPreviews[c--].remove();
  490. 	}
  491. }
  492.  
  493. function showCommentInternal(commentElement, commentID, e) {
  494. 	// From makaba
  495. 	const hoveredLink = e.target;
  496. 	const parentBlock = document.getElementById('comments');
  497. 	
  498. 	const { left, top, right, bottom } = hoveredLink.getBoundingClientRect();
  499. 	
  500. 	const visibleWidth  = innerWidth  / 2;
  501. 	const visibleHeight = innerHeight * 0.75;
  502. 	const offsetX       = pageXOffset + left + hoveredLink.offsetWidth / 2;
  503. 	const offsetY       = pageYOffset + bottom + 10;
  504. 	
  505. 	let postproc = () => {
  506. 		
  507. 		commentElement.style['left'] = Math.max(
  508. 			offsetX - (
  509. 				left < visibleWidth
  510. 				     ? 0
  511. 				     : commentElement.offsetWidth)
  512. 				, 5) + 'px';
  513. 		
  514. 		commentElement.style['top'] = pageYOffset + (
  515. 			top < visibleHeight
  516. 			    ? bottom + 10
  517. 			    : top - commentElement.offsetHeight - 10)
  518. 			+'px';
  519. 			
  520. 		if (!USER_SETTINGS['CSS3 Animation'])
  521. 			commentElement.style['animation-name'] = null;
  522. 	};
  523. 	
  524. 	if (e.isNew) {
  525. 		
  526. 		commentElement.setAttribute(
  527. 			'style',
  528. 				'animation-name: toShow; '+
  529. 				// There are no limitations for the 'z-index' in the CSS standard,
  530. 				// so it depends on the browser. Let's just set it to 300
  531. 				'max-width:'+ parentBlock.offsetWidth +
  532. 				'px; left: '+
  533. 				( left < visibleWidth
  534. 				       ? offsetX
  535. 				       : offsetX - visibleWidth ) +
  536. 				'px; top: '+
  537. 				( top < visibleHeight
  538. 				      ? offsetY
  539. 				      : 0 ) +'px;'
  540. 		);
  541. 		
  542. 		// Avoid duplicated IDs when the original comment was found on the same page
  543. 		commentElement.id = 'preview-'+ commentID;
  544. 		commentElement.classList.add('preview');
  545. 	
  546. 		// If this comment contains link to another comment,
  547. 		// set the 'mouseover' hook to that 'a' tag
  548. 		addPreviewHandler( commentElement );
  549. 		
  550. 		commentElement.addEventListener('animationstart', postproc, true);
  551. 	} else {
  552. 		commentElement.style['animation-name'] = null;
  553. 		postproc();
  554. 	}
  555. 	commentElement.onmouseleave = () => {
  556. 		// remove all preview's
  557. 		Timer.set('Close Preview', removePreviews)
  558. 	};
  559. 	commentElement.onmouseenter = () => {
  560. 		// remove all preview's after this one
  561. 		Timer.set('Close Preview', () => removePreviews(commentElement));
  562. 	};
  563. 	hoveredLink.onmouseleave = () => {
  564. 		// remove this preview
  565. 		Timer.set('Close Preview', () => commentElement.remove());
  566. 	};
  567. 	// Note that we append the comment to the '#comments' tag,
  568. 	// not the document's body
  569. 	// This is because we want to save the background-color and other styles
  570. 	// which can be customized by userscripts and themes
  571. 	parentBlock.appendChild(commentElement);
  572. }
  573.  
  574. function _setup(el, _Attrs, _Events) {
  575. 	if (el) {
  576. 		if (typeof el === 'string') {
  577. 			el = document.createElement(el);
  578. 		}
  579. 		if (_Attrs) {
  580. 			for (var key in _Attrs) {
  581. 				_Attrs[key] === undefined ? el.removeAttribute(key) :
  582. 				key === 'html' ? el.innerHTML   = _Attrs[key] :
  583. 				key === 'text' ? el.textContent = _Attrs[key] :
  584. 				key in el    && (el[key]        = _Attrs[key] ) == _Attrs[key]
  585. 				             &&  el[key]       == _Attrs[key] || el.setAttribute(key, _Attrs[key]);
  586. 			}
  587. 		}
  588. 		if (_Events) {
  589. 			if ('remove' in _Events) {
  590. 				for (var type in _Events['remove']) {
  591. 					if (_Events['remove'][type].forEach) {
  592. 						_Events['remove'][type].forEach(function(fn) {
  593. 							el.removeEventListener(type, fn, false);
  594. 						});
  595. 					} else {
  596. 						el.removeEventListener(type, _Events['remove'][type], false);
  597. 					}
  598. 				}
  599. 				delete _Events['remove'];
  600. 			}
  601. 			for (var type in _Events) {
  602. 				el.addEventListener(type, _Events[type], false);
  603. 			}
  604. 		}
  605. 	}
  606. 	return el;
  607. }
  608.  
  609. function parseLORUrl(uri) {
  610. 	const out = new Object;
  611. 	var m = uri.match(/^(?:https?:\/\/www\.linux\.org\.ru)?(\/\w+\/(?!archive)\w+\/(\d+))(?:\/page(\d+))?/);
  612. 	if (m) {
  613. 		out.path  = m[1];
  614. 		out.topic = m[2];
  615. 		out.page  = Number(m[3]) || 0;
  616. 	}
  617. 	return out;
  618. }
  619.  
  620. function toggleForm(e) {
  621. 	const form = document.forms['commentForm'], parent = form.parentNode;
  622. 	const [, topic, replyto = 0 ] = this.href.match(/jsp\?topic=(\d+)(?:&replyto=(\d+))?$/);
  623. 	if (!form.elements['csrf'].value) {
  624. 		form.elements['csrf'].value = TOKEN;
  625. 	}
  626. 	if (form.elements['replyto'].value != replyto) {
  627. 		parent.style['display'] = 'none';
  628. 	}
  629. 	if (parent.style['display'] == 'none') {
  630. 		parent.className = 'slide-down';
  631. 		parent.addEventListener('animationend', function(e, _) {
  632. 			_setup(parent, { class: _ }, { remove: { animationend: arguments.callee }});
  633. 			form.elements['msg'].focus();
  634. 		});
  635. 		this.parentNode.parentNode.parentNode.parentNode.appendChild(parent).style['display'] = null;
  636. 		form.elements['replyto'].value = replyto;
  637. 		form.elements[ 'topic' ].value = topic;
  638. 	} else {
  639. 		parent.className = 'slide-up';
  640. 		parent.addEventListener('animationend', function(e, _) {
  641. 			_setup(this, { class: _, style: 'display: none;'}, { remove: { animationend: arguments.callee }});
  642. 		});
  643. 	}
  644. 	e.preventDefault();
  645. }
  646.  
  647. const appInit = (ext => {
  648. 	
  649. 	if (ext && ext.storage) {
  650. 		ext.storage.sync.get(USER_SETTINGS, items => {
  651. 			for (let name in items) {
  652. 				USER_SETTINGS[name] = items[name];
  653. 			}
  654. 		});
  655. 		ext.storage.onChanged.addListener(items => {
  656. 			for (let name in items) {
  657. 				USER_SETTINGS[name] = items[name].newValue;
  658. 			}
  659. 			sessionStorage['rtload'] = +USER_SETTINGS['Realtime Loader'];
  660. 		});
  661. 		let port = ext.runtime.connect({ name: location.href });
  662. 		return function() {
  663. 			var main_events_count = document.getElementById('main_events_count'),
  664. 				onResponseHandler = main_events_count ? text => {
  665. 					main_events_count.textContent = text;
  666. 				} : () => void 0;
  667. 			// We can't show notification from the content script directly,
  668. 			// so let's send a corresponding message to the background script
  669. 			ext.runtime.sendMessage({ action: 'lorify-ng init' }, onResponseHandler);
  670. 			port.onMessage.addListener(onResponseHandler);
  671. 		};
  672. 	} else {
  673. 		var main_events_count,
  674. 		    sendNotify = () => void 0,
  675. 		    defaults   = Object.assign({}, USER_SETTINGS),
  676. 		    delay      = 2e4;
  677. 		    start      = () => {
  678. 				const xhr = new XMLHttpRequest;
  679. 				xhr.open('GET', location.origin +'/notifications-count', true);
  680. 				xhr.onload = function() {
  681. 					switch (this.status) {
  682. 						case 403:
  683. 							break;
  684. 						case 200:
  685. 							var text = '';
  686. 							if (this.response != '0') {
  687. 								text = '('+ this.response +')';
  688. 								if (USER_SETTINGS['Desktop Notification'] && localStorage['notes'] != this.response) {
  689. 									sendNotify( (localStorage['notes'] = this.response) );
  690. 									delay = 0;
  691. 								}
  692. 							}
  693. 							main_events_count.textContent = lorynotify.textContent = text;
  694. 						default:
  695. 							setTimeout(start, delay < 18e4 ? (delay += 2e4) : delay);
  696. 					}
  697. 				}
  698. 				xhr.send(null);
  699. 			}
  700. 			
  701. 		if (localStorage['lorify-ng']) {
  702. 			let storData = JSON.parse(localStorage.getItem('lorify-ng'));
  703. 			for (let name in storData) {
  704. 				USER_SETTINGS[name] = storData[name];
  705. 			}
  706. 		}
  707. 		
  708. 		const onValueChange = function({ target }) {
  709. 			Timer.clear('Settings on Changed');
  710. 			switch (target.type) {
  711. 				case 'checkbox':
  712. 					USER_SETTINGS[target.id] = target.checked;
  713. 					break;
  714. 				case 'number':
  715. 					USER_SETTINGS[target.id] = target.valueAsNumber >= 0 ? target.valueAsNumber : (target.value = 0);
  716. 			}
  717. 			localStorage.setItem('lorify-ng', JSON.stringify(USER_SETTINGS));
  718. 			applymsg.classList.add('apply-anim');
  719. 			Timer.set('Apply Setting MSG', () => applymsg.classList.remove('apply-anim'), 2e3);
  720. 			sessionStorage['rtload'] = +USER_SETTINGS['Realtime Loader'];
  721. 		}
  722. 		
  723. 		const loryform = _setup('form', { id: 'loryform', html: `
  724. 			<div class="tab-row">
  725. 				<span class="tab-cell">Автоподгрузка комментариев:</span>
  726. 				<span class="tab-cell" id="applymsg"><input type="checkbox" id="Realtime Loader" ${
  727. 					USER_SETTINGS['Realtime Loader'] ? 'checked' : '' }></span>
  728. 			</div>
  729. 			<div class="tab-row">
  730. 				<span class="tab-cell">Задержка появления превью:</span>
  731. 				<span class="tab-cell"><input type="number" id="Delay Open Preview" min="0" step="10" value="${
  732. 					USER_SETTINGS['Delay Open Preview'] }">
  733. 				мс
  734. 				</span>
  735. 			</div>
  736. 			<div class="tab-row">
  737. 				<span class="tab-cell">Задержка исчезания превью:</span>
  738. 				<span class="tab-cell"><input type="number" id="Delay Close Preview" min="0" step="10" value="${
  739. 					USER_SETTINGS['Delay Close Preview'] }">
  740. 				мс
  741. 				</span>
  742. 			</div>
  743. 			<div class="tab-row">
  744. 				<span class="tab-cell">Оповещения на рабочий стол:</span>
  745. 				<span class="tab-cell"><input type="checkbox" id="Desktop Notification" ${
  746. 					USER_SETTINGS['Desktop Notification'] ? 'checked' : '' }>
  747. 				</span>
  748. 			</div>
  749. 			<div class="tab-row">
  750. 				<span class="tab-cell">CSS анимация:</span>
  751. 				<span class="tab-cell"><input type="checkbox" id="CSS3 Animation" ${
  752. 					USER_SETTINGS['CSS3 Animation'] ? 'checked' : '' }>
  753. 					<input type="button" id="resetSettings" value="сброс" title="вернуть настройки по умолчанию">
  754. 				</span>
  755. 			</div>`,
  756. 				onchange: onValueChange,
  757. 				oninput: e => Timer.set('Settings on Changed', () => {
  758. 					loryform.onchange = () => { loryform.onchange = onValueChange };
  759. 					onValueChange(e)
  760. 				}, 750)
  761. 			}),
  762. 			applymsg = loryform.querySelector('#applymsg');
  763. 			loryform.elements['resetSettings'].onclick = () => {
  764. 				for (let name in defaults) {
  765. 					let inp = loryform.elements[name];
  766. 					inp[inp.type === 'checkbox' ? 'checked' : 'value'] = (USER_SETTINGS[name] = defaults[name]);
  767. 				}
  768. 				localStorage.setItem('lorify-ng', JSON.stringify(USER_SETTINGS));
  769. 				applymsg.classList.add('apply-anim');
  770. 				Timer.set('Apply Setting MSG', () => applymsg.classList.remove('apply-anim'), 2e3);
  771. 				sessionStorage['rtload'] = +USER_SETTINGS['Realtime Loader'];
  772. 			}
  773. 			const lorynotify = _setup( 'a' , { id: 'lorynotify', class: 'lory-btn', href: 'notifications' });
  774. 			const lorytoggle = _setup('div', { id: 'lorytoggle', class: 'lory-btn', html: `<style>
  775. 				#lorynotify {
  776. 					right: 60px;
  777. 					text-decoration: none;
  778. 					color: inherit;
  779. 					font: bold 1.2em "Open Sans";
  780. 				}
  781. 				#lorytoggle {
  782. 					width: 32px;
  783. 					height: 32px;
  784. 					right: 5px;
  785. 					cursor: pointer;
  786. 					opacity: .5;
  787. 					background: url(//icons.iconarchive.com/icons/icons8/christmas-flat-color/32/penguin-icon.png) center / 100%;
  788. 				}
  789. 				#loryform {
  790. 					display: table;
  791. 					min-width: 360px;
  792. 					padding: 3px 6px;
  793. 					position: fixed;
  794. 					right: 5px;
  795. 					top: 40px;
  796. 					background: #eee;
  797. 					border-radius: 5px;
  798. 				}
  799. 				#lorytoggle:hover, #lorytoggle.pinet { opacity: 1; }
  800. 				.lory-btn { position: fixed; top: 5px; }
  801. 				.tab-row  { display: table-row; font-size: 85%; color: #666; }
  802. 				.tab-cell { display: table-cell;
  803. 					position: relative;
  804. 					padding: 4px 2px;
  805. 					vertical-align: middle;
  806. 					max-width: 180px;
  807. 				}
  808. 				#resetSettings, .apply-anim:after { position: absolute; right: 0; }
  809. 				.apply-anim:after {
  810. 					content: 'Настройки сохранены.';
  811. 					-webkit-animation: apply 2s infinite;
  812. 					animation: apply 2s infinite;
  813. 					color: red;
  814. 				}
  815. 				@keyframes apply { 0% { opacity: .1; } 50% { opacity: 1; } 100% { opacity: 0; } }
  816. 				@-webkit-keyframes apply { 0% { opacity: .1; } 50% { opacity: 1; } 100% { opacity: 0; } }
  817. 			</style>`}, {
  818. 				click: () => { lorytoggle.classList.toggle('pinet') ? document.body.appendChild(loryform) : loryform.remove() }
  819. 			});
  820. 		if (Notification.permission === 'granted') {
  821. 			// Если разрешено то создаем уведомлений
  822. 			sendNotify = count => new Notification('loryfy-ng', {
  823. 				icon: '//icons.iconarchive.com/icons/icons8/christmas-flat-color/64/penguin-icon.png',
  824. 				body: 'Уведомлений: '+ count
  825. 			}).onclick = () => window.focus();
  826. 		} else
  827. 		if (Notification.permission !== 'denied') {
  828. 			Notification.requestPermission(function(permission) {
  829. 				// Если пользователь разрешил, то создаем уведомление 
  830. 				if (permission === 'granted') {
  831. 					sendNotify = count => new Notification('loryfy-ng', {
  832. 						icon: '//icons.iconarchive.com/icons/icons8/christmas-flat-color/64/penguin-icon.png',
  833. 						body: 'Уведомлений: '+ count
  834. 					}).onclick = () => window.focus();
  835. 				}
  836. 			});
  837. 		}
  838. 		return function() {
  839. 			if ( (main_events_count = document.getElementById('main_events_count')) ) {
  840. 				localStorage['notes'] = (
  841. 					lorynotify.textContent = main_events_count.textContent
  842. 				).replace(/\d+/, '$1');
  843. 				setTimeout(start, delay);
  844. 			}
  845. 			document.body.append(lorynotify, lorytoggle);
  846. 		};
  847. 	}
  848. })(window.chrome || window.browser);