diff options
| author | Tristan Zur <tzur@web.web.ccwn.org> | 2014-03-27 22:27:47 +0100 |
|---|---|---|
| committer | Tristan Zur <tzur@web.web.ccwn.org> | 2014-03-27 22:27:47 +0100 |
| commit | b62676ca5d3d6f6ba3f019ea3f99722e165a98d8 (patch) | |
| tree | 86722cb80f07d4569f90088eeaea2fc2f6e2ef94 /js/dojo-1.7.2/dojox/html/ext-dojo/style.js | |
Diffstat (limited to 'js/dojo-1.7.2/dojox/html/ext-dojo/style.js')
| -rw-r--r-- | js/dojo-1.7.2/dojox/html/ext-dojo/style.js | 457 |
1 files changed, 457 insertions, 0 deletions
diff --git a/js/dojo-1.7.2/dojox/html/ext-dojo/style.js b/js/dojo-1.7.2/dojox/html/ext-dojo/style.js new file mode 100644 index 0000000..c4cb6cc --- /dev/null +++ b/js/dojo-1.7.2/dojox/html/ext-dojo/style.js @@ -0,0 +1,457 @@ +//>>built +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; +}); |
