var MessageEditor = {
TEMPLATE: {
SMILIES : [
{title: ':)', shortcut: ':)', icon: 'smile', pattern: /\:\)/g},
{title: ':(', shortcut: ':(', icon: 'frown', pattern: /\:\(/g},
{title: ':o', shortcut: ':o', icon: 'redface', pattern: /\:o/gi},
{title: ':D', shortcut: ':D', icon: 'biggrin', pattern: /\:D/gi},
{title: ';)', shortcut: ';)', icon: 'wink', pattern: /\;\)/g},
{title: ':p', shortcut: ':p', icon: 'tongue', pattern: /\:p/gi},
{title: ':cool:', shortcut: ':cool:', icon: 'cool', pattern: /\:cool\:/g},
{title: ':rolleyes:', shortcut: ':rolleyes:', icon: 'rolleyes', pattern: /\:rolleyes\:/g},
{title: ':eek:', shortcut: ':eek:', icon: 'eek', pattern: /\:eek\:/g},
{title: ':confused:', shortcut: ':confused:', icon: 'confused', pattern: /\:confused\:/g},
{title: ':kiss:', shortcut: ':kiss:', icon: 'kiss', pattern: /\:kiss\:/g},
{title: ':superbad:', shortcut: ':superbad:', icon: 'superbad', pattern: /\:superbad\:/g},
{title: ':music:', shortcut: ':music:', icon: 'music', pattern: /\:music\:/g},
{title: ':zzz:', shortcut: ':zzz:', icon: 'zzz', pattern: /\:zzz\:/g},
{title: ':kissed:', shortcut: ':kissed:', icon: 'kissed', pattern: /\:kissed\:/g},
{title: ':girl:', shortcut: ':girl:', icon: 'girl', pattern: /\:girl\:/g},
{title: ':omg:', shortcut: ':omg:', icon: 'omg', pattern: /\:omg\:/g},
{title: ':auua:', shortcut: ':auua:', icon: 'auua', pattern: /\:auua\:/g},
{title: ':bad:', shortcut: ':bad:', icon: 'bad', pattern: /\:bad\:/g},
{title: ':top:', shortcut: ':top:', icon: 'top', pattern: /\:top\:/g},
{title: ':baeh:', shortcut: ':baeh:', icon: 'baeh', pattern: /\:baeh\:/g},
{title: ':inno:', shortcut: ':inno:', icon: 'inno', pattern: /\:inno\:/g},
{title: ':snief:', shortcut: ':snief:', icon: 'snief', pattern: /\:snief\:/g},
{title: ':crying:', shortcut: ':crying:', icon: 'crying', pattern: /\:crying\:/g},
{title: ':inlove:', shortcut: ':inlove:', icon: 'inlove', pattern: /\:inlove\:/g},
{title: ':shy:', shortcut: ':shy:', icon: 'shy', pattern: /\:shy\:/g},
{title: ':shock:', shortcut: ':shock:', icon: 'shock', pattern: /\:shock\:/g},
{title: ':cheers:', shortcut: ':cheers:', icon: 'cheers', pattern: /\:cheers\:/g},
{title: ':nausea:', shortcut: ':nausea:', icon: 'puke', pattern: /\:nausea\:/g},
{title: ':x', shortcut: ':x', icon: 'shutup', pattern: /\:x/gi},
{title: ':stare:', shortcut: ':stare:', icon: 'observe', pattern: /\:stare\:/g},
{title: 'x(', shortcut: 'x(', icon: 'painful', pattern: /x\(/gi},
{title: ':hum:', shortcut: ':hum:', icon: 'hum', pattern: /\:hum\:/g}
],
PREVIEW: function (text, style) {
if (style == "welcome") {
return "<div class='bxY ovH rb5 pd10 lh17' style='width:390px'><div class='fs11 coG4 fwB'><span class='ni'>"+User.nickname+"</span></div>"+text+"</div>";
}
else {
return text;
}
}
},
register: function(area, specifications, previewTemplate, drafts, width, mother) {
mother = mother || null;
var frame = document.createElement('div');
var textarea;
if (typeof area == "string") {
textarea = document.getElementById(area)
}
else {
textarea = area;
}
textarea.parentNode.appendChild(frame);
frame.appendChild(textarea);
var editor = new MessageEditor.editor(textarea, previewTemplate, specifications, drafts, width, mother);
var fragment = document.createDocumentFragment()
if (specifications == "" || (/noPreview/).test(specifications) == false) {
var preview = new MessageEditor.features.preview(editor);
fragment.appendChild(preview.button);
}
if (specifications == "" || (/noBasic/).test(specifications) == false) {
var bold = new MessageEditor.features.bold(editor);
var italic = new MessageEditor.features.italic(editor);
var underline = new MessageEditor.features.underline(editor);
fragment.appendChild(bold.button);
fragment.appendChild(italic.button);
fragment.appendChild(underline.button);
}
if (specifications == "" || (/noColors/).test(specifications) == false) {
var fontColor = new MessageEditor.features.fontColor(editor);
var bgColor = new MessageEditor.features.bgColor(editor);
var fontSize = new MessageEditor.features.fontSize(editor);
fragment.appendChild(fontColor.button);
fragment.appendChild(bgColor.button);
fragment.appendChild(fontSize.button);
}
if (specifications == "" || (/simpleFonts/).test(specifications) == false) {
var more = new MessageEditor.features.more(editor);
fragment.appendChild(more.button);
}
if (specifications == "" || (/noLinks/).test(specifications) == false) {
var url = new MessageEditor.features.url(editor);
fragment.appendChild(url.button);
}
if (specifications == "" || (/noQuote/).test(specifications) == false) {
var quote = new MessageEditor.features.quote(editor);
fragment.appendChild(quote.button);
}
if (specifications == "" || (/noImages/).test(specifications) == false) {
var image = new MessageEditor.features.image(editor);
fragment.appendChild(image.button);
}
if (drafts) {
var draft = new MessageEditor.features.drafts(editor, drafts);
fragment.appendChild(draft.button);
}
editor.features.appendChild(fragment);
if (specifications == "" || (/noSmilies/).test(specifications) == false) {
MessageEditor.smilies.load(editor);
}
if (specifications == "" || (/focus/).test(specifications) == false) {
editor.area.focus();
}
if ((/limit/).test(specifications) == true) {
var maxChars = (/limit([0-9]{2,4})/).exec(specifications);
if (maxChars[1]) {
MessageEditor.features.limit(editor, maxChars[1]);
}
}
},
editor: function(area, previewTemplate, specifications, drafts, width, mother) {
this.area = area;
this.preview = previewTemplate;
this.spezification = specifications;
this.drafts = drafts;
this.width = width || undefined;
var resize = DOM.div({
style:{cursor:"s-resize",height:"6px",padding:"0",background:"#ececec",lineHeight:"8px"},
text: "&nbsp;"
});
resize.onmousedown = function (event) {
MessageEditor.resizeTextarea.start(this, event);
}
this.area.parentNode.appendChild(resize)
var bar = this.area.parentNode.appendChild(document.createElement("div"));
bar.className = "editor";
this.bar = bar;
var features = bar.appendChild(document.createElement("div"));
features.className = "features";
if (Jpy.getApp() < 0) features.style.height = "28px";
this.features = features;
var additional = bar.appendChild(document.createElement("div"));
additional.style.display = "none";
this.additional = additional;
var optional = bar.appendChild(document.createElement("div"));
optional.style.display = "none";
optional.className = "bgY1 fs12 pd10 bbY2";
this.optional = optional;
var smilies = bar.appendChild(document.createElement("div"));
smilies.className = "smiliesFrame cf";
this.smilies = smilies;
this.mother = mother;
if (width) {
resize.style.width = width+"px";
bar.style.width = width+"px";
features.style.width = width+"px";
if (Jpy.getApp() >= 0) {
bar.style.width = (width-17)+"px";
features.style.width = (width-17)+"px";
}
additional.style.width = width+"px";
smilies.style.width = width+"px";
}
},
features: {
frame: function (title, iconClass) {
this.button = document.createElement("a");
this.button.className = "cp";
this.button.title = title;
this.button.innerHTML = "<span class='"+iconClass+"'>&nbsp;</span>";
this.button.href = "javascript:void(true)";
},
preview: function (editor) {
this.button = new MessageEditor.features.frame("Vorschau", "icFind").button;
this.button.onclick = (function (that, editor) {
return function () {
that.preview(editor, this);
}
})(MessageEditor, editor);
},
bold: function (editor) {
this.button = new MessageEditor.features.frame("Text fett schreiben", "icBold").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.bold(editor);
}
})(MessageEditor, editor);
},
italic: function (editor) {
this.button = new MessageEditor.features.frame("Text kursiv schreiben", "icItalic").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.italic(editor);
}
})(MessageEditor, editor);
},
underline: function (editor) {
this.button = new MessageEditor.features.frame("Text unterstreichen", "icUnderline").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.underline(editor);
}
})(MessageEditor, editor);
},
fontColor: function (editor) {
this.button = new MessageEditor.features.frame("Text farbig schreiben", "icTxtColor").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.fontColor.select(editor,this);
}
})(MessageEditor, editor);
},
bgColor: function (editor) {
this.button = new MessageEditor.features.frame("Text mit Hintergrundfarbe belegen", "icTxtBg").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.bgColor.select(editor,this);
}
})(MessageEditor, editor);
},
fontSize: function (editor) {
this.button = new MessageEditor.features.frame("Textgröße ändern", "icTxtSize").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.fontSize.select(editor,this);
}
})(MessageEditor, editor);
},
more: function (editor) {
this.button = new MessageEditor.features.frame("Mehr Textfunktionen", "icTextMore").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.more.select(editor,this);
}
})(MessageEditor, editor);
},
url: function (editor) {
this.button = new MessageEditor.features.frame("Link einfügen", "icUrl").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.url.select(editor,this);
}
})(MessageEditor, editor);
},
quote: function (editor) {
this.button = new MessageEditor.features.frame("Text zitieren", "icQuote").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.quote(editor);
}
})(MessageEditor, editor);
},
image: function (editor) {
this.button = new MessageEditor.features.frame("Bild einfügen", "icGalPic").button;
this.button.onclick = (function (that, editor) {
return function () {
that.insert.image.select(editor, this);
}
})(MessageEditor, editor);
},
drafts: function (editor, visibility) {
this.button = new MessageEditor.features.frame("Vorlage einfügen", "icDraft").button;
this.button.onclick = (function (that, editor) {
return function () {
that.draft.show(editor, this, visibility);
}
})(MessageEditor, editor);
},
limit: function (editor, limit) {
editor.area.onkeyup = (function (editor, limit) {
return function () {
var value = editor.area.value.length;
if (value >= limit) {
MessageEditor.limit.max(editor, limit);
}
else if (value >= (limit/2)) {
MessageEditor.limit.partial(editor, (limit-value));
}
else {
editor.optional.style.display = "none";
}
}
})(editor, limit)
}
},
insert: {
bold: function (editor) {
MessageEditor.selection.get(editor);
MessageEditor.selection.write("[b]", "[/b]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check();
},
italic: function (editor) {
MessageEditor.selection.get(editor);
MessageEditor.selection.write("[i]", "[/i]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check();
},
underline: function (editor) {
MessageEditor.selection.get(editor);
MessageEditor.selection.write("[u]", "[/u]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check();
},
fontColor: {
select: function (editor, trigger) {
var status = MessageEditor.lock.check("fontColor");
if (status == false) {
MessageEditor.selection.get(editor);
MessageEditor.restore(editor);
trigger.className = "bgY9";
this.show(editor, trigger);
}
else {
MessageEditor.restore(editor);
}
},
set: function (editor, color) {
MessageEditor.selection.write("[color="+color+"]", "[/color]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check("fontColor");
},
show: function (editor, trigger) {
var layer = new Jpy.layer.get({
id: "msAdd",
trigger: trigger,
mother: editor.mother,
offset: {x:0,y:25},
instructions: {
className: "colorSelection",
text: "",
style: {
width: "176px"
}
}
});
var selection = layer.frame;
for ( var i = 0, len = this.colors.length; i < len; i++ ) {
var link = document.createElement("a");
link.href = "javascript:void(true)";
link.onclick = (function (editor, me, color) {
return function () {
me.insert.fontColor.set(editor, color)
}
})(editor, MessageEditor, this.colors[i].color);
link.style.background = this.colors[i].color;
link.title = this.colors[i].name;
selection.appendChild(link);
}
},
colors: [
{name: "dunkelblau", color: "#000099"},
{name: "blau", color: "#0033ff"},
{name: "hellblau", color: "#3399ff"},
{name: "tuerkis", color: "#0099cc"},
{name: "helltuerkis", color: "#00ffcc"},
{name: "gruen", color: "#009900"},
{name: "hellgruen", color: "#66cc33"},
{name: "leichtgruen", color: "#ccff99"},
{name: "dunkelrot", color: "#990000"},
{name: "rot", color: "#ff0000"},
{name: "dunkelorange", color: "#ff6600"},
{name: "lila", color: "#990099"},
{name: "pink", color: "#FF00FF"},
{name: "rosa", color: "#ff66cc"},
{name: "helles pink", color: "#FFC0CB"},
{name: "rose", color: "#ffccff"},
{name: "orange", color: "#ff9900"},
{name: "Gelb", color: "#ffff00"},
{name: "braun", color: "#663300"},
{name: "grau", color: "#999999"},
{name: "hellgrau", color: "#cccccc"}
]
},
bgColor: {
select: function (editor, trigger) {
var status = MessageEditor.lock.check("bgColor");
if (status == false) {
MessageEditor.selection.get(editor);
MessageEditor.restore(editor);;
trigger.className = "bgY9";
this.show(editor, trigger);
}
else {
MessageEditor.restore(editor);
}
},
set: function (editor, color) {
MessageEditor.selection.write("[bgcolor="+color+"]", "[/bgcolor]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check("bgColor");
},
show: function (editor, trigger) {
var layer = new Jpy.layer.get({
id: "msAdd",
trigger: trigger,
mother: editor.mother,
offset: {x:0,y:25},
instructions: {
className: "colorSelection",
text: "",
style: {
width: "176px"
}
}
});
var selection = layer.frame;
for ( var i = 0, len = this.colors.length; i < len; i++ ) {
var link = document.createElement("a");
link.href = "javascript:void(true)";
link.onclick = (function (editor, me, color) {
return function () {
me.insert.bgColor.set(editor, color)
}
})(editor, MessageEditor, this.colors[i].color);
link.style.background = this.colors[i].color;
link.title = this.colors[i].name;
selection.appendChild(link);
}
},
colors: [
{name: "dunkelblau", color: "#000099"},
{name: "blau", color: "#0033ff"},
{name: "hellblau", color: "#3399ff"},
{name: "helltuerkis", color: "#00ffcc"},
{name: "Himmelblau", color: "#87CEEB"},
{name: "Stahlblau", color: "#B0C4DE"},
{name: "gruen", color: "#009900"},
{name: "hellgruen", color: "#66cc33"},
{name: "leichtgruen", color: "#ccff99"},
{name: "dunkelrot", color: "#990000"},
{name: "rot", color: "#ff0000"},
{name: "dunkelorange", color: "#ff6600"},
{name: "lila", color: "#990099"},
{name: "pink", color: "#FF00FF"},
{name: "rosa", color: "#ff66cc"},
{name: "helles pink", color: "#FFC0CB"},
{name: "rose", color: "#ffccff"},
{name: "Leichtes Salamon", color: "#FFA07A"},
{name: "orange", color: "#ff9900"},
{name: "Gelb", color: "#ffff00"},
{name: "Helles Gelb", color: "#fdf7c2"},
{name: "braun", color: "#663300"},
{name: "grau", color: "#999999"},
{name: "hellgrau", color: "#cccccc"}
]
},
smilie: function (smilieTag, editor) {
MessageEditor.selection.get(editor);
MessageEditor.selection.write(smilieTag+" ", "", editor);
},
fontSize: {
select: function (editor, trigger) {
var status = MessageEditor.lock.check("fontSize");
if (status == false) {
MessageEditor.selection.get(editor);
MessageEditor.restore(editor);
trigger.className = "bgY9";
this.show(editor, trigger);
}
else {
MessageEditor.restore(editor);
}
},
set: function (editor, fontsize) {
MessageEditor.selection.write("[size="+fontsize+"]", "[/size]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check("fontSize");
},
show: function (editor, trigger) {
var layer = new Jpy.layer.get({
id: "msAdd",
trigger: trigger,
mother: editor.mother,
offset: {x:0,y:25},
instructions: {
className: "dropdown bgW",
text: ""
}
});
var selection = layer.frame;
for ( var i = 0, len = this.fontSizes.length; i < len; i++ ) {
var link = document.createElement("a");
link.href = "javascript:void(true)";
link.onclick = (function (editor, me, fontSize) {
return function () {
me.insert.fontSize.set(editor, fontSize)
}
})(editor, MessageEditor, this.fontSizes[i]);
link.appendChild(document.createTextNode(this.fontSizes[i]));
selection.appendChild(link);
}
},
fontSizes: [9,10,12,14,16,18,20,24,30,40]
},
more: {
select: function (editor, trigger) {
var status = MessageEditor.lock.check("more");
if (status == false) {
MessageEditor.selection.get(editor);
MessageEditor.restore(editor);
trigger.className = "bgY9";
this.show(editor, trigger);
}
else {
MessageEditor.restore(editor);
}
},
set: {
right: function (editor) {
MessageEditor.selection.write("[right]", "[/right]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check("more");
},
center: function (editor) {
MessageEditor.selection.write("[center]", "[/center]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check("more");
},
list: function (editor) {
MessageEditor.selection.write("[list]", "[/list]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check("more");
}
},
show: function (editor, trigger) {
var layer = new Jpy.layer.get({
id: "msAdd",
trigger: trigger,
mother: editor.mother,
offset: {x:0,y:25},
instructions: {
className: "dropdownMore",
text: ""
}
});
var selection = layer.frame;
var txtRight = document.createElement("a");
var iconTxtRight = document.createElement("span");
iconTxtRight.className = "icTextRight";
txtRight.appendChild(iconTxtRight);
txtRight.appendChild(document.createTextNode("Text rechtsbündig"));
txtRight.href = "javascript:void(true)";
txtRight.onmouseover = function () {
Jpy.css.hoverClass(this, "bgY1");
}
txtRight.onclick = (function (editor, me) {
return function () {
me.insert.more.set.right(editor);
}
})(editor, MessageEditor);
selection.appendChild(txtRight);
var txtCenter = document.createElement("a");
var iconTxtCenter = document.createElement("span");
iconTxtCenter.className = "icTextCenter";
txtCenter.appendChild(iconTxtCenter);
txtCenter.appendChild(document.createTextNode("Text zentriert"));
txtCenter.href = "javascript:void(true)";
txtCenter.onmouseover = function () {
Jpy.css.hoverClass(this, "bgY1");
}
txtCenter.onclick = (function (editor, me) {
return function () {
me.insert.more.set.center(editor);
}
})(editor, MessageEditor);
selection.appendChild(txtCenter);
var txtList = document.createElement("a");
var iconTxtList = document.createElement("span");
iconTxtList.className = "icTextList";
txtList.appendChild(iconTxtList);
txtList.appendChild(document.createTextNode("Text als Listenpunkt"));
txtList.href = "javascript:void(true)";
txtList.onmouseover = function () {
Jpy.css.hoverClass(this, "bgY1");
}
txtList.onclick = (function (editor, me) {
return function () {
me.insert.more.set.list(editor);
}
})(editor, MessageEditor);
selection.appendChild(txtList);
}
},
url: {
select: function (editor, trigger) {
var status = MessageEditor.lock.check("url");
if (status == false) {
MessageEditor.selection.get(editor);
MessageEditor.restore(editor);
trigger.className = "bgY9";
this.show(editor, trigger);
}
else {
MessageEditor.restore(editor);
}
},
set: function (editor, url, decription) {
if (!url) {
url = editor.additional.getElementsByTagName('input')[0].value;
if (url.length < 4) {
var text;
if (url.length == 0) {
text = "<div class='bgW taC fwB pd5 bbG1'><span class='icGoto'>&nbsp;</span>Linkadresse fehlt!</div>";
}
else {
text = "<div class='bgW taC fwB pd5 bbG1'><span class='icGoto'>&nbsp;</span>Linkadresse zu kurz!</div>";
}
if (document.getElementById(editor.area.id+"urlNotice")) {
document.getElementById(editor.area.id+"urlNotice").innerHTML = text;
}
else {
var notice = document.createElement('div');
notice.id = editor.area.id+"urlNotice";
notice.innerHTML = text;
editor.additional.appendChild(notice);
}
return false;
}
}
if (!decription) {
decription = editor.additional.getElementsByTagName('input')[1].value;
if (decription.length == 0) {
decription = url;
}
}
MessageEditor.selection.write("[url="+url+"]"+decription+"[/url]", "", editor);
editor.additional.style.display = "none";
MessageEditor.restore(editor);
MessageEditor.lock.check("url");
},
show: function (editor, trigger) {
editor.additional.innerHTML = "";
var text = MessageEditor.selection.range.text;
var url = "";
var description = "";
var selection = editor.additional;
if ((/^[w]{3}\./).test(text) == true && (/\.[a-z]{2,4}$/).test(text) == true) {
url = "http://"
url += text.replace(/\s/g, "");
description = text.replace(/^[w]{3}\.(\w*)\.[a-z]{2,4}$/g, "$1");
MessageEditor.selection.range.text = "";
MessageEditor.insert.url.set(editor, url, description);
return false;
}
else if ((/^[http\:\/\/]/).test(text) == true) {
url += text.replace(/\s/g, "");
description = text.replace(/^http\:\/\/(\w*)/g, "$1");
MessageEditor.selection.range.text = "";
MessageEditor.insert.url.set(editor, url, description);
return false;
}
else if ((/^\[url\=http\:\/\//).test(text) == true && (/[\[\/url\]]$/).test(text) == true) {
url = text.match(/^\[url\=http\:\/\/[a-z\/\:\.]*\]/)[0];
url = url.replace(/\[url\=/g, "");
url = url.replace(/\]$/, "");
description = text.replace(/^\[url\=http\:\/\/[a-z\/\:\.]*\]/, "");
description = description.replace(/\[\/url\]$/, "");
MessageEditor.selection.range.text = "";
}
var box = document.createElement("p");
var table = document.createElement("table");
var tableHead = document.createElement("tHead");
tableHead.style.height = "0px";
var tableBody = document.createElement("tBody");
var tableFoot = document.createElement("tFoot");
tableFoot.style.height = "0px";
table.appendChild(tableHead);
table.appendChild(tableBody);
table.appendChild(tableFoot);
table.className = "boG3";
box.appendChild(table);
var rowAdress = document.createElement("tr");
var cellAdressTitle = document.createElement("td");
cellAdressTitle.innerHTML = "<b>Linkadresse:</b>";
if (editor.width) cellAdressTitle.innerHTML = "<b>Adresse:</b>";
var cellAdressInput = document.createElement("td");
var adressInput = document.createElement("input");
adressInput.className = "inMe ffA";
adressInput.style.width = "400px";
if (editor.width) adressInput.style.width = editor.width-80+"px";
if (editor.width < 300) adressInput.style.fontSize = "11px";
adressInput.value = url;
cellAdressInput.appendChild(adressInput);
rowAdress.appendChild(cellAdressTitle);
rowAdress.appendChild(cellAdressInput);
tableBody.appendChild(rowAdress);
var rowDescription = document.createElement("tr");
var cellDescriptionTitle = document.createElement("td");
cellDescriptionTitle.innerHTML = "<b>Linkbeschreibung:</b>";
if (editor.width) cellDescriptionTitle.innerHTML = "<b>Titel:</b>";
var cellDescriptionInput = document.createElement("td");
var descriptionInput = document.createElement("input");
descriptionInput.className = "inMe ffA";
descriptionInput.style.width = "300px";
if (editor.width) descriptionInput.style.width = editor.width-110+"px";
if (editor.width < 300) descriptionInput.style.fontSize = "11px";
descriptionInput.value = description;
var addUrlButton = document.createElement("a");
addUrlButton.href = "javascript:void(true)";
addUrlButton.className = "inCo fs12 rb5 cp";
addUrlButton.innerHTML = "<span class='icUp'>&nbsp;</span>Link einfügen";
if (editor.width < 250) addUrlButton.innerHTML = "<span class='icUp'>&nbsp;</span>";
addUrlButton.onclick = function () {
MessageEditor.insert.url.set(editor, adressInput.value, descriptionInput.value);
}
cellDescriptionInput.appendChild(descriptionInput);
cellDescriptionInput.appendChild(addUrlButton);
rowDescription.appendChild(cellDescriptionTitle);
rowDescription.appendChild(cellDescriptionInput);
tableBody.appendChild(rowDescription);
selection.appendChild(box);
selection.className = "additional";
selection.style.display = "block";
descriptionInput.onkeydown = function (event) {
var key = Jpy.getKeycode(event).keyCode;
if (key == 13 || key == 38) {
MessageEditor.insert.url.set(editor, adressInput.value, descriptionInput.value);
}
};
adressInput.onkeydown = function (event) {
var key = Jpy.getKeycode(event).keyCode;
if (key == 13 || key == 38) {
MessageEditor.insert.url.set(editor, adressInput.value, descriptionInput.value);
}
}
}
},
quote: function (editor) {
MessageEditor.selection.get(editor);
MessageEditor.selection.write("[quote]", "[/quote]", editor);
MessageEditor.restore(editor);
MessageEditor.lock.check();
},
image: {
select: function (editor, trigger) {
var status = MessageEditor.lock.check("image");
if (status == false) {
MessageEditor.selection.get(editor);
MessageEditor.restore(editor);
trigger.className = "bgY9";
this.show(editor, trigger);
}
else {
MessageEditor.restore(editor);
}
},
set: function (editor, url, urlInput) {
if (url == "" && urlInput) {
urlInput.focus();
return;
}
MessageEditor.selection.write("[img]"+url+"[/img]", "", editor);
editor.additional.style.display = "none";
MessageEditor.restore(editor);
MessageEditor.lock.check("image");
},
show: function (editor, trigger) {
var text = MessageEditor.selection.range.text;
var url = "";
editor.additional.innerHTML = "";
if ((/^[w]{3}\./).test(text) == true && (/\.[jpgeifn]{3,4}$/).test(text) == true) {
url = "http://"
url += text.replace(/\s/g, "");
MessageEditor.selection.range.text = "";
MessageEditor.insert.image.set(editor, url);
return false;
}
else if ((/^[http\:\/\/]/).test(text) == true && (/\.[jpgeifn]{3,4}$/).test(text) == true) {
url += text.replace(/\s/g, "");
MessageEditor.selection.range.text = "";
MessageEditor.insert.image.set(editor, url);
return false;
}
else if ((/^\[img\]http\:\/\//).test(text) == true && (/[\[\/img\]]$/).test(text) == true) {
url = text.match(/^\[img\]http\:\/\/[a-z\/\:\.\-]*\[/)[0];
url = url.replace(/\[img\]/g, "");
url = url.replace(/\[$/, "");
MessageEditor.selection.range.text = "";
}
var selection = editor.additional;
var box = document.createElement("p");
var table = document.createElement("table");
var tableHead = document.createElement("tHead");
tableHead.style.height = "0px";
var tableBody = document.createElement("tBody");
var tableFoot = document.createElement("tFoot");
tableFoot.style.height = "0px";
table.appendChild(tableHead);
table.appendChild(tableBody);
table.appendChild(tableFoot);
table.className = "boG3";
box.appendChild(table);
var rowInfo = document.createElement("tr");
var cellInfoSpace = document.createElement("td");
cellInfoSpace.innerHTML = "";
var cellInfoText = document.createElement("td");
cellInfoText.innerHTML = "Copyright, Persönlichkeitsrechte, Fragen... <a href='/help/bilder'>Hier gibts die Antworten</a>";
rowInfo.appendChild(cellInfoSpace);
rowInfo.appendChild(cellInfoText);
tableBody.appendChild(rowInfo);
var rowAdress = document.createElement("tr");
var cellAdressTitle = document.createElement("td");
cellAdressTitle.innerHTML = "<b>Bildadresse:</b>";
var cellAdressInput = document.createElement("td");
var imageLibrary = document.createElement("div");
imageLibrary.className = "icDdG1 fl";
imageLibrary.onclick = function () {
MessageEditor.pictureLibrary.show(this, editor, adressInput)
}
var adressInput = document.createElement("input");
adressInput.className = "inMe";
adressInput.style.width = "350px";
adressInput.value = url;
adressInput.id = "msAdressInput";
if (Jpy.getApp() < 0) {
imageLibrary.style.marginTop = "5px";
}
var addImageButton = document.createElement("a");
addImageButton.href = "javascript:void(true)";
addImageButton.className = "inCo fs12 rb5 cp";
addImageButton.innerHTML = "<span class='icUp'>&nbsp;</span>Bild einfügen";
addImageButton.onclick = function () {
MessageEditor.insert.image.set(editor, adressInput.value, adressInput);
}
cellAdressInput.appendChild(imageLibrary)
cellAdressInput.appendChild(adressInput);
cellAdressInput.appendChild(addImageButton);
rowAdress.appendChild(cellAdressTitle);
rowAdress.appendChild(cellAdressInput);
tableBody.appendChild(rowAdress);
selection.className = "additional";
selection.appendChild(box);
selection.style.display = "block";
adressInput.focus();
cellAdressInput.onkeydown = function (event) {
var key = Jpy.getKeycode(event).keyCode;
if (key == 13 || key == 38) {
MessageEditor.insert.image.set(editor, adressInput.value, adressInput);
}
}
}
}
},
smilies: {
load: function (editor, quantity) {
if (arguments.length == 1) {
quantity = 11;
}
else if (quantity == "all") {
quantity = MessageEditor.TEMPLATE.SMILIES.length;
}
var frame = editor.smilies;
frame.innerHTML = "";
var box = frame.appendChild(document.createElement("div"));
box.className = "smilies";
var fragment = document.createDocumentFragment()
for (var i = 0, len = quantity; i < len; i++) {
var smilie = document.createElement("a");
smilie.href = "javascript:void(true)";
smilie.title = "Diesen Smilie mit "+MessageEditor.TEMPLATE.SMILIES[i].shortcut+" einfügen";
smilie.innerHTML = "<img src='"+Jpy.picurl+"/i/sm/"+MessageEditor.TEMPLATE.SMILIES[i].icon+".gif'>";
smilie.onclick = function(shortcut) {
return function () {
MessageEditor.insert.smilie(shortcut, editor)
}
}(MessageEditor.TEMPLATE.SMILIES[i].shortcut);
fragment.appendChild(smilie);
}
if (quantity == 11) {
var more = document.createElement("div");
more.className = "smiliesMore";
more.innerHTML = "<span class='icDown'>&nbsp;</span>";
more.onclick = function () {
MessageEditor.smilies.load(editor, "all");
}
fragment.appendChild(more);
}
else {
var less = document.createElement("div");
less.className = "smiliesMore";
less.innerHTML = "<span class='icUp'>&nbsp;</span>";
less.onclick = function () {
MessageEditor.smilies.load(editor);
}
fragment.appendChild(less);
}
box.appendChild(fragment);
}
},
lock: {
status: "",
check: function (status) {
Jpy.layer.remove("msAdd")
if (MessageEditor.lock.status == status) {
MessageEditor.lock.status = "";
return true;
}
else {
MessageEditor.lock.status = status;
return false;
}
}
},
pictureLibrary: {
show: function (trigger, editor, urlInput) {
if (!document.getElementById('lyGalleryContainerPrivate')) {
this.load(trigger, editor, urlInput);
}
else {
this.close();
}
},
load: function (trigger, editor, urlInput) {
SystemMessage.loading.start();
var getContainerPrivate = new AjaxHandler();
var callback = {
json: true,
success: function(data) {
SystemMessage.loading.end();
MessageEditor.pictureLibrary.data = data;
MessageEditor.pictureLibrary.prepareLayout(trigger, editor, urlInput);
}
};
getContainerPrivate.request('POST', "/backend/galleryContainerPrivate.php", callback);
},
prepareLayout: function (trigger, editor, urlInput) {
var folders = MessageEditor.pictureLibrary.data;
var numberOfImages = this.countImages(folders)
var layer = new Jpy.layer.get({
id: "lyGalleryContainerPrivate",
trigger: trigger,
offset: {x:0,y:20}
});
var frame = layer.frame;
frame.className = "bgW pd10 ldN taL bdG6 fs12";
frame.style.width = "480px";
if (numberOfImages == 0) {
frame.innerHTML = "<div class='pd5 fs12'>Du hast noch keine Bilder in privaten Alben</div><div class='cf' style='width:470px'>";
this.injectImage(null, frame, editor, urlInput);
}
else if (numberOfImages < 9) {
frame.innerHTML = "<div class='pd5 fs12'>Bilder ("+numberOfImages+") aus meinen privaten Galerien <i>(per Klick einfügen)</i>:</div><div class='cf' style='width:470px'>";
this.injectImage(null, frame, editor, urlInput);
}
else {
frame.innerHTML = "<div class='pd5 fs12'>Bilder ("+numberOfImages+") aus meinen privaten Galerien <i>(Alben mit privaten Bildern)</i>:</div><div class='cf' style='width:470px'>";
this.injectFolders(frame, editor, urlInput);
}
},
injectFolders: function (frame, editor, urlInput) {
var folders = MessageEditor.pictureLibrary.data;
var i = 0;
for (var n in folders) {
if (folders[n].id != undefined) {
var spacer = document.createElement("div");
spacer.className = "";
spacer.style.display = "none";
var folder = document.createElement("div");
folder.className = "pd5 cp";
folder.innerHTML = "<span class='icPoRi'>&nbsp;</span><span class='icFld'>&nbsp;</span><b>"+folders[n].title+"</b> ("+folders[n].elements.length+")";
folder.onclick = (function (folderId, editor, urlInput, spacer) {
return function () {
MessageEditor.pictureLibrary.toggleFolder(this, folderId, editor, urlInput, spacer);
}
})(i, editor, urlInput, spacer)
frame.appendChild(folder);
frame.appendChild(spacer);
i++;
}
}
},
toggleFolder: function (trigger, folderEntryId, editor, urlInput, spacer) {
if (spacer.style.display == "none") {
trigger.getElementsByTagName('span')[0].className = "icDown";
this.injectImage(folderEntryId, spacer, editor, urlInput);
spacer.style.display = "block";
}
else {
trigger.getElementsByTagName('span')[0].className = "icPoRi";
spacer.innerHTML = "";
spacer.style.display = "none";
}
},
injectImage: function (folderId, frame, editor, urlInput) {
var folders = MessageEditor.pictureLibrary.data;
if (folderId == null) {
for (var n in folders) {
if (folders[n].id != undefined && folders[n].elements.length > 0) {
for (var i = 0, len = folders[n].elements.length; i < len; i++) {
frame.innerHTML += "<div class='fl mr5'><img src='"+folders.imageServerUrl+"/ug/s/"+folders[n].elements[i].hs+"/"+folders[n].elements[i].mogileKey+"' class='cp' onclick='MessageEditor.pictureLibrary.insert(\""+folders.imageServerUrl+"/ug/n/"+folders[n].elements[i].hn+"/"+folders[n].elements[i].mogileKey+"\")'></div>";
}
}
}
frame.innerHTML += "<div class='pd5 bgG1 cf' style='width:460px'><a href='/user/"+User.nickname+"/gallery/0/addPicture?h="+User.hash+"'><span class='icAdd'>&nbsp;</span>Bild hochladen</a></div>";
}
else {
if (folders[folderId].elements.length > 0) {
for (var i = 0, len = folders[folderId].elements.length; i < len; i++) {
frame.innerHTML += "<div class='fl mr5'><img src='"+folders.imageServerUrl+"/ug/s/"+folders[folderId].elements[i].hs+"/"+folders[folderId].elements[i].mogileKey+"' class='cp' onclick='MessageEditor.pictureLibrary.insert(\""+folders.imageServerUrl+"/ug/n/"+folders[folderId].elements[i].hn+"/"+folders[folderId].elements[i].mogileKey+"\")'></div>";
}
}
frame.innerHTML += "<div class='pd5 bgG1 cf' style='width:460px'><a href='/user/"+User.nickname+"/gallery/"+folders[folderId].id+"/addPicture?h="+User.hash+"'><span class='icAdd'>&nbsp;</span>Bild hochladen</a></div>";
}
},
countImages: function () {
var data = MessageEditor.pictureLibrary.data;
var numberOfImages = 0;
for (var n in data) {
if (data[n].id != undefined) {
for (var i = 0, len = data[n].elements.length; i < len; i++) {
numberOfImages++;
}
}
}
return numberOfImages;
},
insert: function (imageAdress) {
Jpy.id('msAdressInput').value = imageAdress;
this.close();
},
close: function () {
Jpy.layer.remove("lyGalleryContainerPrivate");
}
},
draft: {
show: function (editor, trigger, visibility) {
this.area = editor.area;
Jpy.layer.remove('lyDrafts');
var layer = new Jpy.layerDragable.get({
trigger: trigger,
mother: editor.mother,
id: "lyDrafts",
width: "350px",
offset: {x:10,y:-60}
});
this.getFolders(visibility, layer);
},
insert: function (drafts, layer) {
var template = "<div class='bxHead w350 cf'>"
+ "<div class='bxContent zbBody w350'><div class='bgY5'><div class='pd10 ldN taR'><a href='/settings/draft/' class='inG2 rb5'><span class='icEdit'>"
+ "&nbsp;</span>Bearbeiten</a> <a href='/settings/draft/new' class='inCo rb5'><span class='icAdd'>&nbsp;</span>Neu</a></div>";
template += drafts;
template += "</div>";
layer.frame.innerHTML += template;
},
getFolders: function (visibility, layer) {
var getDrafts = new AjaxHandler();
var callback = {
json: true,
success: function(data) {
var draftList = data;
var template = "<dl id='msDraftsFolderList' class='ldN'>";
for (var n in draftList) {
template += "<dt id='msDraftFolder"+n+"' onclick='MessageEditor.draft.loadFolder("+draftList[n]['id']+","+n+")'><span class='icDown cp icUp'>&nbsp;</span>"+ draftList[n]['name']+"</dt>";
}
template += "<dt class='dn'></dt></dl>";
MessageEditor.draft.insert(template, layer);
}
};
getDrafts.request('GET', '/backend/draft.php?visibility='+visibility, callback);
},
loadFolder: function (folderId, trigger) {
var getDraftFolder = new AjaxHandler();
var callback = {
json: true,
success: function(data) {
MessageEditor.draft.folderDraft = data;
MessageEditor.draft.showFolder(trigger);
}
};
getDraftFolder.request('GET', '/backend/draft.php?folderId='+folderId, callback);
},
folderDraft: [],
showFolder: function (trigger) {
if (document.getElementById("msDraftFolderFrame"+trigger)) {
Jpy.toggle("msDraftFolderFrame"+trigger);
}
else {
var template = "";
for (var n in this.folderDraft) {
template += "<li><a href='#' onclick='MessageEditor.draft.insertDraft("+this.folderDraft[n]['id']+")'>"+this.folderDraft[n]['title']+"</a><li>";
}
var frame = document.createElement('dd');
frame.id = "msDraftFolderFrame"+trigger;
frame.innerHTML = template;
document.getElementById('msDraftsFolderList').insertBefore(frame, document.getElementById('msDraftsFolderList').getElementsByTagName('dt')[trigger+1]);
}
},
insertDraft: function(draftId) {
for (var n in this.folderDraft) {
if (this.folderDraft[n]['id'] == draftId) {
this.area.value = this.area.value +"\n"+ this.folderDraft[n]['text'];
Jpy.layer.remove('lyDrafts');
}
}
}
},
preview: function (editor, previewStyle) {
var textarea;
var textvalue;
if (editor.area) {
textvalue = editor.area.value;
textarea = editor.area;
}
else {
editor = document.getElementById(editor);
textvalue = editor.value;
textarea = editor;
}
if (textvalue.length == 0) {
textvalue = "Bitte die Eingabefläche mit Inhalt füllen."
}
if ((/[\<\u003C]{1}[s\u0053S\u0073]{1}[c\u0043C\u0063]{1}[r\u0052R\u0072]{1}[i\u0049I\u0069]{1}[p\u0050P\u0070]{1}[t\u0054T\u0074]{1}/).test(textvalue) == true || (/javascript:|javascript/g).test(textvalue) == true) {
textvalue = "Das einbinden von Scripten ist untersagt!"
}
textvalue = textvalue.replace(/\[b\]/gi, "<span style='font-weight: bold;'>")
textvalue = textvalue.replace(/\[\/b\]/gi, "</span>")
textvalue = textvalue.replace(/\[i\]/gi, "<span style='font-style: italic;'>")
textvalue = textvalue.replace(/\[\/i\]/gi, "</span>")
textvalue = textvalue.replace(/\[u\]/gi, "<span style='text-decoration: underline;'>")
textvalue = textvalue.replace(/\[\/u\]/gi, "</span>")
textvalue = textvalue.replace(/\[color\=\#([0-9a-zA-Z]{6})\]/gi, "<span style='color:#$1'>")
textvalue = textvalue.replace(/\[\/color\]/gi, "</span>")
textvalue = textvalue.replace(/\[bgcolor\=\#([0-9a-zA-Z]{6})\]/gi, "<span style='background:#$1'>");
textvalue = textvalue.replace(/\[\/bgcolor\]/gi, "</span>");
textvalue = textvalue.replace(/\[size\=([0-9]{1,2})\]/gi, "<span style='font-size:$1px;'>");
textvalue = textvalue.replace(/\[\/size\]/gi, "</span>");
textvalue = textvalue.replace(/\[list\]/gi, "<li>");
textvalue = textvalue.replace(/\[\/list\]/gi, "</li>");
textvalue = textvalue.replace(/\[right\]/gi, "<div align='right'>");
textvalue = textvalue.replace(/\[\/right\]/gi, "</div>");
textvalue = textvalue.replace(/\[center\]/gi, "<div align='center'>");
textvalue = textvalue.replace(/\[\/center\]/gi, "</div>");
textvalue = textvalue.replace(/\[img\]([a-zA-Z0-9\_\.\-\/\:\#\?]*)\[\/img\]/gi, "<img src='$1' style='max-width:400px;' class='ext' alt='Externes Bild kann nicht angezeigt werden' border='0'>");
textvalue = textvalue.replace(/\n/g, "<br>")
textvalue = textvalue.replace(/\[url\=(.*?)\](.*?)\[\/url\]/gi, " <a href='$1' target='_blank'>$2</a>")
textvalue = textvalue.replace(/\[quote\](.*?)\[\/quote\]/gi, "<div class='fuQb bgG1 ovH'><div class='fuQh'>Zitat: </div><div class='mr5'>$1</div></div>");
for (var i = 0, len = MessageEditor.TEMPLATE.SMILIES.length; i < len; i++) {
textvalue = textvalue.replace(MessageEditor.TEMPLATE.SMILIES[i].pattern, "<img src=\'"+Jpy.picurl+"/i/sm/"+MessageEditor.TEMPLATE.SMILIES[i].icon+".gif\'>");
}
if (editor.preview) {
previewStyle = editor.preview;
}
else if (!previewStyle){
previewStyle = "";
}
if (document.getElementById(textarea.id+"_preview")) {
document.getElementById(textarea.id+"_preview").innerHTML = MessageEditor.TEMPLATE.PREVIEW(textvalue, previewStyle);
}
else {
var frame = textarea.parentNode;
var previewWindow = document.createElement("div");
previewWindow.id = textarea.id+"_preview";
previewWindow.className = "msPreview";
previewWindow.innerHTML = MessageEditor.TEMPLATE.PREVIEW(textvalue, previewStyle);
frame.insertBefore(previewWindow, textarea);
}
},
resizeTextarea: {
start: function (trigger) {
MessageEditor.resizeTextarea.area = trigger.parentNode.parentNode.getElementsByTagName('textarea')[0];
MessageEditor.resizeTextarea.resizeLine = trigger;
MessageEditor.resizeTextarea.areaHeight = parseFloat(Jpy.getStyle(MessageEditor.resizeTextarea.area, "height"));
MessageEditor.resizeTextarea.triggerPosition = Jpy.getOffsetPosition(trigger).y
MessageEditor.resizeTextarea.init()
return false;
},
mouseUp: function(){
MessageEditor.resizeTextarea.area = null;
MessageEditor.resizeTextarea.resizeLine.style.borderTop = "";
},
mouseMove: function(e){
e = e || window.event;
var mousePosition = Jpy.getMousePosition(e);
if ( MessageEditor.resizeTextarea.area ){
MessageEditor.resizeTextarea.resizeLine.style.borderTop = "2px solid #ebdeb9";
MessageEditor.resizeTextarea.area.style.height = (mousePosition.y - MessageEditor.resizeTextarea.triggerPosition )+MessageEditor.resizeTextarea.areaHeight;
return false;
}
},
init: function () {
document.onmousemove = MessageEditor.resizeTextarea.mouseMove;
document.onmouseup = MessageEditor.resizeTextarea.mouseUp;
},
areaHeight: null,
area: null
},
restore: function(editor) {
var features = editor.features.getElementsByTagName('a')
for (var i = 0, len = features.length; i < len; i++) {
features[i].className = "";
}
editor.additional.innerHTML = "";
editor.additional.style.display = "none";
Jpy.layer.remove("msAdd");
},
limit: {
max: function (editor, limit) {
editor.optional.style.display = "block";
editor.optional.innerHTML = "Max. Anzahl der Zeichen ("+limit+") errreicht!";
var maxValue = editor.area.value.substring(0, limit);
editor.area.value = maxValue;
editor.area.focus();
},
partial: function (editor, value) {
editor.optional.style.display = "block";
editor.optional.innerHTML = "Noch max. "+value+" Zeichen erlaubt.";
}
},
selection: {
range: {
type: "",
editor: {},
content: "",
text: "",
start: "",
end: ""
},
get: function (editor) {
var editorInput = editor.area;
var selectedText = "";
if (typeof editorInput.selectionStart != 'undefined') {
var rangeStart = editorInput.selectionStart;
var rangeEnd = editorInput.selectionEnd;
MessageEditor.selection.range.start = rangeStart;
MessageEditor.selection.range.end = rangeEnd;
selectedText = editorInput.value.substring(rangeStart, rangeEnd);
MessageEditor.selection.range.type = "FF";
}
else if (typeof document.selection != 'undefined') {
MessageEditor.selection.range.type = "IE";
editorInput.focus();
var range = document.selection.createRange();
selectedText = range.text;
range.select();
}
else {
selectedText = "Dieser Browser wird nicht unterstützt!";
}
MessageEditor.selection.range.text = selectedText;
},
write: function (tagStart, tagEnd, editor) {
var input = editor.area;
var textToInsert = "";
if (MessageEditor.selection.range.text != "") {
textToInsert = MessageEditor.selection.range.text;
}
input.focus();
if (MessageEditor.selection.range.type == "FF") {
input.value = input.value.substr(0, MessageEditor.selection.range.start)+tagStart+textToInsert+tagEnd+input.value.substr(MessageEditor.selection.range.end);
var cursorPosition;
if (textToInsert.length == 0) {
cursorPosition = MessageEditor.selection.range.start + tagStart.length;
}
else {
cursorPosition = MessageEditor.selection.range.start+tagStart.length+textToInsert.length+tagEnd.length;
}
input.selectionStart = cursorPosition;
input.selectionEnd = cursorPosition;
}
else if (MessageEditor.selection.range.type == "IE") {
var range = document.selection.createRange();
input.focus();
range.text = tagStart + textToInsert + tagEnd;
if (textToInsert.length == 0) {
range.move('character', -tagEnd.length);
}
else {
range.move('character', -1);
range.moveStart('character');
}
range.select();
}
}
}
}
// Wed Jan  5 15:27:51 2011
