ruzeeborders.js

community server 源码

/**
 * RuzeeBorders 0.11
 * (c) 2006 Steffen Rusitschka <[e-mail]>
 *
 * RuzeeBorders is freely distributable under the terms of an MIT-style license.
 * For details, see http://www.ruzee.com/
 */

var RUZEE=window.RUZEE||{};
RUZEE.userAgent=navigator.userAgent.toLowerCase();
RUZEE.isIE=typeof window.RUZEE.isIE != 'undefined'
  ?window.RUZEE.isIE
  :RUZEE.userAgent.indexOf('msie')>=0
    && RUZEE.userAgent.indexOf('opera')==-1;
RUZEE.isStrict=typeof window.RUZEE.isStrict != 'undefined'
  ?window.RUZEE.isStrict
  :(document.compatMode?document.compatMode!='BackCompat':RUZEE.userAgent.indexOf('safari')==-1?false:true);

RUZEE.Borders={

  /**
   * Set to false to not draw the borders automatically on
   * domload when RUZEE.Events are available.
   */
  autoRender:true,

  /** Add mapping rules to be executed on render(). */
  add:function(mappings){
    for(rule in mappings){
      var rules=rule.split(',');
      for(var i=0; i<rules.length; ++i){
        var r=rules[i].replace(/^\s+|\s+$/,'');
        var ms=RUZEE.Borders.mappings[r]||{};
        for (m in mappings[rule]) ms[m]=mappings[rule][m];
        RUZEE.Borders.mappings[r]=ms;
      }
    }
  },

  /**
   * Render all added mapping rules into the DOM 
   * If RUZEE.Events is not available, this method MUST be called in the 
   * window.onload method (or with a similar technique)!
   */
  render:function(){
//     var t=new Date().getTime();
    var jobs=[];
    for(rule in RUZEE.Borders.mappings){
      jobs.push({
        e:RUZEE.Borders.cssQuery(rule),
        b:new RUZEE.Borders.Border(RUZEE.Borders.mappings[rule])
      });
    }
    RUZEE.Borders.mappings={};
    for (var i=0; i<jobs.length; ++i){
      jobs[i].b.calc(jobs[i].e);
    }
//     var t2=new Date().getTime();
    RUZEE.Borders.renderCalcs();
/*    var t3=new Date().getTime();
    alert("calc: " + (t2-t) + "ms, render: " + (t3-t2) + "ms");*/
  },

  /** The Border class constructor */
  Border:function(d){
    var rad=d.cornerRadius||8;
    this.shadowShift=0;
    this.setEdges(d.edges||'lrtb');
    this.height=d.height||0;
    var b=null;
    switch(d.borderType){
    case 'simple':
      this.cornerRadius=this.shadowRadius=this.shadowPadding=rad;
      this.coShadowS='000';
      break;
    case 'shadow':
      var sw=d.shadowWidth||8;
      this.cornerRadius=rad;
      this.shadowRadius=rad+sw*2;
      this.shadowPadding=rad+sw;
      this.shadowShift=Math.round(sw/2);
      this.coShadowS=d.shadowColor||'000';
      break;
    case 'fade':
      this.cornerRadius=this.shadowPadding=1;
      this.shadowRadius=rad;
      this.coShadowS='.fade';
      break;
    case 'glow':
      this.cornerRadius=this.shadowPadding=rad;
      this.shadowRadius=rad+(d.glowWidth||rad);
      this.coShadowS=d.glowColor||'fff';
      break;
    default:
      alert('Unknown borderType: '+d.borderType);
    }
  },

  // ---- internal fields and methods ----

  /** the mappings: 'CSS rule' -> Border */
  mappings:{},

  /** The corner cache */
  cache:{},

  /** The completed calulations to render */
  calcs:[],

  /** if Dean Edward's cssQuery is available, use it */
  cssQuery:function(s){
    var c=s.charAt(0);
    if(c=='#'&&!(/\s/.test(s))) return [ document.getElementById(s.substr(1)) ];
    if(window.cssQuery) return window.cssQuery(s);

    alert("Don't know what to do with '"+s+"' Did you forget to include cssquery?");
    return [];
  },

  /** Add a completed calculation */
  addCalc:function(calc){
    RUZEE.Borders.calcs.push(calc);
  },

  renderCalcs:function(){
    for(var i=0; i<RUZEE.Borders.calcs.length; ++i){
      RUZEE.Borders.calcs[i]();
    }
    RUZEE.Borders.calcs=[];
  }
};

