Context Navigation

source: Dev/trunk/src/client/dojox/html/ext-dojo/style.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 14.3 KB

Rev	Line
[483]	1	define(["dojo/_base/kernel", "dojo/dom-style", "dojo/_base/lang", "dojo/_base/html", "dojo/_base/sniff",
	2	"dojo/_base/window", "dojo/dom", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-attr"],
	3	function(kernel, domStyle, lang, Html, has, win, DOM, DOMConstruct, DOMStyle, DOMAttr){
	4	kernel.experimental("dojox.html.ext-dojo.style");
	5	var st = lang.getObject("dojox.html.ext-dojo.style", true);
	6	var HtmlX = lang.getObject("dojox.html");
	7	// summary:
	8	// Extensions to dojo.style adding the css3 "transform" and "transform-origin" properties on IE5.5+
	9	// description:
	10	// A Package to extend the dojo.style function
	11	// Supported transformation functions:
	12	// matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, skewX, skewY, skew
	13	lang.mixin(HtmlX["ext-dojo"].style, {
	14	supportsTransform: true,
	15	_toPx: function(measure){
	16	var ds = Html.style, _conversion = this._conversion;
	17	if(typeof measure === "number"){
	18	return measure + "px";
	19	}else if(measure.toLowerCase().indexOf("px") != -1){
	20	return measure;
	21	}
	22	// "native" conversion in px
	23	!_conversion.parentNode && DOMConstruct.place(_conversion, win.body());
	24	ds(_conversion, "margin", measure);
	25	return ds(_conversion, "margin");
	26	},
	27	init: function(){
	28	var docStyle = win.doc.documentElement.style, extStyle = HtmlX["ext-dojo"].style,
	29	sget = DOMStyle.get, sset = DOMStyle.set;
	30	DOMStyle.get = function(/DOMNode\|String/ node, /String\|Object/ name){
	31	var tr = (name == "transform"),
	32	to = (name == "transformOrigin");
	33	if(tr){
	34	return extStyle.getTransform(node);
	35	}else if(to){
	36	return extStyle.getTransformOrigin(node);
	37	}else{
	38	return arguments.length == 2 ? sget(node, name) : sget(node);
	39	}
	40	};
	41	DOMStyle.set = function(/DOMNode\|String/ node, /String\|Object/ name, /String?/ value){
	42	var tr = (name == "transform"),
	43	to = (name == "transformOrigin"),
	44	n = DOM.byId(node)
	45	;
	46	if(tr){
	47	return extStyle.setTransform(n, value, true);
	48	}else if(to){
	49	return extStyle.setTransformOrigin(n, value);
	50	}else{
	51	return arguments.length == 3 ? sset(n, name, value) : sset(n, name);
	52	}
	53	};
	54	// prefixes and property names
	55	for(var i = 0, tPrefix = ["WebkitT", "MozT", "OT", "msT", "t"]; i < tPrefix.length; i++){
	56	if(typeof docStyle[tPrefix[i] + "ransform"] !== "undefined"){
	57	this.tPropertyName = tPrefix[i] + "ransform";
	58	}
	59	if(typeof docStyle[tPrefix[i] + "ransformOrigin"] !== "undefined"){
	60	this.toPropertyName = tPrefix[i] + "ransformOrigin";
	61	}
	62	}
	63	if(this.tPropertyName){
	64	this.setTransform = function(/DomNode/node, /String/ transform){
	65	return sset(node, this.tPropertyName, transform);
	66	};
	67	this.getTransform = function(/DomNode/node){
	68	return sget(node, this.tPropertyName);
	69	};
	70	}else if(has("ie")){
	71	this.setTransform = this._setTransformFilter;
	72	this.getTransform = this._getTransformFilter;
	73	}
	74	if(this.toPropertyName){
	75	this.setTransformOrigin = function(/DomNode/node, /String/ transformOrigin){
	76	return sset(node, this.toPropertyName, transformOrigin);
	77	};
	78	this.getTransformOrigin = function(/DomNode/node){
	79	return sget(node, this.toPropertyName);
	80	};
	81	}else if(has("ie")){
	82	this.setTransformOrigin = this._setTransformOriginFilter;
	83	this.getTransformOrigin = this._getTransformOriginFilter;
	84	}else{
	85	this.supportsTransform = false;
	86	}
	87	this._conversion = DOMConstruct.create("div", {
	88	style: {
	89	position: "absolute",
	90	top: "-100px",
	91	left: "-100px",
	92	fontSize: 0,
	93	width: "0",
	94	backgroundPosition: "50% 50%"
	95	}
	96	});
	97	},
	98	_notSupported: function(){
	99	console.warn("Sorry, this browser doesn't support transform and transform-origin");
	100	},
	101	_setTransformOriginFilter: function(/DomNode/ node, /String/ transformOrigin){
	102	var to = lang.trim(transformOrigin)
	103	.replace(" top", " 0")
	104	.replace("left ", "0 ")
	105	.replace(" center", "50%")
	106	.replace("center ", "50% ")
	107	.replace(" bottom", " 100%")
	108	.replace("right ", "100% ")
	109	.replace(/\s+/, " "),
	110	toAry = to.split(" "),
	111	n = DOM.byId(node),
	112	t = this.getTransform(n),
	113	validOrigin = true
	114	;
	115	for(var i = 0; i < toAry.length; i++){
	116	validOrigin = validOrigin && /^0\|(\d+(%\|px\|pt\|in\|pc\|mm\|cm))$/.test(toAry[i]);
	117	if(toAry[i].indexOf("%") == -1){
	118	toAry[i] = this._toPx(toAry[i]);
	119	}
	120	}
	121	if(!validOrigin \|\| !toAry.length \|\| toAry.length > 2 ){
	122	return transformOrigin;
	123	}
	124	Html.attr(n, "dojo-transform-origin", toAry.join(" "));
	125	t && this.setTransform(node, t);
	126	return transformOrigin;
	127	},
	128	_getTransformOriginFilter: function(/DomNode/ node){
	129	return Html.attr(node, "dojo-transform-origin") \|\| "50% 50%";
	130	},
	131	_setTransformFilter: function(/DomNode/ node, /String/ transform){
	132	// Using the Matrix Filter to implement the transform property on IE
	133	var t = transform.replace(/\s/g, ""),
	134	n = DOM.byId(node),
	135	transforms = t.split(")"),
	136	toRad = 1, toRad1 = 1,
	137	mstr = "DXImageTransform.Microsoft.Matrix",
	138	hasAttr = DOMAttr.has,
	139	attr = Html.attr,
	140	// Math functions
	141	PI = Math.PI, cos = Math.cos, sin = Math.sin, tan = Math.tan, max = Math.max, min = Math.min, abs = Math.abs,
	142	degToRad = PI/180, gradToRad = PI/200,
	143
	144	// current transform
	145	ct = "", currentTransform = "",
	146	matchingTransforms = [],
	147	x0 = 0, y0 = 0, dx = 0, dy = 0, xc = 0, yc = 0, a = 0,
	148
	149	// default transform, identity matrix
	150	m11 = 1, m12 = 0, m21 = 0, m22 = 1,
	151
	152	// no translation
	153	tx = 0, ty = 0,
	154	props = [m11, m12, m21, m22, tx, ty],
	155	hasMatrix = false,
	156	ds = Html.style,
	157	newPosition = ds(n, "position") == "absolute" ? "absolute" : "relative",
	158	w = ds(n, "width") + ds(n, "paddingLeft") + ds(n, "paddingRight"),
	159	h = ds(n, "height") + ds(n, "paddingTop") + ds(n, "paddingBottom"),
	160	toPx = this._toPx
	161	;
	162
	163	!hasAttr(n, "dojo-transform-origin") && this.setTransformOrigin(n, "50% 50%");
	164
	165	for(var i = 0, l = transforms.length; i < l; i++){
	166	matchingTransforms = transforms[i].match(/matrix\|rotate\|scaleX\|scaleY\|scale\|skewX\|skewY\|skew\|translateX\|translateY\|translate/);
	167	currentTransform = matchingTransforms ? matchingTransforms[0] : "";
	168	switch(currentTransform){
	169	case "matrix":
	170	// generic transformation
	171	//
	172	// matrix:
	173	// m11 m12
	174	//
	175	// m21 m22
	176	//
	177	ct = transforms[i].replace(/matrix\(\|\)/g, "");
	178	var matrix = ct.split(",");
	179	m11 = props[0]matrix[0] + props[1]matrix[2];
	180	m12 = props[0]matrix[1] + props[1]matrix[3];
	181	m21 = props[2]matrix[0] + props[3]matrix[2];
	182	m22 = props[2]matrix[1] + props[3]matrix[3];
	183	tx = props[4] + matrix[4];
	184	ty = props[5] + matrix[5];
	185	break;
	186	case "rotate":
	187	// rotate
	188	//
	189	// rotation angle:
	190	// a (rad, deg or grad)
	191	//
	192	// matrix:
	193	// cos(a) -sin(a)
	194	//
	195	// sin(a) cos(a)
	196	//
	197	ct = transforms[i].replace(/rotate\(\|\)/g, "");
	198	toRad = ct.indexOf("deg") != -1 ? degToRad : ct.indexOf("grad") != -1 ? gradToRad : 1;
	199	a = parseFloat(ct)*toRad;
	200	var s = sin(a),
	201	c = cos(a)
	202	;
	203	m11 = props[0]c + props[1]s;
	204	m12 = -props[0]s + props[1]c;
	205	m21 = props[2]c + props[3]s;
	206	m22 = -props[2]s + props[3]c;
	207	break;
	208	case "skewX":
	209	// skewX
	210	//
	211	// skew angle:
	212	// a (rad, deg or grad)
	213	//
	214	// matrix:
	215	// 1 tan(a)
	216	//
	217	// 0 1
	218	//
	219	ct = transforms[i].replace(/skewX\(\|\)/g, "");
	220	toRad = ct.indexOf("deg") != -1 ? degToRad : ct.indexOf("grad") != -1 ? gradToRad : 1;
	221	var ta = tan(parseFloat(ct)*toRad);
	222	m11 = props[0];
	223	m12 = props[0]*ta + props[1];
	224	m21 = props[2];
	225	m22 = props[2]*ta + props[3];
	226	break;
	227	case "skewY":
	228	// skewY
	229	//
	230	// skew angle:
	231	// a (rad, deg or grad)
	232	//
	233	// matrix:
	234	// 1 0
	235	//
	236	// tan(a) 1
	237	//
	238	ct = transforms[i].replace(/skewY\(\|\)/g, "");
	239	toRad = ct.indexOf("deg") != -1 ? degToRad : ct.indexOf("grad") != -1 ? gradToRad : 1;
	240	ta = tan(parseFloat(ct)*toRad);
	241	m11 = props[0] + props[1]*ta;
	242	m12 = props[1];
	243	m21 = props[2] + props[3]*ta;
	244	m22 = props[3];
	245	break;
	246	case "skew":
	247	// skew
	248	//
	249	// skew angles:
	250	// a0 (rad, deg or grad)
	251	// a1 (rad, deg or grad)
	252	//
	253	// matrix:
	254	// 1 tan(a0)
	255	//
	256	// tan(a1) 1
	257	//
	258	ct = transforms[i].replace(/skew\(\|\)/g, "");
	259	var skewAry = ct.split(",");
	260	skewAry[1] = skewAry[1] \|\| "0";
	261	toRad = skewAry[0].indexOf("deg") != -1 ? degToRad : skewAry[0].indexOf("grad") != -1 ? gradToRad : 1;
	262	toRad1 = skewAry[1].indexOf("deg") != -1 ? degToRad : skewAry[1].indexOf("grad") != -1 ? gradToRad : 1;
	263	var a0 = tan(parseFloat(skewAry[0])*toRad),
	264	a1 = tan(parseFloat(skewAry[1])*toRad1)
	265	;
	266	m11 = props[0] + props[1]*a1;
	267	m12 = props[0]*a0 + props[1];
	268	m21 = props[2]+ props[3]*a1;
	269	m22 = props[2]*a0 + props[3];
	270	break;
	271	case "scaleX":
	272	// scaleX
	273	//
	274	// scale factor:
	275	// sx
	276	//
	277	// matrix:
	278	// sx 0
	279	//
	280	// 0 1
	281	//
	282	ct = parseFloat(transforms[i].replace(/scaleX\(\|\)/g, "")) \|\| 1;
	283	m11 = props[0]*ct;
	284	m12 = props[1];
	285	m21 = props[2]*ct;
	286	m22 = props[3];
	287	break;
	288	case "scaleY":
	289	// scaleY
	290	//
	291	// scale factor:
	292	// sy
	293	//
	294	// matrix:
	295	// 1 0
	296	//
	297	// 0 sy
	298	//
	299	ct = parseFloat(transforms[i].replace(/scaleY\(\|\)/g, "")) \|\| 1;
	300	m11 = props[0];
	301	m12 = props[1]*ct;
	302	m21 = props[2];
	303	m22 = props[3]*ct;
	304	break;
	305	case "scale":
	306	// scale
	307	//
	308	// scale factor:
	309	// sx, sy
	310	//
	311	// matrix:
	312	// sx 0
	313	//
	314	// 0 sy
	315	//
	316	ct = transforms[i].replace(/scale\(\|\)/g, "");
	317	var scaleAry = ct.split(",");
	318	scaleAry[1] = scaleAry[1] \|\| scaleAry[0];
	319	m11 = props[0]*scaleAry[0];
	320	m12 = props[1]*scaleAry[1];
	321	m21 = props[2]*scaleAry[0];
	322	m22 = props[3]*scaleAry[1];
	323	break;
	324	case "translateX":
	325	ct = parseInt(transforms[i].replace(/translateX\(\|\)/g, "")) \|\| 1;
	326	m11 = props[0];
	327	m12 = props[1];
	328	m21 = props[2];
	329	m22 = props[3];
	330	tx = toPx(ct);
	331	tx && attr(n, "dojo-transform-matrix-tx", tx);
	332	break;
	333	case "translateY":
	334	ct = parseInt(transforms[i].replace(/translateY\(\|\)/g, "")) \|\| 1;
	335	m11 = props[0];
	336	m12 = props[1];
	337	m21 = props[2];
	338	m22 = props[3];
	339	ty = toPx(ct);
	340	ty && attr(n, "dojo-transform-matrix-ty", ty);
	341	break;
	342	case "translate":
	343	ct = transforms[i].replace(/translate\(\|\)/g, "");
	344	m11 = props[0];
	345	m12 = props[1];
	346	m21 = props[2];
	347	m22 = props[3];
	348	var translateAry = ct.split(",");
	349	translateAry[0] = parseInt(toPx(translateAry[0])) \|\| 0;
	350	translateAry[1] = parseInt(toPx(translateAry[1])) \|\| 0;
	351	tx = translateAry[0];
	352	ty = translateAry[1];
	353	tx && attr(n, "dojo-transform-matrix-tx", tx);
	354	ty && attr(n, "dojo-transform-matrix-ty", ty);
	355	break;
	356	}
	357	props = [m11, m12, m21, m22, tx, ty];
	358	}
	359	// test
	360	var Bx = min(wm11 + hm12, min(min(wm11, hm12), 0)),
	361	By = min(wm21 + hm22, min(min(wm21, hm22), 0))
	362	;
	363	dx = -Bx;
	364	dy = -By;
	365	if(has("ie") < 8){
	366	// on IE < 8 the node must have hasLayout = true
	367	n.style.zoom = "1";
	368	if(newPosition != "absolute"){
	369	var parentWidth = ds(node.parentNode, "width"),
	370	tw = abs(w*m11),
	371	th = abs(h*m12),
	372	wMax = max(tw + th, max(max(th, tw), 0))
	373	;
	374	dx -= (wMax - w) / 2 - (parentWidth > wMax ? 0 : (wMax - parentWidth) / 2);
	375	}
	376	}else if(has("ie") == 8){
	377	// IE8 bug, a filter is applied to positioned descendants
	378	// only if the parent has z-index
	379	ds(n, "zIndex") == "auto" && (n.style.zIndex = "0");
	380	}
	381
	382	try{
	383	hasMatrix = !!n.filters.item(mstr);
	384	}catch(e){
	385	hasMatrix = false;
	386	}
	387	if(hasMatrix){
	388	n.filters.item(mstr).M11 = m11;
	389	n.filters.item(mstr).M12 = m12;
	390	n.filters.item(mstr).M21 = m21;
	391	n.filters.item(mstr).M22 = m22;
	392	// use 'nearest' for a faster transform
	393	n.filters.item(mstr).filterType = 'bilinear';
	394	n.filters.item(mstr).Dx = 0;
	395	n.filters.item(mstr).Dy = 0;
	396	n.filters.item(mstr).sizingMethod = 'auto expand';
	397	}else{
	398	n.style.filter +=
	399	" progid:" + mstr + "(M11=" + m11 +
	400	",M12=" + m12 +
	401	",M21=" + m21 +
	402	",M22=" + m22 +
	403	",FilterType='bilinear',Dx=0,Dy=0,sizingMethod='auto expand')"
	404	;
	405	}
	406	tx = parseInt(attr(n, "dojo-transform-matrix-tx") \|\| "0");
	407	ty = parseInt(attr(n, "dojo-transform-matrix-ty") \|\| "0");
	408
	409	// transform origin
	410	var toAry = attr(n, "dojo-transform-origin").split(" ");
	411
	412	for(i = 0; i < 2; i++){
	413	toAry[i] = toAry[i] \|\| "50%";
	414	}
	415	xc = (toAry[0].toString().indexOf("%") != -1) ? w * parseInt(toAry[0]) * .01 : toAry[0];
	416	yc = (toAry[1].toString().indexOf("%") != -1) ? h * parseInt(toAry[1]) * .01 : toAry[1];
	417	if(hasAttr(n, "dojo-startX")){
	418	x0 = parseInt(attr(n, "dojo-startX"));
	419	}else{
	420	x0 = parseInt(ds(n, "left"));
	421	attr(n, "dojo-startX", newPosition == "absolute" ? x0 : "0");
	422	}
	423	if(hasAttr(n, "dojo-startY")){
	424	y0 = parseInt(attr(n, "dojo-startY"));
	425	}else{
	426	y0 = parseInt(ds(n, "top"));
	427	attr(n, "dojo-startY", newPosition == "absolute" ? y0 : "0");
	428	}
	429	ds(n, {
	430	position: newPosition,
	431	left: x0 - parseInt(dx) + parseInt(xc) - ((parseInt(xc) - tx)m11 + (parseInt(yc) - ty)m12) + "px",
	432	top: y0 - parseInt(dy) + parseInt(yc) - ((parseInt(xc) - tx)m21 + (parseInt(yc) - ty)m22) + "px"
	433	});
	434	return transform;
	435	},
	436	_getTransformFilter: function(/DomNode/ node){
	437	try{
	438	var n = DOM.byId(node),
	439	item = n.filters.item(0)
	440	;
	441	return "matrix(" + item.M11 + ", " + item.M12 + ", " + item.M21 + ", " +
	442	item.M22 + ", " + (Html.attr(node, "dojo-transform-tx") \|\| "0") + ", " + (Html.attr(node, "dojo-transform-ty") \|\| "0") + ")";
	443	}catch(e){
	444	return "matrix(1, 0, 0, 1, 0, 0)";
	445	}
	446	},
	447	setTransform: function(){
	448	this._notSupported();
	449	},
	450	setTransformOrigin: function(){
	451	this._notSupported();
	452	}
	453	});
	454
	455	HtmlX["ext-dojo"].style.init();
	456	return Html.style;
	457	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: