pointer.js 2.8 KB

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