1
0

675 lines
22 KiB
JavaScript

function useTexture(src) {
var canvas = document.getElementById('myCanvas');
var img = new Image();
img.onload = function() {
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 0, 0, canvas.width, canvas.height);
canvas.parentNode._x3domNode.invalidateGLObject();
}
};
img.src = src;
}
function mysql2Date(timestamp) {
//function parses mysql datetime string and returns javascript Date object
//input has to be in this format: 2007-06-05 15:26:02
var regex = /^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;
var parts = timestamp.replace(regex, "$1 $2 $3 $4 $5 $6").split(' ');
return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]);
}
function Skin(id, name, img, type, author, license, uploaded) {
this.id = Number(id);
this.name = name;
this.type = type;
this.author = author;
var img = new Image();
img.className = 'Skin thumb';
//css klasse zuweisen fuers aussehen ;)
img.src = "data:" + type + ";base64," + img;
//das ist die data: url fuer die vorschau
img.title = name;
//als titel noch der dateiname.
/*img.addEventListener('click', function() {
useTexture(this.src);
}, false);*/
this.img = img;
this.license = license;
this.uploaded = mysql2Date(uploaded);
};
Skinlist = new Array();
function License(id, name, url, text, imgurl) {
this.id = id;
this.name = name;
this.url = url;
this.text = text;
this.imgurl = imgurl;
this.type = (text == '') ? "url" : "text";
}
function uploadSkin(e) {
e.preventDefault();
e.stopPropagation();
var author = this.author.value;
var name = this.name.value;
if (this.license.options[this.license.selectedIndex].defaultSelected) {
alert("please select a license first!");
return false;
}
var license = this.license.value;
var img = this.img.value;
xhr.request(this.action, "author=" + author + "&name=" + name + "&license=" + license + "&img=" + img, uploaded);
this.submit.disabled = true;
//this.p.style.display="";
//console.log(this);
return false;
}
function checkLicense(input) {
if (input.options[input.selectedIndex].defaultSelected) {
input.setCustomValidity('please chose a License from the list');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function uploaded(http) {
if (http.status == 200) {
if (JSON.parse(http.responseText)) {
var answer = JSON.parse(http.responseText);
if (answer.success) {
TINY.box.show({
html : 'Uploaded successfully!',
animate : false,
close : false,
mask : false,
boxid : 'success',
autohide : 3,
top : -14,
right : -17
});
} else {
alert("Error: " + answer.status_msg);
}
} else {
alert("Something is wrong: the answer of the server is " + http.getResponseText());
}
} else {
alert("Something is wrong: the answer of the server is " + http.status + " " + http.statusText);
}
}
function abort() {
var childNode = this.parentNode;
childNode.parentNode.removeChild(childNode);
}
/* ==========================================================================
Drag & drop file handler
========================================================================== */
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var dateien = (this.id == 'skinlist') ? evt.dataTransfer.files : evt.target.files;
// jenachdem ob ueber drag drop oder durchsuchen ausgewaehlt wurde.
//in dateien sind jetzt alle dateien gespeichert die ausgewahlt wurden
for (var i = 0, f; f = dateien[i]; i++) {//alle dateien nacheinander auslesen...
if (!f.type.match('image.*')) {//fals was anderes als ein bild dabei sein sollte
alert("ERROR!\n\n could not open the file " + f.name + " as an image");
continue;
}
var reader = new FileReader();
// wenn die datei geladen ist dann soll die gleich in ein img tag geschrieben werden
reader.onload = (function(Datei) {
return function(e) {
// Vorschau bzw. thumbnail rendern
var block = document.createElement('div');
block.className = "option";
var img = new Image();
img.className = 'thumb';
//css klasse zuweisen fuers aussehen ;)
img.src = e.target.result;
//das ist die data:// url fuer die vorschau
img.title = Datei.name;
//als titel noch der dateiname.
img.addEventListener('click', function() {
useTexture(img.src);
}, false);
//bild ende
var form = document.createElement('form');
form.action = "upload.php";
form.method = "get";
form.className = "upload";
form.addEventListener('submit', uploadSkin, false);
form.addEventListener('reset', abort, false);
var titel = document.createElement('label');
titel.innerHTML = "Name: <input type='text' placeholder='please enter a name' name='name' required><br>";
//titel Ende
//var eigenschaften = document.createElement('span');
var author = document.createElement('label');
author.innerHTML = "Author: <input type='text' placeholder='enter the name of the Author' name='author' required>";
var license = document.createElement('label');
var licenseselect = document.createElement('select');
licenseselect.addEventListener('change', function(event) {
event.preventDefault();
checkLicense(this);
return false;
}, true);
licenseselect.name = "license";
//var br = document.createElement('br');
var NeuerEintrag = new Option("Please select your license", "0", true, true);
licenseselect.options[licenseselect.length] = NeuerEintrag;
for (index in Licenses) {
var NeuerEintrag = new Option(Licenses[index].name, Licenses[index].id, false, false);
licenseselect.options[licenseselect.length] = NeuerEintrag;
}
license.innerHTML += "License: ";
license.insertBefore(licenseselect, null);
licenseHelp = document.createElement('a');
licenseHelp.href = getHelpUrl('licenses');
licenseHelp.addEventListener('click', function(event) {
event.preventDefault();
showHelp('licenses');
return false;
}, true);
licenseHelp.className = "actionlink";
licenseHelp.innerHTML = "help";
var mimeElem = document.createElement('label');
var className = (Datei.type == "image/png") ? "valid" : "invalid";
var toolTip = (Datei.type == "image/png") ? "image is a png file, good :)" : "the selected image is not a png file and not supported by minetest";
mimeElem.innerHTML = "Mime Type: <input title='" + toolTip + "' class='" + className + "' value='" + Datei.type + "' disabled>";
var sizeElem = document.createElement('label');
var size = Datei.size / 1024;
size = size.toFixed(2);
var className = (size <= 5) ? "valid" : "invalid";
sizeElem.innerHTML += "Size: <input class=" + className + " value='" + size + " Kb' disabled>";
var resolutionElem = document.createElement('label');
var width = img.width;
var height = img.height;
var className = (width == 64 && height == 32) ? "valid" : "invalid";
resolutionElem.innerHTML += "Resolution: <input class=" + className + " value='" + width + "px x " + height + "px' disabled>";
var imgElem = document.createElement('input');
imgElem.name = 'img';
imgElem.type = "hidden";
imgElem.value = img.src;
var submitButtons = document.createElement('div');
submitButtons.innerHTML = "<progress name='p' style='display:none;'></progress><button type='submit' name='submit' class='addimg'>Upload!</button><button type='reset' class='abort'>discard!</button>";
//Eigenschaften ende
block.insertBefore(img, null);
//das bild ins div schieben.
form.insertBefore(titel, null);
//titel einfügen
form.insertBefore(author, null);
form.insertBefore(document.createElement('br'), null);
form.insertBefore(license, null);
form.insertBefore(licenseHelp, null);
form.insertBefore(document.createElement('br'), null);
form.insertBefore(sizeElem, null);
form.insertBefore(document.createElement('br'), null);
form.insertBefore(mimeElem, null);
form.insertBefore(document.createElement('br'), null);
//form.insertBefore(resolutionElem, null);
form.insertBefore(document.createElement('br'), null);
form.insertBefore(imgElem, null);
//form.insertBefore(document.createElement('br'), null);
form.insertBefore(submitButtons, null);
block.insertBefore(form, null);
//zu guter letzt die Eigenschaften
document.getElementById('skinlist').insertBefore(block, document.getElementById("dnd"));
//anschliessend den block einfuegen
checkLicense(licenseselect);
};
})(f);
reader.readAsDataURL(f);
}
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
function initDragDrop() {
// Event listener Eintragen
var dropZone = document.getElementById('skinlist');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
document.getElementById('files').addEventListener('change', handleFileSelect, false);
}
document.addEventListener('DOMContentLoaded', initDragDrop, false);
/* ==========================================================================
load skins and write them
========================================================================== */
function clearList() {
copy = document.getElementById('dnd').outerHTML;
document.getElementById('skinlist').innerHTML = copy;
}
function getSkins(page) {
copy = document.getElementById('dnd').outerHTML;
document.getElementById('skinlist').innerHTML = copy + "<b>Loading. Please wait...</b>";
xhr.request("getskins.php", page, gotSkins);
}
config = {};
config.list2dprev = true;
function gotSkins(http) {
if (http.status == 200) {
if (JSON.parse(http.responseText)) {
var answer = JSON.parse(http.responseText);
if (answer.success) {
clearList();
var elem = document.getElementById("page");
for (var i = 1; i <= answer.pages; i++) {
var option = new Option(i, i);
elem.options[i - 1] = option;
}
document.getElementById("max_pages").value = answer.pages;
elem.selectedIndex = answer.page - 1;
if (answer.page > 1) {
var block = document.createElement('div');
var string = location.hash;
if (string.indexOf('#!') != -1) {
cmd = string.split('!');
var obj = parseQuery(cmd[1]);
obj.page = answer.page - 1;
var str = decodeQuery(obj);
} else {
var str = "page:" + (answer.page + 1);
}
block.innerHTML = "go back to <a href='#!" + str + "'> page " + (answer.page - 1) + "</a> ";
block.className = "option";
document.getElementById('skinlist').insertBefore(block, null);
}
var i = 0;
while (answer.data[i]) {
var skin = answer.data[i];
var license = Licenses[skin.license_id];
Skinlist[Number(skin.id)] = new Skin(skin.id, skin.name, skin.img, skin.type, skin.author, license, skin.uploaded);
var block = document.createElement('div');
block.className = "option";
var img = new Image();
if (config.list2dprev) {
img.className = 'list2d';
//css klasse zuweisen fuers aussehen ;)
img.src = "./skins/1/" + skin.id + ".png";
//das ist die data: url fuer die vorschau
img.title = answer.data[i].name;
//als titel noch der dateiname.
img.dataset.img = "data:" + skin.type + ";base64," + skin.img;
img.addEventListener('click', function() {
useTexture(this.dataset.img);
}, false);
} else {
img.className = 'thumb';
//css klasse zuweisen fuers aussehen ;)
img.src = "data:" + skin.type + ";base64," + skin.img;
//das ist die data: url fuer die vorschau
img.title = answer.data[i].name;
//als titel noch der dateiname.
img.addEventListener('click', function() {
useTexture(this.src);
}, false);
}
//bild ende
var titel = document.createElement('span');
titel.innerHTML = "Name: <a href='#!page:1,filtertype:Name,filter:" + answer.data[i].name + "'>" + answer.data[i].name + "</a><br>";
titel.className = "autor";
//titel Ende
var eigenschaften = document.createElement('span');
eigenschaften.innerHTML = "<span class='rightbuttons'><button onclick='download(" + answer.data[i].id + ")' class='download'>&nbsp;Download</button> " + "<button onclick='shareSkin.show(" + answer.data[i].id + ")' class='permalink'>&nbsp;Share</button>" + "<button onclick='report(" + answer.data[i].id + ")' class='report'>&nbsp;Report</button></span> <br>" + "Author: <a href='#!page:1,filtertype:Author,filter:" + answer.data[i].author + "'>" + answer.data[i].author + "</a> <br>" + "License: <a href='#!page:1,filtertype:License,filter:" + answer.data[i].license + "'>" + answer.data[i].license + "</a> &nbsp;" + "<a href='" + getLicenseById(answer.data[i].license_id).url + "' onclick='showLicenseInfo(" + answer.data[i].license_id + ");return false;'><img src=" + getLicenseById(answer.data[i].license_id).imgurl + "></a> <br>" + "Uploaded at: " + dateFormat(answer.data[i].uploaded) + "<br>";
//Eigenschaften ende
block.insertBefore(img, null);
//das bild ins div schieben.
block.insertBefore(titel, null);
block.insertBefore(eigenschaften, null);
//zu guter letzt die Eigenschaften
document.getElementById('skinlist').insertBefore(block, null);
//anschliesend den block einfuegen
i++;
}
if (answer.page < answer.pages) {
var block = document.createElement('div');
var string = location.hash;
if (string.indexOf('#!') != -1) {
cmd = string.split('!');
var obj = parseQuery(cmd[1]);
obj.page = answer.page + 1;
var str = decodeQuery(obj);
} else {
var str = "page:" + (answer.page + 1);
}
block.innerHTML = "End of page " + answer.page + ". <br><a href='#!" + str + "'>continue on the next page</a> ";
block.className = "option";
document.getElementById('skinlist').insertBefore(block, null);
} ;
if (answer.data.length < 1) {
alert("noting found matching your filter!");
} else {
useTexture("data:" + answer.data[0].type + ";base64," + answer.data[0].img);
}
} else {
TINY.box.show({
html : '<h1>oops :/</h1> <h2>an error happend! </h2><u><b>Errmsg:</b></u><pre>' + answer.status_msg + '</pre><br><b>you may can try it again,but if you still get this mesage than you should report the bug at the <a href="https://project.king-arthur.eu/projects/minetest-skin-db" >project page</a> or at the <a href="https://forum.minetest.net/viewtopic.php?id=4497">minetest forum thread</a>',
animate : false,
close : true,
boxid : 'error'
});
}
} else {
alert("Something is wrong: the status of http is: " + http.getResponseText());
}
} else {
alert("Something is wrong: the answer of the server is " + http.status + " " + http.statusText);
}
}
//document.addEventListener("DOMContentLoaded", function(){ getSkins(1) }, false);
/* ==========================================================================
read the anchor
========================================================================== */
function anchor() {
if (string != location.hash) {
onAnchorChange();
string = location.hash;
}
checkAnchor = setTimeout(anchor, delay);
}
document.addEventListener("DOMContentLoaded", anchor, false);
string = null;
delay = 100;
checkAnchor = null;
hashobj = {};
function hashmodified() {
var str = decodeQuery(hashobj);
location.hash = "#!" + str;
}
function onAnchorChange() {
var string = location.hash;
if (string.indexOf('#!') != -1) {
cmd = string.split('!');
obj = parseQuery(cmd[1]);
clearList();
var get = "";
if (obj.page)
get += "page=" + obj.page + "";
if (obj.filtertype && obj.filter) {
get += "&filtertype=" + obj.filtertype + "&filter=" + obj.filter + "";
document.getElementById('filter').value = obj.filter;
switch(obj.filtertype) {
case "Author":
document.getElementById('filtertype').selectedIndex = 1;
break;
case "License":
document.getElementById('filtertype').selectedIndex = 2;
break;
case "Id":
document.getElementById('filtertype').selectedIndex = 3;
break;
case "Name":
document.getElementById('filtertype').selectedIndex = 4;
break;
default:
document.getElementById('filtertype').selectedIndex = 0;
break;
}
}
getSkins(get);
} else {
clearList();
getSkins("page=1");
document.getElementById('filter').value = '';
document.getElementById('filtertype').selectedIndex = 0;
}
}
function parseQuery(qstr) {
var query = {};
var a = qstr.split(',');
for (var i in a) {
var b = a[i].split(':');
if (b[0] != '')
query[decodeURIComponent(b[0])] = decodeURIComponent(b[1]);
}
return query;
}
function decodeQuery(qobj) {
var str = "";
for (var attr in qobj) {
str += attr + ':' + qobj[attr] + ",";
}
return str;
}
/* ==========================================================================
skinlist buttons
========================================================================== */
function download(id) {
window.open('/download.php?id=' + id, '_blank');
}
function permalink(id) {
var html = "this is your permamentlink to the skin file. just copy it and share it with other people.<br>" + "<pre>" + location.protocol + "//" + location.hostname + location.pathname + "#!page:1,filtertype:Id,filter:" + id;
TINY.box.show({
html : html
});
}
function report(id) {
TINY.box.show({
url : "reportSkin.php",
post : "id=" + id
});
}
function submitReport(form) {
TINY.box.fill("reportSkin.php", 1, "id=" + form.id.value + "&text=" + form.text.value + "&topic=" + form.topic.value);
return false;
}
function resetReport(form) {
TINY.box.hide();
return false;
}
/* ==========================================================================
toolbar functions
========================================================================== */
function resetView() {
document.getElementById('3dprev').runtime.resetView();
}
function getScreenshot() {
screenshot = document.getElementById('3dprev').runtime.getScreenshot();
window.open(screenshot, '_blank', "width=512,height=512");
}
function dateFormat(mysqldate) {
var date = Date.createFromMysql(mysqldate);
//console.debug(date);
return mysqldate;
//todo! shuld output something like "just now" or "today at 17:30" or "12.12.12"
}
function goPage(page) {
hashobj.page = page;
hashmodified();
}
Date.createFromMysql = function(mysql_string) {
if ( typeof mysql_string === 'string') {
var t = mysql_string.split(/[- :]/);
//when t[3], t[4] and t[5] are missing they defaults to zero
return new Date(t[0], t[1] - 1, t[2], t[3] || 0, t[4] || 0, t[5] || 0);
}
return null;
};
/* ==========================================================================
licenses functions
========================================================================== */
var Licenses = new Array();
function getLicenses() {
var HTTP = new XMLHttpRequest();
HTTP.open("POST", "api/get.json.php?licenses", false);
HTTP.onreadystatechange = function() {
//console.log(HTTP.readyState);
console.log("get licenses " + (20 * (HTTP.readyState + 1)) + "% loaded");
if (HTTP.readyState == 4) {
var objekt = JSON.parse(HTTP.responseText).licenses;
var i = 0;
while (objekt[i]) {
Licenses[objekt[i].id] = new License(objekt[i].id, objekt[i].name, objekt[i].url, objekt[i].text, objekt[i].imgurl);
i++;
}
} else {
}
};
HTTP.send(null);
}
function getLicenseById(id) {
for (var element in Licenses) {
if (Licenses[element].id == id)
return Licenses[element];
}
return undefined;
}
function showLicenseInfo(id) {
var license = getLicenseById(id);
if (license.type == "url") {
TINY.box.show({
iframe : license.url,
boxid : 'frameless',
width : 900,
height : 600,
fixed : false,
maskid : 'bluemask',
maskopacity : 40
});
} else {
TINY.box.show({
html : license.text,
boxid : 'frameless',
width : 750,
height : 450,
fixed : false,
maskid : 'bluemask',
maskopacity : 40
});
}
}
function getHelpUrl(about) {
return "/helpfiles/" + about + ".html";
}
function showHelp(about) {
TINY.box.show({
iframe : getHelpUrl(about),
boxid : 'frameless',
width : 400,
height : 300,
fixed : false,
maskid : 'bluemask',
maskopacity : 40
});
}
getLicenses();
shareSkin = {
modified : function(elem) {
var path = "http://" + location.hostname + location.pathname;
var selected = elem.value;
var form = elem.form;
var id = form.id.value;
form.help.value = elem.selectedOptions[0].title;
if (selected == "perma") {
form.output.value = path + "#!page:1,filtertype:Id,filter:" + id;
} else if (selected == "forum") {
var license = Skinlist[id].license;
form.output.value = "[u]name[/u]:" + Skinlist[id].name + "\n" + "[img]" + path + "skins/5/" + id + ".png[/img]\n" + "[u]author[/u]: " + Skinlist[id].author + "\n" + "[u]license[/u]:[url=" + license.url + "]" + license.name + "[img]" + license.imgurl + "[/img][/url]\n" + "[b][url=" + path + "#!page:1,filtertype:Id,filter:" + id + "]view in 3d![/url] on skin Database\n[/b]" + "[b][url=" + path + "download.php?id=" + id + "]Download[/url][/b]";
}
console.debug(form);
},
show : function(id) {
TINY.box.show({
url : "shareSkin.php",
post : "id=" + id
});
}
};
//settings window
settings = {};
settings.showHide = function() {
if (document.getElementById('settingsWindow').style.display == 'block') {
document.getElementById('settingsWindow').style.display = 'none';
//document.getElementById('showHide').innerHTML = 'Show description';
} else {
document.getElementById('settingsWindow').style.display = 'block';
//document.getElementById('showHide').innerHTML = 'Hide description';
}
};