collapsible.js: Use ES6's class syntax

public/js/icinga/behavior/collapsible.js

@@ -11,8 +11,9 @@
      *
      * @param  icinga  Icinga  The current Icinga Object
      */
-    var Collapsible = function(icinga) {
+    class Collapsible extends Icinga.EventListener {
-        Icinga.EventListener.call(this, icinga);
+        constructor(icinga) {
+            super(icinga);
 
             this.on('layout-change', this.onLayoutChange, this);
             this.on('rendered', '#main > .container, #modal-content', this.onRendered, this);
@@ -29,16 +30,14 @@
             )
                 .on('add', this.onExpand, this)
                 .on('delete', this.onCollapse, this);
-    };
+        }
-
-    Collapsible.prototype = new Icinga.EventListener();
 
         /**
          * Initializes all collapsibles. Triggered on rendering of a container.
          *
          * @param event  Event  The `onRender` event triggered by the rendered container
          */
-    Collapsible.prototype.onRendered = function(event) {
+        onRendered(event) {
             let _this = event.data.self,
                 toCollapse = [],
                 toExpand = [];
@@ -65,14 +64,14 @@
             for (const collapsible of toExpand) {
                 _this.expand(collapsible);
             }
-    };
+        }
 
         /**
          * Updates all collapsibles.
          *
          * @param event  Event  The `layout-change` event triggered by window resizing or column changes
          */
-    Collapsible.prototype.onLayoutChange = function(event) {
+        onLayoutChange(event) {
             let _this = event.data.self;
             let toCollapse = [];
 
@@ -98,14 +97,14 @@
                     _this.collapse(collapseInfo[0], collapseInfo[1]);
                 }
             }, 0);
-    };
+        }
 
         /**
          * A collapsible got expanded in another window, try to apply this here as well
          *
          * @param   {string}    collapsiblePath
          */
-    Collapsible.prototype.onExpand = function(collapsiblePath) {
+        onExpand(collapsiblePath) {
             let collapsible = document.querySelector(collapsiblePath);
 
             if (collapsible && 'canCollapse' in collapsible.dataset) {
@@ -115,14 +114,14 @@
                     this.expand(collapsible);
                 }
             }
-    };
+        }
 
         /**
          * A collapsible got collapsed in another window, try to apply this here as well
          *
          * @param   {string}    collapsiblePath
          */
-    Collapsible.prototype.onCollapse = function(collapsiblePath) {
+        onCollapse(collapsiblePath) {
             let collapsible = document.querySelector(collapsiblePath);
 
             if (collapsible && this.canCollapse(collapsible)) {
@@ -132,14 +131,14 @@
                     this.collapse(collapsible, this.calculateCollapsedHeight(collapsible));
                 }
             }
-    };
+        }
 
         /**
          * Event handler for toggling collapsibles. Switches the collapsed state of the respective container.
          *
          * @param event  Event  The `onClick` event triggered by the clicked collapsible-control element
          */
-    Collapsible.prototype.onControlClicked = function(event) {
+        onControlClicked(event) {
             let _this = event.data.self,
                 target = event.currentTarget;
 
@@ -186,7 +185,7 @@
                 // The browser handles these clicks as well, and would toggle the state again
                 event.preventDefault();
             }
-    };
+        }
 
         /**
          * Setup the given collapsible
@@ -195,7 +194,7 @@
          *
          * @returns {boolean}  Whether it needs to collapse or not
          */
-    Collapsible.prototype.setupCollapsible = function (collapsible) {
+        setupCollapsible(collapsible) {
             if (this.isDetails(collapsible)) {
                 let summary = collapsible.querySelector(':scope > summary');
                 if (! summary.classList.contains('collapsible-control')) {
@@ -239,7 +238,7 @@
             } else {
                 return ! this.state.has(this.icinga.utils.getCSSPath(collapsible));
             }
-    };
+        }
 
         /**
          * Return an appropriate row element selector
@@ -248,7 +247,7 @@
          *
          * @returns {string}
          */
-    Collapsible.prototype.getRowSelector = function(collapsible) {
+        getRowSelector(collapsible) {
             if (!! collapsible.dataset.visibleHeight) {
                 return '';
             }
@@ -260,7 +259,7 @@
             }
 
             return '';
-    };
+        }
 
         /**
          * Check whether the given collapsible needs to collapse
@@ -269,7 +268,7 @@
          *
          * @returns {boolean}
          */
-    Collapsible.prototype.canCollapse = function(collapsible) {
+        canCollapse(collapsible) {
             if (this.isDetails(collapsible)) {
                 return collapsible.querySelector(':scope > summary') !== null;
             }
@@ -298,14 +297,14 @@
 
                 return actualHeight >= maxHeight * 2;
             }
-    };
+        }
 
         /**
          * Calculate the height the given collapsible should have when collapsed
          *
          * @param collapsible
          */
-    Collapsible.prototype.calculateCollapsedHeight = function (collapsible) {
+        calculateCollapsedHeight(collapsible) {
             let height;
 
             if (this.isDetails(collapsible)) {
@@ -360,7 +359,7 @@
             }
 
             return height;
-    };
+        }
 
         /**
          * Collapse the given collapsible
@@ -368,7 +367,7 @@
          * @param collapsible The given collapsible container element
          * @param toHeight {int} The height in pixels to collapse to
          */
-    Collapsible.prototype.collapse = function(collapsible, toHeight) {
+        collapse(collapsible, toHeight) {
             if (this.isDetails(collapsible)) {
                 collapsible.open = false;
             } else {
@@ -376,14 +375,14 @@
             }
 
             collapsible.classList.add('collapsed');
-    };
+        }
 
         /**
          * Expand the given collapsible
          *
          * @param   collapsible    The given collapsible container element
          */
-    Collapsible.prototype.expand = function(collapsible) {
+        expand(collapsible) {
             collapsible.classList.remove('collapsed');
 
             if (this.isDetails(collapsible)) {
@@ -391,7 +390,7 @@
             } else {
                 collapsible.style.cssText = '';
             }
-    };
+        }
 
         /**
          * Get whether the given collapsible is a <details> element
@@ -400,9 +399,10 @@
          *
          * @return {Boolean}
          */
-    Collapsible.prototype.isDetails = function (collapsible) {
+        isDetails(collapsible) {
             return collapsible.tagName === 'DETAILS';
-    };
+        }
+    }
 
     Icinga.Behaviors.Collapsible = Collapsible;