fullscreen.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. //[custom Javascript]
  2. //Project: Riday Admin - Responsive Admin Template
  3. //Primary use: Riday Admin - Responsive Admin Template
  4. //should be included in all pages. It controls some layout
  5. // Fullscreen
  6. $(function () {
  7. 'use strict'
  8. $('#supported').text('Supported/allowed: ' + !!screenfull.enabled);
  9. if (!screenfull.enabled) {
  10. return false;
  11. }
  12. $('#request').on('click', function () {
  13. screenfull.request($('#container')[0]);
  14. // Does not require jQuery. Can be used like this too:
  15. // screenfull.request(document.getElementById('container'));
  16. });
  17. $('#exit').on('click', function () {
  18. screenfull.exit();
  19. });
  20. $('#toggle').on('click', function () {
  21. screenfull.toggle($('#container')[0]);
  22. });
  23. $('#request2').on('click', function () {
  24. screenfull.request();
  25. });
  26. $('#demo-img').on('click', function () {
  27. screenfull.toggle(this);
  28. });
  29. $('[data-provide~="boxfull"]').on('click', function () {
  30. screenfull.toggle($('.box')[0]);
  31. });
  32. $('[data-provide~="fullscreen"]').on('click', function () {
  33. screenfull.toggle($('#container')[0]);
  34. });
  35. var selector = '[data-provide~="boxfull"]';
  36. var selector = '[data-provide~="fullscreen"]';
  37. $(selector).each(function(){
  38. $(this).data('fullscreen-default-html', $(this).html());
  39. });
  40. document.addEventListener(screenfull.raw.fullscreenchange, function() {
  41. if (screenfull.isFullscreen) {
  42. $(selector).each(function(){
  43. $(this).addClass('is-fullscreen')
  44. });
  45. }
  46. else {
  47. $(selector).each(function(){
  48. $(this).removeClass('is-fullscreen')
  49. });
  50. }
  51. });
  52. function fullscreenchange() {
  53. var elem = screenfull.element;
  54. $('#status').text('Is fullscreen: ' + screenfull.isFullscreen);
  55. if (elem) {
  56. $('#element').text('Element: ' + elem.localName + (elem.id ? '#' + elem.id : ''));
  57. }
  58. if (!screenfull.isFullscreen) {
  59. $('#external-iframe').remove();
  60. document.body.style.overflow = 'auto';
  61. }
  62. }
  63. screenfull.on('change', fullscreenchange);
  64. // Set the initial values
  65. fullscreenchange();
  66. }); // End of use strict