[FEATURE] Full Screen

[burdittw]

I saw in the _topbar the links for FullScreen and the control-bar rem'd out and slated for a later build. I took the time today to play with a few things and there are some weird things with all the browsers. So the F11 does not register the FullScreen API, I left it out as something the app can deal with. F11 still works, it just does not register the toggleFullScreen function I built and update the icons based on the screen state. Anyways here is the fullscreen.ts that I built that can easily be added to your base code.

Obviously this needs to be added to the adminlte.ts for the import as well.

/**
 * --------------------------------------------
 * AdminLTE fullscreen.ts
 * License MIT
 * --------------------------------------------
 */

import {
    domReady
} from './util/index'

/**
 * Constants
 * ====================================================
 */

const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="fullscreen"]'
const SELECTOR_ICON_EXPAND = 'fa-expand-arrows-alt'
const SELECTOR_ICON_COMPRESS = 'fa-compress-arrows-alt'

/**
 * Class Definition
 * ====================================================
 */
class FullScreen {
    toggleFullScreen(): void {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
            const icon = document.getElementsByClassName(SELECTOR_ICON_EXPAND)
            for (const i of icon) {
                i.classList.add(SELECTOR_ICON_COMPRESS);
                i.classList.remove(SELECTOR_ICON_EXPAND);
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
                const icon = document.getElementsByClassName(SELECTOR_ICON_COMPRESS)
                for (const i of icon) {
                    i.classList.add(SELECTOR_ICON_EXPAND);
                    i.classList.remove(SELECTOR_ICON_COMPRESS);
                }
            }
        }
    }
}

/**
 *
 * Data Api implementation
 * ====================================================
 */

domReady(() => {
    const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)

    for (const btn of button) {
        btn.addEventListener('click', event => {
            event.preventDefault()
            const data = new FullScreen()
            data.toggleFullScreen()
        })
    }
})

export default FullScreen

And add this code over the rem'd out 'li' item for the fullscreen button in the _topbar.html:

<li class="nav-item">
    <a class="nav-link fullscreen" data-lte-toggle="fullscreen" href="#" role="button">
        <i class="fas fa-expand-arrows-alt"></i>
    </a>
</li>

I tried to keep it looking like what you all are doing and I may have messed up your const naming convention but you all can fix it if you need to. Heck there may be a better way but I tried to use the built in javascript FullScreen API so that is stayed simple and clean as possible. Let me know if you need me to clarify anything or make changes. Figured I could at least constirubute to the project in some way since this is my goto admin template and I like the feature and was going to add it to my project, so why not just share and make it available to everyone.

[burdittw]

Forgot to say that this is not supported in IE. But I thought I read a note saying this version was dropping IE. Which is an excellent move. Here is the link to the FullScreen API on MDN for reference. I tested it in Edge, Firefox, and Brave.

MDN FullScreen API

[burdittw]

Updated fullscreen.ts. It now uses the window resize event to change the maximize/minimize icon so that it looks right no matter how it is made to be fullscreen. The F12 DevTools are the only thing that seems to mess it up as you cannot get the size of the DevTools window to add and adjust for the size.

/**
 * --------------------------------------------
 * AdminLTE fullscreen.ts
 * License MIT
 * --------------------------------------------
 */

import {
    domReady
} from './util/index'

/**
 * Constants
 * ====================================================
 */

const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="fullscreen"]'
const SELECTOR_ICON_EXPAND = 'fa-expand-arrows-alt'
const SELECTOR_ICON_COMPRESS = 'fa-compress-arrows-alt'

/**
 * Class Definition
 * ====================================================
 */
class FullScreen {
    toggleFullScreen(): void {
        if (document.fullscreenEnabled) {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();

            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
            }
        }
    }
}

/**
 *
 * Data Api implementation
 * ====================================================
 */

