How can I disable flick behavior in a browser? (Chrome/Firefox) - javascript

Flicks are gestures that can be triggered with a stylus or finger to go back, forward, scroll down or up in an app in windows.
http://windows.microsoft.com/en-us/windows7/what-are-flicks
In my web app, I am using an HTML5 canvas to capture mouse events to draw. In a Microsoft Surface (where flicks are enabled), because of flicks, the mousedown event is delayed and several mousemoves plain ignored and not transferred to the web app. Furthermore, sometimes, the user goes back/forward/scrolls up/down because of the flick actions.
Here's a repro/description/screenshot of this issue:
https://github.com/jogonzal/MinimalisticFlickDelayRepro

The fix is to disable flick gestures in Chrome or Firefox - this means a code change in Firefox/Chrome windows apps to either:
Turn this off completely (preferred, this is what IE and Edge do)
Allow the developer to turn this off via CSS/Javascript
Option 1 Use TABLET_DISABLE_FLICKS (recommended, plenty of examples on github, this is how IE and Edge do it)
(C++):
Disable flicks as described in this article:
https://msdn.microsoft.com/en-us/library/dd562171(v=VS.85).aspx
Code sample
https://github.com/jonathanhook/Waves/blob/bc5a3c9a8a2c8574b28174e25650753237bc8cd2/Source/MultiTouchEvents/WMTouchEventSource.cpp
(C#):
Code example
https://github.com/leowangzi/DanielLib/blob/6aaae88bd9ec9ae91da35fa3bdcd280f2c701e64/DanielLib.TouchAppTemplate/Touchtech.Surface.Community/TabletUtil.cs
Option 2 Respond to WM_TABLET_QUERY_SYSTEM_GESTURE_STATUS
https://msdn.microsoft.com/en-us/library/windows/desktop/ms699430(v=vs.85).aspx

Related

HTML5 website running geolocation and audio output while phone screen is off?

Very similar questions in the past:
HTML5 website running while phone screen is off?
HTML5 mobile app running while phone screen is off?
But now it's 2020... and just a few months ago this worked on firefox. I created a small test page that should "speak" every ~10 seconds and tell you the x/y offset in meters from when you first loaded the page. When the screen is on it also shows you this on a map.
https://supplyrunner.netlify.app/test0/index.html
When the screen was turned off I could not get this working using chrome on my android phone but it worked with firefox. I didn't think the support would get dropped so I didn't note the version of that browser. Now it no longer seems to work with the latest firefox, chrome, or Opera (with the screen off).
Is there anything I can do to tell these browsers to continue running in the background? I looked at requesting wakelocks (https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/Navigator/requestWakeLock) but that didn't work on firefox and had no effect on chrome.
Is there another browser I can use that has more reasonable behavior or options? I believe a user should have the option to run webapps in the background, even if it means explicitly running the browser in a different mode (similar to incognito) for the sake of security and transparency.
Is there anything I can do in my JS code (web workers?) to force some code to run in the background? Can this code access geolocation and the speech API (so it can talk to the user).
Worse case option: Are there any apps I can run that would simulate a screen lock such that a user could run the webpage, then run this app instead of locking their screen, allowing the page to continue running while the screen turns black and becomes unresponsive to touch (so they can put the phone in their pocket), but the OS doesn't register this as a "screen off" event?
Are there any other alternatives that I haven't thought of?
Note that I have an application that requires background geolocation and access to audio out (to speak or play sounds). This was originally written as a native android app but in the past year I have refactored it to be a webapp to avoid issues with google API keys and licenses, to make it OS agnostic (iOS and android), and also to make it much simpler to extend and customize. Going back to a native app is not an option.
Edit:
Here is a simpler page that shows the same issue (with no map) in less than 50 lines of JS/html combined: https://supplyrunner.netlify.app/test1/index.html
I noticed that firefox on android actually still allows some things, like youtube videos, to keep running media in the background with the screen off, but seems to no longer run JS so window.speechSynthesis.speak() and navigator.geolocation.getCurrentPosition() don't work.

Disable Chrome mobile's "tap to search" on a web app

I would like to be able to disable, through JavaScript or some sort of HTML meta-tag, the tap-to-search/touch-to-search feature found on mobile Chrome which shows a banner at the bottom of the browser every time the user long presses/taps on a word in any text paragraph.
This Chrome feature is a problem for me because this contextual banner completely covers the toolbar in the web app that I am developing, which is fixed at the bottom of the page.
I've only found this question from 2015 which references this Google Developers article (also from 2015), but the proposed solutions do not seem to work anymore except CSS "user-select: none"; unfortunately, disabling user selection is not a solution for me since user selection is required for my web app to work.
I have also tried setting event.preventDefault() when the "oncontextmenu" event fires, which does disable the search toolbar when the user taps on a word, but not when a user long presses on a word, as far as I have experienced.
So far the only partial "solution" that has worked for me has been to install the web app: as an installed PWA, tap-to-search does not somehow trigger. It still annoys me a lot that I would have to basically beg my potential users to install the web app on mobile.
I also know that the user can manually disable this feature globally in the Chrome Flags, but this is, I imagine, really annoying for a potential user as well.
Is there anything I am missing here? Do you know of any way to prevent tap-to-search from firing on a long press?
Adding the attribute tabindex="-1" to the <body> tag works for me.
As of 2021, it isn't possible to disable touch-to-search (when this is triggered by a long-press for text selection) in chrome mobile. The Google Developers article is apparently concerned only with touch-to-search triggered through a tap gesture.
Quoting donnd, from bugs.chromium.org:
Regarding #2 -- developer control: The 2015 article that you mentioned (https://developers.google.com/web/updates/2015/10/tap-to-search) focuses on triggering through the tap gesture. As you correctly point out, it does not address the long-press gesture triggering. Touch to Search responds to both tap and long-press but treats them differently. As I'm sure you know, the long-press gesture activates a whole set of features which can include copy, translation, smart text selection, and Web Search. A site developer can markup their page text as non-selectable in order to disable the long-press gesture entirely, but currently there's no way to disable only the Touch to Search response to long pressing. If you'd like to work with us to add such a feature, let us know and we'll file a separate feature request.

Mapbox GL JS : Fullscreen and GPS button Issues in Chrome only

I am working on a weather visualization project using Mapbox (3 panes are locked together and one is for navigation, it's hard to explain until you see the link.)
Before I continue, I will post a link to the web app I am discussing here, so you can see it. My code is a MESS, and I am aware of that, but I believe this is a browser issue.
http://ability.a2hosted.com/main.html
In Edge and Firefox, the fullscreen and navigation buttons work fine. In Chrome, they do not work... the fullscreen button gets the browser stuck until you press escape (and doesn't render properly anyway!). And, in fact, chrome does not even display the navigation button at all.
Is there a way to get these buttons to show up and function as they do in firefox and edge? Or, maybe an alternate button? I am attaching a screenshot of how the page should look.
I should note, I can live without the fullscreen buttons, but I need the navigation button option to be working in chrome. This really is a must for my project, so even if there's another link or button I could place over it to activate it somehow, it's fine as long as it works. I am not good enough with JS to understand what may be causing this issue after 2 hours of research.
From https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol:
Not all browsers support geolocation, and some users may disable the feature. Geolocation support for modern browsers including Chrome requires sites to be served over HTTPS. If geolocation support is not available, the GeolocateControl will not be visible.

How to test JavaScript based touch events without having any touch based screen / device?

How to test touch events without having any touch based screen / device?
I have Windows 7 PC and my monitor is not touch based.
You can use google chrome. Open console by pressing F12 or inspect any element, in right-bottom corner click on gear icon, then go to "overrides" where you can enable "Emulate touch events". Your mouse clicks will be like touches.
Notice: unbind/remove any pc's click events like onclick,onmousedown,.click and .ect because in this mode will works both of touch and click events.
If it's still actual, you can use this library to test touch events. It's used to test touch for Hammer.
One possible way is to install the Android SDK and use the browser in the emulator. I'd advise an Android 2.x image as emulation is a bit slow, especially the 3.x and 4.0 images.
Hammer.js library can simulate touch events on desktop devices.
http://eightmedia.github.com/hammer.js/

Set keyboard to stay open even on "go" press with html5/javascript?

I'm building a small html5 web-app to hone my html5 skills. I've built the project and it works pretty good, but I want to enable some mobile functionality which should make it even cooler! One of the annoyances of using the site on mobile is that whenever you press the "go" button on the android keyboard after entering data into a textbox, it hides its self, despite the fact that in javascript I've specified that the textbox still has focus. Is there a way to explicitly tell the android browser to keep the keyboard open?
Thanks,
John
I think this is beyond the realms of JS - The keyboard is part of android, and thus (I assume) would be up to the browser to decide whether the keyboard stays or not - how would you cope for different browsers running across android?
Because I would assume they're not all running Webkit (Firefox mobile?).
So I think the answer is it can't be done :(

Categories