LifterLMS Distraction Free Fullscreen mode

llms-focus-mode.css

body.llms-is-focused .content-area {
	background: #fff none;
	padding:0;
	overflow-y: auto;
	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: auto;
	background: #fff none;
	padding: 20px;
	cursor: pointer;
}

llms-focus-mode.js

(function ($) {
    /* configuration */
	var fullScreenElementSelector = '.site',
        syllabusWidgetSelector    = '.widget-area .widget_course_syllabus',
        mainContentAreaSelector   = '.content-area';

    /**
    *
    * Vendor based Full Screen map
    * inspired by: https://github.com/neovov/Fullscreen-API-Polyfill/blob/master/fullscreen-api-polyfill.js
    */
    var vendor,
        api,
		apis = {
			// http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
			w3: {
				enabled:      "fullscreenEnabled",
				element:      "fullscreenElement",
				request:      "requestFullscreen",
				exit:         "exitFullscreen",
				change_event: "fullscreenchange",
			},
			webkit: {
				enabled:      "webkitFullscreenEnabled",
				element:      "webkitCurrentFullScreenElement",
				request:      "webkitRequestFullscreen",
				exit:         "webkitExitFullscreen",
				change_event: "webkitfullscreenchange",
			},
			moz: {
				enabled:      "mozFullScreenEnabled",
				element:      "mozFullScreenElement",
				request:      "mozRequestFullScreen",
				exit:         "mozCancelFullScreen",
				change_event: "mozfullscreenchange",
			},
			ms: {
				enabled:      "msFullscreenEnabled",
				element:      "msFullscreenElement",
				request:      "msRequestFullscreen",
				exit:         "msExitFullscreen",
                change_event: "MSFullscreenChange",
			}
		};

	// Loop through each vendor's specific API
	for ( vendor in apis ) {
		// Check if document has the "enabled" property
		if ( apis[vendor].enabled in document ) {
			// It seems this browser support the fullscreen API
			api = apis[vendor];
			break;
		}
	}


    // Nothing to do if the browser doesn't support Full Screen Mode
    if ( 1 > api.length ) {
        return;
    }

    var $body, $focusControl, $placeHolder, $contentArea, $syllabus, $fullScreenSyllabusWrapper, $fullScreenSyllabusToggle;

    /**
     * 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 = $( fullScreenElementSelector )[0];
        // Hence request the specific browser full screen
		elem[ api.request ]();
    }

    /**
     * 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
         */
        // Hence exit the specific browser full screen
		document[ api.exit ]();
    }

    /**
     * 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();
    }

    /**
     * Reacts to focus mode button toggle
     */
    function llmsHandleFocusMode(){
        /**
         * Start Focus mode
         */
        if ( ! $body.hasClass( 'llms-is-focused' ) ) {
            $body.addClass( 'llms-is-focused' );
            llmsOpenFullScreen();
            llmsSyllabusFullScreen();
        }
        /**
         * Stop Focus mode
         */
        else {
            llmsCloseFullScreen();
        }
    }

    /**
     * Reacts to Full Screen exit triggered
     */
    function llmsOnExitFullscreen() {
        llmsSyllabusExitFullScreen();
        $body.removeClass( 'llms-is-focused' );
    }

    /**
     * Bind on browser Full Screen changes.
     *
     * We want to exit our focus mode not only when the focusControl button is toggled
     * but also, for example, when the user presses the Esc key, or in general, when the browser
     * is instructed to exit the full screen mode.
     * On the other hand, we don't want to alter the way the browser enters in full screen mode.
     */
	$( document ).on( api.change_event, function( e ) {
        // If the document has an element in full screen do nothing,
        // otherwise trigger our on exit full-screen routine.
        if ( ! document[api.element] && $body.hasClass( 'llms-is-focused' ) ) {
            llmsOnExitFullscreen();
        }
	});

    // Document is ready => let's dance!
    $(function() {
        // Cache the body element
        $body = $( 'body' );

        // create a new empty div for the focus mode control button,
        // with a class for styling,
        // and a title (that'll show up in a tooltip on hover).
        $focusControl = $( '<div />', { class: 'llms-focus-control', title: 'Focus Mode' } );

        // select the main content area.
        $contentArea = $( mainContentAreaSelector );

        // select the syllabus widget.
        $syllabus = $( syllabusWidgetSelector );

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

            // create a special container for the syllabus widget on fullscreen mode,
            // with a class for styling.
            $fullScreenSyllabusWrapper = $( '<div />', { class: 'llms-focus-syllabus-wrapper' } );

            // create a button that'll show/hide syllabus on fullscreen,
            // with a class for styling.
            $fullScreenSyllabusToggle = $( '<div />', { class: '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.on( 'click', llmsHandleFocusMode );
    });

})(jQuery);