diff --git a/asset/js/compat/LoadMoreBehavior.js b/asset/js/compat/LoadMoreBehavior.js new file mode 100644 index 00000000..6f052e6d --- /dev/null +++ b/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} + * @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; +}); diff --git a/asset/js/widget/LoadMore.js b/asset/js/widget/LoadMore.js new file mode 100644 index 00000000..2e76569f --- /dev/null +++ b/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; +}); \ No newline at end of file