☰

[s4s] interface

Lets you view the greenposts.

  1. // ==UserScript==
  2. // @name        [s4s] interface
  3. // @namespace   s4s4s4s4s4s4s4s4s4s
  4. // @version     3.33
  5. // @author      le fun css man AKA Doctor Worse Than Hitler, kekero
  6. // @email       doctorworsethanhitler@gmail.com
  7. // @description Lets you view the greenposts.
  8. // @match       https://boards.4chan.org/s4s/*
  9. // @match       http://boards.4chan.org/s4s/*
  10. // @connect     funposting.online
  11. // @run-at      document-start
  12. // @grant       GM_xmlhttpRequest
  13. // @grant       GM.xmlHttpRequest
  14. // @grant       GM.setValue
  15. // @grant       GM.getValue
  16. // @grant       GM_setValue
  17. // @grant       GM_getValue
  18. // @grant       unsafeWindow
  19. // @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTAgMEgxNlYxNkgwIiBmaWxsPSIjZGZkIi8+PHBhdGggZD0iTTMgNCA2IDFoNGwzIDN2OGwtMyAzSDZMMyAxMiIgZmlsbD0iZ3JlZW4iLz48cGF0aCBkPSJtNS41IDExLjVoLTJ2LTdoMnYtM2MtMyAwLTUgMi41LTUgNi41IDAgNCAyIDYuNSA1IDYuNXptNSAzYzMgMCA1LTIuNSA1LTYuNSAwLTQtMi02LjUtNS02LjV2M2gydjdoLTJ6bS00LTRoM0wxMCAyLjVINlptMCAzaDN2LTNoLTN6IiBmaWxsPSIjZmZmIiBzdHJva2U9ImdyZWVuIi8+PC9zdmc+
  20. // ==/UserScript==
  21. "use strict";
  22.  
  23.  
  24. if(query("#s4sinterface-css")){
  25. 	throw "Multiple instances of [s4s] interface detected"
  26. }
  27.  
  28. var interfaceLinkRegex = new RegExp('<a[^>]*>&gt;&gt;\\d*( \\(.*\\))?<\\/a>(<span>)?-\\d*');
  29. var weekdays=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
  30. var postForm={}
  31. var lastCommentForm
  32. var updateLinks=new Set()
  33. var cacheCatalogPosts={}
  34. var mode=""
  35. var threadId
  36. var numThreads
  37. var pathName=location.pathname
  38. var threadMatch=pathName.match(/\/thread\/(\d+)/)
  39. if(threadMatch){
  40. 	// /board/thread/1
  41. 	mode="thread"
  42. 	threadId=threadMatch[1]
  43. }else if(/\/catalog$/.test(pathName)){
  44. 	// /board/catalog
  45. 	mode="catalog"
  46. }else if(/^\/[^\/]+\/\d*$/.test(pathName)){
  47. 	// /board/
  48. 	mode="index"
  49. }
  50.  
  51. if(typeof GM=="undefined"){
  52. 	window.GM={
  53. 		xmlHttpRequest:window.GM_xmlhttpRequest,
  54.         getValue:window.GM_getValue,
  55.         setValue:window.GM_setValue
  56. 	}
  57. }
  58.  
  59. // Request green posts
  60. var serverurl="https://funposting.online/interface/"
  61. if(mode=="thread"){
  62. 	getGreenPosts(threadId)
  63. }else if(mode=="catalog"){
  64. 	onPageLoad(_=>{
  65. 		getGreenPostsCatalog()
  66. 	})
  67. }else if(mode=="index") {
  68.   onPageLoad(_=>{
  69.     numThreads = document.getElementsByClassName("thread").length
  70.     // use a mutation observer to update the green posts on the index on infinite scrollio
  71.     var observer = new MutationObserver(function (mutations) {
  72.       mutations.forEach(function (mutation) {
  73.         checkForIndexUpdate() // checks for and updates the index on infinite scroll
  74.       });
  75.     });
  76.     observer.observe(document, {childList:true, subtree:true})
  77.  
  78. 		addGreenPostsToIndex()
  79. 	})
  80. }
  81.  
  82. // checks for and updates the index on infinite scroll
  83. function checkForIndexUpdate() {
  84.   if (numThreads != document.getElementsByClassName("thread").length) {
  85.   	numThreads = document.getElementsByClassName("thread").length
  86.     addGreenPostsToIndex()
  87.   }
  88. }
  89.  
  90. function addGreenPostsToIndex() {
  91.   var threads = document.getElementsByClassName("thread")
  92.   for (var i = 0; i < threads.length; i++) {
  93.     var responses = threads[i].getElementsByClassName("replyContainer")
  94.     var since = 0
  95.     if(responses != null && responses.length > 0) {
  96.     	var since = threads[i].getElementsByClassName("replyContainer")[0].id.substr(2)
  97.     }
  98.     getGreenPosts(threads[i].id.substr(1), since)
  99.   }
  100. }
  101.  
  102. onPageLoad(_=>{
  103. 	// Classic post form
  104. 	if(mode=="thread"){
  105. 		var nameField=query("#postForm input[name=name]")
  106. 		if(nameField){
  107. 			var commentField=query("#postForm textarea")
  108. 			addCommentForm(commentField,1)
  109. 			var greenToggle=element(
  110. 				["button#toggle",{
  111. 					class:"greenToggle",
  112. 					title:"[s4s] Interface",
  113. 					onclick:event=>{
  114. 						event.preventDefault()
  115. 						event.stopPropagation()
  116. 						showPostFormClassic()
  117. 					}
  118. 				},"!"]
  119. 			).toggle
  120. 			var nameParent=nameField.parentNode
  121. 			nameParent.classList.add("nameFieldParent")
  122. 			insertBefore(greenToggle,nameField)
  123. 		}else{
  124. 			// Thread is archived
  125. 			showPostFormClassic()
  126. 		}
  127. 		getUpdateLinks()
  128. 	}
  129. })
  130.  
  131.  
  132. // watch lists
  133. onPageLoad(_=>{
  134.    // native extension watch list
  135.   if(document.getElementById("watchList") !== null) {
  136.     var observer = new MutationObserver(function (mutations) {
  137.       mutations.forEach(function (mutation) {
  138.         updateNativeWatchList();
  139.       });
  140.     });
  141.     observer.observe(document.getElementById("watchList"), {childList:true, subtree:true})
  142.   }
  143.   updateNativeWatchList() // call this once in addition to the observer to make sure it gets ran on page load even if the thread watcher doesn't refresh
  144.   ///todo: 4chan x watch list
  145. })
  146.  
  147. // updates the native watch list
  148. async function updateNativeWatchList() {
  149.   var watchList = document.getElementById("watchList");
  150.   var watchedThreads = watchList.getElementsByTagName('li');
  151.   if(watchedThreads !== null && watchedThreads.length > 0) {
  152.   	for(var i = 0; i < watchedThreads.length; i++) {
  153.     	var thread = watchedThreads[i].id.split('-')[1]; // format is 'watch-12345-s4s'
  154.       var board = watchedThreads[i].id.split('-')[2];
  155.       
  156.       // it's da [s4s] inderfase not da otherboard indaface
  157.       if(board != 's4s') continue;
  158.  
  159.       // GM_getValue will store the ['thread' => 'number of last seen posts'] pairs
  160.       var lastSeen = await GM.getValue(thread, false);
  161.  
  162.       // if we have watched this thread, we check for updates
  163.       if(lastSeen !== false) {
  164.         getCountSince(thread, lastSeen);
  165.       }
  166.       else {
  167.         getNewestPost(thread);
  168.       }
  169.     }
  170.   }
  171.  
  172. }
  173.  
  174. // Native extension QR
  175. document.addEventListener("QRNativeDialogCreation",onQRCreated)
  176. if(unsafeWindow.Main){
  177. 	onNativeextInit()
  178. }else{
  179. 	document.addEventListener("4chanMainInit",onNativeextInit)
  180. }
  181.  
  182. function onPageLoad(func){
  183. 	if(document.readyState=="loading"){
  184. 		addEventListener("DOMContentLoaded",func)
  185. 	}else{
  186. 		func()
  187. 	}
  188. }
  189. // firefox will (sometimes) fail to load document.documentElement until the page is loaded
  190. onPageLoad(_=>{
  191. // 4chan-X QR integration
  192. if(document.documentElement.classList.contains("fourchan-x")){
  193. 	on4chanXInit()
  194. }else{
  195. 	document.addEventListener("4chanXInitFinished",on4chanXInit)
  196. }
  197. document.addEventListener("QRDialogCreation",onQRXCreated)
  198. })
  199.  
  200. // replaces links like >>1234567-123 in native 4chan posts with an appropriate link back to the interface post.
  201. function replaceInterfaceLinks(post) {
  202.     while(interfaceLinkRegex.test(post.innerHTML)) {
  203.     var link = interfaceLinkRegex.exec(post.innerHTML)[0] //something like <a href="#p6696342" class="quotelink ql-tracked">&gt;&gt;6696342 (You)</a>-6754<br>test pls ignorlol
  204.     var link_afterno = /&gt;\d+/.exec(link)[0].substr(4)
  205.     var link_interfaceno = /-\d+/.exec(link)[0].substr(1)
  206.     var has_span = /<span>/.test(link) // sometimes the end of the link starts with a <span> so lets not forget it later
  207.     var replace = '<a class="quotelink" href="#p'+link_afterno+'-'+link_interfaceno+'">&gt;&gt;'+link_afterno+'-'+link_interfaceno+'</a>'
  208.     if(has_span) replace += '<span>'
  209.   	post.innerHTML = post.innerHTML.replace(interfaceLinkRegex, replace)
  210.   }
  211. }
  212.  
  213. // gets the number of posts since the newest green post specified by the green post's interface id (the number after the -, e.g. 123456-123 is 123)
  214. function getCountSince(thread, newestGreenPost) {
  215. 		GM.xmlHttpRequest({
  216. 		method:"get",
  217. 		url:serverurl+"watch.php?thread="+thread+"&newestGreenPost="+newestGreenPost,
  218. 		onload:response=>{
  219. 			if(response.status==200){
  220. 				onPageLoad(_=>{
  221. 					var count=response.responseText
  222.           if(count > 0) {
  223. 						updateWatchListItem(thread,count)
  224.           }
  225. 				})
  226. 			}
  227. 		},
  228. 		onerror:response=>{
  229.       return 0;
  230. 		}
  231. 	})
  232. }
  233.  
  234. // todo: 4chan X
  235. function updateWatchListItem(thread, count) {
  236. 	var item = query('#watch-'+thread+'-s4s > a:nth-child(2)');
  237.  
  238.   if(item.classList.contains("newGreenPost")) return;
  239.   item.classList.add("newGreenPost");
  240. }
  241.  
  242. // gets the green id of the newest green post in a thread
  243. function getNewestPost(thread) {
  244. 		GM.xmlHttpRequest({
  245. 		method:"get",
  246. 		url:serverurl+"watch.php?thread="+thread,
  247. 		onload:response=>{
  248. 			if(response.status==200){
  249. 				onPageLoad(_=>{
  250.           GM.setValue(thread, response.responseText);
  251. 				})
  252. 			}
  253. 		},
  254. 		onerror:response=>{
  255. 		}
  256. 	})
  257. }
  258.  
  259. // Request green posts & add them
  260. function getGreenPosts(thread, since = 0){
  261. 	GM.xmlHttpRequest({
  262. 		method:"get",
  263. 		url:serverurl+"get.php?thread="+thread+((since != 0) ? "since="+since : ""),
  264. 		onload:response=>{
  265. 			if(response.status==200){
  266. 				onPageLoad(_=>{
  267. 					var postsObj=JSON.parse(response.responseText)
  268. 					var postsCount=Object.keys(postsObj).length
  269. 					if(postsCount){
  270.             if(mode == "thread") {
  271.               var oldPosts=queryAll(".greenPostContainer")
  272.               for(var i=0;i<oldPosts.length;i++){
  273.                 removeChild(oldPosts[i])
  274.               }
  275.               var currentPost
  276.               for(var i=postsCount;i--;){
  277.                 currentPost=addPost(postsObj[i],currentPost)
  278.               }
  279.  
  280.               // update the watchlist to say "weve seen the post lole"
  281.               GM.setValue(thread,postsObj[0].id)
  282.             }
  283.             else if(mode == "index") {
  284.               for(var i=0; i< postsCount; i++){
  285.                 // dont reinsert posts
  286.                 if(document.getElementById('p'+postsObj[i].after_no+"-"+postsObj[i].id) === null) {
  287.                 	addPost(postsObj[i],document.getElementById(postsObj[i].after_no))
  288.               	}
  289.               }
  290.             }
  291. 					}
  292. 				})
  293. 			}
  294. 		},
  295. 		onerror:response=>{
  296. 		}
  297. 	})
  298. }
  299.  
  300. // takes the JSON from the server and converts to an HTML element
  301. function postJsonToElement(aPost){
  302.   var numberless=aPost.options=="numberless"
  303. 	var afterNo=numberless?"XXXXXX":aPost.after_no
  304. 	var postId=afterNo+"-"+aPost.id
  305. 	var date=new Date(aPost.timestamp*1000)
  306. 	var dateString=
  307. 		padding(date.getMonth()+1,2)+"/"+
  308. 		padding(date.getDate(),2)+"/"+
  309. 		(""+date.getFullYear()).slice(-2)+
  310. 		"("+weekdays[date.getDay()]+")"+
  311. 		padding(date.getHours(),2)+":"+
  312. 		padding(date.getMinutes(),2)+":"+
  313. 		padding(date.getSeconds(),2)
  314. 	var linkReply
  315. 	if(!numberless){
  316. 		linkReply=[0,
  317. 			" ",
  318. 			["a",{
  319. 				href:"#p"+postId,
  320. 				title:"Link to this post"
  321. 			},"No."],
  322. 			["a",{
  323. 				href:"javascript:quote('"+postId+"');",
  324. 				onclick:insertQuote,
  325. 				title:"Reply to this post"
  326. 			},postId]
  327. 		]
  328. 	}
  329. 	var replyHideX=document.documentElement.classList.contains("reply-hide")
  330. 	var post=element(
  331. 		["div#post",{
  332. 			class:"postContainer replyContainer greenPostContainer",
  333. 			id:"pc"+aPost.after_no
  334. 		},
  335. 			(replyHideX?
  336. 				["div",{
  337. 					id:"sa"+postId
  338. 				},
  339. 					["a",{
  340. 						class:"hide-reply-button"
  341. 					},
  342. 						["span",{
  343. 							class:"fa fa-minus-square-o"
  344. 						}]
  345. 					]
  346. 				]
  347. 			:
  348. 				["div",{
  349. 					class:"sideArrows",
  350. 					id:"sa"+postId
  351. 				},">>"]
  352. 			),
  353. 			["div",{
  354. 				class:"post reply",
  355. 				id:"p"+postId
  356. 			},
  357. 				["div",{
  358. 					class:"postInfoM mobile",
  359. 					id:"pim"+postId
  360. 				},
  361. 					["span",{
  362. 						class:"nameBlock"
  363. 					},
  364. 						["span",{
  365. 							class:"name"
  366. 						},aPost.username],
  367. 						["br"]
  368. 					],
  369. 					["span",{
  370. 						class:"dateTime postNum",
  371. 						"data-utc":aPost.timestamp
  372. 					},
  373. 						dateString,
  374. 						linkReply
  375. 					]
  376. 				],
  377. 				["div",{
  378. 					class:"postInfo desktop",
  379. 					id:"pi"+postId
  380. 				},
  381. 					["input",{
  382. 						type:"checkbox",
  383. 						name:"ignore",
  384. 						value:"delete"
  385. 					}],
  386. 					["span",{
  387. 						class:"nameBlock"
  388. 					},
  389. 						["span",{
  390. 							class:"name"
  391. 						},aPost.username]
  392. 					],
  393. 					" ",
  394. 					["span",{
  395. 						class:"dateTime",
  396. 						"data-utc":aPost.timestamp
  397. 					},dateString],
  398. 					(!numberless&&
  399. 						["span",{
  400. 							class:"postNum desktop",
  401. 							onclick:insertQuote,
  402. 							title:"Reply to this post"
  403. 						},linkReply]
  404. 					)
  405. 				],
  406. 				["blockquote",{
  407. 					class:"postMessage",
  408. 					id:"m"+postId,
  409. 					innerHTML:aPost.text.replace(/\r/g,"")
  410. 				}]
  411. 			]
  412. 		]
  413. 	).post
  414.   return post
  415. }
  416.  
  417. // Add a post to the proper position in the thread
  418. function addPost(aPost,currentPost){
  419. 	if(!currentPost){
  420. 		currentPost=query(".thread>.postContainer")
  421. 	}
  422.  
  423. 	var post=postJsonToElement(aPost)
  424.  
  425.   if(mode == "thread") {
  426.     // Add the post
  427.     while(currentPost){
  428.       var lastPost=currentPost
  429.       if(!/^pc\d+$/.test(currentPost.id)||currentPost.id.slice(2)<=aPost.after_no){
  430.         currentPost=currentPost.nextSibling
  431.       }else{
  432.         return insertBefore(post,currentPost)
  433.       }
  434.     }
  435.     return insertAfter(post,lastPost)
  436.   }
  437.   else if(mode == "index") {
  438.   	return insertAfter(post,document.getElementById("pc"+aPost.after_no))
  439.   }
  440. }
  441.  
  442. // Get green post count on catalog
  443. function getGreenPostsCatalog(){
  444. 	var threadContainer=query(".is_catalog #threads,.catalog-mode .board")
  445. 	if(!threadContainer||!threadContainer.children.length){
  446. 		if(mode=="catalog"){
  447. 			return setTimeout(getGreenPostsCatalog,500)
  448. 		}else{
  449. 			var insertListener=event=>{
  450. 				document.removeEventListener("PostsInserted",insertListener)
  451. 				getGreenPostsCatalog()
  452. 			}
  453. 			return document.addEventListener("PostsInserted",insertListener)
  454. 		}
  455. 	}
  456. 	var threads=[]
  457. 	var catalogThreads=threadContainer.children
  458. 	for(var i=0;i<catalogThreads.length;i++){
  459. 		var idMatch=catalogThreads[i].id.match(/\d+/)
  460. 		if(idMatch){
  461. 			threads.push(idMatch[0])
  462. 		}
  463. 	}
  464. 	GM.xmlHttpRequest({
  465. 		method:"post",
  466. 		headers:{
  467. 			"Content-type":"application/x-www-form-urlencoded"
  468. 		},
  469. 		url:serverurl+"get.php?mode=catalog",
  470. 		data:"thread="+threads.join(","),
  471. 		onload:response=>{
  472. 			if(response.status==200){
  473. 				cacheCatalogPosts=JSON.parse(response.responseText)
  474. 				showGreenPostsCatalog()
  475. 				if(mode=="catalog"){
  476. 					new MutationObserver(mutations=>{
  477. 						showGreenPostsCatalog()
  478. 					}).observe(threadContainer,{childList:1})
  479. 				}else{
  480. 					document.addEventListener("PostsInserted",showGreenPostsCatalog)
  481. 				}
  482. 			}
  483. 		},
  484. 		onerror:response=>{
  485. 		}
  486. 	})
  487. }
  488.  
  489. function showGreenPostsCatalog(){
  490. 	var countObj=cacheCatalogPosts
  491. 	var oldPosts=queryAll(".greenPostCount")
  492. 	for(var i=0;i<oldPosts.length;i++){
  493. 		removeChild(oldPosts[i].previousSibling)
  494. 		removeChild(oldPosts[i])
  495. 	}
  496. 	var threadMeta
  497. 	for(var thread in countObj){
  498. 		if(mode=="catalog"){
  499. 			threadMeta=document.getElementById("meta-"+thread)
  500. 		}else{
  501. 			threadMeta=query("#p"+thread+">.catalog-stats>span")
  502. 		}
  503. 		if(threadMeta){
  504. 			addCatalogPosts(countObj[thread],threadMeta)
  505. 		}
  506. 	}
  507. }
  508.  
  509. function addCatalogPosts(count,threadMeta){
  510. 	if(count){
  511. 		var nativeCatalog=0
  512. 		if(mode=="catalog"){
  513. 			nativeCatalog=1
  514. 		}
  515. 		var text=document.createTextNode(" / ")
  516. 		var postCount=element(
  517. 			["span#span",{
  518. 				class:"greenPostCount"
  519. 			},
  520. 				(nativeCatalog&&
  521. 					"G: "
  522. 				),
  523. 				["b",count]
  524. 			]
  525. 		).span
  526. 		var afterNode=threadMeta.childNodes[nativeCatalog]
  527. 		insertAfter(text,afterNode)
  528. 		insertAfter(postCount,text)
  529. 	}
  530. }
  531.  
  532. // Classic post form
  533. function showPostFormClassic(hide){
  534. 	var formSelector="body>form:not(.greenPostForm)"
  535. 	var nameField=query(formSelector+" input[name=name]")
  536. 	var optionsField=query(formSelector+" input[name=email]")
  537. 	var commentField=query(formSelector+" textarea")
  538. 	if(hide){
  539. 		if(postForm.classic){
  540. 			if(nameField){
  541. 				nameField.value=postForm.classic.name.value
  542. 				optionsField.value=postForm.classic.options.value
  543. 				commentField.value=postForm.classic.comment.value
  544. 				lastCommentForm=commentField
  545. 			}
  546. 			removeChild(postForm.classic.form)
  547. 			postForm.classic=0
  548. 		}
  549. 		return
  550. 	}
  551. 	if(postForm.classic){
  552. 		return
  553. 	}
  554. 	var username=""
  555. 	if(nameField){
  556. 		username=nameField.value
  557. 	}else{
  558. 		var nameMatch=document.cookie.match(/4chan_name=(.*?)(?:;|$)/)
  559. 		if(nameMatch){
  560. 			username=nameMatch[1]
  561. 		}
  562. 	}
  563. 	postForm.classic=element(
  564. 		["form#form",{
  565. 			name:"post",
  566. 			action:serverurl+"post.php",
  567. 			method:"post",
  568. 			enctype:"multipart/form-data",
  569. 			class:"greenPostForm",
  570. 			onsubmit:submitGreenPost
  571. 		},
  572. 			["input",{
  573. 				name:"thread",
  574. 				value:threadId,
  575. 				type:"hidden"
  576. 			}],
  577. 			["table",{
  578. 				class:"postForm"
  579. 			},
  580. 				["tbody",
  581. 				["tr",
  582. 					["td","Name"],
  583. 					["td",{
  584. 						class:"nameFieldParent"
  585. 					},
  586. 						(nameField&&
  587. 							["button#toggle",{
  588. 								class:"greenToggle pressed",
  589. 								title:"[s4s] Interface",
  590. 								onclick:event=>{
  591. 									event.preventDefault()
  592. 									event.stopPropagation()
  593. 									showPostFormClassic(1)
  594. 								}
  595. 							},"!"]
  596. 						),
  597. 						["input#name",{
  598. 							type:"text",
  599. 							name:"username",
  600. 							tabIndex:1,
  601. 							placeholder:"Anonymous",
  602. 							value:username
  603. 						}]
  604. 					]
  605. 				],
  606. 				["tr",
  607. 					["td","Options"],
  608. 					["td",
  609. 						["input#options",{
  610. 							type:"text",
  611. 							name:"options",
  612. 							tabIndex:2,
  613. 							value:optionsField?optionsField.value:""
  614. 						}],
  615. 						["input",{
  616. 							type:"submit",
  617. 							tabIndex:6,
  618. 							value:"Post"
  619. 						}]
  620. 					]
  621. 				],
  622. 				["tr",
  623. 					["td","Comment"],
  624. 					["td",
  625. 						["textarea#comment",{
  626. 							name:"text",
  627. 							tabindex:4,
  628. 							cols:48,
  629. 							rows:4,
  630. 							wrap:"soft",
  631. 							value:commentField?commentField.value:""
  632. 						}]
  633. 					]
  634. 				]
  635. 				]
  636. 			]
  637. 		]
  638. 	)
  639. 	addCommentForm(postForm.classic.comment)
  640. 	var originalForm=query("#postForm")
  641. 	if(originalForm){
  642. 		originalForm=originalForm.parentNode
  643. 	}else{
  644. 		originalForm=query("body>.closed+*")
  645. 		if(!originalForm){
  646. 			originalForm=query("#op")
  647. 		}
  648. 	}
  649. 	insertBefore(postForm.classic.form,originalForm)
  650. }
  651.  
  652. // Native extension initialised
  653. function onNativeextInit(){
  654. 	if(mode=="thread"||mode=="index"){
  655. 		getUpdateLinks()
  656. 		// Native extension quick reply
  657. 		unsafeWindow.QR.showInterface=unsafeWindow.QR.show
  658. 		var newQRshow=thread=>{
  659. 			var event=new CustomEvent("QRNativeDialogCreation",{
  660. 				bubbles:true,
  661. 				detail:{thread:thread}
  662. 			})
  663. 			document.dispatchEvent(event)
  664. 		}
  665. 		if(typeof exportFunction=="function"){
  666. 			newQRshow=exportFunction(newQRshow,document.defaultView)
  667. 		}
  668. 		unsafeWindow.QR.show=newQRshow
  669. 	}
  670. }
  671.  
  672. function onQRCreated(event){
  673. 	threadId=event.detail.thread
  674. 	try{
  675. 		unsafeWindow.QR.showInterface(threadId)
  676. 	}catch(e){}
  677. 	// Clean up post form if it was initialised before
  678. 	var oldToggle=query("#quickReply form:not(.greenPostForm) .greenToggle")
  679. 	if(oldToggle){
  680. 		removeChild(oldToggle)
  681. 	}
  682. 	showPostFormQR(1)
  683. 	var formSelector="#qrForm"
  684. 	var nameField=query(formSelector+" input[name=name]")
  685. 	nameField.value=query("#postForm input[name=name]").value
  686. 	nameField.tabIndex=0
  687. 	var commentField=query(formSelector+" textarea")
  688. 	addCommentForm(commentField)
  689. 	var toggle=element(
  690. 		["button#toggle",{
  691. 			type:"button",
  692. 			class:"greenToggle",
  693. 			title:"[s4s] Interface",
  694. 			onclick:event=>{
  695. 				event.preventDefault()
  696. 				event.stopPropagation()
  697. 				showPostFormQR()
  698. 			}
  699. 		},"!"]
  700. 	).toggle
  701. 	var nameParent=nameField.parentNode
  702. 	nameParent.classList.add("nameFieldParent")
  703. 	insertBefore(toggle,nameField)
  704. }
  705.  
  706. function showPostFormQR(hide){
  707. 	var formSelector="#qrForm"
  708. 	var nameField=query(formSelector+" input[name=name]")
  709. 	var optionsField=query(formSelector+" input[name=email]")
  710. 	var commentField=query(formSelector+" textarea")
  711. 	if(hide){
  712. 		if(postForm.QR){
  713. 			nameField.value=postForm.QR.name.value
  714. 			optionsField.value=postForm.QR.options.value
  715. 			commentField.value=postForm.QR.comment.value
  716. 			lastCommentForm=commentField
  717. 			removeChild(postForm.QR.form)
  718. 			postForm.QR=0
  719. 		}
  720. 		return
  721. 	}
  722. 	var qr=query("#quickReply form:not(.greenPostForm)")
  723. 	if(postForm.QR||!qr){
  724. 		return
  725. 	}
  726. 	postForm.QR=element(
  727. 		["form#form",{
  728. 			name:"post",
  729. 			action:serverurl+"post.php",
  730. 			method:"post",
  731. 			enctype:"multipart/form-data",
  732. 			class:"greenPostForm",
  733. 			onsubmit:submitGreenPost
  734. 		},
  735. 			["input",{
  736. 				name:"thread",
  737. 				value:threadId,
  738. 				type:"hidden"
  739. 			}],
  740. 			["div",{
  741. 				class:"nameFieldParent"
  742. 			},
  743. 				["button",{
  744. 					type:"button",
  745. 					class:"greenToggle pressed",
  746. 					title:"[s4s] Interface",
  747. 					onclick:event=>{
  748. 						showPostFormQR(1)
  749. 					}
  750. 				},"!"],
  751. 				["input#name",{
  752. 					type:"text",
  753. 					name:"username",
  754. 					class:"field",
  755. 					placeholder:"Anonymous",
  756. 					value:nameField.value
  757. 				}]
  758. 			],
  759. 			["div",
  760. 				["input#options",{
  761. 					type:"text",
  762. 					name:"options",
  763. 					class:"field",
  764. 					placeholder:"Options",
  765. 					value:optionsField.value
  766. 				}]
  767. 			],
  768. 			["div",
  769. 				["textarea#comment",{
  770. 					name:"text",
  771. 					class:"field",
  772. 					cols:48,
  773. 					rows:4,
  774. 					wrap:"soft",
  775. 					placeholder:"Comment",
  776. 					value:commentField.value
  777. 				}],
  778. 			],
  779. 			["div",
  780. 				["span",{
  781. 					class:"greenSubmit",
  782. 					onclick:event=>{
  783. 						submitGreenPost(event,postForm.QR.form)
  784. 					}
  785. 				},"Post"]
  786. 			]
  787. 		]
  788. 	)
  789. 	addCommentForm(postForm.QR.comment)
  790. 	insertBefore(postForm.QR.form,qr)
  791. }
  792.  
  793. // 4chan-X initialised
  794. function on4chanXInit(){
  795. 	if(mode=="index"&&document.documentElement.classList.contains("catalog-mode")){
  796. 		getGreenPostsCatalog()
  797. 	}
  798. }
  799.  
  800. // 4chan-X QR
  801. function onQRXCreated(){
  802. 	getUpdateLinks()
  803. 	var formSelector="#qr form:not(.greenPostForm)"
  804. 	var commentField=query(formSelector+" textarea")
  805. 	addCommentForm(commentField)
  806. 	var toggle=element(
  807. 		["button#toggle",{
  808. 			type:"button",
  809. 			class:"greenToggle",
  810. 			title:"[s4s] Interface",
  811. 			onclick:event=>{
  812. 				event.preventDefault()
  813. 				event.stopPropagation()
  814. 				showPostFormQRX()
  815. 			}
  816. 		},"!"]
  817. 	).toggle
  818. 	var qrPersona=query("#qr .persona")
  819. 	insertBefore(toggle,qrPersona.firstChild)
  820. }
  821.  
  822. function showPostFormQRX(hide){
  823. 	var formSelector="#qr form:not(.greenPostForm)"
  824. 	var nameField=query(formSelector+" input[name=name]")
  825. 	var optionsField=query(formSelector+" input[name=email]")
  826. 	var commentField=query(formSelector+" textarea")
  827. 	if(hide){
  828. 		if(postForm.QRX){
  829. 			nameField.value=postForm.QRX.name.value
  830. 			optionsField.value=postForm.QRX.options.value
  831. 			commentField.value=postForm.QRX.comment.value
  832. 			lastCommentForm=commentField
  833. 			removeChild(postForm.QRX.form)
  834. 			postForm.QRX=0
  835. 		}
  836. 		return
  837. 	}
  838. 	var qrx=query(formSelector)
  839. 	if(postForm.QRX||!qrx){
  840. 		return
  841. 	}
  842. 	threadId=query("#qr select[data-name=thread]").value
  843. 	postForm.QRX=element(
  844. 		["form#form",{
  845. 			name:"post",
  846. 			action:serverurl+"post.php",
  847. 			method:"post",
  848. 			enctype:"multipart/form-data",
  849. 			class:"greenPostForm",
  850. 			onsubmit:submitGreenPost
  851. 		},
  852. 			["input",{
  853. 				name:"thread",
  854. 				value:threadId,
  855. 				type:"hidden"
  856. 			}],
  857. 			["div",{
  858. 				class:"persona"
  859. 			},
  860. 				["button",{
  861. 					type:"button",
  862. 					class:"greenToggle pressed",
  863. 					title:"[s4s] Interface",
  864. 					onclick:event=>{
  865. 						showPostFormQRX(1)
  866. 					}
  867. 				},"!"],
  868. 				["input#name",{
  869. 					name:"username",
  870. 					class:"field",
  871. 					placeholder:"Name",
  872. 					size:1,
  873. 					value:nameField.value
  874. 				}],
  875. 				["input#options",{
  876. 					name:"options",
  877. 					class:"field",
  878. 					placeholder:"Options",
  879. 					size:1,
  880. 					value:optionsField.value
  881. 				}]
  882. 			],
  883. 			["textarea#comment",{
  884. 				name:"text",
  885. 				class:"field",
  886. 				placeholder:"Comment",
  887. 				value:commentField.value
  888. 			}],
  889. 			["div",{
  890. 				class:"file-n-submit"
  891. 			},
  892. 				["input",{
  893. 					type:"submit",
  894. 					value:"Submit"
  895. 				}]
  896. 			]
  897. 		]
  898. 	)
  899. 	addCommentForm(postForm.QRX.comment)
  900. 	insertBefore(postForm.QRX.form,qrx)
  901. }
  902.  
  903.  
  904. // Track last used comment field for inserting quotes
  905. function addCommentForm(commentField,notLast){
  906. 	if(!notLast){
  907. 		lastCommentForm=commentField
  908. 	}
  909. 	commentField.addEventListener("focus",event=>{
  910. 		lastCommentForm=event.currentTarget
  911. 	})
  912. }
  913.  
  914. function insertQuote(event){
  915. 	var commentField=lastCommentForm
  916. 	if(commentField&&document.contains(commentField)){
  917. 		event.preventDefault()
  918. 		event.stopPropagation()
  919. 		var isQRX=commentField.closest("#qr")
  920. 		if(isQRX){
  921. 			isQRX.hidden=0
  922. 		}
  923. 		var text=">>"+event.currentTarget.firstChild.data+"\n"
  924. 		var caretPos=commentField.selectionStart
  925. 		commentField.value=
  926. 			commentField.value.slice(0,caretPos)
  927. 			+text
  928. 			+commentField.value.slice(commentField.selectionEnd)
  929. 		var range=caretPos+text.length
  930. 		commentField.setSelectionRange(range,range)
  931. 		commentField.focus()
  932. 	}
  933. }
  934.  
  935. // Manually update thread with green posts
  936. function getUpdateLinks(){
  937. 	var update=queryAll("[data-cmd=update],.updatelink>a")
  938. 	for(var i=0;i<update.length;i++){
  939. 		if(!updateLinks.has(update[i])){
  940. 			update[i].addEventListener("click",event=>{
  941. 				getGreenPosts(threadId)
  942. 			})
  943. 			updateLinks.add(update[i])
  944. 		}
  945. 	}
  946. }
  947.  
  948. // Submit a green post
  949. function submitGreenPost(event,form){
  950. 	event.preventDefault()
  951. 	event.stopPropagation()
  952. 	if(!form){
  953. 		form=event.currentTarget
  954. 	}
  955. 	var submit={}
  956. 	submit.button=form.querySelector(":scope input[type=submit],:scope .greenSubmit")
  957. 	submit.fakeButton=submit.button.classList.contains("greenSubmit")
  958. 	if(submit.fakeButton){
  959. 		submit.text=submit.button.firstChild.data
  960. 		submit.button.firstChild.data="..."
  961. 		submit.button.classList.add("greenSubmitDisabled")
  962. 	}else{
  963. 		submit.text=submit.button.value
  964. 		submit.button.value="..."
  965. 		submit.button.disabled=1
  966. 	}
  967. 	var data=[]
  968. 	var formData=new FormData(form)
  969. 	for(var nameValue of formData){
  970. 		data.push(
  971. 			nameValue[0]+"="
  972. 			+encodeURIComponent(nameValue[1].replace(/\r?\n/g,"\r"))
  973. 		)
  974. 	}
  975. 	data=data.join("&")
  976. 	GM.xmlHttpRequest({
  977. 		method:"post",
  978. 		headers:{
  979. 			"Content-type":"application/x-www-form-urlencoded"
  980. 		},
  981. 		url:serverurl+"post.php",
  982. 		data:data,
  983. 		onload:response=>{
  984. 			if(response.status==200){
  985. 				if(/Post Successful/.test(response.responseText)){
  986. 					form.getElementsByTagName("textarea")[0].value=""
  987. 					if(mode=="thread"){
  988. 						getGreenPosts(threadId)
  989. 					}else{
  990. 						alert("Post successful")
  991. 					}
  992. 				}else{
  993. 					return postSubmitted(submit,response.status,response.responseText)
  994. 				}
  995. 			}
  996. 			postSubmitted(submit,response.status)
  997. 		},
  998. 		onerror:response=>{
  999. 			postSubmitted(submit)
  1000. 		}
  1001. 	})
  1002. }
  1003.  
  1004. function postSubmitted(submit,errorCode,responseText){
  1005. 	if(submit.fakeButton){
  1006. 		submit.button.firstChild.data=submit.text
  1007. 		submit.button.classList.remove("greenSubmitDisabled")
  1008. 	}else{
  1009. 		submit.button.value=submit.text
  1010. 		submit.button.disabled=0
  1011. 	}
  1012. 	if(errorCode==200){
  1013. 		if(responseText){
  1014. 			alert("Could not submit post ("+responseText+")")
  1015. 		}
  1016. 	}else{
  1017. 		var alertText="Could not connect to the [s4s] interface"
  1018. 		if(errorCode){
  1019. 			alertText+=" ("+errorCode+")"
  1020. 		}
  1021. 		alert(alertText)
  1022. 	}
  1023. }
  1024.  
  1025. //updates native 4chan posts with whatever, atm it's only fixing links
  1026. function updatePosts() {
  1027.   var posts=document.querySelectorAll('.postMessage:not(.interfaced)');
  1028.     for(var i=0;i<posts.length;i++){
  1029.     var post = posts[i];
  1030.     post.classList.add('interfaced');
  1031.     replaceInterfaceLinks(post);
  1032.    }
  1033. }
  1034.  
  1035. // add listenering for when posts are inserted.
  1036. document.addEventListener('4chanParsingDone',updatePosts)
  1037. document.addEventListener('PostsInserted',updatePosts)
  1038.  
  1039. // Stylesheet
  1040. onPageLoad(_=>{
  1041.  
  1042. var stylesheet=`
  1043. .greenPostForm+form .postForm>tbody>tr:not(.rules),
  1044. #quickReply .greenPostForm+form,
  1045. #qr .greenPostForm+form,
  1046. #qr:not(.reply-to-thread) .greenToggle:not(.pressed){
  1047. 	display:none!important;
  1048. }
  1049. .greenPostForm .file-n-submit{
  1050. 	display:flex;
  1051. 	align-items:stretch;
  1052. 	justify-content:flex-end;
  1053. 	height:25px;
  1054. 	margin-top:1px;
  1055. }
  1056. .greenPostForm .file-n-submit input{
  1057. 	width:25%;
  1058. 	background:linear-gradient(to bottom,#f8f8f8,#dcdcdc) no-repeat;
  1059. 	border:1px solid #bbb;
  1060. 	border-radius:2px;
  1061. 	height:100%;
  1062. }
  1063. .greenPostContainer .post.reply{
  1064. 	background-color:#dfd!important;
  1065. 	border:2px solid #008000!important;
  1066. }
  1067. .greenPostContainer .postMessage{
  1068. 	color:#000!important;
  1069. }
  1070. .greenToggle{
  1071. 	font-family:monospace;
  1072. 	font-size:16px;
  1073. 	line-height:17px;
  1074. 	background:#ceb!important;
  1075. 	width:24px;
  1076. 	padding:0;
  1077. 	border:1px solid #bbb;
  1078. }
  1079. .greenPostForm input:not([type=submit]),
  1080. .greenPostForm textarea{
  1081. 	background-color:#dfd;
  1082. 	color:#000;
  1083. }
  1084. .greenToggle.pressed{
  1085. 	background:#6d6!important;
  1086. 	font-weight:bold;
  1087. 	color:#fff;
  1088. }
  1089. .postForm .greenToggle+input{
  1090. 	width:220px!important;
  1091. }
  1092. .postForm .nameFieldParent,
  1093. #quickReply .nameFieldParent{
  1094. 	display:flex;
  1095. 	flex-direction:row;
  1096. }
  1097. .postForm textarea{
  1098. 	width:292px;
  1099. }
  1100. #quickReply .greenToggle{
  1101. 	width:23px;
  1102. 	height:23px;
  1103. }
  1104. #quickReply .greenToggle+input{
  1105. 	width:273px!important;
  1106. }
  1107. .greenSubmit{
  1108. 	display:inline-block;
  1109. 	width:75px;
  1110. 	float:right;
  1111. 	padding:1px 6px;
  1112. 	text-align:center;
  1113. 	border:1px solid #adadad;
  1114. 	background-color:#e1e1e1;
  1115. 	box-sizing:border-box;
  1116. 	user-select:none;
  1117. 	font:400 13.3333px Arial,sans-serif;
  1118. 	font:-moz-button;
  1119. 	color:#000;
  1120. 	cursor:default;
  1121. }
  1122. .greenSubmit:hover{
  1123. 	border-color:#0078d7;
  1124. 	background-color:#e5f1fb;
  1125. }
  1126. .greenSubmit:active{
  1127. 	border-color:#005499;
  1128. 	background-color:#cce4f7;
  1129. }
  1130. .greenSubmitDisabled{
  1131. 	color:#808080;
  1132. 	pointer-events:none;
  1133. }
  1134. .greenPostCount{
  1135. 	color:#060;
  1136. }
  1137. .greenPostContainer .hide-reply-button{
  1138. 	opacity:0!important;
  1139. 	pointer-events:none;
  1140. }
  1141. a.newGreenPost:not(:hover) {
  1142. 	color: green !important;
  1143. }
  1144. .greenPostForm {
  1145.   display: table;
  1146.   margin: auto;
  1147. }
  1148. @media only screen and (max-width:480px){
  1149. 	.postForm .greenToggle+input{
  1150. 		width:196px!important;
  1151. 	}
  1152. 	.postForm input[type="submit"]{
  1153. 		width:60px;
  1154. 		padding:2px 4px 3px;
  1155. 		margin:0;
  1156. 	}
  1157. 	.postForm:not(.hideMobile){
  1158. 		margin-top:20px;
  1159. 	}
  1160. }
  1161. `.replace(/\n\s*/g,"")
  1162. element(
  1163. 	document.head||document.documentElement,
  1164. 	["style",{
  1165. 		id:"s4sinterface-css"
  1166. 	},stylesheet]
  1167. )
  1168. })
  1169.  
  1170. function padding(string,num){
  1171. 	return (""+string).padStart(num,0)
  1172. }
  1173.  
  1174. function query(selector){
  1175. 	return document.querySelector(selector)
  1176. }
  1177.  
  1178. function queryAll(selector){
  1179. 	return document.querySelectorAll(selector)
  1180. }
  1181.  
  1182. function insertBefore(newElement,targetElement){
  1183. 	return targetElement.parentNode.insertBefore(newElement,targetElement)
  1184. }
  1185.  
  1186. function insertAfter(newElement,targetElement){
  1187. 	var nextSibling=targetElement.nextSibling
  1188. 	if(nextSibling){
  1189. 		return insertBefore(newElement,nextSibling)
  1190. 	}else{
  1191. 		return targetElement.parentNode.appendChild(newElement)
  1192. 	}
  1193. }
  1194.  
  1195. function removeChild(targetElement){
  1196. 	return targetElement.parentNode.removeChild(targetElement)
  1197. }
  1198.  
  1199. function element(){
  1200. 	var parent
  1201. 	var lasttag
  1202. 	var createdtag
  1203. 	var toreturn={}
  1204. 	for(var i=0;i<arguments.length;i++){
  1205. 		var current=arguments[i]
  1206. 		if(current){
  1207. 			if(current.nodeType){
  1208. 				parent=lasttag=current
  1209. 			}else if(Array.isArray(current)){
  1210. 				for(var j=0;j<current.length;j++){
  1211. 					if(current[j]){
  1212. 						if(!j&&typeof current[j]=="string"){
  1213. 							var tagname=current[0].split("#")
  1214. 							lasttag=createdtag=document.createElement(tagname[0])
  1215. 							if(tagname[1]){
  1216. 								toreturn[tagname[1]]=createdtag
  1217. 							}
  1218. 						}else if(current[j].constructor==Object){
  1219. 							if(lasttag){
  1220. 								for(var value in current[j]){
  1221. 									if(value!="style"&&value in lasttag){
  1222. 										lasttag[value]=current[j][value]
  1223. 									}else{
  1224. 										lasttag.setAttribute(value,current[j][value])
  1225. 									}
  1226. 								}
  1227. 							}
  1228. 						}else{
  1229. 							var returned=element(lasttag,current[j])
  1230. 							for(var k in returned){
  1231. 								toreturn[k]=returned[k]
  1232. 							}
  1233. 						}
  1234. 					}
  1235. 				}
  1236. 			}else if(current){
  1237. 				createdtag=document.createTextNode(current)
  1238. 			}
  1239. 			if(parent&&createdtag){
  1240. 				parent.appendChild(createdtag)
  1241. 			}
  1242. 			createdtag=0
  1243. 		}
  1244. 	}
  1245. 	return toreturn
  1246. }