search

PonteIneptique / simile-widgets

Automatically exported from code.google.com/p/simile-widgets
0 stars 0 forks source link

TIMELINE. Timeline Load Error in IE #151

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
My site is http://calliesadventures.com/Multimedia/Snippets.html.

I have a three band timeline (month, year and decade) which works fine in
safari and firefox (both mac and windows); however, I get two caught
exception: [object Error] when the year and decade bands are loaded with
the events. The month band loads fine. When I comment out eventSource out
of the year and decade band, no error.

Windows XP, IE 6.0 and 7

 [Submitted by r:    Minh-Kiet Callie on simile.mit.edu] 

Could you please paste in here the javascript code you use to construct the
Timeline?
[ Show » ]
David F. Huynh - 11/Jan/07 10:53 AM Could you please paste in here the
javascript code you use to construct the Timeline?

[ Permlink | « Hide ]
Minh-Kiet Callies - 11/Jan/07 12:06 PM
Sorry about that. Here it is.

var tl;
function centerTimeline(date) {

tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(date
));
}

function setupFilterHighlightControls(div, timeline, bandIndices, theme) {
    var table = document.createElement("table");
    var tr = table.insertRow(0);

var td = tr.insertCell(0);
    td.innerHTML = "Filter:";

td = tr.insertCell(1);
    td.innerHTML = "Highlight:";

var handler = function(elmt, evt, target) {
        onKeyPress(timeline, bandIndices, table);
    };

tr = table.insertRow(1);
    tr.style.verticalAlign = "top";

td = tr.insertCell(0);

var input = document.createElement("input");
    input.type = "text";
    Timeline.DOM.registerEvent(input, "keypress", handler);
    td.appendChild(input);

for (var i = 0; i < theme.event.highlightColors.length; i++) {
        td = tr.insertCell(i + 1);

input = document.createElement("input");
        input.type = "text";
        Timeline.DOM.registerEvent(input, "keypress", handler);
        td.appendChild(input);

var divColor = document.createElement("div");
        divColor.style.height = "0.5em";
        divColor.style.background = theme.event.highlightColors[i];
        td.appendChild(divColor);
    }

td = tr.insertCell(tr.cells.length);
    var button = document.createElement("button");
    button.innerHTML = "Clear All";
    Timeline.DOM.registerEvent(button, "click", function() {
        clearAll(timeline, bandIndices, table);
    });
    td.appendChild(button);

div.appendChild(table);
}
function setupFilterControls(div, timeline, bandIndices, theme) {
    var table = document.createElement("table");
    var tr = table.insertRow(0);

var td = tr.insertCell(0);
    td.innerHTML = "Filter:";

var handler = function(elmt, evt, target) {
        onKeyPress(timeline, bandIndices, table);
    };

tr = table.insertRow(1);
    tr.style.verticalAlign = "top";

td = tr.insertCell(0);

var input = document.createElement("input");
    input.type = "text";
    Timeline.DOM.registerEvent(input, "keypress", handler);
    td.appendChild(input);
    td = tr.insertCell(tr.cells.length);
    var button = document.createElement("button");
    button.innerHTML = "Clear Filter";
    Timeline.DOM.registerEvent(button, "click", function() {
        clearAll(timeline, bandIndices, table);
    });
    td.appendChild(button);
    div.appendChild(table);
}
function setupHighlightControls(div, timeline, bandIndices, theme) {
    var table = document.createElement("table");
    var tr = table.insertRow(0);

var td = tr.insertCell(0);
    td = tr.insertCell(0);
    td.innerHTML = "Highlight:";

var handler = function(elmt, evt, target) {
        onKeyPress(timeline, bandIndices, table);
    };

tr = table.insertRow(1);
    tr.style.verticalAlign = "top";

td = tr.insertCell(0);

for (var i = 0; i < theme.event.highlightColors.length; i++) {
        td = tr.insertCell(i + 1);

input = document.createElement("input");
        input.type = "text";
        Timeline.DOM.registerEvent(input, "keypress", handler);
        td.appendChild(input);

var divColor = document.createElement("div");
        divColor.style.height = "0.5em";
        divColor.style.background = theme.event.highlightColors[i];
        td.appendChild(divColor);
    }

td = tr.insertCell(tr.cells.length);
    var button = document.createElement("button");
    button.innerHTML = "Clear All";
    Timeline.DOM.registerEvent(button, "click", function() {
        clearAll(timeline, bandIndices, table);
    });
    td.appendChild(button);
    div.appendChild(table);
}
var timerID = null;
function onKeyPress(timeline, bandIndices, table) {
    if (timerID != null) {
        window.clearTimeout(timerID);
    }
    timerID = window.setTimeout(function() {
        performFiltering(timeline, bandIndices, table);
    }, 300);
}
function cleanString(s) {
    return s.replace(/^\s+/, '').replace(/\s+$/, '');
}
function performFiltering(timeline, bandIndices, table) {
    timerID = null;

var tr = table.rows[1];
    var text = cleanString(tr.cells[0].firstChild.value);

var filterMatcher = null;
    if (text.length > 0) {
        var regex = new RegExp(text, "i");
        filterMatcher = function(evt) {
            return regex.test(evt.getText()) ||
regex.test(evt.getDescription());
        };
    }

var regexes = [];
    var hasHighlights = false;
    for (var x = 1; x < tr.cells.length - 1; x++) {
        var input = tr.cells[x].firstChild;
        var text2 = cleanString(input.value);
        if (text2.length > 0) {
            hasHighlights = true;
            regexes.push(new RegExp(text2, "i"));
        } else {
            regexes.push(null);
        }
    }
    var highlightMatcher = hasHighlights ? function(evt) {
        var text = evt.getText();
        var description = evt.getDescription();
        for (var x = 0; x < regexes.length; x++) {
            var regex = regexes[x];
            if (regex != null && (regex.test(text) ||
regex.test(description))) {
                return x;
            }
        }
        return -1;
    } : null;

for (var i = 0; i < bandIndices.length; i++) {
        var bandIndex = bandIndices[i];

timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(filterMatcher);

timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(highlightMatch
er);
    }
    timeline.paint();
}
function clearAll(timeline, bandIndices, table) {
    var tr = table.rows[1];
    for (var x = 0; x < tr.cells.length - 1; x++) {
        tr.cells[x].firstChild.value = "";
    }

for (var i = 0; i < bandIndices.length; i++) {
        var bandIndex = bandIndices[i];
        timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(null);

timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(null);
    }
    timeline.paint();
}
function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();

