Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
LifterLMS Distraction Free Fullscreen mode
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;
}
(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);
@eri-trabiccolo

This comment has been minimized.

Copy link

commented Apr 18, 2019

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

@actual-saurabh

This comment has been minimized.

Copy link
Owner Author

commented May 13, 2019

@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?

@eri-trabiccolo

This comment has been minimized.

Copy link

commented May 13, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.