114 lines
8.0 KiB
JavaScript
114 lines
8.0 KiB
JavaScript
/*
|
|
Plugin : Bootstrap Tab
|
|
Author : Michael Janea (michaeljanea.com)
|
|
Version : 1.5.1
|
|
*/
|
|
|
|
function bootstrapTab_in_array(bootstrapTab_needle, bootstrapTab_haystack) {
|
|
for (var i in bootstrapTab_haystack) {
|
|
if (bootstrapTab_haystack[i] == bootstrapTab_needle) return true
|
|
}
|
|
return false
|
|
};
|
|
|
|
function bootstrapTab_escapeHtml(bootstrapTab_text, bootstrapTab_allow_html) {
|
|
bootstrapTab_allow_html = bootstrapTab_allow_html || false;
|
|
var map = {
|
|
"<": "<",
|
|
">": ">",
|
|
"'": ''',
|
|
"\r\n": '<br />',
|
|
"\n": '<br />',
|
|
"\r": '<br />'
|
|
};
|
|
var bootstrapTab_el = document.createElement('div');
|
|
bootstrapTab_el.innerHTML = bootstrapTab_text;
|
|
for (var bootstrapTab_i = 0; bootstrapTab_i < bootstrapTab_el.getElementsByTagName('pre').length; bootstrapTab_i++) {
|
|
bootstrapTab_el.getElementsByTagName('pre')[bootstrapTab_i].innerHTML = (bootstrapTab_el.getElementsByTagName('pre')[bootstrapTab_i].innerHTML).replace(/(\r\n|\n|\r)/gm, "<br>")
|
|
}
|
|
bootstrapTab_text = bootstrapTab_el.innerHTML;
|
|
return bootstrapTab_allow_html ? bootstrapTab_text.replace(/[']/g, function (m) {
|
|
return map[m]
|
|
}) : bootstrapTab_text.replace(/[<'>]/g, function (m) {
|
|
return map[m]
|
|
})
|
|
};
|
|
CKEDITOR.plugins.add('bootstrapTab', {
|
|
lang: ['en', 'af', 'sq', 'ar', 'eu', 'bn', 'bs', 'bg', 'ca', 'zh-cn', 'zh', 'hr', 'cs', 'da', 'nl', 'en-au', 'en-ca', 'en-gb', 'eo', 'et', 'fo', 'fi', 'fr', 'fr-ca', 'gl', 'ka', 'de', 'el', 'gu', 'he', 'hi', 'hu', 'is', 'id', 'it', 'ja', 'km', 'ko', 'ku', 'lv', 'lt', 'mk', 'ms', 'mn', 'no', 'nb', 'fa', 'pl', 'pt-br', 'pt', 'ro', 'ru', 'sr', 'sr-latn', 'si', 'sk', 'sl', 'es', 'sv', 'tt', 'th', 'tr', 'ug', 'uk', 'vi', 'cy'],
|
|
requires: 'widget',
|
|
icons: 'bootstrapTab',
|
|
init: function (editor) {
|
|
editor.widgets.add('BootstrapTab', {
|
|
button: editor.lang.bootstrapTab.plugin,
|
|
template: '<div role="tabpanel">' + '<ul class="nav nav-tabs" role="tablist">' + '<li role="presentation" class="bootstrapTab active"><a href="" class="active" aria-controls="" role="tab" data-toggle="tab"></a></li>' + '</ul>' + '<div class="tab-content">' + '<div role="tabpanel" class="tab-pane active" id=""></div>' + '</div>' + '</div>',
|
|
mask: true,
|
|
allowedContent: 'div(*)[*];ul(*)[*];li(*)[*];a(*)[*]',
|
|
dialog: 'bootstrapTabDialog',
|
|
upcast: function (element) {
|
|
return element.name == 'div' && element.attributes.role == 'tabpanel'
|
|
},
|
|
init: function () {
|
|
var bootstrapTab_total = 0;
|
|
for (var bootstrapTab_i = 0; bootstrapTab_i < this.element.$.children[0].children.length; bootstrapTab_i++) {
|
|
for (var bootstrapTab_j = 0; bootstrapTab_j < this.element.$.children[0].children[bootstrapTab_i].childNodes.length; bootstrapTab_j++) {
|
|
switch ((this.element.$.children[0].children[bootstrapTab_i].childNodes[bootstrapTab_j].nodeName).toLowerCase()) {
|
|
case 'li':
|
|
if ((this.element.$.children[0].children[bootstrapTab_i].childNodes[bootstrapTab_j].children[0].nodeName).toLowerCase() == 'a') {
|
|
eval("this.setData('bootstrapTab_item" + bootstrapTab_j + "', '" + bootstrapTab_escapeHtml(this.element.$.children[0].children[bootstrapTab_i].childNodes[bootstrapTab_j].firstChild.innerHTML, false) + "')");
|
|
var bootstrapTab_itemClass = bootstrapTab_in_array('active', this.element.$.children[0].children[bootstrapTab_i].childNodes[bootstrapTab_j].className.split(' ')) ? 'bootstrapTab active' : 'bootstrapTab';
|
|
bootstrapTab_itemClass = bootstrapTab_itemClass != null ? bootstrapTab_itemClass : 'bootstrapTab';
|
|
eval("this.setData('bootstrapTab_itemClass" + bootstrapTab_j + "', '" + bootstrapTab_itemClass + "')")
|
|
}
|
|
break;
|
|
case 'div':
|
|
if (bootstrapTab_in_array('tab-pane', this.element.$.children[0].children[bootstrapTab_i].childNodes[bootstrapTab_j].className.split(' '))) {
|
|
eval("this.setData('bootstrapTab_content" + bootstrapTab_j + "', '" + bootstrapTab_escapeHtml(this.element.$.children[0].children[bootstrapTab_i].childNodes[bootstrapTab_j].innerHTML, editor.config.mj_variables_allow_html) + "')");
|
|
var bootstrapTab_contentClass = bootstrapTab_in_array('active', this.element.$.children[0].children[bootstrapTab_i].childNodes[bootstrapTab_j].className.split(' ')) ? 'tab-pane active' : 'tab-pane';
|
|
eval("this.setData('bootstrapTab_contentClass" + bootstrapTab_j + "', '" + bootstrapTab_contentClass + "')")
|
|
}
|
|
break
|
|
}
|
|
bootstrapTab_total++
|
|
}
|
|
}
|
|
this.setData('bootstrapTab_total', bootstrapTab_total)
|
|
},
|
|
data: function () {
|
|
var bootstrapTab_d = new Date();
|
|
var bootstrapTab_id = bootstrapTab_d.getTime();
|
|
var bootstrapTab_item = bootstrapTab_contents = '';
|
|
for (var bootstrapTab_i = 0; bootstrapTab_i <= this.data.bootstrapTab_total; bootstrapTab_i++) {
|
|
eval("bootstrapTab_title = this.data.bootstrapTab_item" + bootstrapTab_i);
|
|
bootstrapTab_title = bootstrapTab_title != undefined ? bootstrapTab_title : '';
|
|
eval("bootstrapTab_content = this.data.bootstrapTab_content" + bootstrapTab_i);
|
|
bootstrapTab_content = bootstrapTab_content != undefined ? bootstrapTab_content : '';
|
|
eval("bootstrapTab_itemClass = this.data.bootstrapTab_itemClass" + bootstrapTab_i);
|
|
bootstrapTab_itemClass = bootstrapTab_itemClass != undefined ? bootstrapTab_itemClass : '';
|
|
eval("bootstrapTab_contentClass = this.data.bootstrapTab_contentClass" + bootstrapTab_i);
|
|
bootstrapTab_contentClass = bootstrapTab_contentClass != undefined ? bootstrapTab_contentClass : '';
|
|
if (bootstrapTab_title) {
|
|
|
|
if ( bootstrapTab_i == 0 )
|
|
var a_class = 'active';
|
|
else
|
|
var a_class = '';
|
|
|
|
bootstrapTab_item += ' <li role="presentation" class="' + bootstrapTab_itemClass + '"> <a href="#tab' + bootstrapTab_id + '_' + (bootstrapTab_i + 1) + '" class="' + a_class + '" aria-controls="tab' + bootstrapTab_id + '_' + (bootstrapTab_i + 1) + '" role="tab" data-toggle="tab"> ' + bootstrapTab_escapeHtml(bootstrapTab_title, false) + ' </a> </li> ';
|
|
bootstrapTab_contents += ' <div role="tabpanel" class="' + bootstrapTab_contentClass + '" id="tab' + bootstrapTab_id + '_' + (bootstrapTab_i + 1) + '"> ' + bootstrapTab_escapeHtml(bootstrapTab_content, editor.config.mj_variables_allow_html) + ' </div> '
|
|
}
|
|
}
|
|
this.element.setAttribute('id', 'collapse' + bootstrapTab_id);
|
|
this.element.$.innerHTML = ' <div role="tabpanel"> <ul class="nav nav-tabs" role="tablist"> ' + bootstrapTab_item + ' </ul> <div class="tab-content"> ' + bootstrapTab_contents + ' </div> </div> '
|
|
}
|
|
});
|
|
CKEDITOR.dialog.add('bootstrapTabDialog', CKEDITOR.plugins.getPath('bootstrapTab') + 'dialogs/bootstrapTab.js');
|
|
CKEDITOR.document.appendStyleSheet(CKEDITOR.plugins.getPath('bootstrapTab') + 'css/style.css')
|
|
}
|
|
});
|
|
|
|
for(var i in CKEDITOR.instances){
|
|
CKEDITOR.instances[i].ui.addButton('BootstrapTab', {
|
|
command : 'bootstrapTab',
|
|
icon : this.path + 'icons/bootstrapTab.png',
|
|
});
|
|
} |