action-list.js: Use vanilla js

Author: sukhwinder33445

public/js/action-list.js

@@ -42,74 +42,71 @@
         }
 
         onClick(event) {
-            var _this = event.data.self;
-            var $activeItems;
-            var $target = $(event.currentTarget);
-            var $item = $target.closest('[data-action-item]');
-            var $list = $item.closest('.action-list');
+            let _this = event.data.self;
+            let activeItems;
+            let target = event.currentTarget;
+            let item = target.closest('[data-action-item]');
+            let list = target.closest('.action-list');
 
-            if ($target.is('a') && !$target.is('.subject')) {
+            if (target.matches('a') && ! target.matches('.subject')) {
                 return true;
             }
 
             event.preventDefault();
             event.stopImmediatePropagation();
             event.stopPropagation();
 
-            if ($list.is('[data-icinga-multiselect-url]')) {
+            if (list.matches('[data-icinga-multiselect-url]')) {
                 if (event.ctrlKey || event.metaKey) {
-                    $item.toggleClass('active');
+                    item.classList.toggle('active');
                 } else if (event.shiftKey) {
                     document.getSelection().removeAllRanges();
+                    let allItems = Array.from(list.children);
+                    activeItems = list.querySelectorAll('[data-action-item].active');
 
-                    $activeItems = $list.find('[data-action-item].active');
-
-                    var $firstActiveItem = $activeItems.first();
-
-                    $activeItems.removeClass('active');
+                    _this.clearSelection(activeItems);
 
-                    $firstActiveItem.addClass('active');
-                    $item.addClass('active');
+                    let startIndex = allItems.indexOf(item);
+                    let endIndex = allItems.indexOf(activeItems[0]);
 
-                    if ($item.index() > $firstActiveItem.index()) {
-                        $item.prevUntil($firstActiveItem).addClass('active');
+                    if (startIndex > endIndex) {
+                        for (let i = startIndex; i >= endIndex; i--) {
+                            _this.setActive(allItems[i]);
+                        }
                     } else {
-                        var $lastActiveItem = $activeItems.last();
-
-                        $lastActiveItem.addClass('active');
-                        $item.nextUntil($lastActiveItem).addClass('active');
+                        endIndex = allItems.indexOf(activeItems[activeItems.length - 1]);
+                        for (let i = startIndex; i <= endIndex; i++) {
+                            _this.setActive(allItems[i]);
+                        }
                     }
                 } else {
-                    $list.find('[data-action-item].active').removeClass('active');
-                    $item.addClass('active');
+                    _this.clearSelection(list.querySelectorAll('[data-action-item].active'));
+                    _this.setActive(item);
                 }
             } else {
-                $list.find('[data-action-item].active').removeClass('active');
-                $item.addClass('active');
+                _this.clearSelection(list.querySelectorAll('[data-action-item].active'));
+                _this.setActive(item);
             }
 
-            $activeItems = $list.find('[data-action-item].active');
-            if ($item.hasClass('active')) {
-                _this.setLastActivatedItemUrl($item.data('icingaDetailFilter'));
+            activeItems = list.querySelectorAll('[data-action-item].active');
+            if (item.classList.contains('active')) {
+                _this.setLastActivatedItemUrl(item.dataset.icingaDetailFilter);
             } else {
                 _this.setLastActivatedItemUrl(
-                    $activeItems.length
-                    ? $activeItems.last().data('icingaDetailFilter')
+                    activeItems.length
+                    ? activeItems[activeItems.length - 1].dataset.icingaDetailFilter
                     : null
                 );
             }
 
-            _this.addSelectionCountToFooter($list[0]);
+            _this.addSelectionCountToFooter(list);
 
-            if ($activeItems.length === 0) {
-                if (_this.icinga.loader.getLinkTargetFor($target).attr('id') === 'col2') {
+            if (activeItems.length === 0) {
+                if (_this.icinga.loader.getLinkTargetFor($(target)).attr('id') === 'col2') {
                     _this.icinga.ui.layout1col();
                 }
             } else {
-                _this.loadDetailUrl(
-                    $list[0],
-                    $target.is('a') ? $target.attr('href') : null
-                );
+                _this.loadDetailUrl(list, target.matches('a') ? target.href : null);
             }
         }
 
@@ -468,7 +465,7 @@
             event.stopPropagation();
             event.preventDefault();
 
-            event.data.self.loadMore($(event.target));
+            event.data.self.loadMore(event.target);
 
             return false;
         }
@@ -482,14 +479,14 @@
         /**
          * Load more list items based on the given anchor
          *
-         * @param $anchor
+         * @param anchor
          *
          * @returns {*|{getAllResponseHeaders: function(): *|null, abort: function(*): this, setRequestHeader: function(*, *): this, readyState: number, getResponseHeader: function(*): null|*, overrideMimeType: function(*): this, statusCode: function(*): this}|jQuery|boolean}
          */
-        loadMore($anchor) {
-            var $showMore = $anchor.parent();
+        loadMore(anchor) {
+            let showMore = anchor.parentElement;
             var progressTimer = this.icinga.timer.register(function () {
-                var label = $anchor.html();
+                var label = anchor.innerText;
 
                 var dots = label.substr(-3);
                 if (dots.slice(0, 1) !== '.') {
@@ -505,14 +502,14 @@
                     }
                 }
 
-                $anchor.html(label + dots);
+                anchor.innerText = label + dots;
             }, null, 250);
 
-            var url = $anchor.attr('href');
-            var req = this.icinga.loader.loadUrl(
+            let url = anchor.href;
+            let req = this.icinga.loader.loadUrl(
                 // Add showCompact, we don't want controls in paged results
                 this.icinga.utils.addUrlFlag(url, 'showCompact'),
-                $showMore.parent(),
+                $(showMore.parentElement),
                 undefined,
                 undefined,
                 'append',
@@ -521,7 +518,7 @@
             );
             req.addToHistory = false;
             req.done(function () {
-                $showMore.remove();
+                showMore.remove();
 
                 // Set data-icinga-url to make it available for Icinga.History.getCurrentState()
                 req.$target.closest('.container').data('icingaUrl', url);