SlackにLINE風スタンプを投稿するChrome拡張用スクリプト.

slackstamps.d.ts

/// <reference path="../ts/typings/jquery/jquery.d.ts" />
/// <reference path="../ts/typings/bootstrap/bootstrap.d.ts" />
declare module SlackStamps {
    interface StampProvider {
        provideThumbnailURL(): string;
        provideImageURLs(): string[];
    }
    interface StampsMenuManager {
        generateMenu(): void;
        addStamp(provider: StampProvider): void;
    }
    var manager: StampsMenuManager;
}
declare module SlackStamps {
}
declare module SlackStamps {
}
declare module SlackStamps {
}

slackstamps.ts

// slackstamps.ts

/// <reference path="typings/jquery/jquery.d.ts" />
/// <reference path="typings/bootstrap/bootstrap.d.ts" />

module SlackStamps {

    export interface StampProvider {
        provideThumbnailURL(): string;
        provideImageURLs(): string[];
    }

    export interface StampsMenuManager {
        generateMenu(): void;
        addStamp(provider: StampProvider): void;
    }

    class Component {
        public component: JQuery;
    }

    class StampsDropupToggle extends Component {
        private static URL_ICON: string = 'http://a1.mzstatic.com/jp/r30/Purple/v4/fd/99/08/fd99086d-0242-7fba-5a87-ee31a71f8ea8/icon_64.png';

        constructor() {
            super();
            var toggle = $('<a id="btn-stamps" role="button" data-toggle="dropdown">'); {
                var icon = $('<img>');
                icon.attr('src', StampsDropupToggle.URL_ICON);
                toggle.append(icon);
            }
            this.component = toggle;
        }
    }

    class StampsDropupMenu extends Component {
        private tabs: JQuery;
        private panes: JQuery;

        constructor() {
            super();
            var menu = $('<ul class="dropdown-menu" role="menu" aria-labelledby="btn-stamps">'); {
                this.tabs = $('<ul class="nav nav-tabs">');
                this.panes = $('<div class="tab-content">');
                menu.append(this.tabs);
                menu.append(this.panes);
            }
            this.component = menu;
        }

        addTab(tab: StampTab, pane: StampPane): void {
            var index = this.tabs.children().length;
            if (index == 0) {
                tab.component.addClass('active');
                pane.component.addClass('active');
            }
            tab.btn.attr({
                'href': '#stamps'+index,
                'aria-controls': 'stamps'+index
            }); 
            pane.component.attr('id', 'stamps'+index);
            this.tabs.append(tab.component);
            this.panes.append(pane.component);
        }
    }

    class StampsDropup extends Component {
        constructor(private toggle: StampsDropupToggle, private menu: StampsDropupMenu) {
            super();
            var dropup = $('<div id="dropup-stamps" class="dropup">'); {
                dropup.append(toggle.component);             
                dropup.append(menu.component);
                toggle.component.dropdown();
            }
            this.component = dropup;
        }
    }

    class StampTab extends Component {
        public btn: JQuery;

        constructor(private thumbnailURL: string) {
            super();
            var tab = $('<li class="col-xs-3 text-center">'); {
                this.btn = $('<a data-toggle="tab" role="tab">'); {
                    var icon = $('<img>');
                    icon.attr('src', this.thumbnailURL);
                    this.btn.append(icon);
                }
                this.btn.click(e => {
                    e.stopPropagation();
                    e.preventDefault();
                    this.btn.tab('show');
                });
                tab.append(this.btn);
            }
            this.component = tab;
        }
    }

    class StampPane extends Component {
        constructor(private imageURLs: string[]) {
            super();
            var pane = $('<div class="tab-pane" role="tabpanel">'); 
            var count = this.imageURLs.length;
            for (var i=0, index=0; i<count/2; ++i) {
                var row = $('<div class="row">');
                for (var j=0; j<2 && index<count; ++j, ++index) {
                    var column = $('<div class="col-xs-6">');
                    column.append(new StampPostButton(this.imageURLs[index]).component);
                    row.append(column);
                }
                pane.append(row);
            }
            this.component = pane;
        }
    }

    class StampPostButton extends Component {
        private static resizer: ImageResizer = new ImageResizer().size(128, 128).quality(100);

        constructor(private imageURL: string) {
            super();
            var btn = $('<a>'); {
                var icon = $('<img>');
                icon.attr('src', this.imageURL);
                btn.append(icon);
            }
            btn.click(() => {
                var textarea = $('textarea#message-input');
                textarea.val(textarea.val()+' '+StampPostButton.resizer.getResizeURL(this.imageURL));
                textarea.focus();
            });
            this.component = btn;
        }
    }

    class ImageResizer {
        private static URL_BASE: string = 'http://proxy.boxresizer.com/convert?';
        private w: number = 128;
        private h: number = 128;
        private q: number = 100;

        public getResizeURL(sourceURL: string): string {
            var url = ImageResizer.URL_BASE;
            url += 'resize='+this.w+'x'+this.h;
            url += '&quality='+this.q;
            url += '&source='+sourceURL;
            return url;
        }

        public size(w: number, h: number): ImageResizer {
            this.w = w;
            this.h = h;
            return this;
        }

        public width(w: number): ImageResizer {
            this.w = w;
            return this;
        }

        public height(h: number): ImageResizer {
            this.h = h;
            return this;
        }

        public quality(q: number): ImageResizer {
            this.q = q;
            return this;
        }
    }

    class ManagerImpl implements StampsMenuManager {
        private stamps: StampProvider[] = new Array<StampProvider>();
        private menu: StampsDropupMenu;
        private generated: boolean = false;

        public generateMenu(): JQuery {
            if (this.generated) return this.menu.component;

            this.menu = new StampsDropupMenu();
            var toggle = new StampsDropupToggle();
            var dropup = new StampsDropup(toggle, this.menu);
            $('form#message-form').append(dropup.component);            

            this.stamps.forEach((stamp) => {
                this.addStampTab(stamp);
            });

            this.generated = true;
            return this.menu.component;
        }

        public addStamp(provider: StampProvider): void {
            this.stamps.push(provider);

            if (this.generated) {
                this.addStampTab(provider);
            }
        }

        private addStampTab(provider: StampProvider): void {
            var tab = new StampTab(provider.provideThumbnailURL());
            var pane = new StampPane(provider.provideImageURLs());
            this.menu.addTab(tab, pane);
        }
    }

    export var manager: StampsMenuManager = new ManagerImpl();

    $(() => {
        console.log("SlackStamps starts!");
        $('textarea#message-input').focus(() => {
            console.log("focus!");
            manager.generateMenu();
        });
    });
}

gopherstamp.ts

// gopherstamp.ts

/// <reference path="slackstamps.ts" />

module SlackStamps {
    
    class GopherStampProvider implements StampProvider {
        private static URL_BASE: string = 'https://raw.githubusercontent.com/tenntenn/gopher-stickers/master/png/';

        public provideThumbnailURL(): string {
            return GopherStampProvider.URL_BASE+'01.png';
        }

        public provideImageURLs(): string[] {
            var urls = new Array<string>();
            for (var i=0; i<28; ++i) {
                var num = (i+1)+"";
                while (num.length < 2) num = "0" + num;
                urls.push(GopherStampProvider.URL_BASE+num+'.png');
            }
            return urls;
        }
    }

    $(() => {
        SlackStamps.manager.addStamp(new GopherStampProvider());
    });
}