From 40623f1e99769f56443f83c348cacf75fb19efb7 Mon Sep 17 00:00:00 2001 From: Mark Salsbery <> Date: Wed, 5 May 2021 12:43:53 -0700 Subject: [PATCH] Re-added the OpenSeadragon.setElementPointerEventsNone() function --- changelog.txt | 1 + src/button.js | 8 ++++---- src/drawer.js | 2 +- src/navigator.js | 8 ++++---- src/openseadragon.js | 10 ++++++++++ src/referencestrip.js | 6 +++--- src/viewer.js | 2 +- 7 files changed, 24 insertions(+), 13 deletions(-) diff --git a/changelog.txt b/changelog.txt index fb81ebef..e3c57618 100644 --- a/changelog.txt +++ b/changelog.txt @@ -50,6 +50,7 @@ OPENSEADRAGON CHANGELOG * Fixed a bug where the ajaxHeaders provided per-image were not being used for image requests (#1968 @maxshuty) * MouseTracker: Added workaround for WebKit Pointer Event Implicit Capture Bug (#1972 @msalsbery) * Removed test for move-leave (fly-over, no enter event)...not a valid, handleable event state, no longer supported (#1972 @msalsbery) +* Added OpenSeadragon.setElementPointerEvents() for setting pointer-events to other values besides 'none' on DOM elements (#1972 @msalsbery) 2.4.2: diff --git a/src/button.js b/src/button.js index ecf3101f..7abee6a7 100644 --- a/src/button.js +++ b/src/button.js @@ -140,10 +140,10 @@ $.Button = function( options ) { // Allow pointer events to pass through the img elements so implicit // pointer capture works on touch devices - $.setElementPointerEvents( this.imgRest, 'none' ); - $.setElementPointerEvents( this.imgGroup, 'none' ); - $.setElementPointerEvents( this.imgHover, 'none' ); - $.setElementPointerEvents( this.imgDown, 'none' ); + $.setElementPointerEventsNone( this.imgRest ); + $.setElementPointerEventsNone( this.imgGroup ); + $.setElementPointerEventsNone( this.imgHover ); + $.setElementPointerEventsNone( this.imgDown ); this.element.style.position = "relative"; $.setElementTouchActionNone( this.element ); diff --git a/src/drawer.js b/src/drawer.js index a022850a..fca4b956 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -128,7 +128,7 @@ $.Drawer = function( options ) { $.setElementOpacity( this.canvas, this.opacity, true ); // Allow pointer events to pass through the canvas element so implicit // pointer capture works on touch devices - $.setElementPointerEvents( this.canvas, 'none' ); + $.setElementPointerEventsNone( this.canvas ); $.setElementTouchActionNone( this.canvas ); // explicit left-align diff --git a/src/navigator.js b/src/navigator.js index bb79be7e..5414a53e 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -167,7 +167,7 @@ $.Navigator = function( options ){ style.zIndex = 999999999; style.cursor = 'default'; }( this.displayRegion.style, this.borderWidth )); - $.setElementPointerEvents( this.displayRegion, 'none' ); + $.setElementPointerEventsNone( this.displayRegion ); $.setElementTouchActionNone( this.displayRegion ); this.displayRegionContainer = $.makeNeutralElement("div"); @@ -175,7 +175,7 @@ $.Navigator = function( options ){ this.displayRegionContainer.className = "displayregioncontainer"; this.displayRegionContainer.style.width = "100%"; this.displayRegionContainer.style.height = "100%"; - $.setElementPointerEvents( this.displayRegionContainer, 'none' ); + $.setElementPointerEventsNone( this.displayRegionContainer ); $.setElementTouchActionNone( this.displayRegionContainer ); viewer.addControl( @@ -246,8 +246,8 @@ $.Navigator = function( options ){ // pointer capture works on touch devices //TODO an alternative is to attach the new MouseTracker to this.canvas...not // sure why it isn't already (see MouseTracker constructor call above) - $.setElementPointerEvents( this.canvas, 'none' ); - $.setElementPointerEvents( this.container, 'none' ); + $.setElementPointerEventsNone( this.canvas ); + $.setElementPointerEventsNone( this.container ); this.addHandler("reset-size", function() { if (_this.viewport) { diff --git a/src/openseadragon.js b/src/openseadragon.js index 5a9814b9..01cfc864 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -1924,6 +1924,16 @@ function OpenSeadragon( options ){ }, + /** + * Sets the specified element's pointer-events style attribute to 'none'. + * @function + * @param {Element|String} element + */ + setElementPointerEventsNone: function( element ) { + $.setElementPointerEvents( element, 'none' ); + }, + + /** * Add the specified CSS class to the element if not present. * @function diff --git a/src/referencestrip.js b/src/referencestrip.js index 7e27519f..20dd9ea9 100644 --- a/src/referencestrip.js +++ b/src/referencestrip.js @@ -196,7 +196,7 @@ $.ReferenceStrip = function ( options ) { element.style.styleFloat = 'left'; //IE element.style.padding = '2px'; $.setElementTouchActionNone( element ); - $.setElementPointerEvents( element, 'none' ); + $.setElementPointerEventsNone( element ); this.element.appendChild( element ); @@ -458,8 +458,8 @@ function loadPanels( strip, viewerSize, scroll ) { } ); // Allow pointer events to pass through miniViewer's canvas/container // elements so implicit pointer capture works on touch devices - $.setElementPointerEvents( miniViewer.canvas, 'none' ); - $.setElementPointerEvents( miniViewer.container, 'none' ); + $.setElementPointerEventsNone( miniViewer.canvas ); + $.setElementPointerEventsNone( miniViewer.container ); // We'll use event delegation from the reference strip element instead of // handling events on every miniViewer miniViewer.innerTracker.setTracking( false ); diff --git a/src/viewer.js b/src/viewer.js index 77458d6d..ba3c1e2a 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -408,7 +408,7 @@ $.Viewer = function( options ) { // Overlay container this.overlaysContainer = $.makeNeutralElement( "div" ); - $.setElementPointerEvents( this.overlaysContainer, 'none' ); + $.setElementPointerEventsNone( this.overlaysContainer ); $.setElementTouchActionNone( this.overlaysContainer ); this.canvas.appendChild( this.overlaysContainer );