";
} else {
if (IEfix) {return;}
for (var i = 0; i < elementList.length; i++) {elementList[i].removeAttribute("onclick");}
IEfix = true;
if (index === 2) {index = 1;}
if (index === 3) {index = 13;}
if (index === 6) {index = 9;}
if (index === 7) {index = 11;}
if (index === 4) {index = 7;}
if (index === -1) {index = 3;}
// all of this is to align the indexes from elementList with the ones in database.color
var colorArray = [
//["Header Text:", "include opacity box?", "include next item in same menu?"],
["Post Background:"],
["Post and Signature Box:", true, true],
["Post Box Shadow:", true],
["Text Color:", false, true],
["Text Shadow Color:"],
["Link Color:", false, true],
["Link Hover:"],
["Quote Link Color:", false, true],
["Quote Link Hover:"],
["Quote Box:", true, true],
["Quote Box Shadow:", true],
["Code Box:", true, true],
["Code Box Shadow:", true],
["Spoilers:", true]
];
var htmltemplate = [
'',
'',
' ',
' '
];
var htmlexport = "";
var color = "";
for (var i = 0; i < 2; i++) {
color = colorParser(database.color[index]);
htmlexport += htmltemplate[0] + colorArray[index][0] + htmltemplate[1] + " " + htmltemplate[2] + index + htmltemplate[3] + color[0] + htmltemplate[4];
if (colorArray[index][1]) {
htmlexport += htmltemplate[5] + index + htmltemplate[6] + (color[1] * 100) + htmltemplate[7];
}
if (colorArray[index][2] && i !== 1) {index++; htmlexport += " "} else {break;}
}
document.getElementById("currentoptions").innerHTML = "
" + htmlexport + "
";
rhslFirstFunction();
}
return;
}
var value = [element.value];
if (element.attributes[0].value === "text") {
if (element.nextElementSibling) {value.push(element.nextElementSibling.value);}
} else if (element.attributes[0].value === "number") {
value.unshift(element.previousElementSibling.value);
} else {return;}
value = colorJoiner(value[0], value[1]);
if (value) {database.color[index] = value; element.removeAttribute("class");} else {element.className = "invalidinput";}
layoutGenerator();
}
function borderTool(uidraw, index, element, isborder) {
if (uidraw) {
var elementList = [];
var postandsig = document.getElementsByClassName(database.name + "_post");
elementList.push(postandsig[0]);
if (postandsig[1]) {elementList.push(postandsig[1]);} else {elementList.push(postandsig[0]);}
elementList.push(elementList[0].children[0]);
elementList.push(elementList[0].children[2]);
elementList.push(document.getElementsByClassName("spoiler")[0]);
if (!index&&index !== 0) {
for (var i = 0; i < elementList.length; i++) {
elementList[i].setAttribute("onclick", "borderTool(true, " + i + ")");
}
document.getElementById("currentoptions").innerHTML = "Click on the item that you want to change the border of.";
} else {
if (IEfix) {return;}
for (var i = 0; i < elementList.length ; i++) {elementList[i].removeAttribute("onclick");}
IEfix = true;
if (index === 0) {index = 1;}
index += 13;
var borderindex = index - 14;
// all of this is to align the indexes from elementList with the ones in database.color
var uiUnsort = database.border[borderindex];
var uiNumber = uiUnsort.substring(0, uiUnsort.indexOf(" ")).replace(/(px)/g,"");
var uiSelect = uiUnsort.slice(uiUnsort.indexOf(" ") + 1, -1);
var uiRadius = database.border[borderindex + (database.border.length / 2)].toString().replace(/(px)/g,"");
var borderArray = ["Post and Signature Border:", "Quote Border:", "Code Border:", "Spoiler Border:"];
var color = colorParser(database.color[index]);
var htmlexport = '' + borderArray[borderindex] + ' ' + ' | Border Radius: Color:' + " " + ' ';
document.getElementById("currentoptions").innerHTML = "
" + htmlexport + "
";
var selectList = document.getElementsByClassName("listofBorderOptions");
for (var i = 0; i < selectList.length; i++) {if (selectList[i].value === uiSelect) {selectList[i].selected = true;}}
rhslFirstFunction();
}
return;
}
if (!isborder) {
var value = colorJoiner(element.value, false);
if (value) {database.color[index] = value; element.removeAttribute("class");} else {element.className = "invalidinput";}
} else if (isborder === 1) {
var value = [element.value];
if (value < 0 || value > 15) {return;} //validator
if (element.tagName === "INPUT") {
value.push(element.nextElementSibling.value);
} else if (element.tagName === "SELECT") {
value.unshift(element.previousElementSibling.value);
} else {return;}
if (value[0] !== "0") {value[0] += "px";}
if (value[1]) {value[1] += " ";}
value = value.join(" ");
database.border[index] = value;
} else {
var value = element.value;
if (value < 0 || value > 50) {return;} //validator
if (value !== "0") {value += "px";}
database.border[index + (database.border.length / 2)] = value;
}
layoutGenerator();
}
function backgroundTool(uidraw, index, bgIndex, value) {
if (uidraw) {
if (!index && index !== 0) {
document.getElementById("currentoptions").innerHTML = '
Selected Background:
Please select a background to edit. The filesize of all used images should be under 200KB.
';
} else if (index === "false") {
document.getElementById("backgroundsettings").innerHTML = "Please select a background to edit. The filesize of all used images should be under 200KB.";
} else {
var filteredURL = database.bg[index][0].replace(/url\(/,"").replace(")","");
document.getElementById("backgroundsettings").innerHTML = ' ';
if (database.bg[index][3]) {
document.getElementById("backgroundsettings").innerHTML += ' ';
var selectList = document.getElementsByClassName("listofBgOptions1");
for (var i = 0; i < selectList.length; i++) {
if (selectList[i].value === database.bg[index][1]) {selectList[i].selected = true;}
}
selectList = document.getElementsByClassName("listofBgOptions2");
for (var i = 0; i < selectList.length; i++) {
if (selectList[i].value === database.bg[index][2]) {selectList[i].selected = true;}
}
selectList = document.getElementsByClassName("listofBgOptions3");
for (var i = 0; i < selectList.length; i++) {
if (selectList[i].value === database.bg[index][3]) {selectList[i].selected = true;}
}
} else {
var uiNumber = database.size[10].toString().replace(/(px)/g,"");
document.getElementById("backgroundsettings").innerHTML += ' | Image Width (px): '; // screw consistency, this works better
var selectList = document.getElementsByClassName("listofBgOptions1");
for (var i = 0; i < selectList.length; i++) {
if (selectList[i].value === database.bg[index][1]) {selectList[i].selected = true;}
} // selectList[i].selected gets reset by this stupid DOM change at the end, so I had to improvise
}
}
return;
}
if (bgIndex === 0) {
if (value.match(/(^[A-Z]:\\)|(^file:\/\/)/)) {
document.getElementById("backgroundsettings").children[0].className = "invalidinput";
return;
} else {document.getElementById("backgroundsettings").children[0].removeAttribute("class");}
if (value) {value = value.replace(")", "%29").replace("(", "%28"); value = "url(" + value + ")";}
}
database.bg[index][bgIndex] = value;
layoutGenerator();
}
function fontTool(uidraw, index, value) {
if (uidraw) {
var uiNumbers = [];
for (var i = 3; i <= 5; i++) {
uiNumbers[i - 3] = database.font[i].toString().replace(/(px)/g,"");
}
document.getElementById("currentoptions").innerHTML = '
Text Font: ' +
' ' +
'Text Shadow:
';
var selectList = document.getElementsByClassName("listofFontOptions");
for (var i = 0; i < selectList.length; i++) {if (selectList[i].value === database.font[0]) {selectList[i].selected = true;}}
selectList = document.getElementsByClassName("listofTextOptions");
for (var i = 0; i < selectList.length; i++) {if (selectList[i].value === database.font[2]) {selectList[i].selected = true;}}
return;
}
if (index >= 3) {
var min = [-15, -15, 0];
var max = [15, 15, 40];
if (value < min[index - 3] || value > max[index - 3] || isNaN(value)) {return;} //validator
if (!value) {database.font[index] = 0;} else {database.font[index] = value + "px";}
} else {database.font[index] = value;}
layoutGenerator();
}
function saveTool(uidraw, event, cookieaction, drawJSON) {
if (uidraw) {
var downloadAttrSupported = ("download" in document.createElement("a"));
if (!downloadAttrSupported) {var savebutton = '';} else {
var jsonoutput = JSON.stringify(database);
jsonoutput = jsonoutput.replace(/\s/g, "%20");
jsonoutput = jsonoutput.replace(/'/g, "%27");
jsonoutput = jsonoutput.replace(/#/g, "%23");
var savebutton = document.getElementById("currentoptions").innerHTML = '';
}
document.getElementById("currentoptions").innerHTML = '
Saving the layout as a JSON file lets you re-open it later on. ' + savebutton + ' ';
return;
}
if (drawJSON) {
var jsonoutput = JSON.stringify(database);
document.getElementById("mainmakerwindow").innerHTML = '';
document.getElementById("currentoptions").innerHTML = '
Your browser does not support the Download attribute. Please manually copy and paste the text in the textarea above and save it on a JSON file.
';
return;
}
if (cookieaction) {
if (cookieaction === 1) {
createCookie("savedLayout", JSON.stringify(database), 365);
document.getElementById("currentoptions").innerHTML = "
Layout saved successfully! The layout is now stored in the browser's cookie data.
";
} else {
var cookiedata = readCookie("savedLayout");
if (cookiedata) {
cookiedata = JSON.parse(cookiedata);
database = cookiedata;
document.getElementById("currentoptions").innerHTML = "Layout loaded successfully!";
} else {
document.getElementById("currentoptions").innerHTML = "Error: Unable to find any layout data in the browser's cookies.";
}
}
layoutGenerator();
return;
}
if (window.File && window.FileReader && window.FileList && window.Blob) {
var file = event.target.files[0];
//if (!file.type.match('application.json')) {return;}
var reader = new FileReader();
reader.onload = function(event) {
try {
if (!file.name.match(/.json$/)) throw "The file is not a .json file.";
if (!event.target.result.match(/{"size":\[[^\]]*\],"color":\[[^\]]*\],"border":\[[^\]]*\],"bg":\[.*\],"font":\[[^\]]*\],"name":"[\w-_]*","app":"Layout Maker XP 2"}/)) throw "Invalid, malformatted or corrupted JSON file.";
database = JSON.parse(event.target.result);
layoutGenerator();
}
catch(errorText) {document.getElementById("currentoptions").innerHTML = "Error: " + errorText; return;}
};
reader.readAsText(file);
} else {document.getElementById("currentoptions").innerHTML = 'Your browser does not fully support the File API. Therefore, the JSON file could not be loaded.';}
}
function importTool(uidraw) {
if (uidraw) {
document.getElementById("currentoptions").innerHTML = '
If you\'re looking for a way to put in your own custom layout and preview it as you edit it, please use the Editing Mode in Layout Maker XP 1 instead.';
return;
}
}
function exportTool(uidraw, exportSettings) {
if (uidraw) {
document.getElementById("currentoptions").innerHTML = '
This tool will generate the layout\'s HTML and CSS code. | Options:
';
return;
}
exportSettings = Number(exportSettings);
if (exportSettings === -1) {
if (confirm("Warning: This will reset all of the layout's properties and settings. If you want to save anything first, please hit \"Cancel\" and use either the Save Tool or the Export Tool.")) {database = backup; firstFunction();}
return;
}
var generatedLayout = layoutGenerator(true);
if (exportSettings === 2) {
var downloadAttrSupported = ("download" in document.createElement("a"));
if (!downloadAttrSupported) {document.getElementById("currentoptions").innerHTML = '
Your browser does not support the Download attribute. As such, the CSS cannot be exported as a separate file.
'; return;}
var externalCSS = generatedLayout[0].match(/");
document.getElementById("mainmakerwindow").innerHTML = '';
} else {
if (exportSettings === 3) {generatedLayout[0] = generatedLayout[0].replace(/\n/g, "");}
document.getElementById("mainmakerwindow").innerHTML = '';
document.getElementById("externalCSSanchor").innerHTML = "";
}
}
function unknownTool() {document.getElementById("currentoptions").innerHTML = "Excuse me, but this tool doesn't seem to exist.";}
// LAYOUT GENERATOR AND OTHER COLOR-RELATED FUNCTIONS
function layoutGenerator(shouldExport, doScroll) {
if (database.font[1]) {
var generatedFont = "'" + database.font[1] + "', " + database.font[2];
var generatedFontExtra = " @import url('https://fonts.googleapis.com/css?family=" + database.font[1].replace(" ", "+") + "');\n";
} else {var generatedFont = database.font[0]; var generatedFontExtra = "";}
var bgArray = [];
for (var i = 0; i < database.bg.length; i++) {
if (!database.bg[i][0]) {continue;}
bgArray.push(database.bg[i].join(" "));
}
if (bgArray[0]) {
bgArray[bgArray.length - 1] = database.color[0] + " " + bgArray[bgArray.length - 1];
bgArray = bgArray.join(", ");
} else {bgArray = database.color[0];}
var generatedLayout = ['' + '