message_templates.user.js

// ==UserScript==
// @name    Mod Message Templates
// @desc    Allows mods to add their own mod message templates.
// @author  ArtOfCode
// @version 0.1.24
// @grant   none
// @match   *://*.stackexchange.com/users/message/create/*
// @match   *://*.stackoverflow.com/users/message/create/*
// @match   *://*.superuser.com/users/message/create/*
// @match   *://*.serverfault.com/users/message/create/*
// @match   *://*.askubuntu.com/users/message/create/*
// @match   *://*.stackapps.com/users/message/create/*
// @match   *://*.mathoverflow.net/users/message/create/*
// @exclude *://chat.stackexchange.com/*
// @exclude *://chat.meta.stackexchange.com/*
// @exclude *://chat.stackoverflow.com/*
// ==/UserScript==

(function() {
    'use strict';

    var userscript = function($) {
        var handlerExists = false;

        $("a#show-templates").on("click", function(ev) {
            if (!handlerExists) {
                $(document).on("DOMNodeInserted", function(ev) {
                    var templates;
                    if (localStorage.getItem("mod_message_templates")) {
                        templates = JSON.parse(atob(localStorage.getItem("mod_message_templates")));
                    }

                    if ($(ev.target).hasClass("popup")) {
                        var actionList = $("ul.action-list");
                        var messageCount = actionList.children("li").length;

                        if (templates) {
                            for (var i = 0; i < templates.length; i++) {
                                var item = $("<li></li>");

                                // msg is the radio input element that actually contains the message
                                var msg = $("<input />");
                                msg.attr("type", "radio")
                                    .attr("id", "template-" + (messageCount + i).toString())
                                    .attr("name", "mod-template")
                                    .val(templates[i]['message']);

                                // hidden provides the reason for suspension that gets shown on the profile
                                var hidden = $("<input />");
                                hidden.attr("type", "hidden")
                                    .attr("id", "template-" + (messageCount + i).toString() + "-reason")
                                    .val("for rule violations")
                                    .attr("data-days", null);

                                // label contains the label that gets shown for this message
                                var label = $("<label></label>");
                                label.attr("for", "template-" + (messageCount + i).toString());
                                label.html("<span class='action-name'> " + templates[i]['name'] +
                                           "</span><span class='action-desc'><div style='margin-left: 18px; line-height: 130%; margin-bottom: 5px;'>" +
                                           templates[i]['message'].substring(0, 397) + "</div></span>");

                                // I don't *think* there's any particular order they have to be in, but this is the order that's in the HTML.
                                item.append(msg).append(hidden).append(label);
                                actionList.append(item);
                            }
                        }

                        if ($("a.popup-actions-templates").length === 0) {
                            $("div.popup-actions", ev.target).append('<div style="float: left; margin-top: 18px; margin-left: 10px;"><a class="popup-actions-templates" href="javascript:void(0)">templates</a></div>');
                        }

                        $("a.popup-actions-templates").on("click", function(ev) {
                            ev.preventDefault();
                            var dialog = $("#pane-main");
                            dialog.html("");
                            dialog.append("<h2>Custom Message Templates</h2>");
                            dialog.append("<em>reload to see changes</em>");

                            var list = $("<ul></ul>");
                            if (templates) {
                                for (var i = 0; i < templates.length; i++) {
                                    list.append("<li><strong>" + templates[i]['name'] + "</strong> &mdash; <a class='template-edit' data-template='" + templates[i]['name'] + 
                                                "'>edit</a> | <a class='template-delete' data-template='" + templates[i]['name'] + "'>delete</a>");
                                }
                            }
                            list.append("<li><a class='template-new'>new</a></li>");
                            dialog.append(list);
                        });
                    }

                    $("a.template-edit").on("click", function(ev) {
                        ev.preventDefault();
                        var dialog = $("#pane-main");
                        dialog.html("");
                        dialog.append("<h2>Edit Template</h2>");

                        var name = $(this).data("template");

                        if (templates) {
                            var matches = templates.filter(function(item) { return item.name == name; });
                            var selected = matches[0];
                            dialog.append("<input type='text' id='template-name' value='" + name + "' style='width: 100%' placeholder='message name' /><br/>");
                            dialog.append("<textarea id='template-message' style='width: 100%; height: 300px;' placeholder='message content'>" + selected.message + "</textarea><br/>");
                            dialog.append("<input type='button' id='template-edit-submit' data-oldname='" + name + "' value='Save' />");
                        }
                        else {
                            dialog.append("<span style='color:red'><strong>E:</strong> no templates available");
                        }
                    });

                    $("a.template-new").on("click", function(ev) {
                        ev.preventDefault();
                        var dialog = $("#pane-main");
                        dialog.html("");
                        dialog.append("<h2>New Template</h2>");

                        dialog.append("<input type='text' id='template-name' value='' style='width: 100%' placeholder='message name' /><br/>");
                        dialog.append("<textarea id='template-message' style='width: 100%; height: 300px;' placeholder='message content'></textarea><br/>");
                        dialog.append("<input type='button' id='template-submit' value='Save' />");
                    });

                    $("a.template-delete").on("click", function(ev) {
                        var name = $(this).data("template");
                        var matches = templates.filter(function(item) { return item.name == name; });
                        var selected = matches[0];
                        var index = templates.indexOf(selected);
                        if (index > -1) {
                            templates.splice(index, 1);
                        }
                        localStorage.setItem('mod_message_templates', btoa(JSON.stringify(templates)));
                    });

                    $("input#template-submit").on("click", function(ev) {
                        ev.preventDefault();
                        var name = $("input#template-name").val();
                        var message = $("textarea#template-message").val();

                        if (!templates) {
                            templates = [];
                        }

                        templates.push({'name': name, 'message': message});
                        localStorage.setItem('mod_message_templates', btoa(JSON.stringify(templates)));

                        $("a.popup-actions-templates").trigger("click");
                    });

                    $("input#template-edit-submit").on("click", function(ev) {
                        ev.preventDefault();
                        var oldname = $(this).data("oldname");
                        var name = $("input#template-name").val();
                        var message = $("textarea#template-message").val();

                        if (!templates) {
                            templates = [];
                        }
                        else {
                            var matches = templates.filter(function(item) { return item.name == oldname; });
                            var selected = matches[0];
                            var index = templates.indexOf(selected);
                            if (index > -1) {
                                templates.splice(index, 1);
                            }
                        }

                        templates.push({'name': name, 'message': message});
                        localStorage.setItem('mod_message_templates', btoa(JSON.stringify(templates)));

                        $("a.popup-actions-templates").trigger("click");
                    });
                });
                handlerExists = true;
            }
        });
    };

    var el = document.createElement('script');
    el.type = 'text/javascript';
    el.text = '(' + userscript + ')(jQuery);';
    document.head.appendChild(el);
})();