Extension:Link Suggest

Adding links to an article seems easy. But what happens when you dont know the exact capitalization, or wording of an article? Usually you open a new tab and do a search. This plugin adds a new button to the edit tool bar that when clicked, adds an ajax search bar to find links.

This plugin is in very beta, but I am putting it out here because I think it is usable, and it is as far as I can take it. I would love help on this to make it better.

MediaWiki extensions manual - list

Link Suggest Release status: beta
Implementation	Search, Ajax
Description	Ajax Search bar to look for and add links.
Author(s)	Adam Meyer (noverflowTalk)
Last version	0.2
MediaWiki	1.10
License	I give up all rights. You may do what you please with this code.
Download	Download
Example	http://risdpedia.net
Hooks used AlternateEdit
Check usage (experimental)

Usage

• Click on button
• Type in search field (a list of available articles will appear)
• Select the article you would like to link to.
• That is all.

Download instructions

Please cut and paste the code found below and place it in $IP/extensions/LinkSuggest/LinkSuggest.php. Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php.

Installation

• Create a new folder in your extensions called LinkSuggest
• To install this extension, add the following to LocalSettings.php:

require_once("$IP/extensions/LinkSuggest/LinkSuggest.php");

• Ajax must also be enabled. This is the default from MediaWiki 1.11 to newer versions. For older versions of MediaWiki, you might need to add the following to LocalSettings.php:

$wgUseAjax = true;

A button called button_addlink.png must be in skins/common/images You can see mine here (it is oversized)

I know of some problems:

• The added button in IE7 gets added to the beginning not h end of the buttons.
• IE will lose track of your position when you select a link, so it will always place it at the begining.
• Safari and FF do not have either of these issues.
• I found this bugfix necessary before I got it working. The button is added to the left in FF too for me.

Code

PHP

Copy the following, and save it in the LinkSuggest folder as LinkSuggest.php

See below for the CSS and javascript

<?php
/**
 * LinkSuggest extension
 * @author Adam Meyer
 * @copyright © 2008 Adam Meyer
 */
 
//See below under "function wfAjaxlinkSuggest" for configuration
 
if( !defined( 'MEDIAWIKI' ) ) {
        echo( "This file is part of an extension to the MediaWiki software and cannot be used standalone.\n" );
        die( 1 );
}
 
$wgExtensionFunctions[] = 'wfAjaxlink';
$wgAjaxExportList[] = 'wfAjaxLinkSuggest';
$wgHooks['AlternateEdit'][] = 'wfAjaxlinkSuggestHeaders';
 
$wgExtensionCredits['other'][] = array(
    'name'=> 'LinkSuggest',
    'author'=> 'Adam Meyer',
    'version'=> '0.2',
    'url' => 'http://www.mediawiki.org/wiki/Extension:Link_Suggest',
    'description'=> 'Ajax-based link suggest that places results below tool bar.'
);
 
function wfAjaxlink() {
        global $wgUseAjax, $wgOut, $wgTitle;
        if (!$wgUseAjax) {
                wfDebug('wfAjaxlink: $wgUseAjax is not enabled, aborting extension setup.');
                return;
        }
}
 
function wfAjaxLinkSuggest( $term ) {
 
        //configure the following to change settings
        $limit = 8; //number of results to spit back
        $location = 1; //set to 1 to search anywhere in the article name, set to 0 to search only at the begining
 
 
        global $wgContLang, $wgOut;
        $response = new AjaxResponse();
        $db = wfGetDB( DB_SLAVE );
        $l = new Linker;
 
        $term = str_replace(' ', '_', $term);
 
        if($location == 1){
 
                $res = $db->select( 'page', 'page_title',
                                array(  'page_namespace' => 0,
                                        "UPPER(page_title) LIKE '%" .$db->strencode( strtoupper ($term)). "%'" ),
                                        "wfSajaxSearch",
                                        array( 'LIMIT' => $limit )
                                );
        }else{          
 
                $res = $db->select( 'page', 'page_title',
                        array(  'page_namespace' => 0,
                                "UPPER(page_title) LIKE '". $db->strencode( strtoupper ($term)) ."%'" ),
                                "wfSajaxSearch",
                                array( 'LIMIT' => $limit )
                        );              
        }
 
        $r = "";        
        while ($row = $db->fetchObject( $res ) ){
                $r .= '<li><a href="javascript:Insertlink(\''.addslashes(str_replace('_', ' ', $row->page_title)).'\')">'.str_replace('_', ' ', $row->page_title). "</li>\n";
 
        }
        if ($r == "") $r = "<li>&lt;none&gt;</li>";
 
        $html ='<ul>' .$r .'</ul>';
 
        return $html;
}
 
function wfAjaxlinkSuggestHeaders(){
        global $wgOut;
        wfAjaxSetlinkSuggestHeaders($wgOut);
        return true;
}
 
 
function wfAjaxSetlinkSuggestHeaders($outputPage) {
        global $wgJsMimeType, $wgStylePath, $wgScriptPath;
        $outputPage->addLink( 
                array( 
                        'rel' => 'stylesheet', 
                        'type' => 'text/css', 
                        'href' => $wgScriptPath.'/extensions/LinkSuggest/LinkSuggest.css' 
                ) 
        );
        $outputPage->addScript( "<script type=\"{$wgJsMimeType}\" src=\"$wgScriptPath/extensions/LinkSuggest/LinkSuggest.js\">"."</script>\n");
        $outputPage->addScript( "<script type=\"{$wgJsMimeType}\">hookEvent(\"load\", mwLinkSuggestButton);</script>\n" );
}

