Hi Tender folks,

This is a followup to this question about echo templates.

I fiddled with this some. The canned responses being in the html made it pretty easy! Here's the custom javascript I used to create the select box we wanted:

// improved echo template interface
if ($$('comment_body') && Tender.is_supporter) {
    
        function insertResponse() {
            jQuery("#comment_body").val( function( index, val ) {
                return val + jQuery("#canned-responses").val();
            });
        };

        // create responses list
        var responses = jQuery('<select></select>');
        responses.attr("id", "canned-responses");
        responses.attr("onchange", "insertResponse()");

        // create options and optgroups
        // assumes echo template titles are in the format group:title
        // puts anything with just a title into a Misc group
        replies = TenderKO.discussion.cannedReplies;
        groups = {"Misc": jQuery('<optGroup label="Misc"></optGroup>'),};
        for (r in replies)
        {
            if (replies[r].title) {
                var arr = replies[r].title.split(':');
                o = jQuery('<option></option>');
                if (arr.length === 1) {
                    o.html(replies[r].title);
                    o.val(replies[r].body);
                    groups["Misc"].append(o);
                } else {
                    o.html(arr[1]);
                    o.val(replies[r].body);
                    try {
                        groups[arr[0]].append(o);
                    } catch (TypeError) {
                        g = jQuery('<optGroup></optGroup>')
                        g.attr("label", arr[0]);
                        g.append(o)
                        groups[arr[0]] = g
                    }
                }
            }
        }
        
        // sort the optgroups and add to selectbox
        var keys = new Array();
        for (g in groups) {
            keys.push(g);
        }
        keys.sort();
        for (k in keys) {
            responses.append(groups[keys[k]]);
        }

        // insert select box into page and activate it
        var commentBox = jQuery('#comment_body');
        commentBox.after(responses);
        responses.chosen().change(function() {
            jQuery('#comment_body').focus();
        });
        
        // ctrl+alt+M to focus search box
        commentBox.keydown(function(e) {
            if (e.altKey && e.ctrlKey && e.which === 77) {
                if (!jQuery('#canned_responses_chosen').hasClass('chosen-container-active')) {
                    jQuery('#canned_responses_chosen').trigger('mousedown');
                }
                e.preventDefault();
            }
        });
}

You also need to add this to the custom HTML headers (I used Chosen to style the selectbox):

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

This gives you a searchable list that pops up when you press ctrl+alt+M from the comment box and returns focus to the comment box after selecting an option so you can continue typing. This makes using echo templates so much easier for us. Hopefully others will find it useful, or maybe you can integrate something like this into Tender directly.