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);
break;
}
}
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) {
dom.style[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.
