turn link wizard into a class

Basic modernisation of the link wizard to more modern JavaScript.

1 files changed, 168 insertions, 175 deletions

diff --git a/lib/scripts/linkwiz.js b/lib/scripts/linkwiz.js
index d82ca9681..494a60b15 100644
--- a/lib/scripts/linkwiz.js
+++ b/lib/scripts/linkwiz.js
@@ -4,116 +4,106 @@
  * @author Andreas Gohr <gohr@cosmocode.de>
  * @author Pierre Spring <pierre.spring@caillou.ch>
  */
-var dw_linkwiz = {
-    $wiz: null,
-    $entry: null,
-    result: null,
-    timer: null,
-    textArea: null,
-    selected: null,
-    selection: null,
+class LinkWizard {
+    constructor() {
+        this.$wiz = null;
+        this.$entry = null;
+        this.result = null;
+        this.timer = null;
+        this.textArea = null;
+        this.selected = null;
+        this.selection = null;
+    }
 
     /**
-     * Initialize the dw_linkwizard by creating the needed HTML
-     * and attaching the eventhandlers
+     * Initialize the LinkWizard by creating the needed HTML
+     * and attaching the event handlers
      */
-    init: function($editor){
+    init($editor) {
         // position relative to the text area
-        var pos = $editor.position();
+        const pos = $editor.position();
 
         // create HTML Structure
-        if(dw_linkwiz.$wiz)
-            return;
-        dw_linkwiz.$wiz = jQuery(document.createElement('div'))
-               .dialog({
-                   autoOpen: false,
-                   draggable: true,
-                   title: LANG.linkwiz,
-                   resizable: false
-               })
-               .html(
-                    '<div>'+LANG.linkto+' <input type="text" class="edit" id="link__wiz_entry" autocomplete="off" /></div>'+
-                    '<div id="link__wiz_result"></div>'
-                    )
-               .parent()
-               .attr('id','link__wiz')
-               .css({
-                    'position':    'absolute',
-                    'top':         (pos.top+20)+'px',
-                    'left':        (pos.left+80)+'px'
-                   })
-               .hide()
-               .appendTo('.dokuwiki:first');
-
-        dw_linkwiz.textArea = $editor[0];
-        dw_linkwiz.result = jQuery('#link__wiz_result')[0];
+        if (this.$wiz) return;
+        this.$wiz = jQuery(document.createElement('div'))
+            .dialog({
+                autoOpen: false,
+                draggable: true,
+                title: LANG.linkwiz,
+                resizable: false
+            })
+            .html(
+                '<div>' + LANG.linkto + ' <input type="text" class="edit" id="link__wiz_entry" autocomplete="off" /></div>' +
+                '<div id="link__wiz_result"></div>'
+            )
+            .parent()
+            .attr('id', 'link__wiz')
+            .css({
+                'position': 'absolute',
+                'top': (pos.top + 20) + 'px',
+                'left': (pos.left + 80) + 'px'
+            })
+            .hide()
+            .appendTo('.dokuwiki:first');
+
+        this.textArea = $editor[0];
+        this.result = jQuery('#link__wiz_result')[0];
 
         // scrollview correction on arrow up/down gets easier
-        jQuery(dw_linkwiz.result).css('position', 'relative');
+        jQuery(this.result).css('position', 'relative');
 
-        dw_linkwiz.$entry = jQuery('#link__wiz_entry');
-        if(JSINFO.namespace){
-            dw_linkwiz.$entry.val(JSINFO.namespace+':');
+        this.$entry = jQuery('#link__wiz_entry');
+        if (JSINFO.namespace) {
+            this.$entry.val(JSINFO.namespace + ':');
         }
 
         // attach event handlers
-        jQuery('#link__wiz .ui-dialog-titlebar-close').on('click', dw_linkwiz.hide);
-        dw_linkwiz.$entry.keyup(dw_linkwiz.onEntry);
-        jQuery(dw_linkwiz.result).on('click', 'a', dw_linkwiz.onResultClick);
-    },
+        jQuery('#link__wiz .ui-dialog-titlebar-close').on('click', () => this.hide());
+        this.$entry.keyup((e) => this.onEntry(e));
+        jQuery(this.result).on('click', 'a', (e) => this.onResultClick(e));
+    }
 
     /**
-     * handle all keyup events in the entry field
+     * Handle all keyup events in the entry field
      */
-    onEntry: function(e){
-        if(e.keyCode == 37 || e.keyCode == 39){ //left/right
+    onEntry(e) {
+        if (e.keyCode == 37 || e.keyCode == 39) { //left/right
             return true; //ignore
         }
-        if(e.keyCode == 27){ //Escape
-            dw_linkwiz.hide();
+        if (e.keyCode == 27) { //Escape
+            this.hide();
             e.preventDefault();
             e.stopPropagation();
             return false;
         }
-        if(e.keyCode == 38){ //Up
-            dw_linkwiz.select(dw_linkwiz.selected -1);
+        if (e.keyCode == 38) { //Up
+            this.select(this.selected - 1);
             e.preventDefault();
             e.stopPropagation();
             return false;
         }
-        if(e.keyCode == 40){ //Down
-            dw_linkwiz.select(dw_linkwiz.selected +1);
+        if (e.keyCode == 40) { //Down
+            this.select(this.selected + 1);
             e.preventDefault();
             e.stopPropagation();
             return false;
         }
-        if(e.keyCode == 13){ //Enter
-            if(dw_linkwiz.selected > -1){
-                var $obj = dw_linkwiz.$getResult(dw_linkwiz.selected);
-                if($obj.length > 0){
-                    dw_linkwiz.resultClick($obj.find('a')[0]);
+        if (e.keyCode == 13) { //Enter
+            if (this.selected > -1) {
+                const $obj = this.$getResult(this.selected);
+                if ($obj.length > 0) {
+                    this.resultClick($obj.find('a')[0]);
                 }
-            }else if(dw_linkwiz.$entry.val()){
-                dw_linkwiz.insertLink(dw_linkwiz.$entry.val());
+            } else if (this.$entry.val()) {
+                this.insertLink(this.$entry.val());
             }
 
             e.preventDefault();
             e.stopPropagation();
             return false;
         }
-        dw_linkwiz.autocomplete();
-    },
-
-    /**
-     * Get one of the results by index
-     *
-     * @param   num int result div to return
-     * @returns DOMObject or null
-     */
-    getResult: function(num){
-        DEPRECATED('use dw_linkwiz.$getResult()[0] instead');
-        return dw_linkwiz.$getResult()[0] || null;
-    },
+        this.autocomplete();
+    }
 
     /**
      * Get one of the results by index
@@ -121,85 +111,85 @@ var dw_linkwiz = {
      * @param   num int result div to return
      * @returns jQuery object
      */
-    $getResult: function(num) {
-        return jQuery(dw_linkwiz.result).find('div').eq(num);
-    },
+    $getResult(num) {
+        return jQuery(this.result).find('div').eq(num);
+    }
 
     /**
      * Select the given result
      */
-    select: function(num){
-        if(num < 0){
-            dw_linkwiz.deselect();
+    select(num) {
+        if (num < 0) {
+            this.deselect();
             return;
         }
 
-        var $obj = dw_linkwiz.$getResult(num);
+        const $obj = this.$getResult(num);
         if ($obj.length === 0) {
             return;
         }
 
-        dw_linkwiz.deselect();
+        this.deselect();
         $obj.addClass('selected');
 
         // make sure the item is viewable in the scroll view
 
         //getting child position within the parent
-        var childPos = $obj.position().top;
+        const childPos = $obj.position().top;
         //getting difference between the childs top and parents viewable area
-        var yDiff = childPos + $obj.outerHeight() - jQuery(dw_linkwiz.result).innerHeight();
+        const yDiff = childPos + $obj.outerHeight() - jQuery(this.result).innerHeight();
 
         if (childPos < 0) {
             //if childPos is above viewable area (that's why it goes negative)
-            jQuery(dw_linkwiz.result)[0].scrollTop += childPos;
-        } else if(yDiff > 0) {
+            jQuery(this.result)[0].scrollTop += childPos;
+        } else if (yDiff > 0) {
             // if difference between childs top and parents viewable area is
             // greater than the height of a childDiv
-            jQuery(dw_linkwiz.result)[0].scrollTop += yDiff;
+            jQuery(this.result)[0].scrollTop += yDiff;
         }
 
-        dw_linkwiz.selected = num;
-    },
+        this.selected = num;
+    }
 
     /**
-     * deselect a result if any is selected
+     * Deselect a result if any is selected
      */
-    deselect: function(){
-        if(dw_linkwiz.selected > -1){
-            dw_linkwiz.$getResult(dw_linkwiz.selected).removeClass('selected');
+    deselect() {
+        if (this.selected > -1) {
+            this.$getResult(this.selected).removeClass('selected');
         }
-        dw_linkwiz.selected = -1;
-    },
+        this.selected = -1;
+    }
 
     /**
-     * Handle clicks in the result set an dispatch them to
+     * Handle clicks in the result set and dispatch them to
      * resultClick()
      */
-    onResultClick: function(e){
-        if(!jQuery(this).is('a')) {
+    onResultClick(e) {
+        if (!jQuery(e.target).is('a')) {
             return;
         }
         e.stopPropagation();
         e.preventDefault();
-        dw_linkwiz.resultClick(this);
+        this.resultClick(e.target);
         return false;
-    },
+    }
 
     /**
      * Handles the "click" on a given result anchor
      */
-    resultClick: function(a){
-        dw_linkwiz.$entry.val(a.title);
-        if(a.title == '' || a.title.substr(a.title.length-1) == ':'){
-            dw_linkwiz.autocomplete_exec();
-        }else{
+    resultClick(a) {
+        this.$entry.val(a.title);
+        if (a.title == '' || a.title.substr(a.title.length - 1) == ':') {
+            this.autocomplete_exec();
+        } else {
             if (jQuery(a.nextSibling).is('span')) {
-                dw_linkwiz.insertLink(a.nextSibling.innerHTML);
-            }else{
-                dw_linkwiz.insertLink('');
+                this.insertLink(a.nextSibling.innerHTML);
+            } else {
+                this.insertLink('');
             }
         }
-    },
+    }
 
     /**
      * Insert the id currently in the entry box to the textarea,
@@ -207,133 +197,136 @@ var dw_linkwiz = {
      * When no selection is available the given title will be used
      * as link title instead
      */
-    insertLink: function(title){
-        var link = dw_linkwiz.$entry.val(),
+    insertLink(title) {
+        let link = this.$entry.val(),
             sel, stxt;
-        if(!link) {
+        if (!link) {
             return;
         }
 
-        sel = DWgetSelection(dw_linkwiz.textArea);
-        if(sel.start == 0 && sel.end == 0) {
-            sel = dw_linkwiz.selection;
+        sel = DWgetSelection(this.textArea);
+        if (sel.start == 0 && sel.end == 0) {
+            sel = this.selection;
         }
 
         stxt = sel.getText();
 
         // don't include trailing space in selection
-        if(stxt.charAt(stxt.length - 1) == ' '){
+        if (stxt.charAt(stxt.length - 1) == ' ') {
             sel.end--;
             stxt = sel.getText();
         }
 
-        if(!stxt && !DOKU_UHC) {
-            stxt=title;
+        if (!stxt && !DOKU_UHC) {
+            stxt = title;
         }
 
         // prepend colon inside namespaces for non namespace pages
-        if(dw_linkwiz.textArea.form.id.value.indexOf(':') != -1 &&
-           link.indexOf(':') == -1){
-           link = ':' + link;
+        if (this.textArea.form.id.value.indexOf(':') != -1 &&
+            link.indexOf(':') == -1) {
+            link = ':' + link;
         }
 
-        var so = link.length;
-        var eo = 0;
-        if(dw_linkwiz.val){
-            if(dw_linkwiz.val.open) {
-                so += dw_linkwiz.val.open.length;
-                link = dw_linkwiz.val.open+link;
+        let so = link.length;
+        let eo = 0;
+        if (this.val) {
+            if (this.val.open) {
+                so += this.val.open.length;
+                link = this.val.open + link;
             }
             link += '|';
             so += 1;
-            if(stxt) {
+            if (stxt) {
                 link += stxt;
             }
-            if(dw_linkwiz.val.close) {
-                link += dw_linkwiz.val.close;
-                eo = dw_linkwiz.val.close.length;
+            if (this.val.close) {
+                link += this.val.close;
+                eo = this.val.close.length;
             }
         }
 
-        pasteText(sel,link,{startofs: so, endofs: eo});
-        dw_linkwiz.hide();
+        pasteText(sel, link, {startofs: so, endofs: eo});
+        this.hide();
 
         // reset the entry to the parent namespace
-        var externallinkpattern = new RegExp('^((f|ht)tps?:)?//', 'i'),
-            entry_value;
-        if (externallinkpattern.test(dw_linkwiz.$entry.val())) {
+        const externallinkpattern = new RegExp('^((f|ht)tps?:)?//', 'i');
+        let entry_value;
+        if (externallinkpattern.test(this.$entry.val())) {
             if (JSINFO.namespace) {
                 entry_value = JSINFO.namespace + ':';
             } else {
                 entry_value = ''; //reset whole external links
             }
         } else {
-            entry_value = dw_linkwiz.$entry.val().replace(/[^:]*$/, '')
+            entry_value = this.$entry.val().replace(/[^:]*$/, '')
         }
-        dw_linkwiz.$entry.val(entry_value);
-    },
+        this.$entry.val(entry_value);
+    }
 
     /**
      * Start the page/namespace lookup timer
      *
      * Calls autocomplete_exec when the timer runs out
      */
-    autocomplete: function(){
-        if(dw_linkwiz.timer !== null){
-            window.clearTimeout(dw_linkwiz.timer);
-            dw_linkwiz.timer = null;
+    autocomplete() {
+        if (this.timer !== null) {
+            window.clearTimeout(this.timer);
+            this.timer = null;
         }
 
-        dw_linkwiz.timer = window.setTimeout(dw_linkwiz.autocomplete_exec,350);
-    },
+        this.timer = window.setTimeout(() => this.autocomplete_exec(), 350);
+    }
 
     /**
      * Executes the AJAX call for the page/namespace lookup
      */
-    autocomplete_exec: function(){
-        var $res = jQuery(dw_linkwiz.result);
-        dw_linkwiz.deselect();
-        $res.html('<img src="'+DOKU_BASE+'lib/images/throbber.gif" alt="" width="16" height="16" />')
+    autocomplete_exec() {
+        const $res = jQuery(this.result);
+        this.deselect();
+        $res.html('<img src="' + DOKU_BASE + 'lib/images/throbber.gif" alt="" width="16" height="16" />')
             .load(
-            DOKU_BASE + 'lib/exe/ajax.php',
-            {
-                call: 'linkwiz',
-                q: dw_linkwiz.$entry.val()
-            }
-        );
-    },
+                DOKU_BASE + 'lib/exe/ajax.php',
+                {
+                    call: 'linkwiz',
+                    q: this.$entry.val()
+                }
+            );
+    }
 
     /**
      * Show the link wizard
      */
-    show: function(){
-        dw_linkwiz.selection  = DWgetSelection(dw_linkwiz.textArea);
-        dw_linkwiz.$wiz.show();
-        dw_linkwiz.$entry.focus();
-        dw_linkwiz.autocomplete();
+    show() {
+        this.selection = DWgetSelection(this.textArea);
+        this.$wiz.show();
+        this.$entry.focus();
+        this.autocomplete();
 
         // Move the cursor to the end of the input
-        var temp = dw_linkwiz.$entry.val();
-        dw_linkwiz.$entry.val('');
-        dw_linkwiz.$entry.val(temp);
-    },
+        const temp = this.$entry.val();
+        this.$entry.val('');
+        this.$entry.val(temp);
+    }
 
     /**
      * Hide the link wizard
      */
-    hide: function(){
-        dw_linkwiz.$wiz.hide();
-        dw_linkwiz.textArea.focus();
-    },
+    hide() {
+        this.$wiz.hide();
+        this.textArea.focus();
+    }
 
     /**
      * Toggle the link wizard
      */
-    toggle: function(){
-        if(dw_linkwiz.$wiz.css('display') == 'none'){
-            dw_linkwiz.show();
-        }else{
-            dw_linkwiz.hide();
+    toggle() {
+        if (this.$wiz.css('display') == 'none') {
+            this.show();
+        } else {
+            this.hide();
         }
     }
-};
+}
+
+const dw_linkwiz = new LinkWizard();
+