plugin.js

// Created by Josh Hunt
// joshhunt180@gmail.com
// v1.3.0
tinymce.PluginManager.add('fontawesome', function (editor, url) {
	
	webApplicationIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	brandIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	directionalIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	textEditorIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	videoPlayerIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	fileTypeIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	formControlIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	currencyIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	paymentIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	medicalIcons = [
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		[''],
		['']
	]
	
	spinnerIcons = [
		[''],
		[''],
		[''],
		['']
	]
	
	chartIcons = [
		[''],
		[''],
		[''],
		['']
	]

    function showDialog() {
		
        var win;
		
		var hideAccordion = 0;
		
		function groupHtml(iconGroup, iconTitle) {
		
			var gridHtml;
			
			if (hideAccordion == 0) {
				gridHtml = '<div class="mce-fontawesome-panel-accordion"><div class="mce-fontawesome-panel-title">' + iconTitle + '</div>';
				gridHtml += '<div class="mce-fontawesome-panel-table" style="height: auto;"><table role="presentation" cellspacing="0"><tbody>';
				hideAccordion = 1;
			}
			else {
				gridHtml = '<div class="mce-fontawesome-panel-accordion mce-fontawesome-panel-accordion-hide"><div class="mce-fontawesome-panel-title">' + iconTitle + '</div>';
				gridHtml += '<div class="mce-fontawesome-panel-table"><table role="presentation" cellspacing="0"><tbody>';
			}
	
			var width = 23;
			for (y = 0; y < (iconGroup.length / width); y++) {
				gridHtml += '<tr>';
	
				for (x = 0; x < width; x++) {
					if (iconGroup[y * width + x]) {
						if (iconTitle == "Spinner") {
							gridHtml += '<td><span class="fa fa-spin mceNonEditable">' + iconGroup[y * width + x] + '</span></td>';
						}
						else {
							gridHtml += '<td><span class="fa mceNonEditable">' + iconGroup[y * width + x] + '</span></td>';
						}
					}
				}
	
				gridHtml += '</tr>';
			}
	
			gridHtml += '</tbody></table></div></div>';
			
			return gridHtml;
		
		}
		
		var panelHtml = groupHtml(webApplicationIcons, "Web Application") + groupHtml(fileTypeIcons, "File Type") + groupHtml(spinnerIcons, "Spinner") + groupHtml(formControlIcons, "Form Control") + groupHtml(currencyIcons, "Currency") + groupHtml(textEditorIcons, "Text Editor") + groupHtml(directionalIcons, "Directional") + groupHtml(videoPlayerIcons, "Video Player") + groupHtml(brandIcons, "Brand") + groupHtml(medicalIcons, "Medical");

        win = editor.windowManager.open({
            title: "Icons",
			spacing: 20,
           	padding: 10,
			classes: 'fontawesome-panel',
			items: [
                {
				    type: 'container',
					html: panelHtml,
					onclick: function (e) {
					var target = e.target;
					if (target.nodeName == 'SPAN') {
						editor.execCommand('mceInsertContent', false, target.outerHTML);
						win.close();
					}
				},
				
				}, {
                    type: 'label',
                    text: ' '
                }
            ],
            buttons: [{
                text: "Close",
                onclick: function () {
                    win.close();
                }
            }]
        });
		
		// Accordion
		
		var accordionItems = new Array();
		
		var divs = document.getElementsByTagName('div');
		for (var i = 0; i < divs.length; i++) {
			if (divs[i].className == 'mce-fontawesome-panel-accordion' || divs[i].className == 'mce-fontawesome-panel-accordion mce-fontawesome-panel-accordion-hide') {
				accordionItems.push(divs[i])
			}
		}
		
		// Assign onclick events to the accordion item headings
		for (var i = 0; i < accordionItems.length; i++) {
			var accordionTitle = getFirstChildWithTagName(accordionItems[i], 'DIV');
			accordionTitle.onclick = toggleItem;
		}
		
		var firstDiv = accordionItems[0].getElementsByTagName('div')[1];
		var firstDivHeight = firstDiv.offsetHeight;
		firstDiv.style.height = firstDivHeight + 'px';
		
		function toggleItem() {
			var itemClass = this.parentNode.className;
			
			// Hide all items
			for (var i = 0; i < accordionItems.length; i++) {
				accordionItems[i].className = 'mce-fontawesome-panel-accordion mce-fontawesome-panel-accordion-hide';
				accordionItems[i].getElementsByTagName('div')[1].style.height = "0";
			}
			
			// Show this item if it was previously hidden
			if (itemClass == 'mce-fontawesome-panel-accordion mce-fontawesome-panel-accordion-hide') {
				var accordionItemContent = this;
				do accordionItemContent = accordionItemContent.nextSibling; while(accordionItemContent && accordionItemContent.nodeType !== 1);
		 
				accordionItemContent.style.height = "auto";
				var divHeight = accordionItemContent.offsetHeight;
				accordionItemContent.style.height = "";
				this.parentNode.className = 'mce-fontawesome-panel-accordion';
				var that = this;
				window.setTimeout(function () {
					accordionItemContent.style.height = divHeight + 'px';
				}, 50);
			}
		}
		
		function getFirstChildWithTagName( element, tagName) {
			for (var i = 0; i < element.childNodes.length; i++) {
				if (element.childNodes[i].nodeName == tagName) {
					return element.childNodes[i];
				}
			}
		}
    }
	
	editor.on('init', function() {
		csslink = editor.dom.create('link', {
			rel: 'stylesheet',
			href: url + '/css/fontawesome.min.css'
		});
		document.getElementsByTagName('head')[0].appendChild(csslink);
	});
	
    editor.addButton('fontawesome', {
		icon: 'flag',
        text: 'Icons',
        tooltip: 'Icons',
        onclick: showDialog
    });

    editor.addMenuItem('fontawesome', {
		icon: 'flag',
        text: 'Icons',
        onclick: showDialog,
        context: 'insert'
    });
});