var theme = Timeline.ClassicTheme.create();
theme.event.label.width = 320;
theme.event.bubble.width = 250;
theme.event.bubble.height = 200;
theme.ether.backgroundColors = [
"#D1CECA",
"#E7DFD6",
"#E8E8F4",
"#D0D0E8"
];

var bandInfos = [
    Timeline.createBandInfo({
        timeZone: -8,
        trackHeight: 2.2,
        trackGap: 0.1,
        eventSource: eventSource,
        date: Date(),
        width: "60%",
        intervalUnit: Timeline.DateTime.MONTH,
        intervalPixels: 100,
        theme: theme
    }),
    Timeline.createBandInfo({
        timeZone: -8,
        showEventText: false,
        trackHeight: 0.75,
        trackGap: 0.2,
        eventSource: eventSource,
        date: Date(),
        width: "20%",
        intervalUnit: Timeline.DateTime.YEAR,
        intervalPixels: 150,
        theme: theme
    }),
    Timeline.createBandInfo({
        timeZone: -8,
        showEventText: false,
        trackHeight: 0.75,
        trackGap: 0.2,
        eventSource: eventSource,
        date: Date(),
        width: "20%",
        intervalUnit: Timeline.DateTime.DECADE,
        intervalPixels: 200,
        theme: theme
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
  bandInfos[2].syncWith = 0;
  bandInfos[2].highlight = true;
  bandInfos[2].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  tl.loadXML("../Timeline/CalliesTimeline.xml", function(xml, url) {
eventSource.loadXML(xml, url); });
  //setupFilterHighlightControls(document.getElementById("controls"), tl,
[0,1,2], theme);
  setupFilterControls(document.getElementById("filter_controls"), tl,
[0,1,2], theme);
  // setupHighlightControls(document.getElementById("hightlight_controls"),
tl, [0,1,2], theme);

}

