MediaWiki:Common.js
Version vom 19. Juli 2020, 19:17 Uhr von ShirleyNeko (Diskussion | Beiträge)
Hinweis: Leere nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Gehe zu Menü → Einstellungen (Opera → Einstellungen auf dem Mac) und dann auf Datenschutz & Sicherheit → Browserdaten löschen → Gespeicherte Bilder und Dateien.
/* Das folgende JavaScript wird für alle Benutzer geladen. */
$(function () {
function AnalogueClock (varID, varSize, varRadius, stepDetails) {
this.id = varID;
this.stepDetails = stepDetails || 60;
this.clockSize = varSize;
this.clockRadius = varRadius;
this.markers = [];
this.pointers = [];
this.svg;
this.timer;
this.inverted = false;
this.textGenerator = function(num, max) {return num==0?max:num};
this.addMarker = function(marker) {
this.markers.push(marker);
};
this.addPointer = function(pointer) {
this.pointers.push(pointer);
};
this.invert = function() {
this.inverted = !this.inverted;
};
this.setTextGenerator = function(f) {
this.textGenerator = f;
};
this.updateClock = function() {
var arc = 0, d = new Date(),
sSinceMidnight = (d.getTime() - d.setHours(0,0,0,0));
for(var i = 0; i < this.pointers.length; i++) {
arc = (sSinceMidnight % this.pointers[i].speed) * 360.0 / this.pointers[i].speed;
arc = (this.inverted)?-arc:arc;
arc = Math.round(arc/360*this.stepDetails)*360/this.stepDetails;
this.pointers[i].node.setAttribute("transform", "rotate("+arc+")");
}
};
this.init = function() {
var svgNode, defsNode, clockGroup, markerGroup, pointerGroup;
svgNode = createSVGNode("svg", { "id":this.id, "width":this.clockSize, "height":this.clockSize });
defsNode = createSVGNode("defs");
var markerpos = {};
for(var i = 0; i < this.markers.length; i++) {
defsNode.appendChild(createSVGNode("line", { "id":(this.id+this.markers[i].id), "class":"markers", "x1":0, "y1":0, "x2":this.markers[i].size, "y2":0 }));
var tmp = this.markers[i].count / 360.0;
for(var j = 0; j < this.markers[i].count; j++) {
if(!((j / tmp) in markerpos)) {
markerpos[(j / tmp)] = i;
}
}
}
svgNode.appendChild(defsNode);
var centerPos = this.clockSize/2;
clockGroup = createSVGNode("g", { "class":"clock", "transform":("translate("+centerPos+", "+centerPos+")") });
clockGroup.appendChild(createSVGNode("circle", { "class":"clocksurface", "fill":"none", "cx":0, "cy":0, "r":this.clockRadius }));
markerGroup = createSVGNode("g");
var thisMarker;
for(var pos in markerpos) {
thisMarker = this.markers[markerpos[pos]];
markerGroup.appendChild(createSVGNode("use", { "href":("#"+this.id+thisMarker.id), "x":(this.clockRadius-thisMarker.size), "transform":("rotate("+pos+")") }));
if(thisMarker.numbers != 0) {
var r = (this.clockRadius-thisMarker.textradius),
mPos = pos*thisMarker.numbers/360.,
x = (r*Math.sin(mPos*2*Math.PI/thisMarker.numbers)),
y = (r*-Math.cos(mPos*2*Math.PI/thisMarker.numbers));
x = (this.inverted)?-x:x;
var node = createSVGNode("text", { "class":"textmarker", "id":(this.id+thisMarker.id), "text-anchor":"middle", "dominant-baseline":"middle", "x":x, "y":y }, this.textGenerator(mPos, thisMarker.numbers));
markerGroup.appendChild(node);
}
}
clockGroup.appendChild(markerGroup);
pointerGroup = createSVGNode("g", { "class":"pointers" });
for(var i = 0; i < this.pointers.length; i++) {
this.pointers[i].node = createSVGNode("line", { "id":(this.id+this.pointers[i].id), "x1":0, "y1":0, "x2":0, "y2":(-this.pointers[i].size), "transform":"rotate(0)" })
pointerGroup.appendChild(this.pointers[i].node);
}
clockGroup.appendChild(pointerGroup);
svgNode.appendChild(clockGroup);
this.svg = svgNode;
};
this.getNode = function() {
return this.svg;
};
this.startClock = function(interval) {
if (typeof (this.timer) !== 'undefined') {
this.stopClock();
}
var tmp = this;
this.timer = window.setInterval(function(){tmp.updateClock()}, interval);
};
this.stopClock = function() {
window.clearInterval(this.timer);
};
}
function DigitalClock (varID) {
this.id = varID;
this.node;
this.timer;
this.values = [];
this.colon = true;
this.textGenerator = function(num, max) {return ("00" + Math.floor(max * (num==1?0:num))).slice(-2)};
this.addValue = function(value) {
this.values.push(value);
};
this.setTextGenerator = function(f) {
this.textGenerator = f;
};
this.disableColon = function() {
this.colon = false;
};
this.updateClock = function() {
var d = new Date(),
sSinceMidnight = (d.getTime() - d.setHours(0,0,0,0));
for(var i = 0; i < this.values.length; i++) {
this.values[i].node.textContent = this.textGenerator((sSinceMidnight % this.values[i].speed) / this.values[i].speed, this.values[i].max);
}
};
this.init = function() {
var node = createNode("span", { "id":this.id});
for(var i = 0; i < this.values.length; i++) {
if(this.colon && i != 0)
node.insertAdjacentHTML("beforeend", ":");
this.values[i].node = createNode("span", { "id":this.values[i].id }, "--");
node.appendChild(this.values[i].node);
}
this.node = node;
}
this.getNode = function() {
return this.node;
};
this.startClock = function(interval) {
if (typeof (this.timer) !== 'undefined') {
this.stopClock();
}
var tmp = this;
this.timer = window.setInterval(function(){tmp.updateClock()}, interval);
};
this.stopClock = function() {
window.clearInterval(this.timer);
};
}
var clock1, clock2, clock3;
function init(){
clock1 = new AnalogueClock("clock1", 400, 195, 60);
clock1.addMarker({ "id": "marker1", "count": 4, "size":(clock1.clockRadius/8), "numbers":12, "textradius":(clock1.clockRadius/5) });
clock1.addMarker({ "id": "marker2", "count": 12, "size":(clock1.clockRadius/16), "numbers":12, "textradius":(clock1.clockRadius/5) });
clock1.addMarker({ "id": "marker3", "count": 60, "size":(clock1.clockRadius/24), "numbers":0 });
clock1.addPointer({ "id": "pointer1", "speed": 60000, "size":(clock1.clockRadius) });
clock1.addPointer({ "id": "pointer2", "speed": 3600000, "size":(clock1.clockRadius*0.75) });
clock1.addPointer({ "id": "pointer3", "speed": 43200000, "size":(clock1.clockRadius*0.5) });
clock1.init();
clock1.startClock(200);
document.getElementById("analogueEarth").appendChild(clock1.getNode());
clock2 = new AnalogueClock("clock2", 240, 115, 64);
clock2.addMarker({ "id": "marker1", "count": 4, "size":(clock2.clockRadius/8), "numbers":16, "textradius":(clock2.clockRadius/4) });
clock2.addMarker({ "id": "marker2", "count": 8, "size":(clock2.clockRadius/16), "numbers":16, "textradius":(clock2.clockRadius/6) });
clock2.addMarker({ "id": "marker3", "count": 16, "size":(clock2.clockRadius/24), "numbers":16, "textradius":(clock2.clockRadius/6) });
//clock2.addMarker({ "id": "marker4", "count": 64, "size":(clock2.clockRadius/32), "numbers":0 });
clock2.addPointer({ "id": "pointer1", "speed": 16*1202.269, "size":(clock2.clockRadius) });
clock2.addPointer({ "id": "pointer2", "speed": 256*1202.269, "size":(clock2.clockRadius*0.8) });
clock2.addPointer({ "id": "pointer3", "speed": 16*256*1202.269, "size":(clock2.clockRadius*0.65) });
clock2.addPointer({ "id": "pointer4", "speed": 256*256*1202.269, "size":(clock2.clockRadius*0.5) });
clock2.invert();
clock2.setTextGenerator(function(num, max) {
return (+num).toString(16).toUpperCase();
});
clock2.init();
clock2.startClock(1202.2/4);
document.getElementById("analogueUltos").appendChild(clock2.getNode());
clock3 = new DigitalClock("clock3");
clock3.addValue({ "id": "hours", "speed": 86400000, "max":24 });
clock3.addValue({ "id": "minutes", "speed": 3600000, "max":60 });
clock3.addValue({ "id": "seconds", "speed": 60000, "max":60 });
clock3.init();
clock3.startClock(995);
document.getElementById("digitalEarth").appendChild(clock3.getNode());
clock4 = new DigitalClock("clock4");
clock4.addValue({ "id": "t1", "speed": 256*256*1202.269, "max":16 });
clock4.addValue({ "id": "t2", "speed": 16*256*1202.269, "max":16 });
clock4.addValue({ "id": "t3", "speed": 256*1202.269, "max":16 });
clock4.addValue({ "id": "t4", "speed": 16*1202.269, "max":16 });
clock4.setTextGenerator(function(num, max) {
return (+Math.floor(num * max)).toString(16).toUpperCase();
});
clock4.disableColon();
clock4.init();
clock4.startClock(1111);
document.getElementById("digitalUltos").appendChild(clock4.getNode());
}
const svgNS = "http://www.w3.org/2000/svg";
function createSVGNode(n, v, i) {
n = document.createElementNS(svgNS, n);
for (var p in v)
n.setAttribute(p, v[p]);
n.textContent = i;
return n
}
function createNode(n, v, i) {
n = document.createElement(n);
for (var p in v)
n.setAttribute(p, v[p]);
n.textContent = i;
return n
}
init();
}());