// reimplementation of the jtip with mootools framework // Marc Weber MooTip = new Class({ 'initialize' : function (el, uri, title){ this.imgUrl = 'pics'; this.link = $(el); var pattern = new RegExp(/width="?(\d+)/); var w = 350; /*parseInt(pattern.exec(uri)[1]); /* Wenn ich die standart breite fü alle haben dann hier fest eingeben. */ var wPfeil = 10; var gesW = w + 10; var b = $$('body')[0]; this.pfeil = new Element('div', { 'class' : 'mooTipPfeil', 'styles': { 'width' : wPfeil+"px"} } ) .injectInside(b); this.title = new Element('div', { 'class' : 'mooTipTitle', 'styles': { 'width' : (w+2)+'px'} } ) .set('text', title) .injectInside(b); this.contentOuter = new Element('div', { 'class' : 'mooTipContentOuter', 'styles': { 'width' : w+'px', 'position' : 'absolute' } } ) .injectInside(b); this.content = new Element('div', { 'class' : 'mooTipContent' } ) .set('html', '

') .injectInside(this.contentOuter); var c = this.link.getCoordinates(); c.top = getAbsoluteTop(this.link) + Math.round(- 23 / 2 + this.link.offsetHeight /2 ); c.left = getAbsoluteLeft(this.link); var ws = window.getSize(); if ((c.right + wPfeil + w) > ws.x) { // links von link this.pfeil.setStyles({ 'background-image' : "url('"+this.imgUrl+"/arrow_right.gif')" }).position({'x' : c.left - wPfeil ,'y' : c.top }); this.title.position({'x': c.left - w - wPfeil, 'y': c.top }) this.contentOuter.position({'x': c.right -w - wPfeil , 'y': c.top }); } else { // rechts von link this.pfeil.setStyles({ 'background-image' : "url('"+this.imgUrl+"/arrow_left.gif')" }).position({'x' : c.left + c.width,'y' : c.top }); this.title.position({'x': c.left + c.width + wPfeil , 'y': c.top }); this.contentOuter.position({'x': c.left + c.width + wPfeil , 'y': c.top }); } this.richteContentAus(); new Request({ 'url' : uri, 'onFailure' : function (){ this.content.set('text', 'Der Text dieses Tips kommt in kuerze'); this.richteContentAus(); }.bind(this), 'onComplete' : function (html){ var pattern = /([\s\S]*)<\/body>/m; var w = pattern.exec(html); if (w && w[1]) html = w[1]; this.content.set('html', html); this.richteContentAus(); }.bind(this) }).send(); }, 'richteContentAus' : function (){ var c = this.title.getCoordinates(); c.top = getAbsoluteTop(this.title); c.left = getAbsoluteLeft(this.title); var cs = this.contentOuter.getSize(); var ws = window.getSize(); if ( c.height + c.top + cs.y > ws.y ) { // drüber this.contentOuter.position({ 'x' : c.left, 'y' : c.top - cs.y }); } else { // drunter this.contentOuter.position({ 'x' : c.left, 'y' : c.top + c.height }); } }, 'remove' : function (){ $A([this.pfeil, this.title, this.contentOuter]).each(function (e){e.destroy();}); } }); document.addEvent('domready', function (){ $$('[class=mooTip]').each(function (e){ e.addEvents({ 'click' : function (){ return false; }, 'mouseenter' : function (){ this.mooTip = new MooTip(this, e.get('href'), e.get('name')); }, 'mouseleave' : function (){ this.mooTip.remove(); }}); }); }); // leider lieferlt Mootools nen fasrchen Wert, http://mootools.lighthouseapp.com/projects/2706/tickets/152-getcoordinates-returns-incorrect-value function getAbsoluteLeft(o) { oLeft = o.offsetLeft // Get left position from the parent object while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element oParent = o.offsetParent // Get parent object reference oLeft += oParent.offsetLeft // Add parent left position o = oParent } return oLeft } function getAbsoluteTop(o) { oTop = o.offsetTop // Get top position from the parent object while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element oParent = o.offsetParent // Get parent object reference oTop += oParent.offsetTop // Add parent top position o = oParent } return oTop }