Missing browser zoom change event about detect-zoom

[jkronegg]

I've implemented this behavior by adding the following code into the DetectZoomvariable:

previousBrowserZoomDetectionValue:0,
previousBrowserZoomValue:0,
zoomChangeEventListeners:[],
/**
 * Initializes the event detection listener. 
 */
initialize: function() {
      setInterval(function () {
            var zoomDetectionValue;
            if (screen.deviceXDPI) {
                    // MSIE8, MSIE9 => detect the browser zoom change (without false positive when the window is resized)
                    zoomDetectionValue = screen.deviceXDPI;
            } else {
                    // other browser => detect the browser zoom change (with false positive when the window is resized)
                    zoomDetectionValue = document.body.offsetWidth;
            }

            if (DetectZoom.previousBrowserZoomDetectionValue==0) {
                    // first time => initialize
                    DetectZoom.previousBrowserZoomDetectionValue  = zoomDetectionValue;
                    DetectZoom.previousBrowserZoomValue = DetectZoom.zoom();
            }
            if (zoomDetectionValue!=DetectZoom.previousBrowserZoomDetectionValue) {
                    // changed width or DPI => do further checks 
                    // Implementation note: under browsers other than MSIE8 and MSIE9, there may be a window resize or a browser zoom change, so we check it.
                    var currentZoomValue = DetectZoom.zoom();
                    if (currentZoomValue!=DetectZoom.previousBrowserZoomValue) {
                            // changed zoom level => call event callbacks
                            for (var i=0; i<DetectZoom.zoomChangeEventListeners.length; i++) {
                                    DetectZoom.zoomChangeEventListeners[i](DetectZoom.previousBrowserZoomValue, currentZoomValue);
                            }
                            DetectZoom.previousBrowserZoomDetectionValue = zoomDetectionValue;
                            DetectZoom.previousBrowserZoomValue = currentZoomValue;
                    }
            }
      }, 200);
},

/**
 * Add a new zoom change event listener. The callback function receive two parameters:
 * 
 *    function myCallback(previousZoomValue, newZoomValue) { ...}
 * 
 */
addZoomChangeEventListener : function(callback) {
      DetectZoom.zoomChangeEventListeners.push(callback);
}

Then I initialized the timer function:

DetectZoom.initialize();

[tombigel]

I don't really understand the way you check for the change.
Why use a timer?

I do agree that saving the last zoom value, comparing it on resize to the new one and firing a 'zoom' event can be a nice addition.

Will consider it

[jkronegg]

Since calling DetectZoom.zoom() costs a lot, I used a low cost detection value (screen.deviceXDPI or document.body.offsetWidth) to determine a potential zoom change (potential because the low cost detection method has false positive). This principle also could be used for caching the DetectZoom.zoom() result.
Regarding the timer, I made a new try with a body.onresize which is fired when the body is resized or when the zoom level changes (tested under MSIE9, Firefox17, Chrome24). So yes, the timer could be replaced by the onresize event (I don't really remember why I used a timer; will check the full code at work).

[tombigel]

I get what your'e saying, but resize/zoom events doesn't happen so often, so I don't feel that the cost (besides FF maybe) of zoom() is so significant.

Do you have a test case where performance could be important for detecting zoom level?

[iangilman]

Resize events happen continuously while the user is dragging the window's resize control. You likely at least want to throttle/debounce those.

[tombigel]

Yeah, that's right.
But this is the responsibility of the implementer (as I see it).

For example, where I work we implemented a 'resizeend' event exactly for
this kind of actions where on resize a timer is set for about 100-150ms and
only if there was no other resize in this time frame the 'resizeend' event
is dispatched.

On Jan 29, 2013, at 0:35, iangilman [email protected] wrote:

Resize events happen continuously while the user is dragging the window's
resize control. You likely at least want to throttle/debounce those.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/19#issuecomment-12809433.

[iangilman]

Sure… I'm just saying if the zoom() call is costly (I don't personally know if it is), and you end up calling it constantly while the user drags around the resize control on a window, then you're potentially in a situation where simply adding DetectZoom to your page causes performance issues during a drag resize.

I agree that basing the zoom change event on browser events is preferable to polling with an timer. I'm just saying you want to keep your resize event fast, because even though they are called infrequently, when they are called they can come in great bunches.

In fact, fast detection is probably preferable to throttling, since the developer might want to track the zoom changes during the resize drag.

[tombigel]

Well, I guess we agree :)
I think I'll just add it to the documentation for now.
Anyway, in chrome and ff there is no intelligent way to catch zoom level
and it is costly... I'm still looking, maybe in the months this code was
not maintained something interesting popped up.

On Jan 29, 2013, at 1:55, iangilman [email protected] wrote:

Sure… I'm just saying if the zoom() call is costly (I don't personally know
if it is), and you end up calling it constantly while the user drags around
the resize control on a window, then you're potentially in a situation
where simply adding DetectZoom to your page causes performance issues
during a drag resize.

I agree that basing the zoom change event on browser events is preferable
to polling with an timer. I'm just saying you want to keep your resize
event fast, because even though they are called infrequently, when they are
called they can come in great bunches.

In fact, fast detection is probably preferable to throttling, since the
developer might want to track the zoom changes during the resize drag.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/19#issuecomment-12812753.

[iangilman]

Violent agreement! Always the best :-)

Maybe file bugs against those browsers for better zoom detection and zoom event facilities? Can't hurt…

[tombigel]

Closing this for now.