Add LoadMore and LoadMoreBehavior

Author: sukhwinder33445

asset/js/compat/LoadMoreBehavior.js

@@ -0,0 +1,84 @@
+define(["../widget/LoadMore", "Icinga"],function (LoadMore, Icinga) {
+
+    "use strict";
+
+    class LoadMoreBehavior extends Icinga.EventListener {
+        constructor(icinga) {
+            super(icinga);
+
+            this.on('rendered', '#main > .container', this.onRendered, this);
+            this.on('load', this.onLoad, this);
+
+            /**
+             * Load More elements
+             *
+             * @type {WeakMap<object, LoadMore>}
+             * @private
+             */
+            this._loadMoreElements = new WeakMap();
+        }
+
+        /**
+         * @param event
+         */
+        onRendered(event)
+        {
+            let _this = event.data.self;
+
+            event.currentTarget.querySelectorAll('.load-more').forEach(element => {
+                _this._loadMoreElements.set(element, new LoadMore(element));
+            });
+        }
+
+        onLoad(event) {
+            let _this = event.data.self;
+            let anchor = event.target;
+            let showMore = anchor.parentElement;
+            var progressTimer = _this.icinga.timer.register(function () {
+                var label = anchor.innerText;
+
+                var dots = label.substr(-3);
+                if (dots.slice(0, 1) !== '.') {
+                    dots = '.  ';
+                } else {
+                    label = label.slice(0, -3);
+                    if (dots === '...') {
+                        dots = '.  ';
+                    } else if (dots === '.. ') {
+                        dots = '...';
+                    } else if (dots === '.  ') {
+                        dots = '.. ';
+                    }
+                }
+
+                anchor.innerText = label + dots;
+            }, null, 250);
+
+            let url = anchor.getAttribute('href');
+
+            let req = _this.icinga.loader.loadUrl(
+                // Add showCompact, we don't want controls in paged results
+                _this.icinga.utils.addUrlFlag(url, 'showCompact'),
+                $(showMore.parentElement),
+                undefined,
+                undefined,
+                'append',
+                false,
+                progressTimer
+            );
+            req.addToHistory = false;
+            req.done(function () {
+                showMore.remove();
+
+                // Set data-icinga-url to make it available for Icinga.History.getCurrentState()
+                req.$target.closest('.container').data('icingaUrl', url);
+
+                _this.icinga.history.replaceCurrentState();
+            });
+
+            return req;
+        }
+    }
+
+    return LoadMoreBehavior;
+});

asset/js/widget/LoadMore.js

@@ -0,0 +1,49 @@
+define(["../notjQuery"], function ($) {
+
+    "use strict";
+
+    class LoadMore {
+        /**
+         * @param element The element that contains the load-more anchor
+         */
+        constructor(element) {
+            $(element).on('click', '.load-more[data-no-icinga-ajax] a', this.onLoadMoreClick, this);
+            $(element).on('keypress', '.load-more[data-no-icinga-ajax] a', this.onKeyPress, this);
+        }
+
+        /**
+         * Keypress (space) on load-more button
+         *
+         * @param event
+         */
+        onKeyPress(event) {
+            if (event.key === ' ') {
+                this.onLoadMoreClick(event);
+            }
+        }
+
+        /**
+         * Click on load-more button
+         *
+         * @param event
+         */
+        onLoadMoreClick(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            this.loadMore(event.target);
+        }
+
+
+        /**
+         * Load more items based on the given anchor
+         *
+         * @param anchor
+         */
+        loadMore(anchor) {
+            $(anchor).trigger('load');
+        }
+    }
+
+    return LoadMore;
+});