pointer.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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. document.addEventListener( 'wheel', this.onDocumentMouseScroll, false );
  24. }
  25. else {
  26. document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF
  27. document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
  28. document.removeEventListener( 'wheel', this.onDocumentMouseScroll, false );
  29. }
  30. // Auto-hide the mouse pointer when its inactive
  31. if( config.hideInactiveCursor ) {
  32. document.addEventListener( 'mousemove', this.onDocumentCursorActive, false );
  33. document.addEventListener( 'mousedown', this.onDocumentCursorActive, false );
  34. }
  35. else {
  36. this.showCursor();
  37. document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
  38. document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
  39. }
  40. }
  41. /**
  42. * Shows the mouse pointer after it has been hidden with
  43. * #hideCursor.
  44. */
  45. showCursor() {
  46. if( this.cursorHidden ) {
  47. this.cursorHidden = false;
  48. this.Reveal.getRevealElement().style.cursor = '';
  49. }
  50. }
  51. /**
  52. * Hides the mouse pointer when it's on top of the .reveal
  53. * container.
  54. */
  55. hideCursor() {
  56. if( this.cursorHidden === false ) {
  57. this.cursorHidden = true;
  58. this.Reveal.getRevealElement().style.cursor = 'none';
  59. }
  60. }
  61. destroy() {
  62. this.showCursor();
  63. document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false );
  64. document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
  65. document.removeEventListener( 'wheel', this.onDocumentMouseScroll, false );
  66. document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
  67. document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
  68. }
  69. /**
  70. * Called whenever there is mouse input at the document level
  71. * to determine if the cursor is active or not.
  72. *
  73. * @param {object} event
  74. */
  75. onDocumentCursorActive( event ) {
  76. this.showCursor();
  77. clearTimeout( this.cursorInactiveTimeout );
  78. this.cursorInactiveTimeout = setTimeout( this.hideCursor.bind( this ), this.Reveal.getConfig().hideCursorTime );
  79. }
  80. /**
  81. * Handles mouse wheel scrolling, throttled to avoid skipping
  82. * multiple slides.
  83. *
  84. * @param {object} event
  85. */
  86. onDocumentMouseScroll( event ) {
  87. if( Date.now() - this.lastMouseWheelStep > 1000 ) {
  88. this.lastMouseWheelStep = Date.now();
  89. let delta = event.detail || -event.wheelDelta;
  90. if( delta > 0 ) {
  91. this.Reveal.next();
  92. }
  93. else if( delta < 0 ) {
  94. this.Reveal.prev();
  95. }
  96. }
  97. }
  98. }