AO3: Comment Formatting Options

Adds interface to comments to easily insert formatting options in HTML
Verzia zo dňa 04.03.2018. Pozri najnovšiu verziu.
Spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.
Zalomiť riadky
// ==UserScript==
// @name        AO3: Comment Formatting Options
// @namespace   adustyspectacle
// @description Adds interface to comments to easily insert formatting options in HTML
// @include     http://*archiveofourown.org/*
// @include     https://*archiveofourown.org/*
// @version     1.1
// @history     1.1 updated include urls
// @history     1.0 initial
// @grant       none
// ==/UserScript==

(function($) {
	
	//
	var ICONIFY = true;
	//

	if (ICONIFY) {
		var font_awesome_icons = document.createElement('script');
		font_awesome_icons.setAttribute('src', 'https://use.fontawesome.com/ed555db3cc.js');
		document.getElementsByTagName('head')[0].appendChild(font_awesome_icons);

		var fa_icons_css = document.createElement('style');
		fa_icons_css.setAttribute('type', 'text/css');
		fa_icons_css.innerHTML = `
			.comment-formatting {
				font-family: FontAwesome, sans-serif;
			}
		`
		document.getElementsByTagName('head')[0].appendChild(fa_icons_css);
	}

	function addCommentFormattingUI(commentId) {
		var postCommentField = $(commentId);
		var commentUniqueId = postCommentField[0].id.slice(20);
		var commentFormatting = document.createElement("ul");

		var commentFormattingOptions = {
			bold_text: [["Bold", "&#xf032"], ["<strong>", "</strong>"]],
			italic_text: [["Italic", "&#xf033"], ["<em>", "</em>"]],
			underline_text: [["Underline", "&#xf0cd"], ["<u>", "</u>"]],
			strike_text: [["Strikethrough", "&#xf0cc"], ["<s>", "</s>"]],
			insert_link: [["Insert Link", "&#xf0c1"], ['<a href="">', "</a>"]],
			insert_image: [["Insert Image", "&#xf03e"], ['<img src="">']],
			blockquote_text: [["Blockquote", "&#xf10d"], ["<blockquote>", "</blockquote>"]]
		}

		commentFormatting.setAttribute("id", "comment_formatting_for_" + commentUniqueId);
		commentFormatting.setAttribute("class", "actions comment-formatting");
		commentFormatting.setAttribute("style", "float: left; text-align: left;");
		commentFormatting.innerHTML = "<h4>Formatting Options:</h4>";
		
		postCommentField.before(commentFormatting);

		for (let key in commentFormattingOptions) {
			var commentFormattingOptionItem = document.createElement("li");
			var commentFormattingOptionLink = document.createElement("a");
			let commentFormattingOptionItemId = key + "_" + commentUniqueId;

			commentFormattingOptionItem.setAttribute("id", commentFormattingOptionItemId);
			commentFormattingOptionItem.setAttribute("class", key);
			commentFormattingOptionItem.setAttribute("title", commentFormattingOptions[key][0][0]);

			if (ICONIFY) commentFormattingOptionLink.innerHTML = commentFormattingOptions[key][0][1];
			else commentFormattingOptionLink.innerHTML = commentFormattingOptions[key][0][0];

			commentFormattingOptionItem.appendChild(commentFormattingOptionLink);
			commentFormatting.appendChild(commentFormattingOptionItem);
			
			$("#" + commentFormattingOptionItemId).on('click', 'a', function() {
				
				var caretPos = $(commentId)[0].selectionStart;
				var caretEnd = $(commentId)[0].selectionEnd;
				var textAreaTxt = $(commentId).val();
				
				if (caretPos == caretEnd) {
					var formatToAdd = commentFormattingOptions[key][1].join("");
				} else {
					var textAreaHighlight = textAreaTxt.slice(caretPos, caretEnd);
					var formatToAdd = commentFormattingOptions[key][1].join(textAreaHighlight);
				}
				
				$(commentId).val(textAreaTxt.substring(0, caretPos) + formatToAdd + textAreaTxt.substring(caretEnd) );

				$(commentId).focus();
				$(commentId)[0].selectionStart = caretPos + txtToAdd.length
				$(commentId)[0].selectionEnd = caretPos + txtToAdd.length
			});
		}

		
	}
	
	// For the Add Comment area found in works/tags
	if ( $("#add_comment textarea").length ) {
		add_comment_box_id = $("#add_comment textarea")[0].id;
		
		addCommentFormattingUI("#" + add_comment_box_id);
	}
	
	// This whole bit is for Reply Comments stuff, because AJAX
	$( document ).ajaxSuccess(function( event, xhr, settings ) {
		if (settings.url.indexOf("add_comment_reply?id") !== -1) {
			// This is for tag comments
			var sliceStart = settings.url.indexOf("id=") + 3;
			var sliceEnd = settings.url.indexOf("&tag_id");
			var commentReplyId = settings.url.slice(sliceStart, sliceEnd);
			var commentReplyIdSelector = $("#comment_content_for_" + commentReplyId).selector;

			addCommentFormattingUI(commentReplyIdSelector);
		}
		else if (settings.url.indexOf("add_comment_reply?chapter_id") !== -1) {
			// This is for work comments
			var sliceStart = settings.url.indexOf("&id=") + 4;
			var sliceEnd = settings.url.indexOf("&view");
			
			if (settings.url.indexOf("view_full_work=true") !== -1) {
				var commentReplyId = settings.url.slice(sliceStart, sliceEnd);
			} else {
				var commentReplyId = settings.url.slice(sliceStart);
			}
			
			var commentReplyIdSelector = $("#comment_content_for_" + commentReplyId).selector;

			addCommentFormattingUI(commentReplyIdSelector);
		}
		else if (settings.url.indexOf("inbox/reply?") !== -1) {
			// This is for inbox comments
			var sliceStart = settings.url.indexOf("id=") + 3;
			var commentReplyId = settings.url.slice(sliceStart);
			var commentReplyIdSelector = $("#comment_content_for_" + commentReplyId).selector;

			addCommentFormattingUI(commentReplyIdSelector);
		}
	});
	
})(jQuery);