TIMELINE: syncronization problem in IE with bandinfo and decorator about simile-widgets

[GoogleCodeExporter]

Bug verified by LarryK on IE 7. Works correctly on Chrome

Original comment by [email protected] on 25 Sep 2008 at 5:36

• Changed title: TIMELINE: syncronization problem in IE with bandinfo and decorator
• Changed state: Accepted

[GoogleCodeExporter]

I have a hack that makes the double click work correctly (for me anyway) for 
events
in the timeline.

In timeline.js, replace Timeline._Band.prototype._onDblClick() with

Timeline._Band.prototype._onDblClick = function(innerFrame, evt, target) {
    var coords = SimileAjax.DOM.getEventRelativeCoordinates(evt, innerFrame);
    if(SimileAjax.Platform.browser.isIE){
        if(evt.type!="mousewheel"){
            var className = target.className;
            var elemName = target.nodeName;
            if (className == "timeline-event-label" ||
                className == "timeline-small-event-icon" ||
                className == "timeline-event-icon") {
                var xLocation = parseInt(target.offsetLeft);
                var yLocation = parseInt(target.offsetTop);
                coords.x = xLocation;
                coords.y = yLocation;
            }
            else if (elemName == "IMG" && 
                     target.parentNode.className == "timeline-event-icon") {
                var xLocation = parseInt(target.parentNode.offsetLeft);
                var yLocation = parseInt(target.parentNode.offsetTop);
                coords.x = xLocation;
                coords.y = yLocation;
            }
        }
    }
    var distance = coords.x - (this._viewLength / 2 - this._viewOffset);

    this._autoScroll(-distance);
};

Original comment by [email protected] on 15 Dec 2008 at 11:27

[GoogleCodeExporter]

Here is a better version that works for duration events as well.

if(SimileAjax.Platform.browser.isIE){
        var className = target.className;
        var elemName = target.nodeName;
        if (className == "timeline-event-label" ||
                className == "timeline-small-event-icon" ||
                className == "timeline-event-icon" ||
                className == "timeline-event-tape") {
            var xLocation = parseInt(target.offsetLeft);
            var yLocation = parseInt(target.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }
        else if (elemName == "IMG" && 
                target.parentNode.className == "timeline-event-icon") {
            var xLocation = parseInt(target.parentNode.offsetLeft);
            var yLocation = parseInt(target.parentNode.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }
    }

Original comment by [email protected] on 16 Dec 2008 at 5:18

[GoogleCodeExporter]

Hi,
based on the work from riddle I´ve managed to build a workaround for my issue.
The change suggested from riddle in version 2.3.0 has moved from timeline.js to 
band.js

My html code regardingh highlight is as follow :
....
<div class="timeline-highlight-decorator" style="background-color: rgb(255, 192,
128); opacity: 0.3; left: 900.226px; width: 729.032px;"/>
<table class="timeline-highlight-label timeline-highlight-label-start" 
style="right:
2399.77px; width: 6em;">
  <tbody>
  <tr>
    <td>Startr</td>
  </tr>
  </tbody>
</table>
...


So I had to make a change in the above code make it work for me. I´ve add this 
...
}else if
(target.parentNode.parentNode.parentNode.className.indexOf("timeline-highlight-l
abel")!=-1){

  var xLocation = parseInt(target.parentNode.parentNode.parentNode.offsetLeft);
  var yLocation = parseInt(target.parentNode.parentNode.parentNode.offsetTop);
  coords.x = xLocation;
  coords.y = yLocation;
}
....
the whole code would be like 
Timeline._Band.prototype._onDblClick = function(innerFrame, evt, target) {
    var coords = SimileAjax.DOM.getEventRelativeCoordinates(evt, innerFrame);

    if(SimileAjax.Platform.browser.isIE){
        var className = target.className;       
        var elemName = target.nodeName;       
        if (className == "timeline-event-label" || className == "timeline-small-event-icon"
|| className == "timeline-event-icon" || className == "timeline-event-tape"){
            var xLocation = parseInt(target.offsetLeft);
            var yLocation = parseInt(target.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }else if
(target.parentNode.parentNode.parentNode.className.indexOf("timeline-highlight-l
abel")!=-1){

            var xLocation = parseInt(target.parentNode.parentNode.parentNode.offsetLeft);
            var yLocation = parseInt(target.parentNode.parentNode.parentNode.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }
        else if (elemName == "IMG" && target.parentNode.className == "timeline-event-icon") {
            var xLocation = parseInt(target.parentNode.offsetLeft);
            var yLocation = parseInt(target.parentNode.offsetTop);
            coords.x = xLocation;
            coords.y = yLocation;
        }
    }    
    var distance = coords.x - (this._viewLength / 2 - this._viewOffset);
    this._autoScroll(-distance);
};


This problem is definitely on coords.x value and the workaround is to guess the
parentNode.offsetLeft value.

I hope this could help to find a final fix.
Thanks 

Original comment by [email protected] on 9 Mar 2009 at 1:59

[GoogleCodeExporter]

Original comment by [email protected] on 25 Mar 2009 at 7:01

• Added labels: Project-Timeline

[GoogleCodeExporter]

i have fixed this issue by replacing the following code in api/scripts/band.js :

Timeline._Band.prototype._onDblClick = function(innerFrame, evt, target) {
 var coords = SimileAjax.DOM.getEventRelativeCoordinates(evt, innerFrame);
 var distance = coords.x - (this._viewLength / 2 - this._viewOffset);
 this._autoScroll(-distance);
};

with the followin:


Timeline._Band.prototype._onDblClick = function(innerFrame, evt, target) {
 var distance = evt.clientX - 740;
 this._autoScroll(-distance);
};

the static value " 740 " is a value that i mesured manually, i think it is 
something 
related to the timeline width.

Original comment by [email protected] on 2 Aug 2009 at 1:15