',
sibling: '',
siblingPos: "after",
observe: '[data-xf-click="quick-edit"]',
observeCache: 1
},
palettes: {
default: ["transparent", "#505050", "rgba(20,20,20,0.06)", "#141414"]
},
check: "XF",
// Use id to pass the target editor, if not... XF editor will always return the first editor (DOM) for .js-editor selector
getEditorFn: function (id) {
var sel = ".js-editor";
if (typeof id == "string") {
sel = this.getEditorSel(id);
}
return XF.getEditorInContainer($(sel));
},
getEditorSel: function (id) {
return "[" + PUP.ns.dataPluginTarget + '="' + id + '"]';
},
getEditor: function (id) {
if (typeof id == "string") {
return document.querySelector(this.getEditorSel(id));
}
return document.querySelectorAll(".js-editor");
},
getBbCode: function (edFnCode) {
return edFnCode.getTextArea()[0].value;
},
editorValue: function (str, id) {
var nl = "
";
var edFn = this.getEditorFn(id);
var type = edFn.ed.bbCode.isBbCodeView()
? ["bbCode", "getBbCode", "insertBbCode"]
: ["html", "get", "insert"];
var edFnCode = edFn.ed[type[0]];
if (typeof str == "string") {
var jump = this.editorValue(false, id) !== "";
if (type[0] == "html") {
var insert = "
" + str + "
";
edFnCode[type[2]](jump ? nl + insert : insert);
} else {
var XHR = XF.ajax(
"POST",
XF.canonicalizeUrl("index.php?editor/to-bb-code"),
{
html: str
}
);
XHR.done(function (data) {
edFnCode[type[2]](jump ? "\n" + data.bbCode : data.bbCode);
});
}
return;
}
if (typeof edFnCode[type[1]] == typeof undefined) {
var value = this.getBbCode(edFnCode);
} else {
var value = edFnCode[type[1]]();
}
if (this.useCustomEditor() && value == nl) {
return "";
}
return value;
},
useCustomEditor: function () {
return (
typeof XF.getEditorInContainer($(".js-editor")) !== typeof undefined
);
}
}
},
generateGuid: function () {
var d = new Date().getTime();
if (
typeof performance !== "undefined" &&
typeof performance.now === "function"
) {
d += performance.now();
}
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (
c
) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
});
},
getNewValue: function (el, msg) {
var prop =
typeof el.getAttribute("contenteditable") !== "string"
? "value"
: "innerHTML";
var newline = prop == "value" ? "\n" : " ";
var value = el[prop];
var fixed = msg;
var escape = false;
if (escape) {
fixed = String(msg)
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """);
}
if (value.length == 0) {
return fixed;
}
var ret = "";
var match = value.match(/\n+$/g);
var newlines = match ? match[0].split("\n").length : 0;
if (newlines <= 2) {
var repeats = newlines == 0 ? 2 : 1;
ret += newline.repeat(repeats);
}
return ret + fixed;
},
insertTrigger: function () {
var vendor = this.vendors[this.settings.vendor];
var sibling = !this.settings.sibling
? 0
: document.querySelectorAll(
this.settings.sibling + ":not([" + this.ns.dataPlugin + "])"
)[0];
var areas;
if (this.settings.mode == "auto") {
areas = this.vendors[
vendor.hasOwnProperty("getEditor") ? this.settings.vendor : "default"
].getEditor();
} else {
var targets = document.querySelectorAll(
"[" +
this.ns.dataPluginTrigger +
"][data-target]:not([" +
this.ns.dataPluginId +
"])"
);
var targetsSel = [];
for (var i = 0; i < targets.length; i++) {
targetsSel.push(targets[i].dataset.target);
}
if (targetsSel.length > 0) {
areas = document.querySelectorAll(targetsSel.join(","));
}
}
if (!areas) {
return;
}
if (!document.getElementById(this.ns.pluginStyle) && this.settings.css) {
var style = document.createElement("style");
var rules = this.settings.css;
rules = this.appyTemplate(rules);
style.type = "text/css";
style.innerHTML = rules.replace(/%p/g, "." + this.ns.plugin);
style.setAttribute("id", this.ns.pluginStyle);
document.body.appendChild(style);
}
if (!(areas instanceof NodeList)) {
areas = [areas];
}
var count = 0;
for (var i = 0; i < areas.length; i++) {
if (areas[i].getAttribute(this.ns.dataPluginTarget)) {
continue;
}
var target = sibling ? sibling : areas[i];
target.setAttribute(this.ns.dataPlugin, "sibling");
target.insertAdjacentHTML(
{ before: "beforebegin", after: "afterend" }[
this.settings.siblingPos
],
this.appyTemplate(this.settings.html)
);
var trigger = target.parentElement.querySelector(
"[" + this.ns.dataPluginTrigger + "]"
);
this.setBoundId(trigger, areas[i]);
count++;
}
this.triggerCounter = count;
if (typeof vendor.callback == "function") {
vendor.callback.call();
}
},
appyTemplate: function (template) {
if (!this.cacheTable) {
var table = [
{ "%iconSvg": this.iconSvg },
{ "%text": this.settings.langString }
];
if (this.palette) {
var re = /%(\d+)/g;
var match = re.exec(template);
var arr = [];
while (match !== null) {
if (arr.indexOf(match[1]) == -1) {
arr.push(match[1]);
}
match = re.exec(template);
}
if (arr) {
arr.sort(function (a, b) {
return b - a;
});
var vendor = this.vendors[this.settings.vendor];
for (var i = 0; i < arr.length; i++) {
var index = arr[i] - 1;
var value = this.palette[index] || "";
if (
!value &&
this.settings.vendor !== "default" &&
this.settings.palette !== "default"
) {
value = this.palette[index - 2];
}
var o = {};
o["%" + arr[i]] = value;
table.push(o);
}
}
}
var bClass = this.settings.buttonClass || this.ns.plugin + "-button";
var named = [
{
"%cClass":
this.settings.containerClass || this.ns.plugin + "-container"
},
{ "%bClass": bClass },
{ "%iClass": bClass + "-icon" },
{ "%tClass": bClass + "-text" },
{ "%x": this.ns.dataPluginTrigger },
{ "%p": this.ns.plugin }
];
for (var i = 0; i < named.length; i++) {
table.push(named[i]);
}
this.cacheTable = table;
}
return this.strtr(template, this.cacheTable);
},
strtr: function (str, replaces) {
var str = str.toString();
if (!str || typeof replaces == typeof undefined) {
return str;
}
for (var i = 0; i < replaces.length; i++) {
var obj = replaces[i];
for (var key in obj) {
if (typeof obj[key] !== typeof undefined) {
re = new RegExp(key, "g");
str = str.replace(re, obj[key]);
}
}
}
return str;
},
setBoundId: function (trigger, target) {
var id = this.generateGuid();
trigger.setAttribute(this.ns.dataPluginId, id);
// target.setAttribute(this.ns.dataPluginId, id);
target.setAttribute(this.ns.dataPluginTarget, id);
},
openPopup: function (id) {
if (typeof id !== "string") {
return;
}
var self = this;
if (typeof this.popups == typeof undefined) {
this.popups = {};
}
if (typeof this.popups[id] !== typeof undefined) {
this.popups[id].window.focus();
return;
} else {
this.popups[id] = {};
}
var client = {
l: window.screenLeft != undefined ? window.screenLeft : screen.left,
t: window.screenTop != undefined ? window.screenTop : screen.top,
w: window.innerWidth
? window.innerWidth
: document.documentElement.clientWidth
? document.documentElement.clientWidth
: screen.width,
h: window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight
? document.documentElement.clientHeight
: screen.height
};
var size = {
w: 720,
h: 690
};
var tolerance = {
w: 0.5,
h: 0.85
};
for (var key in size) {
if (size[key] / client[key] > tolerance[key]) {
size[key] = client[key] * tolerance[key];
}
}
var pos = {
l: Math.trunc(client.w / 2 - size.w / 2 + client.l),
t: Math.trunc(client.h / 2 - size.h / 2 + client.t)
};
this.popups[id].window = window.open(
this.settings.url,
id,
"width=" +
size.w +
",height=" +
size.h +
",top=" +
pos.t +
",left=" +
pos.l
);
this.popups[id].timer = window.setInterval(function () {
if (
!self.popups[id].window ||
self.popups[id].window.closed !== false
) {
window.clearInterval(self.popups[id].timer);
self.popups[id] = undefined;
}
}, 200);
},
postSettings: function (id) {
this.popups[id].window.postMessage(
{ id: id, settings: this.settings },
this.settings.url
);
},
liveBind: function (qs, et, c) {
document.addEventListener(
et,
function (e) {
var caller = document.querySelectorAll(qs);
if (!caller) {
return;
}
var el = e.target;
var index = -1;
while (
el &&
(index = Array.prototype.indexOf.call(caller, el)) === -1
) {
el = el.parentElement;
}
if (index > -1) {
e.preventDefault();
c.call(e, el);
}
},
true
);
},
prepare: function () {
var self = this;
this.ns.dataPlugin = "data-" + this.ns.plugin;
this.ns.dataPluginId = this.ns.dataPlugin + "-id";
this.ns.dataPluginTrigger = this.ns.dataPlugin + "-trigger";
this.ns.dataPluginTarget = this.ns.dataPlugin + "-target";
this.ns.pluginStyle = this.ns.plugin + "-style";
this.ns.selDataPluginTrigger = "[" + this.ns.dataPluginTrigger + "]";
var srcEl =
document.currentScript ||
document.getElementById(this.ns.plugin + "-src");
if (!srcEl) {
srcEl = { dataset: {} };
} else if (srcEl.dataset["buttonTemplate"]) {
srcEl.dataset["html"] = srcEl.dataset["buttonTemplate"];
}
var nocss = 0;
this.settings = {};
for (var key in this.defaultSettings) {
var value =
srcEl && srcEl.dataset[key]
? srcEl.dataset[key]
: this.defaultSettings[key];
if (value === "1" || value === "0") {
value = value == "true";
}
if (
typeof value == "string" &&
this.classProps.indexOf(key.replace(/Class$/, "")) > -1
) {
nocss = 1;
}
this.settings[key] = value;
}
if (this.settings.vendor == "auto") {
this.settings.vendor = "default";
this.settings.fitEditor = 0;
for (var key in this.vendors) {
if (key == "default") continue;
if (typeof window[this.vendors[key].check] !== typeof undefined) {
this.settings.vendor = key;
break;
}
}
}
var skip = ["lang", "url", "vendor", "target"];
if (this.settings.vendor == "default") {
this.vendors.default.settings = {};
}
var vendor = this.vendors[this.settings.vendor];
if (vendor.settings) {
for (var key in vendor.settings) {
if (!srcEl || !srcEl.dataset.hasOwnProperty(key)) {
this.settings[key] = vendor.settings[key];
}
}
} else {
vendor.settings = {};
for (var key in this.defaultSettings) {
if (skip.indexOf(key) == -1) {
vendor.settings[key] = this.defaultSettings[key];
}
}
}
if (this.settings.vendor !== "default") {
if (
!vendor.settings.hasOwnProperty("fitEditor") &&
!srcEl.dataset.hasOwnProperty("fitEditor")
) {
this.settings.fitEditor = 1;
}
if (this.settings.fitEditor) {
nocss = !vendor.settings.css;
} else {
var skip = ["autoInsert", "observe", "observeCache"];
for (var key in vendor.settings) {
if (skip.indexOf(key) == -1 && !srcEl.dataset.hasOwnProperty(key)) {
this.settings[key] = this.defaultSettings[key];
}
}
}
}
if (nocss) {
this.settings.css = "";
} else {
this.settings.css = this.settings.css.replace(
"%defaultCSS",
this.defaultSettings.css
);
if (vendor.settings.extracss && this.settings.css) {
this.settings.css += vendor.settings.extracss;
}
var palette = this.settings.palette.split(",");
if (palette.length > 1) {
this.palette = palette;
} else if (!this.palettes.hasOwnProperty(palette)) {
this.settings.palette = "default";
}
if (!this.palette) {
this.palette = (this.settings.fitEditor &&
vendor.palettes &&
vendor.palettes[this.settings.palette]
? vendor
: this
).palettes[this.settings.palette];
}
}
var props = this.classProps;
for (var i = 0; i < props.length; i++) {
var prop = props[i] + "Class";
if (typeof this.settings[prop] !== "string") {
this.settings[prop] = this.ns.plugin + "-" + props[i];
if (this.settings.fitEditor) {
this.settings[prop] += "--" + this.settings.vendor;
}
}
}
var clientLang = (this.settings.lang == "auto"
? navigator.language || navigator.userLanguage
: this.settings.lang
).replace("-", "_");
this.settings.langString = "Upload images";
var langKey =
clientLang in this.l10n
? clientLang
: clientLang.substring(0, 2) in this.l10n
? clientLang.substring(0, 2)
: null;
if (langKey) {
this.settings.langString = this.l10n[langKey];
}
var parser = document.createElement("a");
parser.href = this.settings.url;
this.originUrlPattern =
"^" +
(parser.protocol + "//" + parser.hostname)
.replace(/\./g, "\\.")
.replace(/\//g, "\\/") +
"$";
var namedTargets = document.querySelectorAll(
this.ns.selDataPluginTrigger + "[data-target]"
);
if (namedTargets.length > 0) {
for (var i = 0; i < namedTargets.length; i++) {
var target = document.querySelector(namedTargets[i].dataset.target);
this.setBoundId(namedTargets[i], target);
}
}
if (this.settings.observe) {
var observe = this.settings.observe;
if (this.settings.observeCache) {
observe += ":not([" + this.ns.dataPlugin + "])";
}
this.liveBind(
observe,
"click",
function (el) {
el.setAttribute(self.ns.dataPlugin, 1);
self.observe();
}.bind(this)
);
}
if (this.settings.sibling && !this.settings.onDemand) {
this.waitForSibling();
} else {
if (this.settings.init == "onload") {
if (document.readyState === "loading") {
document.addEventListener(
"DOMContentLoaded",
function (event) {
self.init();
},
false
);
} else {
this.init();
}
} else {
this.observe();
}
}
},
observe: function () {
this.waitForSibling("observe");
},
waitForSibling: function (m) {
var fn = this.initialized ? "insertTrigger" : "init";
if (this.settings.sibling) {
var sibling = document.querySelector(
this.settings.sibling + ":not([" + this.ns.dataPlugin + "])"
);
} else if (m == "observe") {
this[fn]();
if (this.triggerCounter) {
return;
}
}
if (!sibling) {
if (document.readyState === "complete" && m !== "observe") {
return;
}
setTimeout(
(m == "observe" ? this.observe : this.waitForSibling).bind(this),
250
);
} else {
this[fn]();
}
},
init: function () {
this.insertTrigger();
var self = this;
var vendor = this.vendors[this.settings.vendor];
this.liveBind(this.ns.selDataPluginTrigger, "click", function (el) {
var id = el.getAttribute(self.ns.dataPluginId);
self.openPopup(id);
});
window.addEventListener(
"message",
function (e) {
var regex = new RegExp(self.originUrlPattern, "i");
if (
!regex.test(e.origin) &&
(typeof e.data.id == typeof undefined ||
typeof e.data.message == typeof undefined)
) {
return;
}
var id = e.data.id;
if (!id || e.source !== self.popups[id].window) {
return;
}
if (
e.data.requestAction &&
self.hasOwnProperty(e.data.requestAction)
) {
self[e.data.requestAction](id);
return;
}
var area;
if (self.settings.vendor !== "default") {
if (
vendor.hasOwnProperty("useCustomEditor") &&
vendor.useCustomEditor()
) {
vendor.editorValue(e.data.message, id);
return;
} else if (vendor.hasOwnProperty("getEditor")) {
area = vendor.getEditor();
}
}
if (!area) {
area = document.querySelector(
"[" + self.ns.dataPluginTarget + '="' + id + '"]'
);
if (!area) {
alert("Target not found"); // calma calma que no panda el cúnico
return;
}
}
var valueProp =
area.getAttribute("contenteditable") === null
? "value"
: "innerHTML";
area[valueProp] += self.getNewValue(area, e.data.message);
var events = ["blur", "focus", "input", "change", "paste"];
for (var i = 0; i < events.length; i++) {
var event = new Event(events[i]);
area.dispatchEvent(event);
}
},
false
);
this.initialized = 1;
}
};
var redactor2 = ["WoltLab", "XF1"];
for (var i = 0; i < redactor2.length; i++) {
PUP.vendors[redactor2[i]] = Object.assign(
Object.assign({}, PUP.vendors.redactor2),
PUP.vendors[redactor2[i]]
);
}
PUP.prepare();
})();