HTML and CSS Reference
In-Depth Information
var transformName = transformMethods[i];
if(!_.isUndefined(dummyStyle[transformName])) {
if(has3d) {
Q.positionDOM = translate3DBuilder(transformName);
} else {
Q.positionDOM = translateBuilder(transformName);
Q.scaleDOM = scaleBuilder(transformName);
Q.positionDOM = Q.positionDOM || fallbackTranslate;
Q.scaleDOM = Q.scaleDOM || function(scale) {};
To keep the functions from polluting the main Quintus.DOM namespace, notice the entire expression is
wrapped in an immediately invoked functional expression (IIFE). This enables the entire bit of code to result in
only two definitions being added to Q : Q.positionDOM and Q.scaleDOM .
The first part of the listing consists of three methods that return methods. This is a relatively tricky concept
to understand if you haven't seen it a lot before, so take a deeper look at one of those methods:
function translateBuilder(attribute) {
return function(dom,x,y) {[attribute] =
"translate(" + Math.floor(x) + "px," +
Math.floor(y) + "px)";
Notice that the entirety of translateBuilder consists of a return statement that returns a function.
The function returned uses the attribute parameter passed into the original method. This is allowed in
JavaScript because the language supports closures, which bind the definition of function to the scope in which
they were originally defined. The returned method can be used anywhere in the code base at a later point and
can keep track of the previously bound value of the attribute when it is called.
After the definition of the various binding methods, the code creates a <div> element and checks the style
attributes of that element for prefixed transform support of each of the different vendor prefixes.
It also does a WebKit-specific check for 3-D support. If you want a more general check for translate3d ,
take a look at Modernizr. Because most mobile browsers are WebKit-based, the WebKit-specific check gets you
a significant amount of mileage.
The code also creates a Q.scaleDOM method, which is used to perform a scale transform. Because there
isn't a 3-D equivalent necessary for this, the creation of the scale method is simpler.
Creating a Consistent Transition Method
Having created a consistent way to translate DOM elements as efficiently as possible for performance, you need
to do the whole thing over again to create an easy way to add transition support for browsers that support it.
Add the code in Listing 12-3 at the bottom of quintus_dom.js above the final closing curly brace.
Search WWH ::

Custom Search