403 lines
11 KiB
JavaScript
403 lines
11 KiB
JavaScript
/***
|
|
|
|
MochiKit.Visual 1.3.1
|
|
|
|
See <http://mochikit.com/> for documentation, downloads, license, etc.
|
|
|
|
(c) 2005 Bob Ippolito and others. All rights Reserved.
|
|
|
|
***/
|
|
|
|
if (typeof(dojo) != 'undefined') {
|
|
dojo.provide('MochiKit.Visual');
|
|
dojo.require('MochiKit.Base');
|
|
dojo.require('MochiKit.DOM');
|
|
dojo.require('MochiKit.Color');
|
|
}
|
|
|
|
if (typeof(JSAN) != 'undefined') {
|
|
JSAN.use("MochiKit.Base", []);
|
|
JSAN.use("MochiKit.DOM", []);
|
|
JSAN.use("MochiKit.Color", []);
|
|
}
|
|
|
|
try {
|
|
if (typeof(MochiKit.Base) == 'undefined' ||
|
|
typeof(MochiKit.DOM) == 'undefined' ||
|
|
typeof(MochiKit.Color) == 'undefined') {
|
|
throw "";
|
|
}
|
|
} catch (e) {
|
|
throw "MochiKit.Visual depends on MochiKit.Base, MochiKit.DOM and MochiKit.Color!";
|
|
}
|
|
|
|
if (typeof(MochiKit.Visual) == "undefined") {
|
|
MochiKit.Visual = {};
|
|
}
|
|
|
|
MochiKit.Visual.NAME = "MochiKit.Visual";
|
|
MochiKit.Visual.VERSION = "1.3.1";
|
|
|
|
MochiKit.Visual.__repr__ = function () {
|
|
return "[" + this.NAME + " " + this.VERSION + "]";
|
|
};
|
|
|
|
MochiKit.Visual.toString = function () {
|
|
return this.__repr__();
|
|
};
|
|
|
|
|
|
MochiKit.Visual._RoundCorners = function (e, options) {
|
|
e = MochiKit.DOM.getElement(e);
|
|
this._setOptions(options);
|
|
if (this.options.__unstable__wrapElement) {
|
|
e = this._doWrap(e);
|
|
}
|
|
|
|
var color = this.options.color;
|
|
var C = MochiKit.Color.Color;
|
|
if (this.options.color == "fromElement") {
|
|
color = C.fromBackground(e);
|
|
} else if (!(color instanceof C)) {
|
|
color = C.fromString(color);
|
|
}
|
|
this.isTransparent = (color.asRGB().a <= 0);
|
|
|
|
var bgColor = this.options.bgColor;
|
|
if (this.options.bgColor == "fromParent") {
|
|
bgColor = C.fromBackground(e.offsetParent);
|
|
} else if (!(bgColor instanceof C)) {
|
|
bgColor = C.fromString(bgColor);
|
|
}
|
|
|
|
this._roundCornersImpl(e, color, bgColor);
|
|
};
|
|
|
|
MochiKit.Visual._RoundCorners.prototype = {
|
|
_doWrap: function (e) {
|
|
var parent = e.parentNode;
|
|
var doc = MochiKit.DOM.currentDocument();
|
|
if (typeof(doc.defaultView) == "undefined"
|
|
|| doc.defaultView === null) {
|
|
return e;
|
|
}
|
|
var style = doc.defaultView.getComputedStyle(e, null);
|
|
if (typeof(style) == "undefined" || style === null) {
|
|
return e;
|
|
}
|
|
var wrapper = MochiKit.DOM.DIV({"style": {
|
|
display: "block",
|
|
// convert padding to margin
|
|
marginTop: style.getPropertyValue("padding-top"),
|
|
marginRight: style.getPropertyValue("padding-right"),
|
|
marginBottom: style.getPropertyValue("padding-bottom"),
|
|
marginLeft: style.getPropertyValue("padding-left"),
|
|
// remove padding so the rounding looks right
|
|
padding: "0px"
|
|
/*
|
|
paddingRight: "0px",
|
|
paddingLeft: "0px"
|
|
*/
|
|
}});
|
|
wrapper.innerHTML = e.innerHTML;
|
|
e.innerHTML = "";
|
|
e.appendChild(wrapper);
|
|
return e;
|
|
},
|
|
|
|
_roundCornersImpl: function (e, color, bgColor) {
|
|
if (this.options.border) {
|
|
this._renderBorder(e, bgColor);
|
|
}
|
|
if (this._isTopRounded()) {
|
|
this._roundTopCorners(e, color, bgColor);
|
|
}
|
|
if (this._isBottomRounded()) {
|
|
this._roundBottomCorners(e, color, bgColor);
|
|
}
|
|
},
|
|
|
|
_renderBorder: function (el, bgColor) {
|
|
var borderValue = "1px solid " + this._borderColor(bgColor);
|
|
var borderL = "border-left: " + borderValue;
|
|
var borderR = "border-right: " + borderValue;
|
|
var style = "style='" + borderL + ";" + borderR + "'";
|
|
el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>";
|
|
},
|
|
|
|
_roundTopCorners: function (el, color, bgColor) {
|
|
var corner = this._createCorner(bgColor);
|
|
for (var i = 0; i < this.options.numSlices; i++) {
|
|
corner.appendChild(
|
|
this._createCornerSlice(color, bgColor, i, "top")
|
|
);
|
|
}
|
|
el.style.paddingTop = 0;
|
|
el.insertBefore(corner, el.firstChild);
|
|
},
|
|
|
|
_roundBottomCorners: function (el, color, bgColor) {
|
|
var corner = this._createCorner(bgColor);
|
|
for (var i = (this.options.numSlices - 1); i >= 0; i--) {
|
|
corner.appendChild(
|
|
this._createCornerSlice(color, bgColor, i, "bottom")
|
|
);
|
|
}
|
|
el.style.paddingBottom = 0;
|
|
el.appendChild(corner);
|
|
},
|
|
|
|
_createCorner: function (bgColor) {
|
|
var dom = MochiKit.DOM;
|
|
return dom.DIV({style: {backgroundColor: bgColor.toString()}});
|
|
},
|
|
|
|
_createCornerSlice: function (color, bgColor, n, position) {
|
|
var slice = MochiKit.DOM.SPAN();
|
|
|
|
var inStyle = slice.style;
|
|
inStyle.backgroundColor = color.toString();
|
|
inStyle.display = "block";
|
|
inStyle.height = "1px";
|
|
inStyle.overflow = "hidden";
|
|
inStyle.fontSize = "1px";
|
|
|
|
var borderColor = this._borderColor(color, bgColor);
|
|
if (this.options.border && n === 0) {
|
|
inStyle.borderTopStyle = "solid";
|
|
inStyle.borderTopWidth = "1px";
|
|
inStyle.borderLeftWidth = "0px";
|
|
inStyle.borderRightWidth = "0px";
|
|
inStyle.borderBottomWidth = "0px";
|
|
// assumes css compliant box model
|
|
inStyle.height = "0px";
|
|
inStyle.borderColor = borderColor.toString();
|
|
} else if (borderColor) {
|
|
inStyle.borderColor = borderColor.toString();
|
|
inStyle.borderStyle = "solid";
|
|
inStyle.borderWidth = "0px 1px";
|
|
}
|
|
|
|
if (!this.options.compact && (n == (this.options.numSlices - 1))) {
|
|
inStyle.height = "2px";
|
|
}
|
|
|
|
this._setMargin(slice, n, position);
|
|
this._setBorder(slice, n, position);
|
|
|
|
return slice;
|
|
},
|
|
|
|
_setOptions: function (options) {
|
|
this.options = {
|
|
corners: "all",
|
|
color: "fromElement",
|
|
bgColor: "fromParent",
|
|
blend: true,
|
|
border: false,
|
|
compact: false,
|
|
__unstable__wrapElement: false
|
|
};
|
|
MochiKit.Base.update(this.options, options);
|
|
|
|
this.options.numSlices = (this.options.compact ? 2 : 4);
|
|
},
|
|
|
|
_whichSideTop: function () {
|
|
var corners = this.options.corners;
|
|
if (this._hasString(corners, "all", "top")) {
|
|
return "";
|
|
}
|
|
|
|
var has_tl = (corners.indexOf("tl") != -1);
|
|
var has_tr = (corners.indexOf("tr") != -1);
|
|
if (has_tl && has_tr) {
|
|
return "";
|
|
}
|
|
if (has_tl) {
|
|
return "left";
|
|
}
|
|
if (has_tr) {
|
|
return "right";
|
|
}
|
|
return "";
|
|
},
|
|
|
|
_whichSideBottom: function () {
|
|
var corners = this.options.corners;
|
|
if (this._hasString(corners, "all", "bottom")) {
|
|
return "";
|
|
}
|
|
|
|
var has_bl = (corners.indexOf('bl') != -1);
|
|
var has_br = (corners.indexOf('br') != -1);
|
|
if (has_bl && has_br) {
|
|
return "";
|
|
}
|
|
if (has_bl) {
|
|
return "left";
|
|
}
|
|
if (has_br) {
|
|
return "right";
|
|
}
|
|
return "";
|
|
},
|
|
|
|
_borderColor: function (color, bgColor) {
|
|
if (color == "transparent") {
|
|
return bgColor;
|
|
} else if (this.options.border) {
|
|
return this.options.border;
|
|
} else if (this.options.blend) {
|
|
return bgColor.blendedColor(color);
|
|
}
|
|
return "";
|
|
},
|
|
|
|
|
|
_setMargin: function (el, n, corners) {
|
|
var marginSize = this._marginSize(n) + "px";
|
|
var whichSide = (
|
|
corners == "top" ? this._whichSideTop() : this._whichSideBottom()
|
|
);
|
|
var style = el.style;
|
|
|
|
if (whichSide == "left") {
|
|
style.marginLeft = marginSize;
|
|
style.marginRight = "0px";
|
|
} else if (whichSide == "right") {
|
|
style.marginRight = marginSize;
|
|
style.marginLeft = "0px";
|
|
} else {
|
|
style.marginLeft = marginSize;
|
|
style.marginRight = marginSize;
|
|
}
|
|
},
|
|
|
|
_setBorder: function (el, n, corners) {
|
|
var borderSize = this._borderSize(n) + "px";
|
|
var whichSide = (
|
|
corners == "top" ? this._whichSideTop() : this._whichSideBottom()
|
|
);
|
|
|
|
var style = el.style;
|
|
if (whichSide == "left") {
|
|
style.borderLeftWidth = borderSize;
|
|
style.borderRightWidth = "0px";
|
|
} else if (whichSide == "right") {
|
|
style.borderRightWidth = borderSize;
|
|
style.borderLeftWidth = "0px";
|
|
} else {
|
|
style.borderLeftWidth = borderSize;
|
|
style.borderRightWidth = borderSize;
|
|
}
|
|
},
|
|
|
|
_marginSize: function (n) {
|
|
if (this.isTransparent) {
|
|
return 0;
|
|
}
|
|
|
|
var o = this.options;
|
|
if (o.compact && o.blend) {
|
|
var smBlendedMarginSizes = [1, 0];
|
|
return smBlendedMarginSizes[n];
|
|
} else if (o.compact) {
|
|
var compactMarginSizes = [2, 1];
|
|
return compactMarginSizes[n];
|
|
} else if (o.blend) {
|
|
var blendedMarginSizes = [3, 2, 1, 0];
|
|
return blendedMarginSizes[n];
|
|
} else {
|
|
var marginSizes = [5, 3, 2, 1];
|
|
return marginSizes[n];
|
|
}
|
|
},
|
|
|
|
_borderSize: function (n) {
|
|
var o = this.options;
|
|
var borderSizes;
|
|
if (o.compact && (o.blend || this.isTransparent)) {
|
|
return 1;
|
|
} else if (o.compact) {
|
|
borderSizes = [1, 0];
|
|
} else if (o.blend) {
|
|
borderSizes = [2, 1, 1, 1];
|
|
} else if (o.border) {
|
|
borderSizes = [0, 2, 0, 0];
|
|
} else if (this.isTransparent) {
|
|
borderSizes = [5, 3, 2, 1];
|
|
} else {
|
|
return 0;
|
|
}
|
|
return borderSizes[n];
|
|
},
|
|
|
|
_hasString: function (str) {
|
|
for (var i = 1; i< arguments.length; i++) {
|
|
if (str.indexOf(arguments[i]) != -1) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
_isTopRounded: function () {
|
|
return this._hasString(this.options.corners,
|
|
"all", "top", "tl", "tr"
|
|
);
|
|
},
|
|
|
|
_isBottomRounded: function () {
|
|
return this._hasString(this.options.corners,
|
|
"all", "bottom", "bl", "br"
|
|
);
|
|
},
|
|
|
|
_hasSingleTextChild: function (el) {
|
|
return (el.childNodes.length == 1 && el.childNodes[0].nodeType == 3);
|
|
}
|
|
};
|
|
|
|
MochiKit.Visual.roundElement = function (e, options) {
|
|
new MochiKit.Visual._RoundCorners(e, options);
|
|
};
|
|
|
|
MochiKit.Visual.roundClass = function (tagName, className, options) {
|
|
var elements = MochiKit.DOM.getElementsByTagAndClassName(
|
|
tagName, className
|
|
);
|
|
for (var i = 0; i < elements.length; i++) {
|
|
MochiKit.Visual.roundElement(elements[i], options);
|
|
}
|
|
};
|
|
|
|
// Compatibility with MochiKit 1.0
|
|
MochiKit.Visual.Color = MochiKit.Color.Color;
|
|
MochiKit.Visual.getElementsComputedStyle = MochiKit.DOM.computedStyle;
|
|
|
|
/* end of Rico adaptation */
|
|
|
|
MochiKit.Visual.__new__ = function () {
|
|
var m = MochiKit.Base;
|
|
|
|
m.nameFunctions(this);
|
|
|
|
this.EXPORT_TAGS = {
|
|
":common": this.EXPORT,
|
|
":all": m.concat(this.EXPORT, this.EXPORT_OK)
|
|
};
|
|
|
|
};
|
|
|
|
MochiKit.Visual.EXPORT = [
|
|
"roundElement",
|
|
"roundClass"
|
|
];
|
|
|
|
MochiKit.Visual.EXPORT_OK = [];
|
|
|
|
MochiKit.Visual.__new__();
|
|
|
|
MochiKit.Base._exportSymbols(this, MochiKit.Visual);
|