domReady(() => {
    const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)

    for (const btn of button) {
        btn.addEventListener('click', event => {
            event.preventDefault()
            const data = new FullScreen()
            data.toggleFullScreen()
        })
    }

    /**
    * If F12 DevTools are open and in the browser window then the 
    * height/width will be off and this does not work as expected
     */
    window.addEventListener('resize', () => {
        const windowWidth = window.innerWidth * window.devicePixelRatio;
        const windowHeight = window.innerHeight * window.devicePixelRatio;
        const screenWidth = window.screen.width;
        const screenHeight = window.screen.height;
        if (((windowWidth / screenWidth) >= 0.95) && ((windowHeight / screenHeight) >= 0.95)) {
            const icon = document.getElementsByClassName(SELECTOR_ICON_EXPAND)
            for (const i of icon) {
                i.classList.add(SELECTOR_ICON_COMPRESS);
                i.classList.remove(SELECTOR_ICON_EXPAND);
            }
        } else {
            const icon = document.getElementsByClassName(SELECTOR_ICON_COMPRESS)
            for (const i of icon) {
                i.classList.add(SELECTOR_ICON_EXPAND);
                i.classList.remove(SELECTOR_ICON_COMPRESS);
            }
        }
    });
})

export default FullScreen

[craph]

Hello @burdittw ,

If you have tested the feature on your side, please can you create a PR for this ? It will help I guess :)

Thank you very much

[burdittw]

PR has been created and a cleaner version of the code was posted.

[burdittw]

@craph @REJack The PR has been created for the fullscreen functionality.

[mohsetiawanmodeong]

i have same problem, i want the fullscreen is keep up when i open other page. please help me

• ---

• AdminLTE Fullscreen.js
• License MIT

• ---

  */ /**

• Constants

• ==================================================== */

  var NAME$6 = 'Fullscreen'; var DATA_KEY$6 = 'lte.fullscreen'; var JQUERY_NO_CONFLICT$6 = $__default['default'].fn[NAME$6]; var SELECTOR_DATA_WIDGET = '[data-widget="fullscreen"]'; var SELECTOR_ICON = SELECTOR_DATA_WIDGET + " i"; var Default$4 = { minimizeIcon: 'fa-compress-arrows-alt', maximizeIcon: 'fa-expand-arrows-alt' }; /**

• Class Definition

• ==================================================== */

  var Fullscreen = /#PURE/function () { function Fullscreen(_element, _options) { this.element = _element; this.options = $__default['default'].extend({}, Default$4, _options); } // Public

  var _proto = Fullscreen.prototype;

  _proto.toggle = function toggle() { if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) { this.windowed(); } else { this.fullscreen(); } };

  _proto.fullscreen = function fullscreen() { if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(); } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); }

  $__default'default'.removeClass(this.options.maximizeIcon).addClass(this.options.minimizeIcon); };

  _proto.windowed = function windowed() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }

  $__default'default'.removeClass(this.options.minimizeIcon).addClass(this.options.maximizeIcon); } // Static ;

  Fullscreen._jQueryInterface = function _jQueryInterface(config) { var data = $__default'default'.data(DATA_KEY$6);

  if (!data) { data = $__default'default'.data(); }

  var _options = $__default['default'].extend({}, Default$4, typeof config === 'object' ? config : data);

  var plugin = new Fullscreen($__default'default', _options); $__default'default'.data(DATA_KEY$6, typeof config === 'object' ? config : data);

  if (typeof config === 'string' && config.match(/toggle|fullscreen|windowed/)) { plugin[config](); } else { plugin.init(); } };

  return Fullscreen; }(); /**

  • Data API
  • ==================================================== */

  $__default'default'.on('click', SELECTOR_DATA_WIDGET, function () { Fullscreen._jQueryInterface.call($__default'default', 'toggle'); }); /**

• jQuery API

• ==================================================== */

  $__default['default'].fn[NAME$6] = Fullscreen._jQueryInterface; $__default['default'].fn[NAME$6].Constructor = Fullscreen;

  $default['default'].fn[NAME$6].noConflict = function () { $default['default'].fn[NAME$6] = JQUERY_NO_CONFLICT$6; return Fullscreen._jQueryInterface; };