search

ColorlibHQ / AdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 5
https://adminlte.io
MIT License
43.93k stars 18.18k forks source link

[FEATURE] Full Screen #4489

Open burdittw opened 2 years ago

burdittw commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

burdittw commented 2 years ago

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

mohsetiawanmodeong commented 6 months ago

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