Extension:LinkFloatie

From MediaWiki.org

Jump to: navigation, search
Manual on MediaWiki Extensions
List of MediaWiki Extensions
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");
Personal tools