Skip to content

Commit

Permalink
Add mouse-timeout plugin
Browse files Browse the repository at this point in the history
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
henrikingo committed Oct 23, 2017
1 parent 56dbe96 commit 1f353e6
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 0 deletions.
25 changes: 25 additions & 0 deletions src/plugins/mouse-timeout/README.md
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.
67 changes: 67 additions & 0 deletions src/plugins/mouse-timeout/mouse-timeout.js
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 );

0 comments on commit 1f353e6

Please sign in to comment.