var resizeTimerID = null;
function onResizeTimeline() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}

window.onload=onLoad
[ Show » ]
Minh-Kiet Callies - 11/Jan/07 12:06 PM Sorry about that. Here it is. var
tl; function centerTimeline(date) {    
tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(date
));
} function setupFilterHighlightControls(div, timeline, bandIndices, theme)
{     var table = document.createElement("table");     var tr =
table.insertRow(0);      var td = tr.insertCell(0);     td.innerHTML =
"Filter:";      td = tr.insertCell(1);     td.innerHTML = "Highlight:";   
  var handler = function(elmt, evt, target) {         onKeyPress(timeline,
bandIndices, table);     };      tr = table.insertRow(1);    
tr.style.verticalAlign = "top";      td = tr.insertCell(0);      var input
= document.createElement("input");     input.type = "text";    
Timeline.DOM.registerEvent(input, "keypress", handler);    
td.appendChild(input);      for (var i = 0; i <
theme.event.highlightColors.length; i++) {         td = tr.insertCell(i +
1);          input = document.createElement("input");         input.type =
"text";         Timeline.DOM.registerEvent(input, "keypress", handler);   
     td.appendChild(input);          var divColor =
document.createElement("div");         divColor.style.height = "0.5em";   
     divColor.style.background = theme.event.highlightColors[i];        
td.appendChild(divColor);     }      td = tr.insertCell(tr.cells.length); 
   var button = document.createElement("button");     button.innerHTML =
"Clear All";     Timeline.DOM.registerEvent(button, "click", function() { 
       clearAll(timeline, bandIndices, table);     });    
td.appendChild(button);      div.appendChild(table); } function
setupFilterControls(div, timeline, bandIndices, theme) {     var table =
document.createElement("table");     var tr = table.insertRow(0);      var
td = tr.insertCell(0);     td.innerHTML = "Filter:"; var handler =
function(elmt, evt, target) {         onKeyPress(timeline, bandIndices,
table);     };      tr = table.insertRow(1);     tr.style.verticalAlign =
"top";      td = tr.insertCell(0);      var input =
document.createElement("input");     input.type = "text";    
Timeline.DOM.registerEvent(input, "keypress", handler);    
td.appendChild(input);     td = tr.insertCell(tr.cells.length);     var
button = document.createElement("button");     button.innerHTML = "Clear
Filter";     Timeline.DOM.registerEvent(button, "click", function() {     
   clearAll(timeline, bandIndices, table);     });    
