iOS Spinning Wheel HTML5

Question

I'm working on a webapp that will be used on iOS devices as well as Desktops (without touch). We are using a bootstrap to make the site as responsive as possible.

We want to incoperate the spinning wheel known in iOS. We will style it differently but not the functionality.

After some searching I came across this site: http://cubiq.org/spinning-wheel

However this script only seems to work on touch capable devices. Would it be possible to edit the script so it will work on desktops too?

I found this in the script can I add a mouseClickHandler here?

handleEvent: function (e) {
        console.log(e.type);
        if (e.type == 'touchstart') {
            this.lockScreen(e);
            if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
                this.tapDown(e);
            } else if (e.currentTarget.id == 'sw-frame') {
                this.scrollStart(e);
            }
        } else if (e.type == 'touchmove') {
            this.lockScreen(e);

            if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
                this.tapCancel(e);
            } else if (e.currentTarget.id == 'sw-frame') {
                this.scrollMove(e);
            }
        } else if (e.type == 'touchend') {
            if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
                this.tapUp(e);
            } else if (e.currentTarget.id == 'sw-frame') {
                this.scrollEnd(e);
            }
        } else if (e.type == 'webkitTransitionEnd') {
            if (e.target.id == 'sw-wrapper') {
                this.destroy();
            } else {
                this.backWithinBoundaries(e);
            }
        } else if (e.type == 'orientationchange') {
            this.onOrientationChange(e);
        } else if (e.type == 'scroll') {
            this.onScroll(e);
        }
    },

Answer 1

You could try using drag events, but they aren't supported well. Check out this MDN article and this one with more explanation on the events. You could also try using jQuery with for instance this plugin . Good luck!