JavaScript

Copy the following, and save it in the LinkSuggest folder as LinkSuggest.js

function link_hide(obj){
        var element = document.getElementById(obj); 
        element.style.display='none';
        return true
}       
 
function mwLinkSuggestButton(){ 
        var toolbar = document.getElementById("toolbar");
        if(!toolbar){
                return false
        }
        var button = document.createElement("a");
        button.href = "#";
 
        button.onclick = function () {
        ls_ajax_onload();
        return false;
        };
 
        var add_image=document.createElement('img');
    add_image.src="skins/common/images/button_addlink.png";
 
        toolbar.appendChild(button);
        button.appendChild(add_image);
 
        return true
}
 
var ss_memory = null;
 
function LinkSearchCall() {
        var newdiv = document.getElementById("linksuggest");
 
        if(!newdiv){
                var newdiv = document.createElement("div");
                newdiv.id = "linksuggest";
                newdiv.style.display='block'
 
                var output = document.getElementById("toolbar");
                output.appendChild(newdiv);
        }else{
                newdiv.style.display='block'
        }       
        var x = document.getElementById("link_search_input").value;
 
        if (x == ss_memory) {
        return;
    }
    ss_memory = x;
    if (x.length < 30 && x.length > 2 && x.value != "") {
        sajax_do_call("wfAjaxLinkSuggest", [x], newdiv);
        }
}
 
 
function ls_ajax_onload() {
 
        var newdiv = document.getElementById("linksearch");
        if (!newdiv) {
 
                var newdiv = document.createElement("div");
                newdiv.id = "linksearch";
 
                var output = document.getElementById("toolbar");
                output.appendChild(newdiv);
 
                var search = document.createTextNode("Find Link ");
                newdiv.appendChild(search);
 
                var html = document.createElement("input");
                html.id = "link_search_input";
 
                newdiv.appendChild(html);
 
                var x = document.getElementById( 'link_search_input' );
 
                var hide = document.createElement("a");
                hide.href = "#";
 
                hide.onclick = function () {
                        link_hide('linksearch');
                        link_hide('linksuggest');
                        x.value = '';
                        return false;
                };
 
                newdiv.appendChild(hide);       
 
                var hide_text = document.createTextNode("(close)");
                hide.appendChild(hide_text);
 
 
        }else{
                var element = document.getElementById('linksearch'); 
                if (element.style.display == 'none') {
                        var x = document.getElementById( 'link_search_input' );
                        element.style.display='';
                }else{
                        element.style.display='none';
                        link_hide('linksuggest');
                        return false;
                }
        }
 
        document.getElementById( 'link_search_input' ).focus();
        x.onkeyup = function(){
                LinkSearchCall();
    }
}
 
 
function Insertlink(name) {
        var input = document.getElementById("link_search_input");
        input.value = '';
 
        link_hide('linksuggest');
        insertTags('[['+name+']]', '', '');             
}       
 
 
document.onclick=check; 
 
function check(e){ 
        var target = (e && e.target) || (event && event.srcElement); 
        var obj = document.getElementById('linksuggest'); 
        if (obj) {
                var parent = checkParent(target); 
                if(parent){
                        obj.style.display='none';
                }       
        } 
} 
 
function checkParent(t){ 
        while(t.parentNode){ 
                if(t==document.getElementById('linksuggest')){ 
                        return false 
                } 
                t=t.parentNode 
        } 
        return true 
}

CSS

Copy the following, and save it in the searchsuggest folder as LinkSuggest.css (this can all be changed without issue on-wiki by editing your wiki's MediaWiki:Common.css)

#linksuggest {
        float: left;
        position: absolute;
        z-index: 3;
        text-align: left;
        border: 1px solid #737373;
        font-size: 11px;
        width: auto;
        min-width: 300px;
        border-top-style: none;
        background-color: white;
        padding-top: .5em;
        padding-bottom: 1em;
        margin-left: .5em;
        color:black;
}
 
#link_search_input{
        border: 1px solid #333;
}
 
#linksuggest a {
        color: black;
        background: #7cff00;
        padding-left: .5em;
        padding-right: .5em;
        display: block;
        font-weight: bold;
        font-style: normal;
}
 
#linksuggest ul{
        list-style: none;
        margin: 0;
}
 
#linksuggest li{
        padding:1px 5px;
        white-space: nowrap;
        text-align:left;
        margin: 0;
}
 
#linksuggest a:hover{
        font-weight: bold;
        text-decoration: underline;
        background: white;
        color: #4a1500;
}
 
#linksearch {
        text-align: left;
        border: 1px solid #737373;
        padding: .5em;
}

Related extensions

• QuickLink - Improved version of this extension.
• FCKeditor - has a function similar to this extension.
• LinkSuggest, A rewritten Wikia's version of this extension used on all wikias, requires jQuery to work. Superior in that a new edit box is not required, wikilinks and templates are automatically changed in the edit box as the user types.
  • Help:Link_Suggest