Cant use webix.Touch.limit() when fullscreen

Webix JS
#1

Hello.
I use this code to make my web app display in fullscreen mode:
//CODE
!document.fullscreen ? document.documentElement.webkitRequestFullScreen() : location.reload()
//END CODE
There are 2 problems:

  1. When in fullscreen i cant use finger to controll anymore. (webix.Touch.limit())
  2. Can u told me how to exit fullscreen mode without use location.reload() ?
#2

someone pls help me… thanks!

#3

Hey @duynq2197, let’s go over the problems you are having:

1.I’ve tried running a sample with your provided use case on a touch device, and the touch seemed to work just fine with webkitRequestFullscreen() enabled. Please make sure you’ve included your code inside the following construct for the touch capabilities to work properly:

webix.ready(function(){
   if ( webix.env.touch ){         // if touch device is detected
       webix.Touch.limit(true);
   };

   webix.ui({ ... })
});

You can try the aforementioned sample here: https://vtesting2.netlify.com/ (and here is the source code), please tell me if you are having the same issues with this example as well.

2.If we are going by the API you are already trying to use, then document.exitFullscreen should do the trick (as mentioned here it will minimize the current element being presented in fullscreen mode).

As a side note, I would like to recommend you use webix.fullscreen API if you want to present any widget in a fullscreen mode. It’s got 2 methods: set, which will enter the fullscreen mode, and exit, which will do the opposite.

#4

Dear Dzmitry,

  1. Sorry because i not hard test. I found that it’s work with datatable. But i can’t touch another element like title, text, template,… everythings.
#5

In the example i want to touch area ‘You can write any code here’ and move. I cant touch that, only can move content datatable. :frowning:

#6
  1. Ok i did that. <3
#7

In the provided example I’ve only focused on one element of the layout, if your intention is to put your whole app in the fullscreen mode you can do that as well: https://vtesting3.netlify.com/. Note that the touch still works (the code used is the same as above, the only difference is the fullscreen target - document.body).

Overall, I would like to recommend you use webix.ui.fullScreen() instead if your goal is to present your app in a fullscreen mode (on a mobile device). Please refer to the documentation for the correct way to initialize the method.

#8

I can’t double click to zoom or Miniature.

#9

I find out the problem maybe is when run code:
document.documentElement.webkitRequestFullScreen()
it’s excute webix.ui.fullScreen() too and i can’t move element anymore.
So how to turn off or exit webix.ui.fullScreen() ?

#10

I want to create a button when i click it’s will do the action like the action when press button f11 on chrome

#11

Do you have any idea ?

#12

As I mentioned before, you could try webix.fullscreen API instead. It’s got 2 methods: set, which will enter the fullscreen mode, and exit, which will do the opposite. So instead of:

document.body.webkitRequestFullScreen();

you would use

webix.fullscreen.set(layout);

The webix.ui.fullScreen() method only makes sure that the app siziing is correct on mobile devices, please make sure you are following the provided steps for the correct initialization: https://docs.webix.com/api__ui_fullscreen.html.

#13

thank you!