tinyMCE Boxes Shortcode

/*
* 2017, Daniel Lemes - Tutoriart
* Under GPLv 3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
*/
(function() {
    "use strict";

    var textt = new Array('');
    var variables = [
        "","500px","address-book","address-book-o","address-card","address-card-o","adjust","adn","align-center","align-justify","align-left","align-right","amazon","ambulance","american-sign-language-interpreting","anchor","android","angellist","angle-double-down","angle-double-left","angle-double-right","angle-double-up","angle-down","angle-left","angle-right","angle-up","apple","archive","area-chart","arrow-circle-down","arrow-circle-left","arrow-circle-o-down","arrow-circle-o-left","arrow-circle-o-right","arrow-circle-o-up","arrow-circle-right","arrow-circle-up","arrow-down","arrow-left","arrow-right","arrows","arrows-alt","arrows-h","arrows-v","arrow-up","asl-interpreting","assistive-listening-systems","asterisk","at","audio-description","automobile","backward","balance-scale","ban","bandcamp","bank","bar-chart","bar-chart-o","barcode","bars","bath","bathtub","battery","battery-0","battery-1","battery-2","battery-3","battery-4","battery-empty","battery-full","battery-half","battery-quarter","battery-three-quarters","bed","beer","behance","behance-square","bell","bell-o","bell-slash","bell-slash-o","bicycle","bicycle","binoculars","birthday-cake","bitbucket","bitbucket-square","bitcoin","black-tie","blind","bluetooth","bluetooth-b","bold","book","bookmark-o","braille","briefcase","btc","bug","building","building-o","bullhorn","bullseye","bus","buysellads","cab","calculator","calendar","calendar-check-o","calendar-minus-o","calendar-o","calendar-plus-o","calendar-times-o","camera","camera-retro","car","caret-down","caret-left","caret-right","caret-square-o-down","caret-square-o-left","caret-square-o-right","caret-square-o-up","caret-up","cart-arrow-down","cart-plus","cc","cc-amex","cc-diners-club","cc-discover","cc-jcb","cc-mastercard","cc-paypal","cc-stripe","cc-visa","certificate","chain","chain-broken","check","check-circle","check-circle-o","check-square","check-square","check-square-o","chevron-circle-down","chevron-circle-left","chevron-circle-right","chevron-circle-up","chevron-down","chevron-left","chevron-right","chevron-up","child","chrome","circle","circle-o","circle-o-notch","circle-thin","clipboard","clock-o","clone","close","cloud","cloud-download","cloud-upload","cny","code","code-fork","codepen","codiepie","coffee","cog","cogs","columns","comment","commenting","commenting-o","comment-o","comments","comments-o","compass","compress","connectdevelop","contao","copy","copyright","creative-commons","credit-card","credit-card-alt","crop","crosshairs","css3","cube","cubes","cut","cutlery","dashboard","dashcube","database","deaf","deaf","deafness","deafness","dedent","delicious","desktop","deviantart","diamond","digg","dollar","dot-circle-o","dot-circle-o","download","dribbble","drivers-license","drivers-license-o","dropbox","drupal","edge","edit","eercast","eject","ellipsis-h","ellipsis-v","empire","envelope","envelope-o","envelope-open","envelope-open-o","envelope-square","envira","eraser","eraser","etsy","eur","euro","exchange","exclamation","exclamation-circle","exclamation-triangle","expand","expeditedssl","external-link","external-link-square","eye","eyedropper","eye-slash","fa","facebook","facebook-f","facebook-official","facebook-square","fast-backward","fast-forward","fax","feed","female","fighter-jet","fighter-jet","file","file","file-archive-o","file-audio-o","file-code-o","file-excel-o","file-image-o","file-movie-o","file-o","file-pdf-o","file-photo-o","file-picture-o","file-powerpoint-o","files-o","file-sound-o","file-sound-o","file-text","file-text-o","file-video-o","file-word-o","file-zip-o","film","filter","fire","fire-extinguisher","firefox","first-order","flag","flag-checkered","flag-o","flash","flask","flickr","floppy-o","folder","folder-o","folder-open","folder-open-o","font","font-awesome","fonticons","fort-awesome","forumbee","forward","foursquare","free-code-camp","frown-o","futbol-o","gamepad","gavel","gbp","ge","gear","gear","gears","genderless","get-pocket","gg","gg-circle","gift","git","github","github-alt","github-square","gitlab","git-square","gittip","glass","glide","glide-g","globe","google","google-plus","google-plus-circle","google-plus-official","google-plus-square","google-wallet","graduation-cap","gratipay","grav","group","hacker-news","hand-grab-o","hand-lizard-o","hand-o-down","hand-o-left","hand-o-right","hand-o-up","hand-paper-o","hand-peace-o","hand-pointer-o","hand-rock-o","hand-scissors-o","handshake-o","hand-spock-o","hand-stop-o","hard-of-hearing","hashtag","hdd-o","header","headphones","heart","heartbeat","heart-o","history","home","hospital-o","hotel","hourglass","hourglass-1","hourglass-2","hourglass-3","hourglass-end","hourglass-half","hourglass-o","hourglass-start","houzz","h-square","html5","i-cursor","id-badge","id-card","id-card-o","ils","image","imdb","inbox","indent","industry","info","info-circle","inr","instagram","institution","internet-explorer","intersex","ioxhost","italic","joomla","jpy","jsfiddle","key","keyboard-o","krw","language","laptop","lastfm","lastfm-square","leaf","leanpub","legal","lemon-o","level-down","level-up","life-bouy","life-buoy","life-ring","life-saver","lightbulb-o","line-chart","line-chart","link","linkedin","linkedin-square","linode","linux","list","list-alt","list-ol","list-ul","location-arrow","lock","long-arrow-down","long-arrow-left","long-arrow-right","long-arrow-up","low-vision","magic","magnet","mail-forward","mail-reply","mail-reply-all","male","map","map-marker","map-o","map-pin","map-signs","mars","mars-double","mars-stroke","mars-stroke-h","mars-stroke-v","maxcdn","meanpath","medium","medkit","meetup","meh-o","mercury","microchip","microphone","microphone-slash","minus","minus-circle","minus-square","minus-square","minus-square-o","mixcloud","mobile","mobile-phone","modx","money","moon-o","mortar-board","motorcycle","mouse-pointer","music","navicon","neuter","newspaper-o","object-group","object-ungroup","odnoklassniki","odnoklassniki-square","opencart","openid","opera","optin-monster","outdent","pagelines","paint-brush","paperclip","paper-plane","paper-plane-o","paragraph","paste","pause","pause-circle","pause-circle-o","paw","paypal","paypal","pencil","pencil-square","pencil-square-o","percent","phone","phone-square","photo","picture-o","pie-chart","pied-piper","pied-piper-alt","pied-piper-pp","pinterest","pinterest-p","pinterest-square","plane","plane","play","play-circle","play-circle-o","plug","plus","plus-circle","plus-square","plus-square","plus-square","plus-square-o","podcast","power-off","print","product-hunt","puzzle-piece","qq","qrcode","question","question-circle","question-circle-o","quora","quote-left","quote-right","ra","random","random","ravelry","rebel","recycle","reddit","reddit-alien","reddit-square","refresh","refresh","registered","remove","renren","reorder","repeat","reply","reply-all","resistance","retweet","rmb","road","rocket","rocket","rotate-left","rotate-right","rouble","rss","rss-square","rub","ruble","rupee","s15","safari","save","scissors","scribd","search","search-minus","search-plus","sellsy","send","send-o","server","share","share-alt","share-alt-square","share-square","share-square-o","shekel","sheqel","shield","ship","shirtsinbulk","shopping-bag","shopping-basket","shopping-cart","shower","signal","sign-in","signing","sign-language","sign-out","simplybuilt","sitemap","skyatlas","skype","slack","sliders","slideshare","smile-o","snapchat","snapchat-ghost","snapchat-square","snowflake-o","soccer-ball-o","sort","sort-alpha-asc","sort-alpha-desc","sort-amount-asc","sort-amount-desc","sort-asc","sort-desc","sort-down","sort-numeric-asc","sort-numeric-desc","sort-up","soundcloud","space-shuttle","spinner","spoon","spotify","square","square-o","stack-exchange","stack-overflow","star","star-half","star-half-empty","star-half-full","star-half-o","star-o","steam","steam-square","step-backward","step-forward","stethoscope","sticky-note","sticky-note-o","stop","stop-circle","stop-circle-o","street-view","strikethrough","stumbleupon","stumbleupon-circle","subscript","subway","suitcase","sun-o","superpowers","superscript","support","table","tablet","tachometer","tag","tags","tasks","taxi","taxi","telegram","television","tencent-weibo","terminal","text-height","text-width","th","themeisle","thermometer","thermometer-0","thermometer-1","thermometer-2","thermometer-3","thermometer-4","thermometer-empty","thermometer-full","thermometer-half","thermometer-quarter","thermometer-three-quarters","th-large","th-list","thumbs-down","thumbs-o-down","thumbs-o-up","thumbs-up","thumb-tack","ticket","times","times-circle","times-circle-o","times-rectangle","times-rectangle-o","tint","toggle-down","toggle-left","toggle-off","toggle-on","toggle-right","toggle-up","trademark","train","transgender","transgender-alt","trash","trash-o","tree","trello","tripadvisor","trophy","truck","try","tty","tumblr","tumblr-square","turkish-lira","tv","twitch","twitter","twitter-square","umbrella","underline","undo","universal-access","universal-access","university","unlink","unlock","unlock-alt","unsorted","upload","usb","user","user-circle","user-circle-o","user-md","user-o","user-plus","users","user-secret","user-times","vcard","vcard-o","venus","venus-double","venus-mars","viacoin","viadeo","viadeo-square","video-camera","vimeo","vimeo-square","vine","vk","volume-control-phone","volume-control-phone","volume-down","volume-off","volume-up","warning","wechat","weibo","weixin","whatsapp","wheelchair","wheelchair-alt","wifi","wikipedia-w","window-close","window-close-o","window-maximize","window-minimize","window-restore","windows","won","wordpress","wpbeginner","wpexplorer","wpforms","wrench","xing","xing-square","yahoo","yc","y-combinator","y-combinator-square","yc-square","yelp","yen","yoast","youtube","youtube-play","youtube-square"
    ];
    var arrayLength = variables.length;
    function get_icon_list() {
        var result = [];
        var res = [];
        for (var i = 0; i < arrayLength; i++) {
            textt.push("{text:'"+ variables[i] +"', value:'"+ variables[i] +"', icon:' fa fa-"+ variables[i] +"'}");
            res[i] = {};
            res[i].text = variables[i];
            res[i].value = variables[i];
            res[i].icon = ' fa fa-'+variables[i];
            result.push(res[i]);
        }
        return result;
    }

    tinymce.PluginManager.add( 'tt_shortcode_plugin', function( editor, url ) {
        editor.addButton( 'tt_button_key', {
            type: 'listbox',
            text: 'Shortcodes',
            values: [
                { // CAIXAS
                    text: 'Caixas',
                    icon: 'cube',
                    onclick: function() {

                        var get_select;
                        if (tinyMCE.activeEditor.selection.getContent() === '' ) {
                            get_select = '';
                        }
                        else {
                            get_select = tinyMCE.activeEditor.selection.getContent();
                        }

                        editor.windowManager.open(
                        {
                            title: 'Configuração da Caixa',
                            body: [
                                {
                                    type: 'textbox',
                                    name: 'caixa_conteudo',
                                    label: 'Conteúdo',
                                    value: get_select,
                                    multiline: true,
                                    minWidth: 300,
                                    minHeight: 300
                                },
                                {
                                    type: 'colorbox',
                                    classes: 'mtx_a',
                                    name: 'caixa_cor',
                                    label: 'Selecione a Cor¹',
                                    values: [
                                        {
                                            text: 'Cinza',
                                            value: 'gray'
                                        },
                                        {
                                            text: 'Verde',
                                            value: 'green'
                                        },
                                        {
                                            text: 'Amarelo',
                                            value: 'yellow'
                                        },
                                        {
                                            text: 'Vermelho',
                                            value: 'red'
                                        }
                                    ],
                                    value: 'gray'
                                },
                                {
                                    type: 'textbox',
                                    name: 'caixa_titulo',
                                    label: 'Título²',
                                    value: ''
                                },
                                {
                                    type: 'listbox',
                                    name: 'caixa_icone',
                                    label: 'Ícone²',
                                    'values': get_icon_list(),
                                },
                                {
                                    type: 'label',
                                    disabled: true,
                                    multiline: true,
                                    text: '',
                                    onPostRender: function () {
                                        this.getEl().innerHTML =
                                        "<p>¹Se nenhum for escolhido, a caixa será cinza.<br>²Opcional.</p>";
                                    }
                                }
                            ],
                            onsubmit: function (e) {
                                if (e.data.caixa_conteudo === '') {
                                    tinyMCE.activeEditor.windowManager.alert('Digite algum texto para sua caixa!');
                                    return;
                                }
                                else {
                                    var caixcor; var caixico; var caixtit;
                                    var permit = 'greenyellowred';

                                    if (e.data.caixa_icone !== '') {
                                        caixico = ' icon="'+ e.data.caixa_icone +'"';
                                    } else { caixico = ''; }

                                    if (permit.includes(e.data.caixa_cor)) {
                                        caixcor = ' color="'+ e.data.caixa_cor +'"';
                                    } else { caixcor = ''; }

                                    if (e.data.caixa_titulo !== '') {
                                        caixtit = ' title="'+ e.data.caixa_titulo +'"';
                                    } else {caixtit = '';}

                                    // constroi a caixa
                                    editor.insertContent('[tt_box '+ caixico + caixcor + caixtit +']' + e.data.caixa_conteudo + '[/tt_box]');
                                }
                            }
                        });
                    }
                }]
        });
    } );
})();