define("dojox/html/ext-dojo/style", ["dojo/_base/kernel", "dojo/dom-style", "dojo/_base/lang", "dojo/_base/html", "dojo/_base/sniff", "dojo/_base/window", "dojo/dom", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-attr"], function(kernel, domStyle, lang, Html, has, win, DOM, DOMConstruct, DOMStyle, DOMAttr){ kernel.experimental("dojox.html.ext-dojo.style"); var st = lang.getObject("dojox.html.ext-dojo.style", true); var HtmlX = lang.getObject("dojox.html"); // summary: // Extensions to dojo.style adding the css3 "transform" and "transform-origin" properties on IE5.5+ // description: // A Package to extend the dojo.style function // Supported transformation functions: // matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, skewX, skewY, skew lang.mixin(HtmlX["ext-dojo"].style, { supportsTransform: true, _toPx: function(measure){ var ds = Html.style, _conversion = this._conversion; if(typeof measure === "number"){ return measure + "px"; }else if(measure.toLowerCase().indexOf("px") != -1){ return measure; } // "native" conversion in px !_conversion.parentNode && DOMConstruct.place(_conversion, win.body()); ds(_conversion, "margin", measure); return ds(_conversion, "margin"); }, init: function(){ var docStyle = win.doc.documentElement.style, extStyle = HtmlX["ext-dojo"].style, sget = DOMStyle.get, sset = DOMStyle.set; DOMStyle.get = function(/*DOMNode|String*/ node, /*String|Object*/ name){ var tr = (name == "transform"), to = (name == "transformOrigin"); if(tr){ return extStyle.getTransform(node); }else if(to){ return extStyle.getTransformOrigin(node); }else{ return arguments.length == 2 ? sget(node, name) : sget(node); } }; DOMStyle.set = function(/*DOMNode|String*/ node, /*String|Object*/ name, /*String?*/ value){ var tr = (name == "transform"), to = (name == "transformOrigin"), n = DOM.byId(node) ; if(tr){ return extStyle.setTransform(n, value, true); }else if(to){ return extStyle.setTransformOrigin(n, value); }else{ return arguments.length == 3 ? sset(n, name, value) : sset(n, name); } }; // prefixes and property names for(var i = 0, tPrefix = ["WebkitT", "MozT", "OT", "msT", "t"]; i < tPrefix.length; i++){ if(typeof docStyle[tPrefix[i] + "ransform"] !== "undefined"){ this.tPropertyName = tPrefix[i] + "ransform"; } if(typeof docStyle[tPrefix[i] + "ransformOrigin"] !== "undefined"){ this.toPropertyName = tPrefix[i] + "ransformOrigin"; } } if(this.tPropertyName){ this.setTransform = function(/*DomNode*/node, /*String*/ transform){ return DOMStyle.set(node, this.tPropertyName, transform); }; this.getTransform = function(/*DomNode*/node){ return DOMStyle.get(node, this.tPropertyName); }; }else if(has("ie")){ this.setTransform = this._setTransformFilter; this.getTransform = this._getTransformFilter; } if(this.toPropertyName){ this.setTransformOrigin = function(/*DomNode*/node, /*String*/ transformOrigin){ return sset(node, this.toPropertyName, transformOrigin); }; this.getTransformOrigin = function(/*DomNode*/node){ return sget(node, this.toPropertyName); }; }else if(has("ie")){ this.setTransformOrigin = this._setTransformOriginFilter; this.getTransformOrigin = this._getTransformOriginFilter; }else{ this.supportsTransform = false; } this._conversion = DOMConstruct.create("div", { style: { position: "absolute", top: "-100px", left: "-100px", fontSize: 0, width: "0", backgroundPosition: "50% 50%" } }); }, _notSupported: function(){ console.warn("Sorry, this browser doesn't support transform and transform-origin"); }, _setTransformOriginFilter: function(/*DomNode*/ node, /*String*/ transformOrigin){ var to = lang.trim(transformOrigin) .replace(" top", " 0") .replace("left ", "0 ") .replace(" center", "50%") .replace("center ", "50% ") .replace(" bottom", " 100%") .replace("right ", "100% ") .replace(/\s+/, " "), toAry = to.split(" "), n = DOM.byId(node), t = this.getTransform(n), validOrigin = true ; for(var i = 0; i < toAry.length; i++){ validOrigin = validOrigin && /^0|(\d+(%|px|pt|in|pc|mm|cm))$/.test(toAry[i]); if(toAry[i].indexOf("%") == -1){ toAry[i] = this._toPx(toAry[i]); } } if(!validOrigin || !toAry.length || toAry.length > 2 ){ return transformOrigin; } Html.attr(n, "dojo-transform-origin", toAry.join(" ")); t && this.setTransform(node, t); return transformOrigin; }, _getTransformOriginFilter: function(/*DomNode*/ node){ return Html.attr(node, "dojo-transform-origin") || "50% 50%"; }, _setTransformFilter: function(/*DomNode*/ node, /*String*/ transform){ // Using the Matrix Filter to implement the transform property on IE var t = transform.replace(/\s/g, ""), n = DOM.byId(node), transforms = t.split(")"), toRad = 1, toRad1 = 1, mstr = "DXImageTransform.Microsoft.Matrix", hasAttr = DOMAttr.has, attr = Html.attr, // Math functions PI = Math.PI, cos = Math.cos, sin = Math.sin, tan = Math.tan, max = Math.max, min = Math.min, abs = Math.abs, degToRad = PI/180, gradToRad = PI/200, // current transform ct = "", currentTransform = "", matchingTransforms = [], x0 = 0, y0 = 0, dx = 0, dy = 0, xc = 0, yc = 0, a = 0, // default transform, identity matrix m11 = 1, m12 = 0, m21 = 0, m22 = 1, // no translation tx = 0, ty = 0, props = [m11, m12, m21, m22, tx, ty], hasMatrix = false, ds = Html.style, newPosition = ds(n, "position") == "absolute" ? "absolute" : "relative", w = ds(n, "width") + ds(n, "paddingLeft") + ds(n, "paddingRight"), h = ds(n, "height") + ds(n, "paddingTop") + ds(n, "paddingBottom"), toPx = this._toPx ; !hasAttr(n, "dojo-transform-origin") && this.setTransformOrigin(n, "50% 50%"); for(var i = 0, l = transforms.length; i < l; i++){ matchingTransforms = transforms[i].match(/matrix|rotate|scaleX|scaleY|scale|skewX|skewY|skew|translateX|translateY|translate/); currentTransform = matchingTransforms ? matchingTransforms[0] : ""; switch(currentTransform){ case "matrix": // generic transformation // // matrix: // m11 m12 // // m21 m22 // ct = transforms[i].replace(/matrix\(|\)/g, ""); var matrix = ct.split(","); m11 = props[0]*matrix[0] + props[1]*matrix[2]; m12 = props[0]*matrix[1] + props[1]*matrix[3]; m21 = props[2]*matrix[0] + props[3]*matrix[2]; m22 = props[2]*matrix[1] + props[3]*matrix[3]; tx = props[4] + matrix[4]; ty = props[5] + matrix[5]; break; case "rotate": // rotate // // rotation angle: // a (rad, deg or grad) // // matrix: // cos(a) -sin(a) // // sin(a) cos(a) // ct = transforms[i].replace(/rotate\(|\)/g, ""); toRad = ct.indexOf("deg") != -1 ? degToRad : ct.indexOf("grad") != -1 ? gradToRad : 1; a = parseFloat(ct)*toRad; var s = sin(a), c = cos(a) ; m11 = props[0]*c + props[1]*s; m12 = -props[0]*s + props[1]*c; m21 = props[2]*c + props[3]*s; m22 = -props[2]*s + props[3]*c; break; case "skewX": // skewX // // skew angle: // a (rad, deg or grad) // // matrix: // 1 tan(a) // // 0 1 // ct = transforms[i].replace(/skewX\(|\)/g, ""); toRad = ct.indexOf("deg") != -1 ? degToRad : ct.indexOf("grad") != -1 ? gradToRad : 1; var ta = tan(parseFloat(ct)*toRad); m11 = props[0]; m12 = props[0]*ta + props[1]; m21 = props[2]; m22 = props[2]*ta + props[3]; break; case "skewY": // skewY // // skew angle: // a (rad, deg or grad) // // matrix: // 1 0 // // tan(a) 1 // ct = transforms[i].replace(/skewY\(|\)/g, ""); toRad = ct.indexOf("deg") != -1 ? degToRad : ct.indexOf("grad") != -1 ? gradToRad : 1; ta = tan(parseFloat(ct)*toRad); m11 = props[0] + props[1]*ta; m12 = props[1]; m21 = props[2] + props[3]*ta; m22 = props[3]; break; case "skew": // skew // // skew angles: // a0 (rad, deg or grad) // a1 (rad, deg or grad) // // matrix: // 1 tan(a0) // // tan(a1) 1 // ct = transforms[i].replace(/skew\(|\)/g, ""); var skewAry = ct.split(","); skewAry[1] = skewAry[1] || "0"; toRad = skewAry[0].indexOf("deg") != -1 ? degToRad : skewAry[0].indexOf("grad") != -1 ? gradToRad : 1; toRad1 = skewAry[1].indexOf("deg") != -1 ? degToRad : skewAry[1].indexOf("grad") != -1 ? gradToRad : 1; var a0 = tan(parseFloat(skewAry[0])*toRad), a1 = tan(parseFloat(skewAry[1])*toRad1) ; m11 = props[0] + props[1]*a1; m12 = props[0]*a0 + props[1]; m21 = props[2]+ props[3]*a1; m22 = props[2]*a0 + props[3]; break; case "scaleX": // scaleX // // scale factor: // sx // // matrix: // sx 0 // // 0 1 // ct = parseFloat(transforms[i].replace(/scaleX\(|\)/g, "")) || 1; m11 = props[0]*ct; m12 = props[1]; m21 = props[2]*ct; m22 = props[3]; break; case "scaleY": // scaleY // // scale factor: // sy // // matrix: // 1 0 // // 0 sy // ct = parseFloat(transforms[i].replace(/scaleY\(|\)/g, "")) || 1; m11 = props[0]; m12 = props[1]*ct; m21 = props[2]; m22 = props[3]*ct; break; case "scale": // scale // // scale factor: // sx, sy // // matrix: // sx 0 // // 0 sy // ct = transforms[i].replace(/scale\(|\)/g, ""); var scaleAry = ct.split(","); scaleAry[1] = scaleAry[1] || scaleAry[0]; m11 = props[0]*scaleAry[0]; m12 = props[1]*scaleAry[1]; m21 = props[2]*scaleAry[0]; m22 = props[3]*scaleAry[1]; break; case "translateX": ct = parseInt(transforms[i].replace(/translateX\(|\)/g, "")) || 1; m11 = props[0]; m12 = props[1]; m21 = props[2]; m22 = props[3]; tx = toPx(ct); tx && attr(n, "dojo-transform-matrix-tx", tx); break; case "translateY": ct = parseInt(transforms[i].replace(/translateY\(|\)/g, "")) || 1; m11 = props[0]; m12 = props[1]; m21 = props[2]; m22 = props[3]; ty = toPx(ct); ty && attr(n, "dojo-transform-matrix-ty", ty); break; case "translate": ct = transforms[i].replace(/translate\(|\)/g, ""); m11 = props[0]; m12 = props[1]; m21 = props[2]; m22 = props[3]; var translateAry = ct.split(","); translateAry[0] = parseInt(toPx(translateAry[0])) || 0; translateAry[1] = parseInt(toPx(translateAry[1])) || 0; tx = translateAry[0]; ty = translateAry[1]; tx && attr(n, "dojo-transform-matrix-tx", tx); ty && attr(n, "dojo-transform-matrix-ty", ty); break; } props = [m11, m12, m21, m22, tx, ty]; } // test var Bx = min(w*m11 + h*m12, min(min(w*m11, h*m12), 0)), By = min(w*m21 + h*m22, min(min(w*m21, h*m22), 0)) ; dx = -Bx; dy = -By; if(has("ie") < 8){ // on IE < 8 the node must have hasLayout = true n.style.zoom = "1"; if(newPosition != "absolute"){ var parentWidth = ds(node.parentNode, "width"), tw = abs(w*m11), th = abs(h*m12), wMax = max(tw + th, max(max(th, tw), 0)) ; dx -= (wMax - w) / 2 - (parentWidth > wMax ? 0 : (wMax - parentWidth) / 2); } }else if(has("ie") == 8){ // IE8 bug, a filter is applied to positioned descendants // only if the parent has z-index ds(n, "zIndex") == "auto" && (n.style.zIndex = "0"); } try{ hasMatrix = !!n.filters.item(mstr); }catch(e){ hasMatrix = false; } if(hasMatrix){ n.filters.item(mstr).M11 = m11; n.filters.item(mstr).M12 = m12; n.filters.item(mstr).M21 = m21; n.filters.item(mstr).M22 = m22; // use 'nearest' for a faster transform n.filters.item(mstr).filterType = 'bilinear'; n.filters.item(mstr).Dx = 0; n.filters.item(mstr).Dy = 0; n.filters.item(mstr).sizingMethod = 'auto expand'; }else{ n.style.filter += " progid:" + mstr + "(M11=" + m11 + ",M12=" + m12 + ",M21=" + m21 + ",M22=" + m22 + ",FilterType='bilinear',Dx=0,Dy=0,sizingMethod='auto expand')" ; } tx = parseInt(attr(n, "dojo-transform-matrix-tx") || "0"); ty = parseInt(attr(n, "dojo-transform-matrix-ty") || "0"); // transform origin var toAry = attr(n, "dojo-transform-origin").split(" "); for(i = 0; i < 2; i++){ toAry[i] = toAry[i] || "50%"; } xc = (toAry[0].toString().indexOf("%") != -1) ? w * parseInt(toAry[0]) * .01 : toAry[0]; yc = (toAry[1].toString().indexOf("%") != -1) ? h * parseInt(toAry[1]) * .01 : toAry[1]; if(hasAttr(n, "dojo-startX")){ x0 = parseInt(attr(n, "dojo-startX")); }else{ x0 = parseInt(ds(n, "left")); attr(n, "dojo-startX", newPosition == "absolute" ? x0 : "0"); } if(hasAttr(n, "dojo-startY")){ y0 = parseInt(attr(n, "dojo-startY")); }else{ y0 = parseInt(ds(n, "top")); attr(n, "dojo-startY", newPosition == "absolute" ? y0 : "0"); } ds(n, { position: newPosition, left: x0 - parseInt(dx) + parseInt(xc) - ((parseInt(xc) - tx)*m11 + (parseInt(yc) - ty)*m12) + "px", top: y0 - parseInt(dy) + parseInt(yc) - ((parseInt(xc) - tx)*m21 + (parseInt(yc) - ty)*m22) + "px" }); return transform; }, _getTransformFilter: function(/*DomNode*/ node){ try{ var n = DOM.byId(node), item = n.filters.item(0) ; return "matrix(" + item.M11 + ", " + item.M12 + ", " + item.M21 + ", " + item.M22 + ", " + (Html.attr(node, "dojo-transform-tx") || "0") + ", " + (Html.attr(node, "dojo-transform-ty") || "0") + ")"; }catch(e){ return "matrix(1, 0, 0, 1, 0, 0)"; } }, setTransform: function(){ this._notSupported(); }, setTransformOrigin: function(){ this._notSupported(); } }); HtmlX["ext-dojo"].style.init(); return Html.style; });