/** The Border class */
RUZEE.Borders.Border.prototype={

  /** Set the background image for element e to position x,y */
  setBgImg:function(e,x,y){
    if(!this.imgBgInURL) return;
    e.style.backgroundImage=this.imgBgInURL;
    x=-x;y=-y;
    e.style.backgroundPosition=x+'px '+y+'px';
    if(this.imgBgInRepeat) e.style.backgroundRepeat=this.imgBgInRepeat;
  },

  /** Create a DIV with width w, height h, background color bg, overflow o */
  crDiv:function(w,h,bg,o){
    var d=RUZEE.isXHTML
      ?document.createElementNS('http://www.w3.org/1999/xhtml','div')
      :document.createElement('div');
    d.style.padding=d.style.margin='0px';
    d.style.display='block';
    d.style.border='none';
    d.style.width=w?w:'auto';
    if(h) { d.style.height=h; d.style.fontSize=h; }
    if(!bg) bg='transparent';
    d.style.background=bg;
    if(o) d.style.overflow=o;
    return d;
  },

  /** Create wrapper DIV around element c */
  addLR:function(c,co,w,h,bgx,bgy){
    var e=this.crDiv(null,h,co);
    if(typeof bgx!='undefined') this.setBgImg(e,bgx,bgy);
    if(!w) w='1px';
    c.style.margin='0px '+(this.isR?w:'0px')+' 0px '+(this.isL?w:'0px');
    e.appendChild(c);
    return e;
  },

  /** Create the top (top==true) or bottom (top==false) of the border */
  crTB:function(top){
    var ca=RUZEE.Borders.cache[this.cacheID+'.'+top];
    if(ca){
      if(top){
        this.psT=ca.ps;
        this.inSh=ca.inSh;
      }else{
        this.psB=ca.ps;
      }
      return ca.el.cloneNode(true);
    }
    var sh=top?-this.shadowShift:this.shadowShift;
    var cxc=this.shadowPadding-this.cornerRadius-1;
    var cxb=cxc;
    var cxe=cxc+this.cornerRadius;
    var exb=0;
    var exe=cxc-1;
    var syc=this.cornerRadius-this.shadowPadding+sh+1;
    var yb,ye;
    if(top){
      if(!this.isT){
        this.psT=0;
        return;
      }
      yb=syc+this.shadowRadius-1;
      ye=syc-1;
      yi=-1;
      this.inSh=syc-1;
      this.psT=yb-ye;
    }else{
      if(!this.isB) {
        this.psB=0;
        return;
      }
      yb=syc<0?syc:0;
      ye=syc+this.shadowRadius;
      yi=1;
      this.psB=ye-yb;
    }
    var cwb=this.wBorder;
    if(cwb==0) cwb=1;

    var e=this.crDiv(null, Math.abs(yb-ye)+'px',null,'hidden');
    for(var y=yb; y!=ye; y+=yi){
      var co;
      if(y<=this.cornerRadius-cwb){
        co=this.coBgIn;
      }else if(y<=this.cornerRadius){
        co=this.coBorder;
      }else if(y-syc<0){
        co=this.coShadow;
      }else{
        co=rzBlend(this.coShadow,this.coBgOut,(y-syc)/this.shadowRadius);
      }
      var line=this.crDiv(null,'1px',rzC2S(co),'hidden');
      var fstLine=line;
      var xbg=null;
      for(var x=0; x<this.shadowRadius; ++x){
        var isIn=false, setBgImg=false;
        var sd, out=0;
        if(y<syc){
          sd=x;
        }else{
          sd=Math.sqrt(Math.sqr(x)+Math.sqr(y-syc));
        }
        if(this.shadowRadius>this.cornerRadius && sd<=this.shadowRadius){
          co=rzBlend(this.coShadow, this.coBgOut, sd/this.shadowRadius);
        }else{
          co=this.coBgOut;
          out++;
        }
        if(y<=this.cornerRadius){
          if(x>=exb && x<=exe){
            if(y>this.cornerRadius-cwb){
              co=this.coBorder;
            }else{
              isIn=true;
            }
          }else if(x>=cxb && x<=cxe){
            var cd=Math.sqrt(Math.sqr(x-cxc)+Math.sqr(y))-this.cornerRadius;
            if(y<0){
              if(x-cxc>this.cornerRadius-this.wBorder){
                co=this.coBorder;
              }else{ 
                isIn=true;
              }
            }else if(cd<-cwb){
              isIn=true;
            }else if(cd<-cwb+1){
              // first on border! do bgimg
              if(top&&this.imgBgInURL){
                setBgImg=true;
              }else
                co=rzBlend(this.coBgIn,this.coBorder,cd+cwb);
            }else if(cd<0){
              co=this.coBorder;
            }else if(cd<=1){
              co=rzBlend(this.coBorder,co,cd);
            }else{
              out++;
            }
          }
        }else{
          out++;
        }
        if(!isIn&&line==fstLine&&y<=this.cornerRadius-cwb&&top){
          this.setBgImg(fstLine,this.shadowRadius-x,yb-y);
        }
        if(out>1){
          line=this.addLR(line,'transparent',(this.shadowRadius-x)+'px');
          x=this.shadowRadius; // done
        }else{
          if(!isIn){
            // fix a strange IE bug where the 12ths recursion seems to get lost...
            if(RUZEE.isIE&&x==this.shadowRadius-12) line=this.addLR(line);
            line=this.addLR(line,rzC2S(co));
          }
          if(setBgImg) this.setBgImg(line,this.shadowRadius-x,yb-y+1);
        }
      }