github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-30 07:35:26 -05:00
Code Issues Projects Releases Packages Wiki Activity

Refactor Safari scroll patcher; ensure it works after PDF is reloaded.

Browse source
This commit is contained in:
Paulo Reis 2016-07-29 17:45:50 +01:00
parent 9b3a28048e
commit 16e8cd7820
1 changed files with 70 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
services/web/public/coffee/ide/SafariScrollPatcher.coffee
View file

@ -2,44 +2,62 @@ define [
], () -> ], () ->
class SafariScrollPatcher class SafariScrollPatcher
constructor: (ide, $scope) -> constructor: (ide, $scope) ->
@isBootstrapped = false @isOverAce = false # Flag to control if the pointer is over Ace.
@isOverAce = false
@pdfDiv = null @pdfDiv = null
@aceDiv = null @aceDiv = null
$scope.$on "loaded", () =>
console.log this
if !@isBootstrapped
console.log "bootstrapping"
@isBootstrapped = true;
@pdfDiv = document.querySelector ".pdfjs-viewer" # Grab the PDF div.
@aceDiv = document.querySelector ".ace_content" # Also the editor.
@isOverAce = false # Flag to control if the pointer is over Ace.
# Start listening to PDF wheel events when the pointer leaves the PDF region. # Start listening to PDF wheel events when the pointer leaves the PDF region.
# P.S. This is the problem in a nutshell: although the pointer is elsewhere, # P.S. This is the problem in a nutshell: although the pointer is elsewhere,
# wheel events keep being dispatched to the PDF. # wheel events keep being dispatched to the PDF.
@pdfDiv.addEventListener "mouseleave", () => @handlePdfDivMouseLeave = () =>
@pdfDiv.addEventListener "wheel", dispatchToAce console.log "dispatching to ace enabled"
@pdfDiv.addEventListener "wheel", @dispatchToAce
# Stop listening to wheel events when the pointer enters the PDF region. If # Stop listening to wheel events when the pointer enters the PDF region. If
# the pointer is over the PDF, native behaviour is adequate. # the pointer is over the PDF, native behaviour is adequate.
@pdfDiv.addEventListener "mouseenter", () => @handlePdfDivMouseEnter = () =>
@pdfDiv.removeEventListener "wheel", dispatchToAce console.log "dispatching to ace disabled"
@pdfDiv.removeEventListener "wheel", @dispatchToAce
# Set the "pointer over Ace" flag as false, when the mouse leaves its area. # Set the "pointer over Ace" flag as false, when the mouse leaves its area.
@aceDiv.addEventListener "mouseleave", () => @handleAceDivMouseLeave = () =>
@isOverAce = false @isOverAce = false
console.log 'is over ace = ' + @isOverAce
# Set the "pointer over Ace" flag as true, when the mouse enters its area. # Set the "pointer over Ace" flag as true, when the mouse enters its area.
@aceDiv.addEventListener "mouseenter", () => @handleAceDivMouseEnter = () =>
@isOverAce = true @isOverAce = true
console.log 'is over ace = ' + @isOverAce
# Grab the elements (pdfDiv, aceDiv) and set the "hover" event listeners.
# If elements are already defined, clear existing event listeners and do
# the process again (grab elements, set listeners).
@setListeners = () =>
@isOverAce = false
# If elements aren't null, remove existing listeners.
if @pdfDiv?
@pdfDiv.removeEventListener @handlePdfDivMouseLeave
@pdfDiv.removeEventListener @handlePdfDivMouseEnter
if @aceDiv?
@aceDiv.removeEventListener @handleAceDivMouseLeave
@aceDiv.removeEventListener @handleAceDivMouseEnter
# Grab elements.
@pdfDiv = document.querySelector ".pdfjs-viewer" # Grab the PDF div.
@aceDiv = document.querySelector ".ace_content" # Also the editor.
# Set hover-related listeners.
@pdfDiv.addEventListener "mouseleave", @handlePdfDivMouseLeave
@pdfDiv.addEventListener "mouseenter", @handlePdfDivMouseEnter
@aceDiv.addEventListener "mouseleave", @handleAceDivMouseLeave
@aceDiv.addEventListener "mouseenter", @handleAceDivMouseEnter
# Handler for wheel events on the PDF. # Handler for wheel events on the PDF.
# If the pointer is over Ace, grab the event, prevent default behaviour # If the pointer is over Ace, grab the event, prevent default behaviour
# and dispatch it to Ace. # and dispatch it to Ace.
dispatchToAce = (e) => @dispatchToAce = (e) =>
if @isOverAce if @isOverAce
# If this is logged, the problem just happened: the event arrived # If this is logged, the problem just happened: the event arrived
# here (the PDF wheel handler), but it should've gone to Ace. # here (the PDF wheel handler), but it should've gone to Ace.
@ -56,4 +74,7 @@ define [
# editor. # editor.
e.preventDefault() e.preventDefault()
$scope.$on "loaded", () =>
@setListeners()