\r\n Load results {from}-{to}\r\n
\r\n */\r\n\r\n return Moduler.create({\r\n defaults: {\r\n url: null,\r\n method: 'GET',\r\n event: 'click',\r\n data: null, /* extra data to send along the request to server */\r\n contentElement: null, /* selector for element where content should be appended or replaced */\r\n page: 1, /* the page currently on */\r\n insertMode: 'append', /* append|replace|replacefirstpage */\r\n loadingCssClass: 'is-loading',\r\n pageSize: null, // size of each page, used when displaying page range in button. (\"Results from 11-20\")\r\n removeSelf: false,\r\n visibleClass: null,// if a class should be used for button visiblity, set it here, otherwise style.display block/none is used\r\n lastPageHeader: 'X-LastPage' // name of the last page header, set it to something unique if there are more then one loadmore module on a page\r\n },\r\n\r\n init: function () {\r\n var self = this;\r\n\r\n if (!self.options.url) {\r\n if (self.el.matches('a[href]')) {\r\n self.options.url = self.el.getAttribute('href');\r\n } else {\r\n self.options.url = window.location.href;\r\n }\r\n }\r\n\r\n // save a reference to contentElement\r\n self.contentElement = document.querySelector(self.options.contentElement) ?? self.el;\r\n\r\n self.el.addEventListener(self.options.event, function (e) {\r\n e.data = self;\r\n self.loadMore(e);\r\n });\r\n\r\n self.el.addEventListener('loadFirstPage', function (e) { \r\n e.data = self;\r\n self.loadFirstPage(e);\r\n });\r\n\r\n self.el.addEventListener('loadMore', function (e) {\r\n e.data = self;\r\n self.loadMore(e);\r\n });\r\n\r\n var linkHtml = self.el.innerHTML;\r\n var shouldDisplayPageRange = linkHtml.indexOf('{from}') != -1;\r\n\r\n if (shouldDisplayPageRange) {\r\n self.shouldDisplayPageRange = true;\r\n self.linkHtml = linkHtml;\r\n\r\n self.updateLinkText();\r\n }\r\n },\r\n\r\n loadPage: function () {\r\n var self = this;\r\n self.el.classList.add(self.options.loadingCssClass);\r\n self.isLoading = true;\r\n\r\n var data = {\r\n partial: true,\r\n page: self.options.page,\r\n loadingMore: true,\r\n lastPageHeader: self.options.lastPageHeader\r\n };\r\n var extraData = {};\r\n if (self.el.getAttribute('data-extradata')) {\r\n extraData = JSON.parse(self.el.getAttribute('data-extradata'));\r\n }\r\n Object.assign(data, self.options.data, extraData);\r\n\r\n var url = self.options.url.replace('{page}', self.options.page);\r\n\r\n var opts = {\r\n method: self.options.method.toUpperCase()\r\n };\r\n if (opts.method == 'POST') {\r\n var formData = new FormData();\r\n for ( var key in data) {\r\n formData.append(key, data[key]);\r\n }\r\n opts.body = formData;\r\n } else {\r\n var params = new URLSearchParams();\r\n Object.keys(data).forEach(key => params.append(key, data[key]));\r\n if (params.toString().length > 0) {\r\n var delim = url.indexOf('?') > -1 ? '&' : '?';\r\n url += delim + params.toString();\r\n }\r\n }\r\n\r\n return fetch(url, opts)\r\n .then(response => {\r\n self.isLoading = false;\r\n if (self.options.removeSelf) {\r\n self.el.parentNode.removeChild(self.el);\r\n } else {\r\n self.el.classList.remove(self.options.loadingCssClass);\r\n }\r\n\r\n if (response.status != 200) {\r\n self.el.dispatchEvent(new CustomEvent('load-more-error'));\r\n } else {\r\n response.text().then(function (text) {\r\n if (self.options.insertMode == 'replace') {\r\n self.contentElement.innerHTML = text;\r\n } else if (self.options.insertMode == 'append') {\r\n self.contentElement.innerHTML += text;\r\n } else if (self.options.insertMode == 'replacefirstpage') {\r\n if (self.options.page == 1) {\r\n self.contentElement.innerHTML = text;\r\n } else {\r\n self.contentElement.innerHTML += text;\r\n }\r\n }\r\n\r\n Moduler.loadModules(self.contentElement);\r\n\r\n if (response.headers.get(self.options.lastPageHeader)) {\r\n // hide the load more button instead of removing it so that other modules can still trigger events\r\n if (self.options.visibleClass) {\r\n self.el.classList.remove(self.options.visibleClass);\r\n } else {\r\n self.displaySetting = self.el.style.display;\r\n self.el.style.display = 'none';\r\n }\r\n }\r\n\r\n if (self.shouldDisplayPageRange) {\r\n self.updateLinkText();\r\n }\r\n\r\n self.el.dispatchEvent(new CustomEvent('load-more-done', { detail: { response: text } }));\r\n });\r\n }\r\n });\r\n },\r\n\r\n updateLinkText: function () {\r\n var self = this;\r\n var from = (self.options.page * self.options.pageSize);\r\n var newLinkText = self.linkHtml\r\n .replace('{from}', from + 1)\r\n .replace('{to}', from + self.options.pageSize);\r\n\r\n self.el.innerHTML = newLinkText;\r\n },\r\n\r\n //event\r\n loadFirstPage: function (e) {\r\n var self = e.data;\r\n\r\n self.options.page = 1;\r\n\r\n if (self.options.visibleClass) {\r\n self.el.classList.add(self.options.visibleClass);\r\n } else {\r\n self.el.style.display = self.displaySetting ?? 'block';\r\n self.displaySetting = null;\r\n } \r\n if (self.options.insertMode != 'replacefirstpage') {\r\n while(self.contentElement.firstChild) self.contentElement.removeChild(self.contentElement.firstChild);\r\n }\r\n\r\n self.loadPage.call(self);\r\n },\r\n\r\n //event\r\n loadMore: function (e) {\r\n e.preventDefault();\r\n var self = e.data;\r\n\r\n // prevent additional requests when user spam-clicks\r\n if (self.isLoading) {\r\n return;\r\n }\r\n\r\n // increase page by one\r\n self.options.page += 1;\r\n self.loadPage.call(self);\r\n }\r\n });\r\n});"]}