Odynia.org blog – Web Development

So! Google has finally made its entry into the browser market, and its filled with lies!

Specifically:

Google’s new browser software is designed to work "invisibly" and will run any application that runs on Apple’s Safari web browser, company officials said.

and

"If you are webmaster, and your site works in Apple Safari then it will work very well in Google Chrome," Pichai said.

So then, fire up Chrome and point it at http://iphone.itransit.com.au/.

So, it seems that not all sites that work in Safari will work under Chrome. Its a fair assumption that most sites don’t make heavy use of window.openDatabase (HTML 5 spec) but its still inaccurate to say that all sites that work in Safari will work under Chrome.

Wonder if thats just time/laziness on Google’s part not to pull across a more recent version of WebKit or because they wrote their own JS engine (that should be outside the JS engine though..), or because its a competing feature against Google Gears?

Hopefully not the latter. It would be nice to see where Google takes Chrome though as the beta progresses.

Otherwise though, not bad

Update: Looks like they’re using the "Safari 3.1" branch of Webkit for the beta, which does support window.openDatabase just fine. Seems to be a compile time option and they’re choosing to disable it. More info/source over at http://dev.chromium.org/.

bok

Looking for iTransit? Check two posts down.

–

Been playing with touches in Safari, specifically trying to track certain gestures.

If you haven’t read it, a good primer on touches/gestures in Mobile Safari can be found here. Its a great starting point.

So now that the its been established as to how to do Drag and Drop and rotating/scaling what about the other one finger gestures that apple employs?

Specifically, I’m trying to replicate the swipe left and right functionality of the photo browser (show previous/next photos), and I’ve been able to do so.

The trick here is to catch the initial touch event, and the ending touch event and work out where our finger has gone. A key thing to remember is that the touches are passed around and updated by reference, so your original copy of the touch will be updated with a new position.

What I’ve ended up with is a small class that watches the touchstart and touchend events on the document level, and when it detects a swipe it fires a gesture:swipe event.

How?

The following is the code that I used, you’ll need Prototype to make this work.

var GestureClass = Class.create
({
    // Fired when a new instance of this object is made
    initialize: function ()
    {
        // listen for start/stop events
        document.observe('touchstart', this.start.bind(this));
        document.observe('touchend', this.end.bind(this));

        // touch storage
        this.gestures = [];

    },
    start: function (e)
    {
        // currently only support one finger on the viewport
        if (e.touches.length == 1)
        {
            var touch = e.touches[0];

            // store the touch for later
            this.gestures[touch.identifier] = Object.clone(touch);
            this.gestures[touch.identifier].date = new Date();
        }
    },

    end: function (e)
    {
        // still only one finger
        if (e.changedTouches.length == 1)
        {
            // get the most recent touch
            var end = e.changedTouches[0];
            end.date = new Date();

            // get the position that we started at
            var start = this.gestures[end.identifier];

            // and the duration of our swipe? number of milliseconds the gesture took
            var duration = end.date.getTime() - start.date.getTime();

            // calculate offsets
            var horizontalMovement = start.clientX - end.clientX;
            var verticalMovement = start.clientY - end.clientY;

            // big enoug to count as a swipe? and quick enough
            var viewport = document.viewport.getDimensions();
            if (Math.abs(horizontalMovement) >= (viewport.width/2) && duration <= 800)
            {
                // this object is passed to the new event under the 'memo' property
                var gesture =
                {
                    start: start,
                    end: end,
                    gesture: 'swipe',
                    direction: (horizontalMovement >= 0 ? 'left' : 'right')
                };

                // Fire the gesture, listen with document.observe('gesture:swipe', <function>);
                document.fire('gesture:swipe', gesture);
            }
        }
    },
});

var Gestures = new GestureClass();

var GestureClass = Class.create

({

// Fired when a new instance of this object is made

initialize: function ()

{

// listen for start/stop events

document.observe('touchstart', this.start.bind(this));

document.observe('touchend', this.end.bind(this));

// touch storage

this.gestures = [];

start: function (e)

{

// currently only support one finger on the viewport

if (e.touches.length == 1)

{

var touch = e.touches[0];

// store the touch for later

this.gestures[touch.identifier] = Object.clone(touch);

this.gestures[touch.identifier].date = new Date();

}

end: function (e)

{

// still only one finger

if (e.changedTouches.length == 1)

{

// get the most recent touch

var end = e.changedTouches[0];

end.date = new Date();

// get the position that we started at

var start = this.gestures[end.identifier];

// and the duration of our swipe? number of milliseconds the gesture took

var duration = end.date.getTime() - start.date.getTime();

// calculate offsets

var horizontalMovement = start.clientX - end.clientX;

var verticalMovement = start.clientY - end.clientY;

// big enoug to count as a swipe? and quick enough

var viewport = document.viewport.getDimensions();

if (Math.abs(horizontalMovement) >= (viewport.width/2) && duration <= 800)

{

// this object is passed to the new event under the 'memo' property

var gesture =

{

start: start,

end: end,

gesture: 'swipe',

direction: (horizontalMovement >= 0 ? 'left' : 'right')

};

// Fire the gesture, listen with document.observe('gesture:swipe', <function>);

document.fire('gesture:swipe', gesture);

}

});

var Gestures = new GestureClass();

Is that documented enough to make sense? Drop me a line in the comments if not and I’ll see what I can do to explain better

You’ll see this gesture used in the new version of iTransit, naturally – and there’s more gestures to come!

Cheers,

-bok

Posts in category Web Development

Google releases Chrome

iPhone + Safari + Gestures

iTransit

Melbourne Public Transport + Google Maps

BUBBLES!