path: root/lib/scripts/linkwiz.js

/**
 * The Link Wizard
 *
 * @author Andreas Gohr <gohr@cosmocode.de>
 * @author Pierre Spring <pierre.spring@caillou.ch>
 */
(function($){
    $.fn.extend({
        linkwiz: function(editor) {

            var wiz;
            var entry;
            var result;
            var timer;
            var textArea;
            var selected;
            var selection;

            /**
             * Initialize the linkwizard by creating the needed HTML
             * and attaching the eventhandlers
             */
            var init = function(textAreaElement){


                // create HTML Structure
                wiz = document.createElement('div');
                wiz.style.position = 'absolute';
                wiz.id = 'link__wiz';
                wiz.className     = 'picker';
                wiz.style.top  = (findPosY(textAreaElement)+20)+'px';
                wiz.style.left = (findPosX(textAreaElement)+80)+'px';
                wiz.style.marginLeft = '-10000px';
                wiz.style.marginTop  = '-10000px';

                wiz.innerHTML =
                     '<div id="link__wiz_header">'+
                     '<img src="'+DOKU_BASE+'lib/images/close.png" width="16" height="16" align="right" alt="" id="link__wiz_close" />'+
                     LANG['linkwiz']+'</div>'+
                     '<div>'+LANG['linkto']+' <input type="text" class="edit" id="link__wiz_entry" autocomplete="off" /></div>'+
                     '<div id="link__wiz_result"></div>';
                $('#dw__editform')[0].parentNode.appendChild(wiz);
                textArea = textAreaElement;
                result = $('#link__wiz_result')[0];
                entry = $('#link__wiz_entry')[0];

                // attach event handlers
                var obj;
                var obj = $('#link__wiz_close')[0];
                obj.onclick = hide;

                addEvent(entry,'keyup',onEntry);
                addEvent(result,'click',onResultClick);

                $(wiz).draggable({handle: '#link__wiz_header'});

            };

            /**
             * handle all keyup events in the entry field
             */
            var onEntry = function(e){
                if(e.keyCode == 37 || e.keyCode == 39){ //left/right
                    return true; //ignore
                }
                if(e.keyCode == 27){
                    hide();
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
                if(e.keyCode == 38){ //Up
                    select(selected -1);
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
                if(e.keyCode == 40){ //Down
                    select(selected +1);
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
                if(e.keyCode == 13){ //Enter
                    if(selected > -1){
                        var obj = getResult(selected);
                        if(obj){
                            var a = $(obj).find('a')[0];
                            resultClick(a);
                        }
                    }else if(entry.value){
                        insertLink(entry.value);
                    }

                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
                autocomplete();
            };

            /**
             * Get one of the result by index
             *
             * @param int result div to return
             * @returns DOMObject or null
             */
            var getResult = function(num){
                var obj;
                var childs = $(result).find('div');
                var obj = childs[num];
                if(obj){
                    return obj;
                }else{
                    return null;
                }
            };

            /**
             * Select the given result
             */
            var select = function(num){
                if(num < 0){
                    deselect();
                    return;
                }

                var obj = getResult(num);
                if(obj){
                    deselect();
                    obj.className += ' selected';

                    // make sure the item is viewable in the scroll view
                    // FIXME check IE compatibility
                    if(obj.offsetTop > result.scrollTop + result.clientHeight){
                        result.scrollTop += obj.clientHeight;
                    }else if(obj.offsetTop - result.clientHeight < result.scrollTop){ // this works but isn't quite right, fixes welcome
                        result.scrollTop -= obj.clientHeight;
                    }
                    // now recheck - if still not in view, the user used the mouse to scroll
                    if( (obj.offsetTop > result.scrollTop + result.clientHeight) ||
                        (obj.offsetTop < result.scrollTop) ){
                        obj.scrollIntoView();
                    }

                    selected = num;
                }
            };

            /**
             * deselect a result if any is selected
             */
            var deselect = function(){
                if(selected > -1){
                    var obj = getResult(selected);
                    if(obj){
                        obj.className = obj.className.replace(/ ?selected/,'');
                    }
                }
                selected = -1;
            };

            /**
             * Handle clicks in the result set an dispatch them to
             * resultClick()
             */
            var onResultClick = function(e){
                if(e.target.tagName != 'A') return;
                e.stopPropagation();
                e.preventDefault();
                resultClick(e.target);
                return false;
            };

            /**
             * Handles the "click" on a given result anchor
             */
            var resultClick = function(a){
                var id = a.title;
                if(id == '' || id.substr(id.length-1) == ':'){
                    entry.value = id;
                    autocomplete_exec();
                }else{
                    entry.value = id;
                    if(a.nextSibling && a.nextSibling.tagName == 'SPAN'){
                        insertLink(a.nextSibling.innerHTML);
                    }else{
                        insertLink('');
                    }
                }
            };

            /**
             * Insert the id currently in the entry box to the textarea,
             * replacing the current selection or at the curso postion.
             * When no selection is available the given title will be used
             * as link title instead
             */
            var insertLink = function(title){
                if(!entry.value) return;

                var sel = getSelection(textArea);
                if(sel.start == 0 && sel.end == 0) sel = selection;

                var stxt = sel.getText();

                // don't include trailing space in selection
                if(stxt.charAt(stxt.length - 1) == ' '){
                    sel.end--;
                    var stxt = sel.getText();
                }

                if(!stxt && !DOKU_UHC) stxt=title;

                // prepend colon inside namespaces for non namespace pages
                if(textArea.form['id'].value.indexOf(':') != -1 &&
                   entry.value.indexOf(':') == -1){
                    entry.value = ':'+entry.value;
                }

                var link = '[['+entry.value+'|';
                if(stxt) link += stxt;
                link += ']]';

                var so = entry.value.length+3;
                var eo = 2;

                pasteText(sel,link,{startofs: so, endofs: eo});
                hide();
                // reset the entry to the parent namespace and remove : at the beginning
                entry.value = entry.value.replace(/(^:)?[^:]*$/, '');
            };

            /**
             * Start the page/namespace lookup timer
             *
             * Calls autocomplete_exec when the timer runs out
             */
            var autocomplete = function(){
                if(timer !== null){
                    window.clearTimeout(timer);
                    timer = null;
                }

                timer = window.setTimeout(autocomplete_exec,350);
            };

            /**
             * Executes the AJAX call for the page/namespace lookup
             */
            var autocomplete_exec = function(){
                deselect();
                result.innerHTML = '<img src="'+DOKU_BASE+'lib/images/throbber.gif" alt="" width="16" height="16" />';

                // because we need to use POST, we
                // can not use the .load() function.
                $.post(
                    DOKU_BASE + 'lib/exe/ajax.php',
                    {
                        call: 'linkwiz',
                        q: entry.value
                    },
                    function (data) {
                        result.innerHTML = data;
                    },
                    'html'
                );
            };

            /**
             * Clears the result area
             */
            var clear = function(){
                result.innerHTML = 'Search for a matching page name above, or browse through the pages on the right';
                entry.value = '';
            };

            /**
             * Show the linkwizard
             */
            var show = function(){
                selection  = getSelection(textArea);
                wiz.style.marginLeft = '0px';
                wiz.style.marginTop = '0px';
                entry.focus();
                autocomplete();
            };

            /**
             * Hide the link wizard
             */
            var hide = function(){
                wiz.style.marginLeft = '-10000px';
                wiz.style.marginTop  = '-10000px';
                textArea.focus();
            };

            /**
             * Toggle the link wizard
             */
            var toggle = function(){
                if(wiz.style.marginLeft == '-10000px'){
                    show();
                }else{
                    hide();
                }
            };

            init($(editor)[0]);

            return this.each(function() {
                $(this).click(function (e) {
                    e.preventDefault();
                    toggle();
                });
            });
        }
    });
})(jQuery);