Modernize panel scripts

Change-Id: I36b37cc1816213c72ddbd9a8f8e5b163c9e2b87f
diff --git a/dev/js/src/panel.js b/dev/js/src/panel.js
index f9fb979..246a861 100644
--- a/dev/js/src/panel.js
+++ b/dev/js/src/panel.js
@@ -5,6 +5,8 @@
  * The buttons are associated with the panel's views,
  * though they are integrated independently
  */
+"use strict";
+
 define(['buttongroup', 'util'], function (buttonGroupClass) {
 
   return {
@@ -15,7 +17,8 @@
 
     // Override by inheriting object
     _init : function (classes) {
-      this.views = [];
+      const t = this;
+      t.views = [];
 
       /**
        * Main action buttons for the panel,
@@ -23,18 +26,20 @@
        * or as tabs (for the result).
        */
 
-      this._classes = classes;
-      var c = ['action', 'button-panel'];
+      t._classes = classes;
+      const c = ['action', 'button-panel'];
+
       if (classes)
         c.push.apply(c,classes);
-      this.actions = buttonGroupClass.create(c).bind(this);
+
+      t.actions = buttonGroupClass.create(c).bind(this);
 
       //prepend or append views of the panel
-      this.prepend = false;
+      t.prepend = false;
       
       // Warning: This is circular
-      this.actions.panel = this;
-      return this;
+      t.actions.panel = t;
+      return t;
     },
 
     
@@ -46,8 +51,8 @@
         return this._element;
 
       // Create panel element
-      var e = document.createElement('div');
-      var cl = e.classList;
+      const e = document.createElement('div');
+      const cl = e.classList;
       cl.add('panel');
    
       if (this._classes)
@@ -57,7 +62,7 @@
 
       // Per default the action buttons are below the view
       // and integrated
-      var aElem = this.actions.element();
+      const aElem = this.actions.element();
       if (!aElem.parentNode)
         e.appendChild(aElem);
 
@@ -74,6 +79,7 @@
       return this._viewE;
     },
 
+
     /**
      * Add a view to the panel
      */
@@ -100,6 +106,7 @@
       view.panel = this;
     },
 
+
     /**
      * Delete a closed view from panel
      */
@@ -110,6 +117,7 @@
       });
     },
 
