xcpweb

view interface/border-radius.htc @ 6:fa572caf2edc

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