forked from impress/impress.js
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This commit adds a generic mouse-timeout plugin. (Same code was originally part of toolbar plugin, but is now general purpose and available to user to apply any CSS to it.) Although this implementation is different and more generic, the suggestion to add ability to hide mouse cursor came from a pull request by Sebastian Clausen (@sclausen): impress#536 The functionality is simple: After 3 seconds of mouse inactivity, add the css class `body.impress-mouse-timeout`. On `mousemove`, `click` or `touch`, remove the class. A user will then use (or not) his own CSS to hide whatever he wants to hide after 3 seconds of mouse inactivity.
- Loading branch information
1 parent
56dbe96
commit 1f353e6
Showing
2 changed files
with
92 additions
and
0 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
Mouse timeout plugin | ||
==================== | ||
|
||
After 3 seconds of mouse inactivity, add the css class | ||
`body.impress-mouse-timeout`. On `mousemove`, `click` or `touch`, remove the | ||
class. | ||
|
||
The use case for this plugin is to use CSS to hide elements from the screen | ||
and only make them visible when the mouse is moved. Examples where this | ||
might be used are: the toolbar from the toolbar plugin, and the mouse cursor | ||
itself. | ||
|
||
Example CSS | ||
------------ | ||
|
||
body.impress-mouse-timeout { | ||
cursor: none; | ||
} | ||
body.impress-mouse-timeout div#impress-toolbar { | ||
display: none; | ||
} | ||
|
||
|
||
Copyright 2016 Henrik Ingo (@henrikingo) | ||
Released under the MIT license. |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
/** | ||
* Mouse timeout plugin | ||
* | ||
* After 3 seconds of mouse inactivity, add the css class | ||
* `body.impress-mouse-timeout`. On `mousemove`, `click` or `touch`, remove the | ||
* class. | ||
* | ||
* The use case for this plugin is to use CSS to hide elements from the screen | ||
* and only make them visible when the mouse is moved. Examples where this | ||
* might be used are: the toolbar from the toolbar plugin, and the mouse cursor | ||
* itself. | ||
* | ||
* Example CSS: | ||
* | ||
* body.impress-mouse-timeout { | ||
* cursor: none; | ||
* } | ||
* body.impress-mouse-timeout div#impress-toolbar { | ||
* display: none; | ||
* } | ||
* | ||
* | ||
* Copyright 2016 Henrik Ingo (@henrikingo) | ||
* Released under the MIT license. | ||
*/ | ||
/* global window, document */ | ||
( function( document, window ) { | ||
"use strict"; | ||
var timeout = 3; | ||
var timeoutHandle; | ||
|
||
var hide = function() { | ||
|
||
// Mouse is now inactive | ||
document.body.classList.add( "impress-mouse-timeout" ); | ||
}; | ||
|
||
var show = function() { | ||
if ( timeoutHandle ) { | ||
window.clearTimeout( timeoutHandle ); | ||
} | ||
|
||
// Mouse is now active | ||
document.body.classList.remove( "impress-mouse-timeout" ); | ||
|
||
// Then set new timeout after which it is considered inactive again | ||
timeoutHandle = window.setTimeout( hide, timeout * 1000 ); | ||
}; | ||
|
||
document.addEventListener( "impress:init", function( event ) { | ||
var api = event.detail.api; | ||
var gc = api.lib.gc; | ||
gc.addEventListener( document, "mousemove", show ); | ||
gc.addEventListener( document, "click", show ); | ||
gc.addEventListener( document, "touch", show ); | ||
|
||
// Set first timeout | ||
show(); | ||
|
||
// Unset all this on teardown | ||
gc.addCallback( function() { | ||
window.clearTimeout( timeoutHandle ); | ||
document.body.classList.remove( "impress-mouse-timeout" ); | ||
} ); | ||
}, false ); | ||
|
||
} )( document, window ); |