LifterLMS Distraction Free Fullscreen mode

llms-focus-mode.css

body.llms-is-focused .content-area {
	background: #fff none;
	padding:0;
	overflow-y:scroll;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	bottom:0;
	right: 0;
	z-index: 9999999999; /* really high z-index to place this on top, adjust for popovers, alerts, etc */
	margin:0;
}

.llms-focus-control{
	width: 40px;
	height: 40px;
	border: 4px solid #232323;
	position: fixed;
	bottom: 4px;
	right: 4px;
	cursor: pointer;
}

.llms-focus-syllabus-toggle{
	position: fixed;
	width: 40px;
	height: 40px;
	right: 0px;
	top: 0px;
	background: #fff none;
}

.llms-focus-syllabus-toggle:before{
	content: "\2630";
	font-size: 30px;
	text-align: center;
	line-height: 40px;
	width: 100%;
	display: block;
}

.llms-focus-syllabus-wrapper{
	position: fixed;
	top: 0px;
	right: -30%;
	width: 30%;
	height: 100%;
	overflow-y: scroll;
	background: #fff none;
	padding: 20px;
	cursor: pointer;
}

llms-focus-mode.js

(function ($) {
    
    /**
     * Opens fullscreen mode
     */
    function llmsOpenFullScreen() {

        /*
         * -----
         * Notes
         * -----
         * - ".site" is the selector for the element that should go fullscreen.
         * - Can be replaced with any other selector.
         * - "elem" could also be turned into a variable to make this function reusable.
         * - The first (0) element of the jQuery object representation of a DOM element is the native object.
         * - So any native APIs (requestFullscreen) that may not run on the jQuery object can be used this way.
         */

        // Get the native dom object from jQuery object
        elem = $( '.site' )[0];

        // Standard, for most browsers
        if ( elem.requestFullscreen ) {
            elem.requestFullscreen();
        } else if ( elem.mozRequestFullScreen ) {
            // Firefox
            elem.mozRequestFullScreen();
        } else if ( elem.webkitRequestFullscreen ) {
            // Chrome, Safari and Opera
            elem.webkitRequestFullscreen();
        } else if ( elem.msRequestFullscreen ) {
            // IE/Edge
            elem.msRequestFullscreen();
        }
    }

    /**
     * Closes fullscreen mode
     */
    function llmsCloseFullScreen() {

        /*
         * -----
         * Notes
         * -----
         * - requestFullScreen is called on an element.
         * - exitFullScreen is called on the document.
         * - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
         */

        // Standard, for most browsers
        if ( document.exitFullscreen ) {
            document.exitFullscreen();
        } else if ( document.mozCancelFullScreen ) {
            // Firefox
            document.mozCancelFullScreen();
        } else if ( document.webkitExitFullscreen ) {
            // Chrome, Safari and Opera
            document.webkitExitFullscreen();
        } else if ( document.msExitFullscreen ) {
            // IE/Edge
            document.msExitFullscreen();
        }
    }

    /**
     * Adjusts syllabus widget for fullscreen
     */
    function llmsSyllabusFullScreen(){

        // Don't do anything if there's no syllabus widget
        if( $syllabus.length < 1 ){
            return;
        }

        // Insert the hidden placeHolder just after the syllabus widget.
        $placeHolder.insertAfter( $syllabus );

        // Add a special container for syllabus, only for fullscreen mode.
        $contentArea.append( $fullScreenSyllabusWrapper );

        // Move the syllabus widget from sidebar to this newly added container.
        $fullScreenSyllabusWrapper.append( $syllabus );

        // Add the ability to show/hide syllabus to the toggle button.
        $fullScreenSyllabusToggle.toggle(
            function(e){
                e.preventDefault();

                // animate the syllabus to slide in from the left
                $fullScreenSyllabusWrapper.animate({ right: 0 }, 500 );

                // move the button itself to the left to accomodate the syllabus.
                $(this).animate( { right: $fullScreenSyllabusWrapper.css( 'width' ) }, 500 );

                /*
                 * Increase 500 for faster animation, decrease for slower.
                 */

            },
            function(e){
                e.preventDefault();

                // animate the syllabus out of the screen towards the right
                $fullScreenSyllabusWrapper.animate( { right: '-' + $fullScreenSyllabusWrapper.css( 'width' ) }, 500 );

                // back to the right edge for the button
                $(this).animate({ right: 0 }, 500);
            }
        );
    }

    /**
     * Adjusts syllabus widget on fullscreen exit.
     */
    function llmsSyllabusExitFullScreen(){

        // Don't do anything if there's no syllabus widget.
        if( $syllabus.length < 1 ){
            return;
        }

        // move syllabus widget just before the placeholder.
        $syllabus.insertBefore( $placeHolder );

        // now that syllabus is back, we don't need the placeholder.
        $placeHolder.remove();

        // we also don't need the special container.
        $fullScreenSyllabusWrapper.remove();
    }

    /**
     * Start Focus mode
     */
    function llmsFocusStart(){
        $( 'body' ).addClass( 'llms-is-focused' );
        llmsOpenFullScreen();
        llmsSyllabusFullScreen();
    }

    /**
     * Stop Focus mode
     */
    function llmsFocusStop(){
        llmsSyllabusExitFullScreen();
        llmsCloseFullScreen();
        $( 'body' ).removeClass( 'llms-is-focused' );
    }

    // create a new empty div for the focus mode control button.
    var $focusControl = $( '<div />' );

    // add a class for styling.
    $focusControl.addClass( 'llms-focus-control' );

    // add a title (that'll show up in a tooltip on hover).
    $focusControl.attr( 'title', 'Focus Mode' );

    // select the main content area.
    var $contentArea = $( '.content-area' );

    // select the syllabus widget.
    var $syllabus = $( '.widget-area .widget_course_syllabus' );

    // create a hidden placeholder to be used as a marker for the syllabus widget's original position.
    var $placeHolder = $( '<span style="display: none;" />' );

    // create a special container for the syllabus widget on fullscreen mode.
    var $fullScreenSyllabusWrapper = $( '<div />' );

    // add a class for styling.
    $fullScreenSyllabusWrapper.addClass( 'llms-focus-syllabus-wrapper' );

    // create a button that'll show/hide syllabus on fullscreen.
    var $fullScreenSyllabusToggle = $( '<div/ >' );

    // add a class for styling.
    $fullScreenSyllabusToggle.addClass( 'llms-focus-syllabus-toggle' );

    // append button to fullscreen syllabus wrapper.
    $fullScreenSyllabusWrapper.append( $fullScreenSyllabusToggle );

    // we're ready for the show, add focus mode button to content area.
    $contentArea.append( $focusControl );  

    // add the ability to start/stop focus mode to the button.
    $focusControl.toggle(
        function(){
            llmsFocusStart()
        },
        function(){
            llmsFocusStop()
        }
     );

})(jQuery);

Hi there,
here's my slightly different version: I've basically just changed some code in order to be able to react to browser's full-screen exit events (e.g. I wanted to exit the focus mod when clicking on the Esc button).

https://gist.github.com/eri-trabiccolo/34786d7a62d50c60d8d725bdfbaa1226

@eric-trabiccolo I left that out deliberately because of how videos (that are usually present on lessons) react to it. Did you try keyboard shortcuts in the presence of fullscreen vimeo or youtube embeds?

Not really :D which kbd shortcuts except the Esc key?