How to use matrix values from jQuery Panzoom plugin

Question

I'm using the jQuery plugin Panzoom (https://github.com/timmywil/jquery.panzoom). When the user pans, it applies a CSS matrix transform. I'm only interested in the X and Y values of this matrix, which the JS file assigns as matrix[4] and matrix[5] respectively. Here's the relevant code (I think):

pan: function(x, y, options) {
        if (this.options.disablePan) { return; }
        if (!options) { options = {}; }
        var matrix = options.matrix;
        if (!matrix) {
            matrix = this.getMatrix();
        }
        // Cast existing matrix values to numbers
        if (options.relative) {
            x += +matrix[4];
            y += +matrix[5];
        }
        matrix[4] = x;
        matrix[5] = y;
        this.setMatrix(matrix, options);
        if (!options.silent) {
            this._trigger('pan', matrix[4], matrix[5]);
        }
    },

I want to use these values to show/hide something else. For example, if the user pans more than 400px in the x direction, a div appears.

When I put the following in a script at the end of the body:

(function(){
    if (matrix[4] > 400) {
      $('.textcontainer').show();
    }
    else {
      $('.textcontainer').hide();
    }
})();

I keep getting the error "matrix is not defined." How to I reference these values that are already being computed by the Panzoom file?

Thanks for the help.

Garrett

score 0 · Answer 1 · answered Dec 16 '16 at 20:50

If anyone was curious, I figured it out. I just added the extra script in the Panzoom JS file - at the end of the relevant section. Duh.

Here's how it looks:

pan: function(x, y, options) {
    if (this.options.disablePan) { return; }
    if (!options) { options = {}; }
    var matrix = options.matrix;
    if (!matrix) {
        matrix = this.getMatrix();
    }
    // Cast existing matrix values to numbers
    if (options.relative) {
        x += +matrix[4];
        y += +matrix[5];
    }
    matrix[4] = x;
    matrix[5] = y;
    this.setMatrix(matrix, options);
    if (!options.silent) {
        this._trigger('pan', matrix[4], matrix[5]);
    }
    if (x > 400) {
        $('.textcontainer').show();
    }
    else {
        $('.textcontainer').hide();
    }
},

How to use matrix values from jQuery Panzoom plugin

1 Answers1