custom BTTV v2

// ==UserScript==
// @name         anime2ru BTTV
// @namespace    http://tampermonkey.net/
// @version      2
// @description  добавляет смайлы с BTTV на аниме2ру
// @author       Gissh (&Александр)
// @match        https://dota2.ru/forum/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    class BTTV {
        constructor () {
            this.api = 'https://api.betterttv.net/3/emotes/shared/';
            this.cdn = 'https://cdn.betterttv.net/emote/';
            this.smileLimit = 60;
            this.default = 'offset=0&limit=60';
            this.storage = 'bttv_FavoriteSmiles';
            this.editorInsert = 'javascript:tinyMCE.activeEditor.insertContent(';
            this.trumbowyg = false;
            this.titlePreview = 'https://pbs.twimg.com/profile_images/571369694137819136/lst8DKUj_400x400.png';
            this.smileOffsetSearch = 0;
            this.smileOffsetPopular = 0;

            // Поддержка this kekw
            this.init = this.init.bind(this);
            this.insertFavorite = this.insertFavorite.bind(this);
            this.request = this.request.bind(this);
            this.watching = this.watching.bind(this);
            this.generateUrl = this.generateUrl.bind(this);
            this.getSearch = this.getSearch.bind(this);
            this.getPopular = this.getPopular.bind(this);
            this.getFavorite = this.getFavorite.bind(this);
            this.generateMarkup = this.generateMarkup.bind(this);
            this.generateSmileMarkup = this.generateSmileMarkup.bind(this);
            this.generateTabMarkup = this.generateTabMarkup.bind(this);
            this.generateContentMarkup = this.generateContentMarkup.bind(this);

            this.watching ({
                elem: 'div.smiles-panel ul.tabs',
                callback: this.init,
                bool: true
            });
        }

        init (el) {

            let tabs = $(el),
                contents = tabs.parents('.smiles-panel').first().find('.tabs-content'),
                trumbowyg = $(el).parents('.trumbowyg-box'), // helper trumbowyg
                parent = this;

            if (trumbowyg.length > 0) {
                this.editorInsert = `javascript:Tree.insertEmoji('#${trumbowyg.first().find('.trumbowyg-editor')[0].id}',`;
                this.trumbowyg = true;
            }

            tabs.append(this.generateTabMarkup());
            contents.append(this.generateContentMarkup());

            contents.on('click', '.bttv_search_btn', (event) => {

                let currentBtnType = event.currentTarget.dataset.type;

                if(currentBtnType == 'next'){
                    this.smileOffsetSearch += 60;
                }else if (currentBtnType == 'prev' && this.smileOffsetSearch != 0){
                    this.smileOffsetSearch -= 60;
                }else if(currentBtnType == 'search' || this.smileOffsetSearch == 0){
                    this.smileOffsetSearch = 0;
                }

                this.default = `offset=${this.smileOffsetSearch}&limit=60`;
                console.log(this.smileOffsetSearch);

                let findContent = contents.find('#smile-cat-99').first();

                this.getSearch(contents.find('#bttvsearch').val(), (data) => {
                    findContent.find('.search-content').html(this.generateMarkup('search', data));
                    findContent.find('.search-content .smile-content').on('contextmenu', function (e) {
                        parent.insertFavorite(this, e);
                    });
                });
            });


            contents.on('click', '.bttv_popular_btn', (event) => {

                let currentBtnType = event.currentTarget.dataset.type;

                if(currentBtnType == 'next'){
                    this.smileOffsetPopular += 60;
                }else if (currentBtnType == 'prev' && this.smileOffsetPopular != 0){
                    this.smileOffsetPopular -= 60;
                }else if(currentBtnType == 'search' || this.smileOffsetPopular == 0){
                    this.smileOffsetPopular = 0;
                }

                this.default = `offset=${this.smileOffsetPopular}&limit=60`;
                console.log(this.smileOffsetPopular);

                let findContent = contents.find('#smile-cat-99').first();

                this.getPopular((data) => {
                    findContent.find('.popular-content').html(this.generateMarkup('popular', data));
                    findContent.find('.popular-content .smile-content').on('contextmenu', function (e) {
                        parent.insertFavorite(this, e);
                    });
                });
            });



            tabs.find('[href="#smile-cat-99"]').first().on('click', () => {
                let findContent = contents.find('#smile-cat-99').first();

                this.getFavorite((data) => {
                    findContent.find('.favorite-content').html(this.generateMarkup('favorite', data));
                    findContent.find('.favorite-content .smile-content').on('contextmenu', function (e) {
                        parent.removeFavorite(this, e);
                    });
                });

                this.getPopular((data) => {
                    findContent.find('.popular-content').html(this.generateMarkup('popular', data));
                    findContent.find('.popular-content .smile-content').on('contextmenu', function (e) {
                        parent.insertFavorite(this, e);
                    });
                });
            });
        }



        removeFavorite (item, event) {
            event.stopPropagation();
            event.preventDefault();

            if (item instanceof jQuery)
                item = item[0];

            const id = item.dataset.id,
                code = item.title,
                parent = this;

            let storage = JSON.parse(localStorage.getItem(this.storage)), flag = true;
            if (storage === null)
                storage = [];

            storage.forEach((item, index) => {
                if (item.emote.id === id) {
                    storage.splice(index, 1);
                    flag = false;
                }
            });

            if (flag)
                Utils.notify('Смайл удалён', 'success', 1000);
            localStorage.setItem(this.storage, JSON.stringify(storage));

            let content = $(item).parents('#smile-cat-99').find('.favorite-content');

            content.html(this.generateMarkup('favorite', storage));
            content.find('.smile-content').on('contextmenu', function (e) {
                parent.removeFavorite(this, e);
            });
        }

        insertFavorite (item, event) {
            event.stopPropagation();
            event.preventDefault();

            if (item instanceof jQuery)
                item = item[0];

            const id = item.dataset.id,
                code = item.title,
                parent = this;

            let storage = JSON.parse(localStorage.getItem(this.storage));

            if (storage === null)
                storage = [];

            storage.push({emote: {code: code, id: id}});
            storage = this.removeDuplicates(storage);

            Utils.notify('Смайл добавлен', 'success', 1000);
            localStorage.setItem(this.storage, JSON.stringify(storage));

            let content = $(item).parents('#smile-cat-99').find('.favorite-content');

            content.html(this.generateMarkup('favorite', storage));
            content.find('.smile-content').on('contextmenu', function (e) {
                parent.removeFavorite(this, e);
            });
        }

        removeDuplicates (arr) {
            let result = [];

            arr.forEach(item => {
                let flag = true;

                result.forEach(jtem => {
                    if (item.emote.id === jtem.emote.id)
                        flag = false;
                });

                if (flag)
                    result.push(item);
            });

            return result;
        }

        request (generatedUrl = false, callback = () => {}) {
            $.ajax({
                url: generatedUrl,
                type: "GET",
                success: callback
            });
        }

        watching ({doc, elem, callback, bool}) {
            let interval = setInterval(() => {
                doc = (doc)? doc : document;

                let el;
                if (el = doc.querySelector(`${elem}:not(.watched)`)) {
                    callback(el);
                    el.classList.add('watched');

                    if (!bool) clearInterval(interval);
                }
            }, 100);
        }

        generateUrl (type, data = null) {
            let url;

            switch (type) {
                case 'search':
                    url = 'search?query=' + data + '&';
                    break;
                case 'popular':
                default:
                    url = 'top?';
            }
            console.log(this.api + url + this.default);
            return this.api + url + this.default;
        }

        getSearch (str, callback) {
            let response, url = this.generateUrl('search', str);
            this.request(url, callback);
        }

        getPopular (callback) {
            let response, url = this.generateUrl();
            this.request(url, callback);
        }

        getFavorite (callback) {
            let storage = JSON.parse(localStorage.getItem(this.storage));
            callback(storage);
            return
        }

        generateMarkup (type, array = null) {
            let body = $(`<div class="${type}-content"></div>`);

            switch (type) {
                case 'search':
                    let bttvSearchVal = '';
                    if ($('#bttvsearch').val() != undefined){
                        bttvSearchVal = $('#bttvsearch').val();
                    }
                    body.append(`<p style="padding: 0.5em;">
                        <input id="bttvsearch" class="text-ctrl" placeholder="Название смайлика" value="` + bttvSearchVal + `">
                        <a class="button-theme bttv_search_btn" data-type="search">Поиск</a>
                        <a class="button-theme bttv_search_btn" data-type="prev">Назад</a>
                        <a class="button-theme bttv_search_btn" data-type="next">Вперед</a>
                    </p>`);
                    break;
                case 'favorite':
                    body.append(`<p style="padding: 0.5em;">Избранные</p>`);
                    break;
                case 'popular':
                default:
                    body.append(`<p style="padding: 0.5em;">Самые популярные
                        <a class="button-theme bttv_popular_btn" data-type="prev">Назад</a>
                        <a class="button-theme bttv_popular_btn" data-type="next">Вперед</a>
                </p>`);
            }

            if (array != null && typeof array[Symbol.iterator] === 'function' && array.length > 0)
            for (let smile of array) {
                let id = type === 'search' ? smile.id : smile.emote.id,
                    code = type === 'search' ? smile.code : smile.emote.code;

                let href = this.generateSmileUrl(id, code),
                    smileMarkup = this.generateSmileMarkup(id, code),
                    el = $(`<div title="${code}" data-id="${id}" style="display: inline-block; margin: 3px;" class="smile-content">
                        <a href="${this.editorInsert}\`${href}\`)">${smileMarkup}</a>
                    </div>`);

                body.append(el);
            }

            return body[0].outerHTML;
        }

        generateDefaultMarkup () {
            const
                search = this.generateMarkup('search'),
                favorite = this.generateMarkup('favorite'),
                popular = this.generateMarkup('popular');

            return [search, favorite, popular].join('');
        }

        generateSmileUrl (id, title) {
            if (this.trumbowyg)
                return `:${title}:\`, \`${this.cdn}${id}/1x`;

            return this.generateSmileMarkup(id, title);
        }

        generateSmileMarkup (id, title = 'bttv') {
            return `<img width='32' height='32' style='max-width: 32px; max-height: 32px;' class='bttvimg' src='${this.cdn}${id}/2x' title='${title}'>`;
        }

        generateTabMarkup () {
            return `<li class="tab-title">
                <a href="#smile-cat-99" style="padding: 3px 10px;" title="BTTV" data-cat="99">
                    <img data-cat="99" src="${this.titlePreview}" style="width: 24px; vertical-align: middle;">
                </a>
            </li>`;
        }

        generateContentMarkup () {
            return `<div class="content" id="smile-cat-99">
                ${this.generateDefaultMarkup()}
            </div>`;
        }
    }

    $(document).on('load', new BTTV());
})();