☰

XenForo Post Style

Allows a XenForo user to add a custom BBCode template to their posts. Optional automatic formatting and keyboard shortcut included.

  1. // ==UserScript==
  2. // @name	XenForo Post Style
  3. // @namespace	Makaze
  4. // @include	*
  5. // @grant	none
  6. // @version	5.0.4
  7. // @description Allows a XenForo user to add a custom BBCode template to their posts. Optional automatic formatting and keyboard shortcut included.
  8. // ==/UserScript==
  9.  
  10. /*
  11.  XENFORO POST TEMPLATE SCRIPT
  12.  
  13.  PRESS Alt+T TO APPLY ON ANY PAGE
  14.  
  15.  AUTOMATIC FORMATTING OPTIONAL
  16. */
  17.  
  18. function getPosition(element) {
  19. 	var xPosition = 0,
  20. 	yPosition = 0;
  21.  
  22. 	while (element) {
  23. 		xPosition += (element.offsetLeft
  24. 			+ element.clientLeft);
  25. 		yPosition += (element.offsetTop
  26. 			+ element.clientTop);
  27. 		element = element.offsetParent;
  28. 	}
  29. 	return {x: xPosition, y: yPosition};
  30. }
  31.  
  32. Math.easeInOutQuad = function (time, start, change, duration) {
  33. 	time /= duration / 2;
  34. 	if (time < 1) {
  35. 		return change / 2 * time * time + start;
  36. 	}
  37. 	time--;
  38. 	return -change / 2 * (time * (time - 2) - 1) + start;
  39. };
  40.  
  41. function scrollTo(element, to, duration) {
  42. 	var start = element.scrollTop,
  43. 	change = to - start,
  44. 	currentTime = 0,
  45. 	increment = 1;
  46.  
  47. 	var animateScroll = function() {        
  48. 		var val = Math.easeInOutQuad(currentTime, start, change, duration);                        
  49. 		element.scrollTop = val; 
  50. 		currentTime += increment;
  51. 		if (currentTime < duration) {
  52. 			setTimeout(animateScroll, increment);
  53. 		}
  54. 	};
  55.  
  56. 	animateScroll();
  57. }
  58.  
  59. function selectRange(elem, start, end) {
  60. 	var range;
  61.  
  62. 	if (elem.setSelectionRange) {
  63. 		elem.focus();
  64. 		elem.setSelectionRange(start, end);
  65. 	} else if (elem.createTextRange) {
  66. 		range = elem.createTextRange();
  67. 		range.collapse(true);
  68. 		range.moveEnd('character', end);
  69. 		range.moveStart('character', start);
  70. 		range.select();
  71. 	}
  72. }
  73.  
  74. function cursor(elem, position) {
  75. 	selectRange(elem, position, position);
  76. }
  77.  
  78. function applyTemplate(elem) {
  79. 	var formContext = elem,
  80. 	opts = (localStorage.getItem('MakazeScriptOptions')) ? JSON.parse(localStorage.getItem('MakazeScriptOptions')) : {},
  81. 	htmlPrefix = (opts.hasOwnProperty('xf_template_htmlPrefix')) ? opts.xf_template_htmlPrefix : '',
  82. 	htmlSuffix = (opts.hasOwnProperty('xf_template_htmlSuffix')) ? opts.xf_template_htmlSuffix : '',
  83. 	bbPrefix = (opts.hasOwnProperty('xf_template_bbPrefix')) ? opts.xf_template_bbPrefix : '',
  84. 	bbSuffix = (opts.hasOwnProperty('xf_template_bbSuffix')) ? opts.xf_template_bbSuffix : '',
  85. 	thisList,
  86. 	thisLink,
  87. 	instance,
  88. 	postForm,
  89. 	plainText,
  90. 	i = 0;
  91.  
  92. 	var applyTemplateEvent = function(event) {
  93. 		var parent = event.target;
  94. 		applyToChildren(parent);
  95. 		event.target.removeEventListener('keydown', applyTemplateEvent, false);
  96. 	};
  97.  
  98. 	var applyToChildren = function(parent) {
  99. 		var thisChild,
  100. 		applyTo,
  101. 		i = 0;
  102.  
  103. 		for (i = 0; i < parent.childNodes.length; i++) {
  104. 			thisChild = parent.childNodes[i];
  105. 			if (thisChild.innerHTML) {
  106. 				applyTo = thisChild.innerHTML.replace(
  107. 					/\[quote([^]+)\[\/quote\]/gi, htmlSuffix + '[quote$1[/quote]' + htmlPrefix
  108. 				);
  109.  
  110. 				thisChild.innerHTML = htmlPrefix + applyTo + htmlSuffix;
  111. 			}
  112. 		}
  113. 	};
  114.  
  115. 	while (formContext.getElementsByClassName('redactor_box')[0] == null && formContext.parentNode) {
  116. 		formContext = formContext.parentNode;
  117. 	}
  118.  
  119. 	if (opts.hasOwnProperty('xf_template_auto')) {
  120. 		for (i = 0; i < formContext.getElementsByClassName('redactor_MessageEditor').length; i++) {
  121. 			instance = formContext.getElementsByClassName('redactor_MessageEditor')[i];
  122. 			postForm = instance.contentWindow.document;
  123. 			if (!postForm.body.textContent.length) {
  124. 				postForm.body.addEventListener('keydown', applyTemplateEvent, false);
  125. 			} else {
  126. 				applyToChildren(postForm.body);
  127. 			}
  128. 		}
  129. 		for (i = 0; i < formContext.getElementsByClassName('bbCodeEditorContainer').length; i++) {
  130. 			plainText = formContext.getElementsByClassName('bbCodeEditorContainer')[i].getElementsByTagName('textarea')[0];
  131. 			plainText.value = bbPrefix + plainText.value + bbSuffix;
  132. 			cursor(plainText, plainText.value.length - bbSuffix.length);
  133. 		}
  134. 	} else {
  135. 		thisList = document.getElementById('AccountMenu').getElementsByClassName('blockLinksList')[0];
  136. 		for (i = 0; i < thisList.getElementsByTagName('a').length; i++) {
  137. 			thisLink = thisList.getElementsByTagName('a')[i];
  138. 			if (thisLink.href.match(/account\/personal\-details/gi) && thisLink.href.substr(window.location.href.length - 14, 14) !== '#Post_Template') {
  139. 				thisLink.href = thisLink.href + '#Post_Template';
  140. 				thisLink.click();
  141. 				break;
  142. 			}
  143. 		}
  144. 	}
  145. }
  146.  
  147. function xenForoMessage(msg, success) {
  148. 	if (success) {
  149. 		$('#templateMessage .content').html(msg);
  150. 		console.log(msg);
  151. 	} else {
  152. 		$('#templateMessage .content').html('<strong>Error:</strong> ' + msg);
  153. 		console.log('Error:', msg);
  154. 	}
  155. 	$('#templateMessage').slideDown('medium');
  156. 	$('#templateMessage .content').animate({
  157. 		'opacity': 1
  158. 	}, 'fast');
  159. 	setTimeout(function() {
  160. 		$('#templateMessage').slideUp('medium');
  161. 		$('#templateMessage .content').animate({
  162. 			'opacity': 0
  163. 		}, 'fast');
  164. 	}, 1500);
  165. }
  166.  
  167. function runInGlobal(code) {
  168. 	var scripts = document.createElement('script');
  169. 	scripts.type = 'text/javascript';
  170. 	scripts.id = 'runInGlobal';
  171. 	scripts.appendChild(document.createTextNode(
  172. 		code +
  173. 		'\n\n' +
  174. 		'document.getElementById(\'runInGlobal\').remove();'
  175. 	));
  176.  
  177. 	(document.head || document.body || document.documentElement).appendChild(scripts);
  178. }
  179.  
  180. function saveTemplateSettings() {
  181. 	if (!document.getElementById('htmlPrefixField').value.length) {
  182. 		xenForoMessage('HTML prefix required.', false);
  183. 		return false;
  184. 	}
  185.  
  186. 	if (!document.getElementById('htmlSuffixField').value.length) {
  187. 		xenForoMessage('HTML suffix required.', false);
  188. 		return false;
  189. 	}
  190.  
  191. 	if (!document.getElementById('bbPrefixField').value.length) {
  192. 		xenForoMessage('BBCode prefix required.', false);
  193. 		return false;
  194. 	}
  195.  
  196. 	if (!document.getElementById('bbSuffixField').value.length) {
  197. 		xenForoMessage('BBCode suffix required.', false);
  198. 		return false;
  199. 	}
  200. 	
  201. 	var opts = (localStorage.getItem('MakazeScriptOptions')) ? JSON.parse(localStorage.getItem('MakazeScriptOptions')) : {};
  202.  
  203. 	opts.xf_template_auto = (document.getElementById('autoApplyField').options[document.getElementById('autoApplyField').selectedIndex].value === 'true');
  204. 	opts.xf_template_htmlPrefix = document.getElementById('htmlPrefixField').value;
  205. 	opts.xf_template_htmlSuffix = document.getElementById('htmlSuffixField').value;
  206. 	opts.xf_template_bbPrefix = document.getElementById('bbPrefixField').value;
  207. 	opts.xf_template_bbSuffix = document.getElementById('bbSuffixField').value;
  208. 	localStorage.setItem('MakazeScriptOptions', JSON.stringify(opts));
  209.  
  210. 	xenForoMessage('Your settings have been saved.', true);
  211. }
  212.  
  213. var applyHandler = function() {
  214. 	applyTemplate(this);
  215. };
  216.  
  217. if (document.documentElement.id === "XenForo") {
  218. 	var opts = (localStorage.getItem('MakazeScriptOptions')) ? JSON.parse(localStorage.getItem('MakazeScriptOptions')) : {},
  219. 	autoApply = (opts.hasOwnProperty('xf_template_auto')) ? opts.xf_template_auto : false,
  220. 	htmlPrefix = (opts.hasOwnProperty('xf_template_htmlPrefix')) ? opts.xf_template_htmlPrefix : '',
  221. 	htmlSuffix = (opts.hasOwnProperty('xf_template_htmlSuffix')) ? opts.xf_template_htmlSuffix : '',
  222. 	bbPrefix = (opts.hasOwnProperty('xf_template_bbPrefix')) ? opts.xf_template_bbPrefix : '',
  223. 	bbSuffix = (opts.hasOwnProperty('xf_template_bbSuffix')) ? opts.xf_template_bbSuffix : '',
  224. 	instance,
  225. 	buttonsContext,
  226. 	richInstance,
  227. 	richDoc,
  228. 	field,
  229. 	i = 0;
  230.  
  231. 	// Button creation and auto-application
  232.  
  233. 	if (document.getElementsByClassName('MessageEditor')[0] != null) {
  234. 		for (i = 0; i < document.getElementsByClassName('MessageEditor').length; i++) {
  235. 			instance = document.getElementsByClassName('MessageEditor')[i];
  236. 			buttonsContext = instance;
  237.  
  238. 			while (buttonsContext.getElementsByClassName('submitUnit')[0] == null && buttonsContext.parentNode) {
  239. 				buttonsContext = buttonsContext.parentNode;
  240. 			}
  241.  
  242. 			buttonsContext = buttonsContext.getElementsByClassName('submitUnit')[0].getElementsByClassName('button primary')[0].parentNode;
  243.  
  244. 			var applyButton = document.createElement('input'),
  245. 			applyButtonSpacer = document.createTextNode(String.fromCharCode(160));
  246. 			applyButton.type = 'button';
  247. 			applyButton.value = 'Apply Style';
  248. 			applyButton.className = 'button JsOnly applyButton';
  249. 			applyButton.onclick = applyHandler;
  250.  
  251. 			buttonsContext.appendChild(applyButtonSpacer);
  252. 			buttonsContext.appendChild(applyButton);
  253.  
  254. 			if (autoApply.toString() === 'true') {
  255. 				applyTemplate(instance);
  256. 			}
  257. 		}
  258.  
  259. 		document.addEventListener('keydown', function(e) {
  260. 			var i = 0,
  261. 			keyInstance;
  262.  
  263. 			if (e.keyCode == 84 && e.altKey) {
  264. 				for (i = 0; i < document.getElementsByClassName('MessageEditor').length; i++) {
  265. 					keyInstance = document.getElementsByClassName('MessageEditor')[i];
  266. 					applyTemplate(keyInstance);
  267. 				}
  268. 			}
  269. 		}, false);
  270.  
  271. 		var applyToRichHandler = function(e) {
  272. 			if (e.keyCode == 84 && e.altKey) {
  273. 				applyTemplate(richInstance);
  274. 			}
  275. 		};
  276.  
  277. 		if (document.getElementsByClassName('redactor_MessageEditor')[0] != null) {
  278. 			for (i = 0; i < document.getElementsByClassName('redactor_MessageEditor').length; i++) {
  279. 				richInstance = document.getElementsByClassName('redactor_MessageEditor')[i];
  280. 				richDoc = richInstance.contentWindow.document;
  281. 				richDoc.addEventListener('keydown', applyToRichHandler, false);
  282. 			}
  283. 		}
  284. 	}
  285. 	
  286. 	if (window.location.href.match(/account\/personal\-details/gi)) {
  287. 		// Define xenForoMessage and saveTemplateSettings
  288.  
  289. 		runInGlobal(
  290. 			xenForoMessage.toString() +
  291. 			saveTemplateSettings.toString()
  292. 		);
  293.  
  294. 		// Settings creation
  295.  
  296. 		var optionsContainer = document.createElement('fieldset'),
  297.  
  298. 		header = document.createElement('dl'),
  299. 		headerDT = document.createElement('dt'),
  300. 		headerDD = document.createElement('dd'),
  301. 		headerDD_Text = document.createTextNode('Post Style'),
  302.  
  303. 		autoApplyField = document.createElement('dl'),
  304. 		autoApplyFieldDT = document.createElement('dt'),
  305. 		autoApplyFieldDT_Text = document.createTextNode('Auto-apply:'),
  306. 		autoApplyFieldDD = document.createElement('dd'),
  307. 		autoApplyFieldDD_Select = document.createElement('select'),
  308. 		autoApplyFieldDD_Select_true = document.createElement('option'),
  309. 		autoApplyFieldDD_Select_true_Text = document.createTextNode('True'),
  310. 		autoApplyFieldDD_Select_false = document.createElement('option'),
  311. 		autoApplyFieldDD_Select_false_Text = document.createTextNode('False'),
  312.  
  313. 		htmlPrefixField = document.createElement('dl'),
  314. 		htmlPrefixFieldDT = document.createElement('dt'),
  315. 		htmlPrefixFieldDT_Text = document.createTextNode('HTML Prefix:'),
  316. 		htmlPrefixFieldDD = document.createElement('dd'),
  317. 		htmlPrefixFieldDD_input = document.createElement('input'),
  318.  
  319. 		htmlSuffixField = document.createElement('dl'),
  320. 		htmlSuffixFieldDT = document.createElement('dt'),
  321. 		htmlSuffixFieldDT_Text = document.createTextNode('HTML Suffix:'),
  322. 		htmlSuffixFieldDD = document.createElement('dd'),
  323. 		htmlSuffixFieldDD_input = document.createElement('input'),
  324.  
  325. 		bbPrefixField = document.createElement('dl'),
  326. 		bbPrefixFieldDT = document.createElement('dt'),
  327. 		bbPrefixFieldDT_Text = document.createTextNode('BBCode Prefix:'),
  328. 		bbPrefixFieldDD = document.createElement('dd'),
  329. 		bbPrefixFieldDD_input = document.createElement('input'),
  330.  
  331. 		bbSuffixField = document.createElement('dl'),
  332. 		bbSuffixFieldDT = document.createElement('dt'),
  333. 		bbSuffixFieldDT_Text = document.createTextNode('BBCode Suffix:'),
  334. 		bbSuffixFieldDD = document.createElement('dd'),
  335. 		bbSuffixFieldDD_input = document.createElement('input'),
  336.  
  337. 		submitField = document.createElement('dl'),
  338. 		submitFieldDT = document.createElement('dt'),
  339. 		submitFieldDD = document.createElement('dd'),
  340. 		submitFieldDD_input = document.createElement('input'),
  341.  
  342. 		templateMessage = document.createElement('div'),
  343. 		templateMessage_content = document.createElement('div'),
  344. 		templateMessage_content_Text = document.createTextNode('Your settings have been saved.');
  345.  
  346. 		// Load input settings
  347.  
  348. 		htmlPrefixFieldDD_input.value = htmlPrefix;
  349. 		htmlSuffixFieldDD_input.value = htmlSuffix;
  350. 		bbPrefixFieldDD_input.value = bbPrefix;
  351. 		bbSuffixFieldDD_input.value = bbSuffix;
  352.  
  353. 		// Header
  354.  
  355. 		headerDD.setAttribute('style', 'font-weight: bolder; font-size: 130%; width: 40%; text-decoration: underline;');
  356. 		headerDD.appendChild(headerDD_Text);
  357.  
  358. 		header.className = 'ctrlUnit';
  359. 		header.appendChild(headerDT);
  360. 		header.appendChild(headerDD);
  361.  
  362. 		// Auto apply field
  363.  
  364. 		autoApplyFieldDT.appendChild(autoApplyFieldDT_Text);
  365.  
  366. 		autoApplyFieldDD_Select_true.value = true;
  367. 		autoApplyFieldDD_Select_true.appendChild(autoApplyFieldDD_Select_true_Text);
  368.  
  369. 		autoApplyFieldDD_Select_false.value = false;
  370. 		autoApplyFieldDD_Select_false.appendChild(autoApplyFieldDD_Select_false_Text);
  371.  
  372. 		autoApplyFieldDD_Select.id = 'autoApplyField';
  373. 		autoApplyFieldDD_Select.className = 'textCtrl';
  374. 		autoApplyFieldDD_Select.appendChild(autoApplyFieldDD_Select_true);
  375. 		autoApplyFieldDD_Select.appendChild(autoApplyFieldDD_Select_false);
  376.  
  377. 		autoApplyFieldDD.appendChild(autoApplyFieldDD_Select);
  378.  
  379. 		autoApplyField.className = 'ctrlUnit';
  380. 		autoApplyField.appendChild(autoApplyFieldDT);
  381. 		autoApplyField.appendChild(autoApplyFieldDD);
  382.  
  383. 		// HTML prefix field
  384.  
  385. 		htmlPrefixFieldDT.appendChild(htmlPrefixFieldDT_Text);
  386.  
  387. 		htmlPrefixFieldDD_input.type = 'text';
  388. 		htmlPrefixFieldDD_input.id = 'htmlPrefixField';
  389. 		htmlPrefixFieldDD_input.className = 'textCtrl OptOut';
  390.  
  391. 		htmlPrefixFieldDD.appendChild(htmlPrefixFieldDD_input);
  392.  
  393. 		htmlPrefixField.className = 'ctrlUnit';
  394. 		htmlPrefixField.appendChild(htmlPrefixFieldDT);
  395. 		htmlPrefixField.appendChild(htmlPrefixFieldDD);
  396.  
  397. 		// HTML suffix field
  398.  
  399. 		htmlSuffixFieldDT.appendChild(htmlSuffixFieldDT_Text);
  400.  
  401. 		htmlSuffixFieldDD_input.type = 'text';
  402. 		htmlSuffixFieldDD_input.id = 'htmlSuffixField';
  403. 		htmlSuffixFieldDD_input.className = 'textCtrl OptOut';
  404.  
  405. 		htmlSuffixFieldDD.appendChild(htmlSuffixFieldDD_input);
  406.  
  407. 		htmlSuffixField.className = 'ctrlUnit';
  408. 		htmlSuffixField.appendChild(htmlSuffixFieldDT);
  409. 		htmlSuffixField.appendChild(htmlSuffixFieldDD);
  410.  
  411. 		// BBCode prefix field
  412.  
  413. 		bbPrefixFieldDT.appendChild(bbPrefixFieldDT_Text);
  414.  
  415. 		bbPrefixFieldDD_input.type = 'text';
  416. 		bbPrefixFieldDD_input.id = 'bbPrefixField';
  417. 		bbPrefixFieldDD_input.className = 'textCtrl OptOut';
  418.  
  419. 		bbPrefixFieldDD.appendChild(bbPrefixFieldDD_input);
  420.  
  421. 		bbPrefixField.className = 'ctrlUnit';
  422. 		bbPrefixField.appendChild(bbPrefixFieldDT);
  423. 		bbPrefixField.appendChild(bbPrefixFieldDD);
  424.  
  425. 		// BBCode suffix field
  426.  
  427. 		bbSuffixFieldDT.appendChild(bbSuffixFieldDT_Text);
  428.  
  429. 		bbSuffixFieldDD_input.type = 'text';
  430. 		bbSuffixFieldDD_input.id = 'bbSuffixField';
  431. 		bbSuffixFieldDD_input.className = 'textCtrl OptOut';
  432.  
  433. 		bbSuffixFieldDD.appendChild(bbSuffixFieldDD_input);
  434.  
  435. 		bbSuffixField.className = 'ctrlUnit';
  436. 		bbSuffixField.appendChild(bbSuffixFieldDT);
  437. 		bbSuffixField.appendChild(bbSuffixFieldDD);
  438.  
  439. 		// Submit field
  440.  
  441. 		submitFieldDD_input.type = 'button';
  442. 		submitFieldDD_input.id = 'submitTemplate';
  443. 		submitFieldDD_input.className = 'button';
  444. 		submitFieldDD_input.value = 'Save';
  445. 		submitFieldDD_input.setAttribute('onClick', 'saveTemplateSettings();');
  446.  
  447. 		submitFieldDD.appendChild(submitFieldDD_input);
  448.  
  449. 		submitField.className = 'ctrlUnit';
  450. 		submitField.appendChild(submitFieldDT);
  451. 		submitField.appendChild(submitFieldDD);
  452.  
  453. 		// Template message
  454.  
  455. 		templateMessage_content.className = 'content baseHtml';
  456. 		templateMessage_content.style.opacity = 0;
  457. 		templateMessage_content.appendChild(templateMessage_content_Text);
  458.  
  459. 		templateMessage.id = 'templateMessage';
  460. 		templateMessage.className = 'xenOverlay timedMessage';
  461. 		templateMessage.setAttribute('style', 'top: 0px; left: 0px; position: fixed; display: none;');
  462. 		templateMessage.appendChild(templateMessage_content);
  463.  
  464. 		// Build it all
  465.  
  466. 		optionsContainer.id = 'templateOptionsContainer';
  467. 		optionsContainer.appendChild(header);
  468. 		optionsContainer.appendChild(autoApplyField);
  469. 		optionsContainer.appendChild(htmlPrefixField);
  470. 		optionsContainer.appendChild(htmlSuffixField);
  471. 		optionsContainer.appendChild(bbPrefixField);
  472. 		optionsContainer.appendChild(bbSuffixField);
  473. 		optionsContainer.appendChild(submitField);
  474.  
  475. 		document.getElementsByClassName('OptOut')[document.getElementsByClassName('OptOut').length - 1].parentNode.insertBefore(optionsContainer, document.getElementsByClassName('OptOut')[document.getElementsByClassName('OptOut').length - 1]);
  476.  
  477. 		(document.body || document.documentElement).appendChild(templateMessage);
  478.  
  479. 		// Load auto apply setting
  480.  
  481. 		for (i = 0, field = document.getElementById('autoApplyField'); i < field.options.length; i++) {
  482. 			if (field.options[i].value === autoApply.toString()) {
  483. 				field.selectedIndex = i;
  484. 			}
  485. 		}
  486. 		
  487. 		if (window.location.href.substr(window.location.href.length - 14, 14) === '#Post_Template') {
  488. 			scrollTo(document.body, getPosition(document.getElementById('templateOptionsContainer')).y, 100);
  489. 			runInGlobal('xenForoMessage(\'Post Template installed. Customize your settings.\', true);');
  490. 		}
  491. 	}
  492. }