Simile Timemap for iPad with scroll!


I am writing this in English because I believe this info is quite useful for everyone.

I wanted to use SIMILE Timemap but it wouldn’t scroll on the iPad (probably iPhone too). Googling led me to this page:

http://code.google.com/p/simile-widgets/issues/detail?id=278

Working example here:

To set up timemap, download from here. The above page is using timemap.2.0.1.

To make timemap work on iPad, you need to edit timeline-1.2.js in timemap2.0.1/lib. Deobfuscate by using tools like http://jsbeautifier.org/ and find where it says

    Timeline.DOM.registerEventWithObject(this._div, "mouseout", this, this._onMouseOut);
    Timeline.DOM.registerEventWithObject(this._div, "dblclick", this, this._onDblClick);

Under it, add:

    Timeline.DOM.registerEventWithObject(this._div,"touchstart",this,this._onTouchStart);
    Timeline.DOM.registerEventWithObject(this._div,"touchmove",this,this._onTouchMove);

Next, after where Timeline._Band = function (f, g, c) {} ends, add:


Timeline._Band.prototype._onTouchStart=function(D,A,E)
{
    if(A.touches.length == 1)
    {
        var touch = A.changedTouches[0];
        this._dragX=touch.clientX;
        this._dragY=touch.clientY;
    }
}
Timeline._Band.prototype._onTouchMove=function(D,A,E)
{
    if(A.touches.length == 1)
    {
        A.preventDefault();
        var touch = A.changedTouches[0];
        var C=touch.clientX-this._dragX;
        var B=touch.clientY-this._dragY;
        this._dragX=touch.clientX;
        this._dragY=touch.clientY;
        this._moveEther(this._timeline.isHorizontal()?C:B);
        this._positionHighlight();
        this._fireOnScroll();
        this._setSyncWithBandDate();
    }
};

Also in the iPad, when you click on the timeline the keyboard will show up. To disable this, find where it says this._keyboardInput.focus(); and comment it out.

Thanks to Kartik for his working demo.

この投稿へのコメント

  1. Durand said on 2013年3月20日 at 11:39 pm

    Can you use the wordpress simile timeline plugin?

  2. ykawato said on 2013年3月21日 at 12:10 am

    sorry, I have never tried that plugin so I don’t know if scrolling would work on iPads or other tablets.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL