MediaWiki:Common.js

/* 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);
      var ae = document.getElementById("analogueEarth");
      if(ae) ae.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);
      var au = document.getElementById("analogueUltos");
      if(au) au.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);
      var de = document.getElementById("digitalEarth");
      if(de) de.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);
      var du = document.getElementById("digitalUltos");
      if(du) du.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();

}());