search

jaunesarmiento / fries

Fries helps you prototype Android apps using HTML, CSS, and JavaScript.
MIT License
1.55k stars 222 forks source link

UI components with dependency to JavaScript does not work on desktop browser and non-touch devices #33

Closed jaunesarmiento closed 10 years ago

jaunesarmiento commented 11 years ago

Related to issues #12 and #32.

The issue is that Fries components uses touch events so it really won't work on the browser and non-touch devices. Touch events were used because click events are fired after about 300ms from the moment you tapped a button.

A solution I can think of is to rework the components to mimic Google's Fast Button implementation.

Or use a touch library like hammer.js. Although I'd rather rework the library than introduce a dependency to an external library.

A workaround to this is to do what @aymanfarhat suggested in his comment, is to enable the emulated touch events on Google Chrome. For a more detailed instructions on how to do this, click here.

jadjoubran commented 11 years ago

That's what I'm currently doing to support All mobile devices and all desktop devices (including desktop devices with touch screens)

if ( 'ontouchend' in document.documentElement ){
   var FRIES_EVENT_TYPE = 'touchend';  //touch device
}else if ( 'ontouchleave' in document.documentElement ){
   var FRIES_EVENT_TYPE = 'touchleave';  //touch device
}else if ( 'ontouchstart' in document.documentElement ){
   var FRIES_EVENT_TYPE = 'touchstart';  //touch device
}else{
   var FRIES_EVENT_TYPE = 'click'; //desktop
}

and then instead of:

document.addEventListener( 'touchstart', function (e) {

I use

document.addEventListener( FRIES_EVENT_TYPE, function (e) {
jaunesarmiento commented 11 years ago

Wow @jadjoubran, this is great! Also I think you'll be needing to add the touchmove events as well. :)

jadjoubran commented 11 years ago

Well I honestly disabled the stack.js file I only use the spinner.js and the tabs.js whenever needed

jaunesarmiento commented 11 years ago

Sorry to hear that. I'm really working hard to get these issues off the list.

jadjoubran commented 11 years ago

There are no issues with stack.js but I found it would be better not to include it everything works fine without it I really hope that soon I can contribute all my changes to fries!

jaunesarmiento commented 11 years ago

I'll be looking forward to it :)

jaunesarmiento commented 11 years ago

I pushed a branch that solves this issue. Please check out https://github.com/jaunesarmiento/fries/tree/fix-for-issue33 for this.

The only problem that I encountered with this is that the default behaviour of labels do not work, which is an issue for form elements. Anybody want to try fixing this issue on that branch? :)

jaunesarmiento commented 10 years ago

Workaround: Use fingerblast.js.