Extension:LinkFloatie
From MediaWiki.org
|
LinkFloatie Release status: unknown |
|
|---|---|
| Implementation | Tag |
| Description | |
| Author(s) | User:Peckyoke |
| License | No license specified |
| Download | see below |
The LinkFloatie extension is a port of the Link Floatie script. I needed a tooltip that will display information at the bottom right of the page for another port I am working on, so I decided to create this extension.
[edit] Usage
<tooltip text='tool tip text'>Some words</tooltip>
[edit] Notes
I am using the 1.6.7 version of MediaWiki and keeps having problem outputing javascript. Some of the solutions suggested by other users does not seems to work for me. $wgOut does not work in the callback function, and returning the javascript as output in the callback function is enclosed in <pre> ... </pre> tags. After many trials and experiments, I finally hit upon using hooks to output the javascript. I am not familiar with the MediaWiki framework, so if anyone can suggest a better way of output the Javascript, I will be very grateful.
[edit] Installation
Install the DisableCache hack.
Copy the following code in a file called LinkFloatie.php and save it to the extensions directory.
<?php # Link Floatie ToolTip extension # with MediaWiki's extension mechanism it is possible to define # new tags of the form # <TAGNAME>tooltip</TAGNAME> # the function registered by the extension creates a DHTML box that gradually fades into view and positions itself in the lower right corner of the screen. # The box can easily be set to only disappear after the viewer clicks a link, making it possible to use Link Floatie not as a tooltip but an information box. # Furthermore, this box intelligently positions itself at the top of the screen instead of bottom if the floatie obstructs the link's view when the former appears. $wgExtensionCredits['specialpage'][] = array( 'name' => 'LinkFloatie', 'author' => 'Peckyoke', 'url' => 'http://www.mediawiki.org/wiki/Extension:LinkFloatie', 'description' => 'Tooltip that will display information', ); $wgExtensionFunctions[] = "wfLinkFloatie"; $wgHooks['ParserAfterTidy'][] = "fnLinkFloatieHook"; $cntLinkWiki = 0; function fnLinkFloatieHook ( &$parser, &$text) { #global $wgOut; #global $cntLinkWiki; if ($GLOBALS["cntLinkWiki"] <= 0) return true; $myScript = <<<eof <style type="text/css"> #dhtmlfloatie{ position: absolute; left: 0; left: -900px; filter:alpha(opacity=0); -moz-opacity:0; border: 2px solid black; padding: 5px; z-index: 100; } </style> <script type="text/javascript"> function createDiv() { var myLinkFloatieDiv=document.createElement("div") myLinkFloatieDiv.setAttribute("id", "dhtmlfloatie") myLinkFloatieDiv.innerHTML="" document.body.appendChild(myLinkFloatieDiv) return myLinkFloatieDiv; } /*********************************************** * Link Floatie script - © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var floatiewidth="250px" //default width of floatie in px //var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height. var floatieheight="" var floatiebgcolor="lightyellow" //default bgcolor of floatie var fadespeed=70 //speed of fade (5 or above). Smaller=faster. var baseopacity=0 function slowhigh(which2){ imgobj=which2 browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : "" instantset(baseopacity) highlighting=setInterval("gradualfade(imgobj)",fadespeed) } function instantset(degree){ cleartimer() if (browserdetect=="mozilla") imgobj.style.MozOpacity=degree/100 else if (browserdetect=="ie") imgobj.filters.alpha.opacity=degree } function cleartimer(){ if (window.highlighting) clearInterval(highlighting) } function gradualfade(cur2){ if (browserdetect=="mozilla" && cur2.style.MozOpacity<1) cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99) else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=10 else if (window.highlighting) clearInterval(highlighting) } function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function paramexists(what){ return(typeof what!="undefined" && what!="") } function showfloatie(thetext, e, optbgColor, optWidth, optHeight){ var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft; var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop; var floatobj=document.getElementById("dhtmlfloatie") if (floatobj == null) { floatobj = createDiv(); } floatobj.style.left="-900px" floatobj.style.display="block" floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : "" floatobj.innerHTML=thetext var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20 var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight e=window.event? window.event : e floatobj.style.left=dsocx+winWidth-floatWidth-5+"px" if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight) floatobj.style.top=dsocy+5+"px" else floatobj.style.top=dsocy+winHeight-floatHeight-5+"px" slowhigh(floatobj) } function hidefloatie(){ var floatobj=document.getElementById("dhtmlfloatie") floatobj.style.display="none" } </script> eof; $text = $myScript . $text; return true; } function wfLinkFloatie() { #global $wgParser; # register the extension with the WikiText parser # the first parameter is the name of the new tag. # In this case it defines the tag <example> ... </example> # the second parameter is the callback function for # processing the text between the tags $GLOBALS["wgParser"]->setHook( "tooltip", "renderToolTip" ); } # The callback function for converting the input text to HTML output function renderToolTip( $input, $argv, $parser = null ) { #global $cntLinkWiki; if (!$parser) $parser =& $GLOBALS['wgParser']; $parser->disableCache(); # $argv is an array containing any arguments passed to the # extension like <example argument="foo" bar>.. # Put this on the sandbox page: (works in MediaWiki 1.5.5) # <example argument="foo" argument2="bar">Testing text **example** in between the new tags</example> $GLOBALS["cntLinkWiki"] = $GLOBALS["cntLinkWiki"] + 1; # $cntLinkWiki = $cntLinkWiki + 1; $text = $argv["text"]; if (!$text) $text = ""; $output = "<span onMouseOver=\"showfloatie('$text',event)\" onMouseOut=\"hidefloatie()\" style=\"cursor:pointer\">$input</span>"; return $output; }
Include the extension file in your LocalSettings.php:
require_once("extensions/LinkFloatie.php");

