Ratchet On Desktop Questions

[geggleto]

Hi,

I've been poking around and developing some small web apps with Ratchet (which is freaking awesome)... And I was asked to create a desktop version using the same sort of UI.

I read about fingerbang.js and emulating touch events... but I came across another post and read the source for Ratchet... It just seems that you disable NORMAL click events...

To enable Ratchet on Desktop is it as simple as...

  window.addEventListener('click', function (e) { if (getTarget(e)) {e.preventDefault();} });

to

 window.addEventListener('click', touchend);

Now I ask this because I am not sure why the design choice was made to make the project mobile only. It would be nice to know at least for me the certain restrictions around the framework and what features might or might not work.

Thank you so much for your work.

[cvrebert]

The main premise of the project is (currently) mobile-only usage. You'd have to ask the maintainers for their exact reasoning, but I imagine it allows them to maximally focus on performance constraints and browser compatibility/limitations/bugs that are mobile-specific, as well as on touch-centric UX.

If you want a more desktop-friendly/-centric framework, you might consider Ratchet's sister project, Bootstrap.

[fselcukcan]

Hi I have found the react-ratchet on react-components and the example product they provide is hacker news mobile. It works with its links on my Desktop Safari web browser as opposed to several issues on ratchet clicks not working on desktop. How they get this work on desktop. There are some other frameworks without this restriction but they miss the points Ratchet gets very right, yet Ratchet feels nicer on Desktop than lots of them. Even Bootstrap. Is that possible by simple steps like mentioned in the first post in this isssue thread.

[geggleto]

Yeah, I was able to enable desktop usage by simply disabling PUSH links, but ,my app is not very large. The method I posted above should enable it as well.

[fselcukcan]

Will this disable usage for mobile clients? If yes, will a conditional statement work to have ratchet work for both desktop and mobile clients without problems from same codebase?

[geggleto]

either solution does not break mobile

[fselcukcan]

thanks. Now you mean it is ok to go with Ratchet in production with this custom configuration. Something like: if(<client is mobile>) window.addEventListener('click', function (e) { if (getTarget(e)) {e.preventDefault();} }); else if(<client is desktop>) window.addEventListener('click', touchend);

[geggleto]

Nope...

  // Attach PUSH event handlers
  // ==========================

  window.addEventListener('touchstart', function () { isScrolling = false; });
  window.addEventListener('touchmove', function () { isScrolling = true; });
  window.addEventListener('touchend', touchend);
  window.addEventListener('click', /*function (e) { if (getTarget(e)) {e.preventDefault();} }*/ touchend); ///<--
  window.addEventListener('popstate', popstate);
  window.PUSH = PUSH;

[fselcukcan]

Not works? Is this the all modification needed?

I am trying the ratchet examples in the directory. I have changed the ratchet.js in the list directory and linked all example index.html files to this ratchet.js instead of ratchet.min.js.

UPDATE: but strange I have, in the web inspector, still the original copy of the ratchet.js, unmodified. But I have modified it as I have stated above. Safari cache? UPDATE: had changed the wrong copy of it. Now I have changed the correct one, the one in docs/dist. Now ı have the list items clickable and slides as intended. But any of the buttons do not work; settings button on Movie finder, compose buttons in Mail and Notes examples.