[Mattermost Sharing Bookmarklet] Quick-n-dirty Bookmarklet to share the current page to MatterMost #mattermost #sharethis #share #bookmarklet

mattermost-bookmarklet.js

/*******************************************************************************
 * Quick-n-dirty Bookmarklet to share the current page to MatterMost
 * 
 * Limitations
 * ----------- 
 * - Doesn't work in mixed content yet so don't try and share an 
 *   HTTPS URL if your MatterMost is running on HTTP (which it really should  
 *   not be).
 * - Only tested on Chrome. Uses some ES6 stuff so your mileage will vary
 * - Doesn't check for classes called ti-input, ti-post or ti-cancel so it may
 *   mung some pages
 * 
 * Instructions
 * ------------
 * Change the name and hook params to suit your requirements then minify with 
 * your favourite minifcation tool (try https://jscompress.com/).
 * 
 * Create a new bookmark then edit the bookmark URL. Remove any contents in the 
 * URL and type 'javascript:' without the quote and paste your minified code. 
 * 
 * The first few characters will look something like 
 * 
 * javascript: !function(){var a=this;a.name=
 *  
 */

(function () {
    var self = this;

    // Change custom params here
    self.name = 'Troy Forster';
    self.hook = 'http://mattermost.the-rest-of-your-hook';

    // Create a simple form, add it to the top of the body and scroll there
    self.form = document.createElement('div');
    self.form.innerHTML = `<p>Post ${location.href} to MatterMost with this message:</p><p><input class="ti-input" type="text"></p><p><button class="ti-post">Post</button>&nbsp;<button class="ti-cancel">Cancel</button></p>`;
    document.body.insertBefore(self.form, document.body.firstChild);
    window.scrollTo(0, 0);

    // Parse the crude form, construct a crude string and POST to the MM hook
    self.post = () => {
        var s = `${self.name} says: \n > ${document.querySelector('.ti-input').value} \n\n ${location.href}`;

        var request = new Request(self.hook, {
            method: 'POST',
            body: JSON.stringify({ "text": s }),
            headers: new Headers({ 'Content-Type': 'application/json' })
        });

        fetch(request).then(() => {
            self.cancel();
        }).catch((reason) => {
            console.log(`bookmarklet failed with ${reason}`);
        });
    };

    // Remove our click bindings, markup from the DOM and function from the window object
    self.cancel = () => {
        document.querySelector('.ti-post').removeEventListener('click', self.post);
        document.querySelector('.ti-cancel').removeEventListener('click', self.cancel);
        document.body.removeChild(self.form);
        self = undefined;
    };

    // Bind clicks on the buttons 
    document.querySelector('.ti-post').addEventListener('click', self.post)
    document.querySelector('.ti-cancel').addEventListener('click', self.cancel)
})();