374 lines
12 KiB
JavaScript
374 lines
12 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 uploadSkin(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
var author = this.author.value;
|
|
var name = this.name.value;
|
|
var license = this.license.value;
|
|
var img = this.img.value;
|
|
xhr.request(this.action, "author=" + author + "&name=" + name + "&license=" + license + "&img=" + img, uploaded);
|
|
//alert("hi "+this.name.value+",n thanks that you want to upload your skin. but the upload function is not ready atm.")
|
|
return false;
|
|
}
|
|
|
|
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,left:-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.addEventListener('submit', uploadSkin, false);
|
|
form.addEventListener('reset', abort, false);
|
|
var titel = document.createElement('span');
|
|
titel.innerHTML = "Name: <input type='text' placeholder='please enter a name' name='name' required><br>";
|
|
//titel Ende
|
|
var eigenschaften = document.createElement('span');
|
|
eigenschaften.innerHTML = "Author: <input type='text' placeholder='enter the name of the Author' name='author' required> <br>" +
|
|
"License: <input type='text' placeholder='enter the license under that you would share this' name='license' required> <a href='http://en.wikipedia.org/wiki/License' onclick=\"TINY.box.show({iframe:this.href,boxid:'frameless',width:850,height:'600',fixed:false,maskid:'bluemask',maskopacity:40});return false\" class='actionlink'>need help</a><br>" +
|
|
"Mime Type: " + Datei.type + "<br>" + "Size: " + Datei.size / 1024 + " Kb<br>" + "<input type='hidden' value='" + img.src + "' name='img'>" +
|
|
"<button type='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(eigenschaften, null);
|
|
//zu guter letzt die Eigenschaften
|
|
block.insertBefore(form, null);
|
|
//zu guter letzt die Eigenschaften
|
|
document.getElementById('skinlist').insertBefore(block, document.getElementById("dnd"));
|
|
//anschliessend den block einfuegen
|
|
};
|
|
})(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) {
|
|
|
|
xhr.request("getskins.php", page, gotSkins);
|
|
}
|
|
|
|
function gotSkins(http) {
|
|
if (http.status == 200) {
|
|
|
|
if (JSON.parse(http.responseText)) {
|
|
var answer = JSON.parse(http.responseText);
|
|
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');
|
|
block.innerHTML = "go back to <a href='#!page:"+ (answer.page-1) +"'> page "+(answer.page-1)+"</a> ";
|
|
block.className = "option";
|
|
document.getElementById('skinlist').insertBefore(block, null);
|
|
}
|
|
var i = 0;
|
|
while (answer.data[i]) {
|
|
var block = document.createElement('div');
|
|
block.className = "option";
|
|
var img = new Image();
|
|
img.className = 'thumb';
|
|
//css klasse zuweisen fuers aussehen ;)
|
|
img.src = "data:" + answer.data[i].type + ";base64," + answer.data[i].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'> Download</button> " +
|
|
"<button onclick='permalink(" + answer.data[i].id + ")' class='permalink'> Permalink</button>" +
|
|
"<button onclick='report(" + answer.data[i].id + ")' class='report'> 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> <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');
|
|
block.innerHTML = "End of page "+ answer.page + ". <br><a href='#!page:"+ (answer.page+1) +"'>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 {
|
|
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]);
|
|
console.debug(obj);
|
|
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(':');
|
|
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;
|
|
}; |