CSSMatrix equivalent in Firefox?

Question

I'm currently developing a tiny "draggable for mobile widget", basically it implements only part of the interface of the jQUery UI Draggable widget (The part I needed for my project).

I Know I can simulate the mouse events and make the jQuery UI Draggable to work properly on the mobile/tablet platforms, but the main issue with that approach is that it does not feel smooth enough, and since the CSS3 Transforms are hardware accelerated, using translate3d instead of changing the top, left properties made a huge difference as you can see here:

http://dl.dropbox.com/u/16252882/royws/td/demo/touchdraggable.html

I was planning to make it work for IE10 and latest Firefox too, so in the code I was using WebkitCSSMatrix to parse the matrix. I googled it and found that for IE10 I can use the MSCSSMatrix to parse the matrix, but I cannot find a similar class in firefox.

I'm only using now the M.e and M.f properties of the Matrix, as you can see here,

https://github.com/royriojas/touch-draggable/blob/master/src/touch-draggable.js

so I know I can parse it manually. If there is no other option, I will have to do it that way, I was just wondering if anyone knew how to do that, the easy way in firefox :)

Answer 1

So I couldn't find the equivalent class, but here is what I used to fill the gap, It feels weird answer my own question by the way!

var isMoz = $.browser.mozilla; //TODO: check for a property detection instead of a browser sniffing

 var reMatrix = /matrix\(\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*,\s*-?\d+(?:\.\d+)?\s*\,\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*\)/;

$.getMatrix = function (transformString) {

  if (isMoz) {
    //TODO: I couldn't find the equivalent for WebKitCSSMatrix class in firefox

    //Other values are being ignored for now cause I don't really need them now
    var dummyMatrix = {
      e : 0,
      f : 0
    };

    var match = transformString.match(reMatrix);
    if (match) {
      dummyMatrix.e = match[1];
      dummyMatrix.f = match[2];
    }
    return dummyMatrix;
  }
  if (pEnabled) {
    return new MSCSSMatrix(transformString);
  }
  return new WebKitCSSMatrix(transformString);
};

I only care about the M.e and M.f properties for now.

Also the regular expression was "borrowed" from TouchScroll source code!

Answer 2

I know this is quite a few months late, but if you're still interested, I found (and helped fix) a CSSMatrix shim for a project I worked on. The linked version is not immediately browser-ready (and slightly behind my fork), so if you just want to copy the code and go, feel free to check out the browserified version (which more closely matches the WebKitCSSMatrix object).

Answer 3

This comes rather late to the game, but maybe this will help future readers. I just built a class that does exactly this. It provides an object called 'CSSMatrix' that matches every method of WebKitCSSMatrix identically. Here's a live demo comparing them side by side. Hope this helps!