-
-
Save eri-trabiccolo/34786d7a62d50c60d8d725bdfbaa1226 to your computer and use it in GitHub Desktop.
LifterLMS Distraction Free Fullscreen mode
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment