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);

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