Adapt Fullscreen Api to toggle swith

Question

I would try to adapt two code in one. First the fullscreen Api HTML5 Fullscreen Api and Sliding Toggle Switch like (iOS) jQuery-Plugin-For-Sliding-Toggle-Switches.

function launchFullscreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

function cancelFullscreen() {
  if(document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

// triggered each time a field changes status
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
  var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
  console.log('field changed status: '+ status );
});

// triggered each time a field is checked
$('body').delegate('.lcs_check', 'lcs-on', function() {
  console.log('field is checked');
});

// triggered each time a is unchecked
$('body').delegate('.lcs_check', 'lcs-off', function() {
  console.log('field is unchecked');
});

I require your help to have a Sliding Toggle Switch button to activate and deactivate Fullscreen mode. Too I would test that the fullscreen mode is activated by default. I don't know if the LC Switch does it in the function.

I do not quite understand jquery and even less when I must adapt javascript with jquery. It could be useful for other users :-)

in advance thank you.

Answer 1

Here, I received an answer from another forum.

jQuery('body').delegate('.lcs_check', 'lcs-statuschange', function() {
    if(jQuery(this).is(':checked')){
        launchFullscreen(document.documentElement); // the whole page
    } else {
        cancelFullscreen();
    }
});

It works but i have a bug/problem only on Chrome browser and I haven't error in the console. The switch button always works in two modes (ON and OFF) but it doesn't exit full screen on "OFF" only if the window browser is in fullscreen. If the window browser is reduce it works fine.

I have well an alert to exit fullscreen on "ON" but I must insist to exit: esc + click two times (shift+command+F).

This problem doesn't appear on other browsers (Safari, Firefox and Opera). I have not yet tested on IE 11.

I failed to get a valid link from GitHub for LC_Switch.js, I can't show you an example. Somebody as an idea where come from the problem?