td.appendChild(button);     div.appendChild(table); } function
setupHighlightControls(div, timeline, bandIndices, theme) {     var table =
document.createElement("table");     var tr = table.insertRow(0);      var
td = tr.insertCell(0);     td = tr.insertCell(0);     td.innerHTML =
"Highlight:";      var handler = function(elmt, evt, target) {        
onKeyPress(timeline, bandIndices, table);     };      tr =
table.insertRow(1);     tr.style.verticalAlign = "top";      td =
tr.insertCell(0);     for (var i = 0; i <
theme.event.highlightColors.length; i++) {         td = tr.insertCell(i +
1);          input = document.createElement("input");         input.type =
"text";         Timeline.DOM.registerEvent(input, "keypress", handler);   
     td.appendChild(input);          var divColor =
document.createElement("div");         divColor.style.height = "0.5em";   
     divColor.style.background = theme.event.highlightColors[i];        
td.appendChild(divColor);     }      td = tr.insertCell(tr.cells.length); 
   var button = document.createElement("button");     button.innerHTML =
"Clear All";     Timeline.DOM.registerEvent(button, "click", function() { 
       clearAll(timeline, bandIndices, table);     });    
td.appendChild(button);     div.appendChild(table); } var timerID = null;
function onKeyPress(timeline, bandIndices, table) {     if (timerID !=
null) {         window.clearTimeout(timerID);     }     timerID =
window.setTimeout(function() {         performFiltering(timeline,
bandIndices, table);     }, 300); } function cleanString(s) {     return
s.replace(/^\s+/, '').replace(/\s+$/, ''); } function
performFiltering(timeline, bandIndices, table) {     timerID = null;     
var tr = table.rows[1];     var text =
cleanString(tr.cells[0].firstChild.value);      var filterMatcher = null; 
   if (text.length > 0) {         var regex = new RegExp(text, "i");      
  filterMatcher = function(evt) {             return
regex.test(evt.getText()) || regex.test(evt.getDescription());         }; 
   }      var regexes = [];     var hasHighlights = false;     for (var x =
1; x < tr.cells.length - 1; x++) {         var input =
tr.cells[x].firstChild;         var text2 = cleanString(input.value);     
   if (text2.length > 0) {             hasHighlights = true;            
regexes.push(new RegExp(text2, "i"));         } else {            
regexes.push(null);         }     }     var highlightMatcher =
hasHighlights ? function(evt) {         var text = evt.getText();        
var description = evt.getDescription();         for (var x = 0; x <
regexes.length; x++) {             var regex = regexes[x];             if
(regex != null && (regex.test(text) || regex.test(description))) {        
        return x;             }         }         return -1;     } : null;
     for (var i = 0; i < bandIndices.length; i++) {         var bandIndex =
bandIndices[i];        
timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(filterMatcher);

timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(highlightMatch
er);
    }     timeline.paint(); } function clearAll(timeline, bandIndices,
table) {     var tr = table.rows[1];     for (var x = 0; x <
tr.cells.length - 1; x++) {         tr.cells[x].firstChild.value = "";    
}      for (var i = 0; i < bandIndices.length; i++) {         var bandIndex
= bandIndices[i];        
timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(null);     
   timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(null);
    }     timeline.paint(); } function onLoad() {   var eventSource = new
Timeline.DefaultEventSource();    var theme =
Timeline.ClassicTheme.create(); theme.event.label.width = 320;
theme.event.bubble.width = 250; theme.event.bubble.height = 200;
theme.ether.backgroundColors = [ "#D1CECA", "#E7DFD6", "#E8E8F4", "#D0D0E8"
]; var bandInfos = [     Timeline.createBandInfo({         timeZone: -8,  
      trackHeight: 2.2,         trackGap: 0.1,         eventSource:
eventSource,         date: Date(),         width: "60%",        
intervalUnit: Timeline.DateTime.MONTH,         intervalPixels: 100,       
 theme: theme     }),     Timeline.createBandInfo({         timeZone: -8, 
       showEventText: false,         trackHeight: 0.75,         trackGap:
0.2,         eventSource: eventSource,         date: Date(),         width:
"20%",         intervalUnit: Timeline.DateTime.YEAR,        
intervalPixels: 150,         theme: theme     }),    
Timeline.createBandInfo({         timeZone: -8,         showEventText:
false,         trackHeight: 0.75,         trackGap: 0.2,        
eventSource: eventSource,         date: Date(),         width: "20%",     
   intervalUnit: Timeline.DateTime.DECADE,         intervalPixels: 200,   
     theme: theme     })   ];   bandInfos[1].syncWith = 0;  
bandInfos[1].highlight = true;  
bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
  bandInfos[2].syncWith = 0;   bandInfos[2].highlight = true;  
bandInfos[2].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  tl.loadXML("../Timeline/CalliesTimeline.xml", function(xml, url) {
eventSource.loadXML(xml, url); });  
//setupFilterHighlightControls(document.getElementById("controls"), tl,
[0,1,2], theme);  
setupFilterControls(document.getElementById("filter_controls"), tl,
[0,1,2], theme);   //
setupHighlightControls(document.getElementById("hightlight_controls"), tl,
[0,1,2], theme); } var resizeTimerID = null; function onResizeTimeline() {
if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() {
resizeTimerID = null; tl.layout(); }, 500); } } window.onload=onLoad

[ Permlink | « Hide ]
Minh-Kiet Callies - 23/Jan/07 05:49 PM
I have traced the problem down to the showEventText attribute. If I
eliminate it from the bottom two time bands, the error goes away. This
seems to be the problem if you have more than two bands. I just created a
second theme and set the event label length to zero. It solved my problem.

Original issue reported on code.google.com by GabrielR...@googlemail.com on 5 Apr 2009 at 2:42