331 lines
8.2 KiB
JavaScript
331 lines
8.2 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_text
|
|
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",
|
|
})
|
|
}
|