pointer.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * Handles hiding of the pointer/cursor when inactive.
  3. */
  4. export default class Pointer {
  5. constructor( Reveal ) {
  6. this.Reveal = Reveal;
  7. // Throttles mouse wheel navigation
  8. this.lastMouseWheelStep = 0;
  9. // Is the mouse pointer currently hidden from view
  10. this.cursorHidden = false;
  11. // Timeout used to determine when the cursor is inactive
  12. this.cursorInactiveTimeout = 0;
  13. this.onDocumentCursorActive = this.onDocumentCursorActive.bind( this );
  14. this.onDocumentMouseScroll = this.onDocumentMouseScroll.bind( this );
  15. }
  16. /**
  17. * Called when the reveal.js config is updated.
  18. */
  19. configure( config, oldConfig ) {
  20. if( config.mouseWheel ) {
  21. document.addEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF
  22. document.addEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
  23. }
  24. else {
  25. document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF
  26. document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
  27. }
  28. // Auto-hide the mouse pointer when its inactive
  29. if( config.hideInactiveCursor ) {
  30. document.addEventListener( 'mousemove', this.onDocumentCursorActive, false );
  31. document.addEventListener( 'mousedown', this.onDocumentCursorActive, false );
  32. }
  33. else {
  34. this.showCursor();
  35. document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
  36. document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
  37. }
  38. }
  39. /**
  40. * Shows the mouse pointer after it has been hidden with
  41. * #hideCursor.
  42. */
  43. showCursor() {
  44. if( this.cursorHidden ) {
  45. this.cursorHidden = false;
  46. this.Reveal.getRevealElement().style.cursor = '';
  47. }
  48. }
  49. /**
  50. * Hides the mouse pointer when it's on top of the .reveal
  51. * container.
  52. */
  53. hideCursor() {
  54. if( this.cursorHidden === false ) {
  55. this.cursorHidden = true;
  56. this.Reveal.getRevealElement().style.cursor = 'none';
  57. }
  58. }
  59. /**
  60. * Called whenever there is mouse input at the document level
  61. * to determine if the cursor is active or not.
  62. *
  63. * @param {object} event
  64. */
  65. onDocumentCursorActive( event ) {
  66. this.showCursor();
  67. clearTimeout( this.cursorInactiveTimeout );
  68. this.cursorInactiveTimeout = setTimeout( this.hideCursor.bind( this ), this.Reveal.getConfig().hideCursorTime );
  69. }
  70. /**
  71. * Handles mouse wheel scrolling, throttled to avoid skipping
  72. * multiple slides.
  73. *
  74. * @param {object} event
  75. */
  76. onDocumentMouseScroll( event ) {
  77. if( Date.now() - this.lastMouseWheelStep > 1000 ) {
  78. this.lastMouseWheelStep = Date.now();
  79. let delta = event.detail || -event.wheelDelta;
  80. if( delta > 0 ) {
  81. this.Reveal.next();
  82. }
  83. else if( delta < 0 ) {
  84. this.Reveal.prev();
  85. }
  86. }
  87. }
  88. }