+
     /**
      * Upgrade this object to another object,
      * while private data stays intact.
@@ -117,7 +125,7 @@
      * @param {Object] An object with properties.
      */
     upgradeTo : function (props) {
-      for (var prop in props) {
+      for (let prop in props) {
         this[prop] = props[prop];
       };
       return this;
diff --git a/dev/js/src/panel/match.js b/dev/js/src/panel/match.js
index 99f7366..603a230 100644
--- a/dev/js/src/panel/match.js
+++ b/dev/js/src/panel/match.js
@@ -3,6 +3,8 @@
  *
  * @author Nils Diewald
  */
+"use strict";
+
 define([
   'panel',
   'match/treeitem',
@@ -34,11 +36,11 @@
 
       this._match = match;
 
-      var a = this.actions;
+      const a = this.actions;
 
       // TODO:
       //   Ugly hack!
-      var cl= a.element().classList;
+      const cl = a.element().classList;
       cl.remove('matchinfo');
       cl.add('button-matchinfo');
 
@@ -66,7 +68,7 @@
             KorAP.TreeMenu.element().setAttribute('id', 'treeMenu');
           };
 
-          var tm = KorAP.TreeMenu;
+          const tm = KorAP.TreeMenu;
 
           // Set panel
           tm.panel(this);
@@ -83,7 +85,7 @@
 
       // If plugins are enabled, add all buttons for the match panel
       if (KorAP.Plugin) {
-        var matchButtons = KorAP.Plugin.buttonGroup("match");
+        const matchButtons = KorAP.Plugin.buttonGroup("match");
         if (matchButtons) {
 
           // Add all matchbuttons in order
@@ -99,10 +101,12 @@
      * Add meta view to panel
      */
     addMeta : function () {
-      if (this._metaView && this._metaView.shown())
+      const t = this;
+      if (t._metaView && t._metaView.shown())
         return;
-      this._metaView = metaView.create(this._match);
-      this.add(this._metaView);
+
+      t._metaView = metaView.create(t._match);
+      t.add(t._metaView);
     },
 
     
@@ -110,12 +114,14 @@
      * Add table view to panel
      */
     addTable : function () {
-      if (this._tableView && this._tableView.shown())
+      const t = this;
+      if (t._tableView && t._tableView.shown())
         return;
-      this._tableView = tableView.create(this._match);
-      this.add(this._tableView);
+      t._tableView = tableView.create(t._match);
+      t.add(t._tableView);
     },
 
+
     /**
      * Add Tree view to panel
      */
@@ -133,15 +139,12 @@
       if (this._menuList)
         return this._menuList;
 
-      var match = this._match;
-
       // Join spans and relations
-      var treeLayers = []
-      var spans = match.getSpans();
-      var rels = match.getRels();
-      
-      spans.forEach(i => treeLayers.push(i));
-      rels.forEach(i => treeLayers.push(i));
+      let treeLayers = []
+
+      const match = this._match;
+      match.getSpans().forEach(i => treeLayers.push(i));
+      match.getRels().forEach(i => treeLayers.push(i));
 
       // Get spans
       treeLayers = treeLayers.sort(
@@ -161,7 +164,7 @@
           return 0;
         });
       
-      var menuList = [];
+      let menuList = [];
       
       // Show tree views
       treeLayers.forEach(
diff --git a/dev/js/src/panel/query.js b/dev/js/src/panel/query.js
index 7f66f9f..d2bf80f 100644
--- a/dev/js/src/panel/query.js
+++ b/dev/js/src/panel/query.js
@@ -3,6 +3,8 @@
  *
  * @author Nils Diewald
  */
+"use strict";
+
 define([
   'panel'
 ], function (panelClass) {
@@ -20,14 +22,15 @@
     // Initialize panel
     _init : function (opened) {
       this._opened = opened;
-      var a = this.actions;
+      const a = this.actions;
       
       // If plugins are enabled, add all buttons for the query panel
       if (KorAP.Plugin) {
-        var queryButtons = KorAP.Plugin.buttonGroup("query");
 
         // Add all matchbuttons in order
-        queryButtons.forEach(i => a.add.apply(a, i));
+        KorAP.Plugin
+          .buttonGroup("query")
+          .forEach(i => a.add.apply(a, i));
 
         KorAP.Plugin.clearButtonGroup("query")
       };
diff --git a/dev/js/src/panel/result.js b/dev/js/src/panel/result.js
index 3c5dc31..2bb647a 100644
--- a/dev/js/src/panel/result.js
+++ b/dev/js/src/panel/result.js
@@ -3,6 +3,8 @@
  *
  * @author Nils Diewald
  */
+"use strict";
+
 define([
   'panel',
   'view/result/koralquery'
@@ -24,13 +26,13 @@
     _init : function (opened) {
       this._opened = opened;
 
-      
       // If plugins are enabled, add all buttons for the result panel
-     if (KorAP.Plugin) {
-        var resultButtons = KorAP.Plugin.buttonGroup("result");
+      if (KorAP.Plugin) {
 
         // Add all result buttons in order
-       resultButtons.forEach(i => this.actions.add.apply(this.actions, i));
+        KorAP.Plugin
+          .buttonGroup("result")
+          .forEach(i => this.actions.add.apply(this.actions, i));
 
         KorAP.Plugin.clearButtonGroup("result");
       };
@@ -47,30 +49,37 @@
     addKqAction : function () {
 
       // Open KoralQuery view
-      var kqButton = this.actions.add(loc.SHOW_KQ, {'cls':['show-kq','button-icon']}, function () {
+      const kqButton = this.actions.add(
+        loc.SHOW_KQ,
+        {'cls':['show-kq','button-icon']},
+        function () {
 
-        // Show only once - otherwise toggle
-        if (this._kq && this._kq.shown()) {
-          this._kq.close();
-          return;
-        };
+          const t = this;
+
+          // Show only once - otherwise toggle
+          if (t._kq && t._kq.shown()) {
+            t._kq.close();
+            return;
+          };
           
-        this._kq = kqViewClass.create();
+          t._kq = kqViewClass.create();
 
-        // On close, remove session info on KQ
-        this._kq.onClose = function () {
-          delete this._opened['kq'];
-        }.bind(this);
+          // On close, remove session info on KQ
+          t._kq.onClose = function () {
+            delete this._opened['kq'];
+          }.bind(t);
 
-        this._opened['kq'] = true;
-        this.add(this._kq);
-      });
+          t._opened['kq'] = true;
+          t.add(t._kq);
+        }
+      );
 
       // Show KoralQuery in case it's meant to be shown
       if (this._opened['kq'])
         kqButton.click();
     },
 
+
     /**
      * Add align action to panel
      */
@@ -79,7 +88,7 @@
        * Toggle the alignment (left <=> right)
        */
       this.actions.add(loc.TOGGLE_ALIGN, {'cls':['align','right','button-icon']}, function (e) {
-        var olCl = d.querySelector('#search > ol').classList;
+        const olCl = d.querySelector('#search > ol').classList;
         if (olCl.contains('align-left')) {
           olCl.remove('align-left');
           olCl.add('align-right');
@@ -96,8 +105,6 @@
           this.button.toggleClass("left", "right");
         };        
       });
-
-      
     }
   }
 });
diff --git a/dev/js/src/panel/vc.js b/dev/js/src/panel/vc.js
index 978c442..6259d48 100644
--- a/dev/js/src/panel/vc.js
+++ b/dev/js/src/panel/vc.js
@@ -7,6 +7,8 @@
  * @author Helge Stallkamp
  */
 
+"use strict";
+
 define([
   'panel',
   'view/vc/corpstatv'
@@ -26,12 +28,10 @@
     
     _init : function(vc){
      this.vc = vc;
-     var actions = this.actions;
-     var that = this;
+     const actions = this.actions;
       actions.add(loc.SHOW_STAT, {'cls':['statistic']}, function() {
-       that.addCorpStat();
-      });
-     
+        this.addCorpStat();
+      }.bind(this));
       return this;
     },
     
@@ -40,23 +40,23 @@
      * Add corpus statistic view to panel
      */
     addCorpStat: function(){
-      
+      const t = this;
+
       //Refreshes corpus statistic
-      if(this.statView !== undefined &&  this.statView.shown()){
-        let statt = this.statView.show();
+      if (t.statView !== undefined && t.statView.shown()){
+        let statt = t.statView.show();
         if (statt.classList.contains('stdisabled')){
-          this.reloadCorpStat(); 
+          t.reloadCorpStat(); 
           statt.classList.remove('stdisabled');
         }
-      }
+      };
       
       //Add corpus statistic
-      if (this.statView === undefined || !this.statView.shown()) {
-        this.statView = corpStatVClass.create(this.vc, this);
-        this.add(this.statView);
-        this.vc.oldvcQuery = KorAP.vc.toQuery();
-      }
-      
+      if (t.statView === undefined || !t.statView.shown()) {
+        t.statView = corpStatVClass.create(t.vc,t);
+        t.add(t.statView);
+        t.vc.oldvcQuery = KorAP.vc.toQuery();
+      };
     },
     
     /**
@@ -66,7 +66,6 @@
     reloadCorpStat: function(){
       this.statView.close();
       this.addCorpStat();
-    }
-    
+    }    
   }
 });