xcpweb

annotate interface/border-radius.htc @ 14:c4237fb33e88

Create New VM module and some bugfixes
author Nikola Nikov <nikolanikov@webconnect.bg>
date Sat Aug 14 19:33:00 2010 +0300 (2010-08-14)
parents fa572caf2edc
children
rev   line source
nikolanikov@6 1 <public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
nikolanikov@6 2 <script type="text/javascript">
nikolanikov@6 3 /*--Do not remove this if you are using--
nikolanikov@6 4 Original Author: Remiz Rahnas
nikolanikov@6 5 Original Author URL: http://www.htmlremix.com
nikolanikov@6 6 Published date: 2008/09/24
nikolanikov@6 7
nikolanikov@6 8 Changes by Nick Fetchak:
nikolanikov@6 9 - IE8 standards mode compatibility
nikolanikov@6 10 - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
nikolanikov@6 11 Published date : 2009/11/18
nikolanikov@6 12 */
nikolanikov@6 13
nikolanikov@6 14 // functions to take the width and height of hidden elements
nikolanikov@6 15 // taken from: http://blog.strictly-software.com/2009/10/correctly-measuring-element-dimensions.html
nikolanikov@6 16 // Functions for converting properties from camelCase to CSS-Property format and vice versa
nikolanikov@6 17 function toCamelCase(name){
nikolanikov@6 18 var camelCase = name.replace(/\-(\w)/g, function(all, letter){
nikolanikov@6 19 return letter.toUpperCase();
nikolanikov@6 20 });
nikolanikov@6 21 return camelCase
nikolanikov@6 22 }
nikolanikov@6 23 function toCSSProp(name){
nikolanikov@6 24 return name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
nikolanikov@6 25 }
nikolanikov@6 26
nikolanikov@6 27 //returns the current style of an element with no conversions of units
nikolanikov@6 28 function getStyle(el,style){
nikolanikov@6 29 var ret = 0;
nikolanikov@6 30 var elem = (typeof(el)=="string")?G(el):el;
nikolanikov@6 31 var val = "", doc = (elem.ownerDocument||elem.document||document);
nikolanikov@6 32
nikolanikov@6 33 // Make sure we have both formats for JS and CSS styles
nikolanikov@6 34 var camelCase = toCamelCase(style); //convert to camelCase
nikolanikov@6 35 var CSSProp = toCSSProp(style); //convert to css-property
nikolanikov@6 36
nikolanikov@6 37 // Try for computed style first as this will return the actual value converted to px
nikolanikov@6 38 if (typeof doc.defaultView !== 'undefined' && typeof doc.defaultView.getComputedStyle !== 'undefined'){
nikolanikov@6 39 // We only require the word float for computedStyle
nikolanikov@6 40 if ( style.match( /float/i ) )
nikolanikov@6 41 style = "float";
nikolanikov@6 42
nikolanikov@6 43 var computedStyle = doc.defaultView.getComputedStyle( elem, null );
nikolanikov@6 44 //Standard Compliant function that will return the true computed size in px
nikolanikov@6 45 if ( computedStyle ){
nikolanikov@6 46 ret = computedStyle.getPropertyValue( CSSProp );
nikolanikov@6 47 }
nikolanikov@6 48 } else if ( elem.currentStyle ) {
nikolanikov@6 49 //IE only
nikolanikov@6 50 ret = elem.currentStyle[ camelCase ];
nikolanikov@6 51 } else if(elem.style && elem.style[ camelCase ] ){
nikolanikov@6 52 //Default to style if its been set by JS or inline styling
nikolanikov@6 53 ret = elem.style[ camelCase ];
nikolanikov@6 54 }
nikolanikov@6 55
nikolanikov@6 56 return ret
nikolanikov@6 57 }
nikolanikov@6 58
nikolanikov@6 59 function G(i){ return document.getElementById(i) }
nikolanikov@6 60
nikolanikov@6 61 // returns an array of elements that need to be made visible to carry out a measurement of an element
nikolanikov@6 62 function getVisibleObj(elem){
nikolanikov@6 63 arrEls = []; // holds array of elements we need to make visible to measure X
nikolanikov@6 64
nikolanikov@6 65 while(elem && elem!==document){
nikolanikov@6 66 var es = getStyle(elem,"display"); // method returns current/computed/style value
nikolanikov@6 67
nikolanikov@6 68 if(es == 'none'){
nikolanikov@6 69 arrEls.push(elem);
nikolanikov@6 70 }
nikolanikov@6 71
nikolanikov@6 72 elem = elem.parentNode;
nikolanikov@6 73 }
nikolanikov@6 74 return arrEls; //null;
nikolanikov@6 75 }
nikolanikov@6 76
nikolanikov@6 77 // swap styles in and out for an accurate measurment. Taken from jQuery and tweaked by myself to
nikolanikov@6 78 // handle multiple elements.
nikolanikov@6 79 function Swap(elem, els, styles, callback){
nikolanikov@6 80 var obj;
nikolanikov@6 81
nikolanikov@6 82 for(var x=0,l=els.length;x<l;x++){
nikolanikov@6 83 // create hash on element to hold old styles so we can revert later
nikolanikov@6 84 obj = els[x];
nikolanikov@6 85 obj.old = {};
nikolanikov@6 86
nikolanikov@6 87 // Remember the old values, and insert the new ones
nikolanikov@6 88 for ( var name in styles ) {
nikolanikov@6 89 obj.old[ name ] = obj.style[ name ];
nikolanikov@6 90 obj.style[ name ] = styles[ name ];
nikolanikov@6 91 }
nikolanikov@6 92 }
nikolanikov@6 93
nikolanikov@6 94 // call the function passing in any element that needs scope
nikolanikov@6 95 callback.call( elem );
nikolanikov@6 96
nikolanikov@6 97 for(var x=0,l=els.length;x<l;x++){
nikolanikov@6 98 obj = els[x];
nikolanikov@6 99
nikolanikov@6 100 // Revert the old values
nikolanikov@6 101 for ( var name in styles ){
nikolanikov@6 102 obj.style[ name ] = obj.old[ name ];
nikolanikov@6 103 }
nikolanikov@6 104 // delete the hash from the element
nikolanikov@6 105 try{ delete obj.old; }catch(e){ obj.old=null}
nikolanikov@6 106 }
nikolanikov@6 107 }
nikolanikov@6 108
nikolanikov@6 109 // offsetWidth/Height is element.width/height +border+padding (standard box model)
nikolanikov@6 110 // clientWidth/Height is element.width/height +padding (if overflow:scroll then -16px)
nikolanikov@6 111 function getElementDimensions(el){
nikolanikov@6 112 el = (typeof(el)=="string")?G(el):el; //return a reference to the element
nikolanikov@6 113
nikolanikov@6 114 var w=0,h=0,cw=0,ch=0,x=0,y=0;
nikolanikov@6 115
nikolanikov@6 116 // if element is currently hidden we won't be able to get measurements so we need to find out whether this or
nikolanikov@6 117 // any other parent objects are hiding this element from the flow
nikolanikov@6 118 var arrEls = getVisibleObj(el); //returns array of objects we need to show to meaure our element
nikolanikov@6 119
nikolanikov@6 120 // create function to do the measuring
nikolanikov@6 121 function getElDim(){
nikolanikov@6 122 // get style object
nikolanikov@6 123 var els = el.style;
nikolanikov@6 124
nikolanikov@6 125 var pos = findPos(el);
nikolanikov@6 126 // get dimensions
nikolanikov@6 127 w = el.offsetWidth, h = el.offsetHeight, cw = el.clientWidth, ch = el.clientHeight,y = pos.y,x = pos.x;
nikolanikov@6 128 }
nikolanikov@6 129
nikolanikov@6 130 // do we need to toggle other objects before getting our dimensions
nikolanikov@6 131 if(arrEls && arrEls.length>0){
nikolanikov@6 132 // call function to swap over properties so we can accuratley measure this element
nikolanikov@6 133 var styles = {visibility: "hidden",display:"block"};
nikolanikov@6 134 Swap(el, arrEls, styles, getElDim);
nikolanikov@6 135 }else{
nikolanikov@6 136 getElDim();
nikolanikov@6 137 }
nikolanikov@6 138
nikolanikov@6 139 // create object
nikolanikov@6 140 var ret = {
nikolanikov@6 141 "width":w, //total width (element+border+padding)
nikolanikov@6 142 "height":h,
nikolanikov@6 143 "clientWidth":cw, //element+padding
nikolanikov@6 144 "clientHeight":ch,
nikolanikov@6 145 "x":x,
nikolanikov@6 146 "y":y
nikolanikov@6 147 }
nikolanikov@6 148
nikolanikov@6 149 return ret;
nikolanikov@6 150 }
nikolanikov@6 151 // end width/height functons
nikolanikov@6 152
nikolanikov@6 153 // findPos() borrowed from http://www.quirksmode.org/js/findpos.html
nikolanikov@6 154 function findPos(obj) {
nikolanikov@6 155 var curleft = curtop = 0;
nikolanikov@6 156
nikolanikov@6 157 if (obj.offsetParent) {
nikolanikov@6 158 do {
nikolanikov@6 159 curleft += obj.offsetLeft;
nikolanikov@6 160 curtop += obj.offsetTop;
nikolanikov@6 161 } while (obj = obj.offsetParent);
nikolanikov@6 162 }
nikolanikov@6 163
nikolanikov@6 164 return({
nikolanikov@6 165 'x': curleft,
nikolanikov@6 166 'y': curtop
nikolanikov@6 167 });
nikolanikov@6 168 }
nikolanikov@6 169
nikolanikov@6 170 // get the four arc radiuses
nikolanikov@6 171 function getarcs(elem) {
nikolanikov@6 172 var corners = {topRight: 0, bottomRight: 0, bottomLeft: 0, topLeft: 0}
nikolanikov@6 173
nikolanikov@6 174 var arcSize = parseInt(elem.currentStyle['-moz-border-radius'] ||
nikolanikov@6 175 elem.currentStyle['-webkit-border-radius'] ||
nikolanikov@6 176 elem.currentStyle['border-radius'] ||
nikolanikov@6 177 elem.currentStyle['-khtml-border-radius']);
nikolanikov@6 178 if (!isNaN(arcSize)) {
nikolanikov@6 179 corners = {topRight: arcSize, bottomRight: arcSize, bottomLeft: arcSize, topLeft: arcSize}
nikolanikov@6 180 }
nikolanikov@6 181
nikolanikov@6 182 var topRightArc = parseInt(elem.currentStyle['-moz-border-radius-topright'] ||
nikolanikov@6 183 elem.currentStyle['-webkit-border-top-right-radius'] ||
nikolanikov@6 184 elem.currentStyle['border-top-right-radius'] ||
nikolanikov@6 185 elem.currentStyle['-khtml-border-top-right-radius']);
nikolanikov@6 186
nikolanikov@6 187 if (!isNaN(topRightArc)) {
nikolanikov@6 188 corners.topRight = topRightArc;
nikolanikov@6 189 }
nikolanikov@6 190
nikolanikov@6 191 var bottomRightArc = parseInt(elem.currentStyle['-moz-border-radius-bottomright'] ||
nikolanikov@6 192 elem.currentStyle['-webkit-border-bottom-right-radius'] ||
nikolanikov@6 193 elem.currentStyle['border-bottom-right-radius'] ||
nikolanikov@6 194 elem.currentStyle['-khtml-border-bottom-right-radius']);
nikolanikov@6 195
nikolanikov@6 196 if (!isNaN(bottomRightArc)) {
nikolanikov@6 197 corners.bottomRight = bottomRightArc;
nikolanikov@6 198 }
nikolanikov@6 199
nikolanikov@6 200 var bottomLeftArc = parseInt(elem.currentStyle['-moz-border-radius-bottomleft'] ||
nikolanikov@6 201 elem.currentStyle['-webkit-border-bottom-left-radius'] ||
nikolanikov@6 202 elem.currentStyle['border-bottom-left-radius'] ||
nikolanikov@6 203 elem.currentStyle['-khtml-border-bottom-left-radius']);
nikolanikov@6 204
nikolanikov@6 205 if (!isNaN(bottomLeftArc)) {
nikolanikov@6 206 corners.bottomLeft = bottomLeftArc;
nikolanikov@6 207 }
nikolanikov@6 208
nikolanikov@6 209 var topLeftArc = parseInt(elem.currentStyle['-moz-border-radius-topleft'] ||
nikolanikov@6 210 elem.currentStyle['-webkit-border-top-left-radius'] ||
nikolanikov@6 211 elem.currentStyle['border-top-left-radius'] ||
nikolanikov@6 212 elem.currentStyle['-khtml-border-top-left-radius']);
nikolanikov@6 213
nikolanikov@6 214 if (!isNaN(topLeftArc)) {
nikolanikov@6 215 corners.topLeft = topLeftArc;
nikolanikov@6 216 }
nikolanikov@6 217
nikolanikov@6 218 return corners;
nikolanikov@6 219 }
nikolanikov@6 220
nikolanikov@6 221 // limiting corners depending on the size of the box
nikolanikov@6 222 function fixCorners(corners,rect_size) {
nikolanikov@6 223 // left side
nikolanikov@6 224 if (corners.topLeft + corners.bottomLeft >= rect_size.height) {
nikolanikov@6 225 if (corners.topLeft <= rect_size.height/2) {
nikolanikov@6 226 corners.bottomLeft = rect_size.height - corners.topLeft;
nikolanikov@6 227 } else if (corners.bottomLeft <= rect_size.height/2) {
nikolanikov@6 228 corners.topLeft = rect_size.height - corners.bottomLeft;
nikolanikov@6 229 } else {
nikolanikov@6 230 corners.bottomLeft = Math.floor(rect_size.height/2);
nikolanikov@6 231 corners.topLeft = Math.floor(rect_size.height/2);
nikolanikov@6 232 }
nikolanikov@6 233 }
nikolanikov@6 234 // alert(corners.bottomLeft);
nikolanikov@6 235 // right side
nikolanikov@6 236 if (corners.topRight + corners.bottomRight >= rect_size.height) {
nikolanikov@6 237 if (corners.topRight <= rect_size.height/2) {
nikolanikov@6 238 corners.bottomRight = rect_size.height - corners.topRight;
nikolanikov@6 239 } else if (corners.bottomRight <= rect_size.height/2) {
nikolanikov@6 240 corners.topRight = rect_size.height - corners.bottomRight;
nikolanikov@6 241 } else {
nikolanikov@6 242 corners.bottomRight = Math.floor(rect_size.height/2);
nikolanikov@6 243 corners.topRight = Math.floor(rect_size.height/2);
nikolanikov@6 244 }
nikolanikov@6 245 }
nikolanikov@6 246 // top side
nikolanikov@6 247 if (corners.topRight + corners.topLeft >= rect_size.width) {
nikolanikov@6 248 if (corners.topRight <= rect_size.width/2) {
nikolanikov@6 249 corners.topLeft = rect_size.width - corners.topRight;
nikolanikov@6 250 } else if (corners.topLeft <= rect_size.width/2) {
nikolanikov@6 251 corners.topRight = rect_size.width - corners.topLeft;
nikolanikov@6 252 } else {
nikolanikov@6 253 corners.topLeft = Math.floor(rect_size.width/2);
nikolanikov@6 254 corners.topRight = Math.floor(rect_size.width/2);
nikolanikov@6 255 }
nikolanikov@6 256 }
nikolanikov@6 257 // bottom side
nikolanikov@6 258 if (corners.bottomRight + corners.bottomLeft >= rect_size.width) {
nikolanikov@6 259 if (corners.bottomRight <= rect_size.width/2) {
nikolanikov@6 260 corners.bottomLeft = rect_size.width - corners.bottomRight;
nikolanikov@6 261 } else if (corners.bottomLeft <= rect_size.width/2) {
nikolanikov@6 262 corners.bottomRight = rect_size.width - corners.bottomLeft;
nikolanikov@6 263 } else {
nikolanikov@6 264 corners.bottomLeft = Math.floor(rect_size.width/2);
nikolanikov@6 265 corners.bottomRight = Math.floor(rect_size.width/2);
nikolanikov@6 266 }
nikolanikov@6 267 }
nikolanikov@6 268 return corners;
nikolanikov@6 269 }
nikolanikov@6 270
nikolanikov@6 271 // check if VML shape and fill are already defined in CSS and do not define them again
nikolanikov@6 272 function addVMLCss() {
nikolanikov@6 273 var hasVMLShape = false;
nikolanikov@6 274 var hasVMLFill = false;
nikolanikov@6 275 var sheets = window.document.styleSheets, l = sheets.length;
nikolanikov@6 276 for(var i=0; i<l; i++) {
nikolanikov@6 277 var rules = (sheets[i]).rules;
nikolanikov@6 278 for(var j=0; j<l; j++) {
nikolanikov@6 279 if (rules[j] != undefined && rules[j].selectorText != null
nikolanikov@6 280 && (rules[j].selectorText == 'v:shape' || rules[j].selectorText == 'v\\:shape')
nikolanikov@6 281 ) {
nikolanikov@6 282 hasVMLShape = true;
nikolanikov@6 283 }
nikolanikov@6 284 if (rules[j] != undefined && rules[j].selectorText != null
nikolanikov@6 285 && (rules[j].selectorText == 'v:fill' || rules[j].selectorText == 'v\\:fill')
nikolanikov@6 286 ) {
nikolanikov@6 287 hasVMLFill = true;
nikolanikov@6 288 }
nikolanikov@6 289 }
nikolanikov@6 290 }
nikolanikov@6 291 if (!hasVMLShape || !hasVMLFill) {
nikolanikov@6 292 var css = window.document.createStyleSheet();
nikolanikov@6 293 }
nikolanikov@6 294 if (!hasVMLShape) {
nikolanikov@6 295 css.addRule("v\\:shape", "behavior: url(#default#VML)");
nikolanikov@6 296 }
nikolanikov@6 297 if (!hasVMLFill) {
nikolanikov@6 298 css.addRule("v\\:fill", "behavior: url(#default#VML)");
nikolanikov@6 299 }
nikolanikov@6 300 }
nikolanikov@6 301
nikolanikov@6 302 function makeShape(target,classID,colors) {
nikolanikov@6 303 if (target.className.match(classID)) {
nikolanikov@6 304 var tmpClassName = target.className;
nikolanikov@6 305 target.className = tmpClassName.substring(0,tmpClassName.indexOf(classID))+tmpClassName.substring((tmpClassName.lastIndexOf(classID)+classID.length),tmpClassName.length)
nikolanikov@6 306 // return(false);
nikolanikov@6 307 }
nikolanikov@6 308 target.className = target.className.concat(' ', classID);
nikolanikov@6 309 var corners = getarcs(target);
nikolanikov@6 310 if (colors == null) {
nikolanikov@6 311 var fillColor = target.currentStyle.backgroundColor;
nikolanikov@6 312 var fillSrc = target.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
nikolanikov@6 313 var strokeColor = target.currentStyle.borderColor;
nikolanikov@6 314 } else {
nikolanikov@6 315 var fillColor = colors.backgroundColor;
nikolanikov@6 316 var fillSrc = colors.backgroundImage;
nikolanikov@6 317 var strokeColor = colors.borderColor;
nikolanikov@6 318 }
nikolanikov@6 319 var strokeWeight = parseInt(target.currentStyle.borderWidth);
nikolanikov@6 320 var stroked = 'true';
nikolanikov@6 321 if (isNaN(strokeWeight)) {
nikolanikov@6 322 strokeWeight = 0;
nikolanikov@6 323 strokeColor = fillColor;
nikolanikov@6 324 stroked = 'false';
nikolanikov@6 325 }
nikolanikov@6 326 target.style.background = 'transparent';
nikolanikov@6 327 target.style.borderColor = 'transparent';
nikolanikov@6 328
nikolanikov@6 329 // Find which element provides position:relative for the target element (default to BODY)
nikolanikov@6 330 var el = target;
nikolanikov@6 331 var limit = 100, i = 0;
nikolanikov@6 332 // added absolute positioning also
nikolanikov@6 333 while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.currentStyle.position != 'absolute') && (el.tagName != 'BODY')) {
nikolanikov@6 334 el = el.parentElement;
nikolanikov@6 335 i++;
nikolanikov@6 336 if (i >= limit) { return(false); }
nikolanikov@6 337 }
nikolanikov@6 338 var el_zindex = parseInt(el.currentStyle.zIndex);
nikolanikov@6 339 if (isNaN(el_zindex)) { el_zindex = 0; }
nikolanikov@6 340 //alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);
nikolanikov@6 341
nikolanikov@6 342 var rect_size = {
nikolanikov@6 343 'width': target.offsetWidth - strokeWeight,
nikolanikov@6 344 'height': target.offsetHeight - strokeWeight
nikolanikov@6 345 };
nikolanikov@6 346 // if sizes are <= 0 (when the element is hidden) use the function to get them
nikolanikov@6 347 if (rect_size.width <= 0 && rect_size.height <= 0) {
nikolanikov@6 348 var dimensions = getElementDimensions(target);
nikolanikov@6 349 rect_size.width = dimensions.clientWidth;
nikolanikov@6 350 rect_size.height = dimensions.clientHeight;
nikolanikov@6 351 }
nikolanikov@6 352
nikolanikov@6 353 corners = fixCorners(corners,rect_size);
nikolanikov@6 354
nikolanikov@6 355 var el_pos = findPos(el);
nikolanikov@6 356 var target_pos = findPos(target);
nikolanikov@6 357
nikolanikov@6 358 // if positions are <= 0 (when the element is hidden - happened on IE8 only) get the function to get them
nikolanikov@6 359 if (el_pos.x <= 0 && el_pos.y <= 0) {
nikolanikov@6 360 el_pos = getElementDimensions(el);
nikolanikov@6 361 }
nikolanikov@6 362 if (target_pos.x <= 0 && target_pos.y <= 0) {
nikolanikov@6 363 target_pos = getElementDimensions(target);
nikolanikov@6 364 }
nikolanikov@6 365 target_pos.y = target_pos.y + (0.5 * strokeWeight) - el_pos.y;
nikolanikov@6 366 target_pos.x = target_pos.x + (0.5 * strokeWeight) - el_pos.x;
nikolanikov@6 367
nikolanikov@6 368 var rect = document.createElement('v:shape');
nikolanikov@6 369 rect.coordorigin="0 0";
nikolanikov@6 370 rect.coordsize = rect_size.width+" "+rect_size.height;
nikolanikov@6 371 var topRightPoint = (rect_size.width - corners.topRight);
nikolanikov@6 372 if (topRightPoint < 0) {
nikolanikov@6 373 topRightPoint = corners.topLeft;
nikolanikov@6 374 }
nikolanikov@6 375 topRightPoint += ',0';
nikolanikov@6 376 var rightTopPoint = rect_size.width+','+corners.topRight;
nikolanikov@6 377 var rightBottomPoint = (rect_size.height - corners.bottomRight);
nikolanikov@6 378 if (rightBottomPoint < 0) {
nikolanikov@6 379 rightBottomPoint = corners.topRight;
nikolanikov@6 380 }
nikolanikov@6 381 rightBottomPoint = rect_size.width+','+rightBottomPoint;
nikolanikov@6 382 var bottomRightPoint = (rect_size.width - corners.bottomRight)+','+rect_size.height;
nikolanikov@6 383 var bottomLeftPoint = corners.bottomLeft+','+rect_size.height;
nikolanikov@6 384 var leftBottomPoint = '0,'+(rect_size.height - corners.bottomLeft);
nikolanikov@6 385 var leftTopPoint = '0,'+corners.topLeft;
nikolanikov@6 386 var topLeftPoint = corners.topLeft+',0';
nikolanikov@6 387
nikolanikov@6 388 var rightTopArc = '';
nikolanikov@6 389 if (corners.topRight != 0) {
nikolanikov@6 390 rightTopArc = 'c '+(rect_size.width-Math.ceil(corners.topRight/2))+',0 '+
nikolanikov@6 391 rect_size.width+','+(Math.ceil(corners.topRight/2))+' '+
nikolanikov@6 392 rightTopPoint+' ';
nikolanikov@6 393 }
nikolanikov@6 394 var rightBottomArc = '';
nikolanikov@6 395 if (corners.bottomRight != 0) {
nikolanikov@6 396 rightBottomArc = 'c '+(rect_size.width)+','+(rect_size.height - Math.ceil(corners.bottomRight/2))+' '+
nikolanikov@6 397 (rect_size.width - Math.ceil(corners.bottomRight/2))+','+(rect_size.height)+' '+
nikolanikov@6 398 bottomRightPoint+' ';
nikolanikov@6 399 }
nikolanikov@6 400 var leftBottomArc = '';
nikolanikov@6 401 if (corners.bottomLeft != 0) {
nikolanikov@6 402 leftBottomArc = 'c '+(Math.ceil(corners.bottomLeft/2))+','+rect_size.height+' '+
nikolanikov@6 403 '0,'+(rect_size.height - Math.ceil(corners.bottomLeft/2))+' '+
nikolanikov@6 404 leftBottomPoint+' ';
nikolanikov@6 405 }
nikolanikov@6 406 var topLeftArc = '';
nikolanikov@6 407 if (corners.topLeft != 0) {
nikolanikov@6 408 topLeftArc = 'c '+
nikolanikov@6 409 '0,'+(Math.ceil(corners.topLeft/2))+' '+
nikolanikov@6 410 (Math.ceil(corners.topLeft/2))+',0 '+
nikolanikov@6 411 topLeftPoint+' ';
nikolanikov@6 412 }
nikolanikov@6 413
nikolanikov@6 414 rect.path = 'm '+topLeftPoint+ // start point
nikolanikov@6 415 'l '+topRightPoint+' '+ // top line
nikolanikov@6 416 rightTopArc+ // top right arc
nikolanikov@6 417 'l '+ rightBottomPoint+' '+ // right line
nikolanikov@6 418 rightBottomArc+ // bottom right arc
nikolanikov@6 419 'l '+bottomLeftPoint+' '+ // bottom line
nikolanikov@6 420 leftBottomArc+ // bottom left arc
nikolanikov@6 421 'l '+leftTopPoint+' '+ // left line
nikolanikov@6 422 topLeftArc+ // top left arc
nikolanikov@6 423 ' x e';
nikolanikov@6 424
nikolanikov@6 425 rect.strokecolor = strokeColor;
nikolanikov@6 426 rect.strokeWeight = strokeWeight +'px';
nikolanikov@6 427 rect.stroked = stroked;
nikolanikov@6 428 rect.style.display = 'block';
nikolanikov@6 429 rect.style.position = 'absolute';
nikolanikov@6 430 rect.style.top = target_pos.y +'px';
nikolanikov@6 431 rect.style.left = target_pos.x +'px';
nikolanikov@6 432 rect.style.width = rect_size.width +'px';
nikolanikov@6 433 rect.style.height = rect_size.height +'px';
nikolanikov@6 434 rect.style.antialias = true;
nikolanikov@6 435 rect.style.zIndex = el_zindex - 1;
nikolanikov@6 436 // debug(rect.style.zIndex);
nikolanikov@6 437
nikolanikov@6 438 var fill = document.createElement('v:fill');
nikolanikov@6 439 fill.color = fillColor;
nikolanikov@6 440 fill.src = fillSrc;
nikolanikov@6 441 fill.type = 'tile';
nikolanikov@6 442
nikolanikov@6 443 rect.appendChild(fill);
nikolanikov@6 444 el.appendChild(rect);
nikolanikov@6 445
nikolanikov@6 446 isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
nikolanikov@6 447 // IE6 doesn't support transparent borders, use padding to offset original element
nikolanikov@6 448 if (isIE6 && (strokeWeight > 0)) {
nikolanikov@6 449 target.style.borderStyle = 'none';
nikolanikov@6 450 target.style.paddingTop = parseInt(target.currentStyle.paddingTop || 0) + strokeWeight;
nikolanikov@6 451 target.style.paddingBottom = parseInt(target.currentStyle.paddingBottom || 0) + strokeWeight;
nikolanikov@6 452 }
nikolanikov@6 453 target.vml = rect;
nikolanikov@6 454 }
nikolanikov@6 455
nikolanikov@6 456
nikolanikov@6 457 function getRulesFor(target) {
nikolanikov@6 458 var classes = target.className;
nikolanikov@6 459 classes = classes.split(' ');
nikolanikov@6 460 var classesTmp = new Array();
nikolanikov@6 461 for (i = 0;i < classes.length;i++) {
nikolanikov@6 462 if (classes[i] != '') {
nikolanikov@6 463 classesTmp.push(classes[i]);
nikolanikov@6 464 }
nikolanikov@6 465 }
nikolanikov@6 466 classes = classesTmp;
nikolanikov@6 467
nikolanikov@6 468 var sheets = window.document.styleSheets, l = sheets.length;
nikolanikov@6 469 var rules = new Array();
nikolanikov@6 470 for(var i=0; i<l; i++) {
nikolanikov@6 471 rules = getRules(sheets[i],classes,rules);
nikolanikov@6 472 }
nikolanikov@6 473 return rules;
nikolanikov@6 474 }
nikolanikov@6 475
nikolanikov@6 476 function getRules(sheet,classes,rulesExt) {
nikolanikov@6 477 if(sheet.imports) {
nikolanikov@6 478 try {
nikolanikov@6 479 var imports = sheet.imports, l = imports.length;
nikolanikov@6 480 for(var i=0; i<l; i++) getRules(sheet.imports[i],classes,rulesExt);
nikolanikov@6 481 } catch(securityException){}
nikolanikov@6 482 }
nikolanikov@6 483
nikolanikov@6 484 var rules = (currentSheet = sheet).rules, l = rules.length;
nikolanikov@6 485 for(var j=0; j<l; j++) {
nikolanikov@6 486 var rule = rules[j];
nikolanikov@6 487 for (k = 0;k < classes.length;k++) {
nikolanikov@6 488 if ('.'+classes[k] == rule.selectorText ||
nikolanikov@6 489 '.'+classes[k]+':hover' == rule.selectorText
nikolanikov@6 490 ) {
nikolanikov@6 491 rulesExt.push(rule);
nikolanikov@6 492 }
nikolanikov@6 493 }
nikolanikov@6 494 }
nikolanikov@6 495 return rulesExt;
nikolanikov@6 496 }
nikolanikov@6 497
nikolanikov@6 498 function hoverSupport(target,classID,unhoverBackgroundColor,unhoverBackgroundImage,unhoverBorderColor) {
nikolanikov@6 499 // return false;
nikolanikov@6 500 var hoverRule;
nikolanikov@6 501 var hoverBackgroundColor;
nikolanikov@6 502 var hoverBackgroundImage;
nikolanikov@6 503 var hoverBorderColor;
nikolanikov@6 504
nikolanikov@6 505 function hover() {
nikolanikov@6 506 var rules = getRulesFor(target);
nikolanikov@6 507 for (i = 0;i < rules.length;i++) {
nikolanikov@6 508 if (rules[i].selectorText.match(':hover')) {
nikolanikov@6 509 hoverRule = rules[i];
nikolanikov@6 510 }
nikolanikov@6 511 }
nikolanikov@6 512 if (hoverRule == undefined) {
nikolanikov@6 513 return false;
nikolanikov@6 514 }
nikolanikov@6 515
nikolanikov@6 516 // remove the whatever:hover class if it is there
nikolanikov@6 517 isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
nikolanikov@6 518 if (isIE6) {
nikolanikov@6 519 var removeClass = hoverRule.selectorText.substring(1,hoverRule.selectorText.indexOf(':hover'))+'onhover';
nikolanikov@6 520 if (target.className.match(removeClass)) {
nikolanikov@6 521 var tmpClassName = target.className;
nikolanikov@6 522 target.className = tmpClassName.substring(0,tmpClassName.indexOf(removeClass))+tmpClassName.substring((tmpClassName.lastIndexOf(removeClass)+removeClass.length),tmpClassName.length)
nikolanikov@6 523 }
nikolanikov@6 524 }
nikolanikov@6 525
nikolanikov@6 526 hoverBackgroundColor = hoverRule.style.backgroundColor;
nikolanikov@6 527 hoverBackgroundImage = hoverRule.style.backgroundImage;
nikolanikov@6 528 hoverBorderColor = hoverRule.style.borderColor;
nikolanikov@6 529 var colors = {'backgroundColor':hoverBackgroundColor,
nikolanikov@6 530 'backgroundImage':hoverBackgroundImage,
nikolanikov@6 531 'borderColor':hoverBorderColor};
nikolanikov@6 532
nikolanikov@6 533 var rect = target.vml;
nikolanikov@6 534 var offsetParent = rect.offsetParent;
nikolanikov@6 535 offsetParent.removeChild(rect);
nikolanikov@6 536
nikolanikov@6 537 makeShape(target,classID,colors);
nikolanikov@6 538 hoverRule.style.backgroundColor = 'transparent';
nikolanikov@6 539 hoverRule.style.backgroundImage = '';
nikolanikov@6 540 hoverRule.style.borderColor = 'transparent';
nikolanikov@6 541
nikolanikov@6 542 }
nikolanikov@6 543 function unHover() {
nikolanikov@6 544 var rules = getRulesFor(target);
nikolanikov@6 545 for (i = 0;i < rules.length;i++) {
nikolanikov@6 546 if (rules[i].selectorText.match(':hover')) {
nikolanikov@6 547 hoverRule = rules[i];
nikolanikov@6 548 }
nikolanikov@6 549 }
nikolanikov@6 550
nikolanikov@6 551 if (hoverRule == undefined) {
nikolanikov@6 552 return false;
nikolanikov@6 553 }
nikolanikov@6 554
nikolanikov@6 555 target.style.backgroundColor = unhoverBackgroundColor;
nikolanikov@6 556 target.style.backgroundImage = unhoverBackgroundImage;
nikolanikov@6 557 target.style.borderColor = unhoverBorderColor;
nikolanikov@6 558
nikolanikov@6 559 var rect = target.vml;
nikolanikov@6 560 var offsetParent = rect.offsetParent;
nikolanikov@6 561 offsetParent.removeChild(rect);
nikolanikov@6 562 makeShape(target,classID);
nikolanikov@6 563
nikolanikov@6 564 hoverRule.style.backgroundColor = hoverBackgroundColor;
nikolanikov@6 565 hoverRule.style.backgroundImage = hoverBackgroundImage;
nikolanikov@6 566 hoverRule.style.borderColor = hoverBorderColor;
nikolanikov@6 567 }
nikolanikov@6 568 target.attachEvent('onmouseenter', function() {setTimeout(hover,0)});
nikolanikov@6 569 target.attachEvent('onmouseleave', function() {setTimeout(unHover,0)});
nikolanikov@6 570 }
nikolanikov@6 571
nikolanikov@6 572 function oncontentready(classID) {
nikolanikov@6 573 if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
nikolanikov@6 574 var target = this.element;
nikolanikov@6 575
nikolanikov@6 576 var unhoverBackgroundColor = target.currentStyle.backgroundColor;
nikolanikov@6 577 var unhoverBackgroundImage = target.currentStyle.backgroundImage;
nikolanikov@6 578 var unhoverBorderColor = target.currentStyle.borderColor;
nikolanikov@6 579
nikolanikov@6 580 makeShape(target,classID);
nikolanikov@6 581
nikolanikov@6 582 // :hover support
nikolanikov@6 583 hoverSupport(target,classID,unhoverBackgroundColor,unhoverBackgroundImage,unhoverBorderColor);
nikolanikov@6 584
nikolanikov@6 585 addVMLCss()
nikolanikov@6 586
nikolanikov@6 587 if (typeof(window.rounded_elements) == 'undefined') {
nikolanikov@6 588 window.rounded_elements = new Array();
nikolanikov@6 589
nikolanikov@6 590 if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
nikolanikov@6 591 window.onresize = window_resize;
nikolanikov@6 592 }
nikolanikov@6 593 window.rounded_elements.push(target);
nikolanikov@6 594 }
nikolanikov@6 595
nikolanikov@6 596 function window_resize() {
nikolanikov@6 597 var classID = 'v08vnSVo78t4JfjH';
nikolanikov@6 598 if (typeof(window.rounded_elements) == 'undefined') { return(false); }
nikolanikov@6 599
nikolanikov@6 600 for (var i in window.rounded_elements) {
nikolanikov@6 601 var target = window.rounded_elements[i];
nikolanikov@6 602 var rect = target.vml;
nikolanikov@6 603
nikolanikov@6 604 // since the target colors has been set to transparent, we need to supply the right colors. We can read then from the shape element and its fill element.
nikolanikov@6 605 var fill = rect.childNodes[0];
nikolanikov@6 606 var fillColor = new String(fill.color);
nikolanikov@6 607 var fillSrc = new String(fill.src);
nikolanikov@6 608 var borderColor = rect.strokeColor;
nikolanikov@6 609 var colors = {'backgroundColor':fillColor,
nikolanikov@6 610 'backgroundImage':fillSrc,
nikolanikov@6 611 'borderColor':borderColor};
nikolanikov@6 612
nikolanikov@6 613 var offsetParent = rect.offsetParent;
nikolanikov@6 614 offsetParent.removeChild(rect);
nikolanikov@6 615
nikolanikov@6 616 makeShape(target,classID,colors);
nikolanikov@6 617 }
nikolanikov@6 618 if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
nikolanikov@6 619 }
nikolanikov@6 620 </script>