timeline.js

function SVGTimeline(){
  this.MEINS = "http://www.music-encoding.org/ns/mei";
  this.SVGNS = "http://www.w3.org/2000/svg";
  this.svg = false;
  this.barCount = false;
  this.nsResolver = function(prefix){
    var ns = {
      'xml' : 'http://www.w3.org/1999/xml',
      'mei': this.MEINS,
      'svg': this.SVGNS
    };
    return ns[prefix] || null;
  }
  this.createSVG = function(w, h){
    var svg=document.createElementNS(this.SVGNS,"svg");
    if(w) svg.setAttributeNS(null, "width", w);
    if(h) svg.setAttributeNS(null, "height", h);
    return svg;
  }
  this.clearSVG = function(svgEl){
    while(svgEl.firstChild){
      svgEl.removeChild(svgEl.firstChild);
    }
  }
  this.svgCSS = function(element, css){
    var link = document.createElementNS(this.SVGNS, "link");
    link.setAttributeNS(null, "href", css);
    link.setAttributeNS(null, "type", "text/css");
    link.setAttributeNS(null, "rel", "stylesheet");
    element.appendChild(link);
    return element;
  }
  this.svgText = function (svgEl, x, y, cname, id, style, content){
    var el = document.createElementNS(this.SVGNS, "text");
    if(cname) el.setAttributeNS(null, "class", cname);
    if(id) el.id = id;
    if(x) el.setAttributeNS(null, "x", x);
    if(y) el.setAttributeNS(null, "y", y);
    if(style) el.setAttributeNS(null, "style", style);
    if(content == 0 || content) el.appendChild(document.createTextNode(content));
    if(svgEl) svgEl.appendChild(el);
    return el;
  }
  this.svgLine = function (svgEl, x1, y1, x2, y2, cname, id){
    var el = document.createElementNS(this.SVGNS, "line");
    if(cname) el.setAttributeNS(null, "class", cname);
    if(id) el.setAttributeNS(null, "id", id);
    el.setAttributeNS(null, "x1", x1);
    el.setAttributeNS(null, "y1", y1);
    el.setAttributeNS(null, "x2", x2);
    el.setAttributeNS(null, "y2", y2);
    if(svgEl) svgEl.appendChild(el);
    return el;
  }
  this.svgRect = function (svgEl, x, y, width, height, cname, id){
    var el = document.createElementNS(this.SVGNS, "rect");
    if(cname) el.setAttributeNS(null, "class", cname);
    if(id) el.setAttributeNS(null, "id", id);
    if(x) el.setAttributeNS(null, "x", x);
    if(y) el.setAttributeNS(null, "y", y);
    if(width) el.setAttributeNS(null, "width", width);
    if(height) el.setAttributeNS(null, "height", height);
    if(svgEl) svgEl.appendChild(el);
    return el;
  }
  this.sumBars = function(structures){
    var sum = 0;
    for(var i=0; i<structures.length; i++){
      if(Array.isArray(structures[i][2])){
        sum+=this.sumBars(structures[i][2]);
      } else {
        if(Number.isInteger(structures[i][2])){
          sum += structures[i][2];
        } else {
          console.log("mangled dramatic structure: ", structures[i], Array.isArray(structures[i][2]));
        }
      }
    }
    return sum;
  }
  this.defaultStructures = [['overture', 'Vorspiel', 75, false],
                            ['act', 'I', [['scene', 1, 262],
                                          ['scene', 2, 397],
                                          ['scene', 3, 587]],
                              [['F1', 777], ['F2', 789]]],
                            ['act', 'II', [['scene', 1, 423],
                                           ['scene', 2, 443],
                                           ['scene', 3, 479],
                                           ['scene', 4, 283],
                                           ['scene', 5, 478]],
                              [['F3', 18], ['F4', 31], ['F5', 288], ['F6', 767], ['F7', 1875], ['F8', 1949], ['F9', 2098]]],
                            ['act', 'II', [['scene', 1, 174],
                                           ['scene', 2, 553],
                                           ['scene', 3, 845]],
                              [['F10', 494], ['F11', 621], ['F12', 737], ['F13',824], ['F14', 832], ['F15', 836], ['F16',1062]]]];
  this.drawTimeline = function(structures,  w, h){
    this.svg = this.createSVG(w, h);
    if(!structures) structures = this.defaultStructures;
    /* structures of the form [["overture", "vorspiel", 75, false],
                              ["act", "I", [["scene", 1, 262],
                                            ["scene", 2, 397],
                                            ["scene", 3, 596]],
                                [["F1", 782], ["F2", 796]]],
                                            ...]]*/
    this.barCount = this.sumBars(structures);
    var scale = w/this.barCount;
    var boxTop = 20;
    var boxHeight=20;
    var boxBottom = boxTop+boxHeight;
    this.svgRect(this.svg, 0, boxTop, w, boxHeight, 'timeline');
    curx = 0;
    for(var i=0; i<structures.length; i++){
      this.svgLine(this.svg, curx, boxTop, curx, h, 'act division', 'tl-'+structures[i][0]+'-'+structures[i][1]);
      var shortname = structures[i][1]+'';
      shortname = shortname.substring(0, 3);
      this.svgText(this.svg, curx + 2, h, 'actname', false, false, shortname);
      if(structures[i][3] && structures[i][3].length){
        for(var s=0; s<structures[i][3].length; s++){
          var event = structures[i][3][s];
          var eventx = curx+event[1]*scale;
          var line = this.svgLine(this.svg, eventx, 0, eventx, boxBottom, 'annotation annotation__AskingForbidden_'+event[0]+'_1');
        }
      }
      if(Array.isArray(structures[i][2])){
        for(var j=0; j<structures[i][2].length; j++){
          var substructure = structures[i][2][j];
          var posy = boxBottom+((h-boxBottom)/3);
          this.svgLine(this.svg, curx, boxTop, curx, posy, 'scene division',
            'tl-'+structures[i][0]+'-'+structures[i][1]+'-'+substructure[0]+'-'+substructure[1]);
          shortname = substructure[1]+'';
          shortname = shortname.substring(0, 3);
          this.svgText(this.svg, curx + 2, posy, 'scenename', false, false, shortname);
          curx+=scale * substructure[2];
        }
      } else {
        curx += scale * structures[i][2];
      }
    }
    this.svgLine(this.svg, curx, boxTop, curx, h, 'act division', 'tl-end');
    return this.svg;
  }
}