From d7e42772eac82641a3846c018883a5a1352a7a41 Mon Sep 17 00:00:00 2001 From: Floorb <132411956+Neetpone@users.noreply.github.com> Date: Thu, 4 Nov 2021 10:41:37 -0400 Subject: [PATCH] Improve paginator JS --- admin/dashboard.php | 2 - admin/tasksqqq.php | 254 -------------------------------------- assets/bundle.js | 24 ++-- assets/bundle.min.js | 2 +- assets/bundle.min.js.map | 2 +- js/data_tables.js | 24 ++-- theme/bulma/css/paste.css | 23 ++++ 7 files changed, 53 insertions(+), 278 deletions(-) delete mode 100644 admin/tasksqqq.php diff --git a/admin/dashboard.php b/admin/dashboard.php index 8874454..7a6d760 100644 --- a/admin/dashboard.php +++ b/admin/dashboard.php @@ -8,8 +8,6 @@ use PonePaste\Models\PageView; $today_users_count = 0; $today_pastes_count = 0; - - $query = $conn->query("SELECT @last_id := MAX(id) FROM page_view"); $row = $query->fetch(PDO::FETCH_NUM); $page_last_id = intval($row[0]); diff --git a/admin/tasksqqq.php b/admin/tasksqqq.php deleted file mode 100644 index d80597e..0000000 --- a/admin/tasksqqq.php +++ /dev/null @@ -1,254 +0,0 @@ - - - - - - - - Paste - Tasks - - - - - -
- - - - - - - -
- - -
- -
- -
-
- -
-
- - - - ' . mysqli_error($con) . ' -
'; - - } else { - $msg = '
- All expired pastes have been deleted -
'; - } - } - if (isset($_GET['all_pastes'])) { - $query = "DELETE FROM pastes"; - mysqli_query($con, $query); - - if (mysqli_errno($con)) { - $msg = '
- ' . mysqli_error($con) . ' -
'; - - } else { - $msg = '
- All pastes have been deleted -
'; - } - - } - if (isset($_GET['not_verfied'])) { - $query = "DELETE FROM users where verified='0'"; - mysqli_query($con, $query); - - if (mysqli_errno($con)) { - $msg = '
- ' . mysqli_error($con) . ' -
'; - - } else { - $msg = '
- All unverified accounts have been deleted -
'; - } - } - if (isset($_GET['admin_history'])) { - $query = "DELETE FROM admin_history"; - mysqli_query($con, $query); - - if (mysqli_errno($con)) { - $msg = '
- ' . mysqli_error($con) . ' -
'; - - } else { - $msg = '
- Admin history has been cleared -
'; - } - } - ?> - - -
-
-
-
-
Maintenance tasks
- - Delete all expired pastes -
- Clear admin history -
- Delete unverified accounts -
- Delete all pastes -
-
-
-
- -
- - - -
-
- Updates — Bugs -
-
- Powered by Paste -
-
- - - - - - - - \ No newline at end of file diff --git a/assets/bundle.js b/assets/bundle.js index 3785690..a73a42a 100644 --- a/assets/bundle.js +++ b/assets/bundle.js @@ -144,21 +144,23 @@ class SimplePaginator { /* First and last page in existence */ const firstPage = 0; - const lastPage = Math.ceil(totalRecords / perPage); // ish? - const numPagesToShow = 3; + const lastPage = Math.floor(totalRecords / perPage); // ish? + const numPagesToShow = 2; /* First and last page the main paginator will show */ - const firstPageShow = (currentPage - numPagesToShow < 0) ? currentPage : currentPage - numPagesToShow; - const lastPageShow = (firstPageShow + numPagesToShow) > lastPage ? lastPage : (firstPageShow + numPagesToShow * 2); + const firstPageShow = (currentPage - firstPage) < numPagesToShow ? firstPage : ((currentPage - numPagesToShow < 0) ? currentPage : currentPage - numPagesToShow); + const lastPageShow = (firstPageShow + numPagesToShow) > lastPage ? lastPage : (firstPageShow + numPagesToShow + numPagesToShow); /* Whether to show the first and last pages in existence at the ends of the paginator */ - const showFirstPage = (Math.abs(firstPage - currentPage)) > (numPagesToShow * 2); - const showLastPage = (Math.abs(lastPage - currentPage)) > (numPagesToShow * 2); + const showFirstPage = (Math.abs(firstPage - currentPage)) > (numPagesToShow); + const showLastPage = (Math.abs(lastPage - currentPage)) > (numPagesToShow); + const prevButtonDisabled = currentPage === firstPage ? 'disabled' : ''; + /* Previous button */ this.element.appendChild(makeEl( - `` + `` )); /* First page button */ @@ -171,8 +173,9 @@ class SimplePaginator { /* "window" buttons */ for (let i = firstPageShow; i <= lastPageShow; i++) { + const selected = (i === currentPage ? 'paginator__button--selected' : ''); this.element.appendChild(makeEl( - `${i}` + `${i}` )); } @@ -184,9 +187,10 @@ class SimplePaginator { )); } + const nextButtonDisabled = currentPage === lastPage ? 'disabled' : ''; /* Next button */ this.element.appendChild(makeEl( - `` + `` )); } } @@ -201,7 +205,7 @@ class DataTable { this.data = []; this.totalRecords = -1; - this.perPage = 10; + this.perPage = 20; this.currentPage = 0; this.paginator = new SimplePaginator(this.container.querySelector('.paginator')); diff --git a/assets/bundle.min.js b/assets/bundle.min.js index e1998ac..b40e9a6 100644 --- a/assets/bundle.min.js +++ b/assets/bundle.min.js @@ -1,2 +1,2 @@ -function t(t,a){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,a){if(!t)return;if("string"==typeof t)return e(t,a);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,a)}(t))||a&&t&&"number"==typeof t.length){n&&(t=n);var i=0,s=function(){};return{s:s,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:s}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,o=!0,l=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return o=t.done,t},e:function(t){l=!0,r=t},f:function(){try{o||null==n.return||n.return()}finally{if(l)throw r}}}}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,n=new Array(e);a/g,">").replace(/"/g,""").replace(/'/g,"'")},l=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};a(this,e),this.element=t,this.tags=[],this.options=n,this.maxTags=n.maxTags||10,this.inputNode=null,this.containerNode=null}return i(e,[{key:"attach",value:function(){if(this.element.style.display="none",this.containerNode=s('
'),this.inputNode=s(''),this.containerNode.appendChild(this.inputNode),this.element.parentNode.insertBefore(this.containerNode,this.element.nextSibling),this.element.value){var e,a=t(this.element.value.split(","));try{for(a.s();!(e=a.n()).done;){var n=e.value;this.addTag(n)}}catch(t){a.e(t)}finally{a.f()}}this.containerNode.addEventListener("keydown",this._handleInputKeyUp.bind(this)),this.containerNode.addEventListener("click",this._handleContainerClick.bind(this))}},{key:"detach",value:function(){this.tags.clear(),this.containerNode.remove(),this.element.style.display="inline-block"}},{key:"updateHiddenInputValue",value:function(){this.element.value=this.tags.join(",")}},{key:"deleteTagNode",value:function(t){this.tags.splice(this.tags.indexOf(t.dataset.value.toLowerCase()),1),t.remove(),this.tags.length'+o(t)+''),this.inputNode),this.tags.length>=this.maxTags&&(this.inputNode.disabled=!0))}},{key:"_handleInputKeyUp",value:function(t){var e=this.inputNode.value;"Backspace"===t.key&&""===e?this.inputNode.previousSibling&&(this.deleteTagNode(this.inputNode.previousSibling),this.updateHiddenInputValue()):","===t.key&&(this.addTag(e),this.inputNode.value="",this.updateHiddenInputValue(),t.preventDefault())}},{key:"_handleContainerClick",value:function(t){t.target&&t.target.classList.contains("delete")&&(this.deleteTagNode(t.target.closest(".tag")),this.updateHiddenInputValue())}}]),e}(),c=function(){function t(e){a(this,t),this.element=e}return i(t,[{key:"attach",value:function(t){this.element.addEventListener("click",(function(e){e.target&&e.target.classList.contains("paginator__button")&&t(+e.target.dataset.page)}))}},{key:"update",value:function(t,e,a){r(this.element);var n=Math.ceil(t/e),i=a-3<0?a:a-3,o=i+3>n?n:i+6,l=Math.abs(0-a)>6,c=Math.abs(n-a)>6;this.element.appendChild(s(''))),l&&(this.element.appendChild(s('').concat(0,""))),this.element.appendChild(s('…')));for(var u=i;u<=o;u++)this.element.appendChild(s('').concat(u,"")));c&&(this.element.appendChild(s('…')),this.element.appendChild(s('').concat(n,"")))),this.element.appendChild(s('')))}}]),t}(),u=function(){function t(e,n){a(this,t),this.element=e,this.container=e.parentElement,this.options=n,this.ajaxCallback=n.ajaxCallback,this.data=[],this.totalRecords=-1,this.perPage=10,this.currentPage=0,this.paginator=new c(this.container.querySelector(".paginator"))}return i(t,[{key:"attach",value:function(){this.paginator.attach(this._updatePage.bind(this)),this._loadEntries()}},{key:"_loadEntries",value:function(){new Promise(this.ajaxCallback).then(this._updateEntries.bind(this))}},{key:"_updateEntries",value:function(t){this.data=t.data,this.totalRecords=this.data.length;var e=this.element.querySelector("tbody");r(e);for(var a=this.perPage*this.currentPage,n=a+this.perPage>this.totalRecords?this.totalRecords:a+this.perPage,i=a;i\n ').concat(o(t.name),"\n ")})).join("");return'\n ').concat(o(t.title),'\n ').concat(o(t.author),"\n ").concat(e,"\n ")}}).attach()};"loading"!==document.readyState?d():document.addEventListener("DOMContentLoaded",d); +function t(t,a){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,a){if(!t)return;if("string"==typeof t)return e(t,a);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,a)}(t))||a&&t&&"number"==typeof t.length){n&&(t=n);var i=0,s=function(){};return{s:s,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:s}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,o=!0,l=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return o=t.done,t},e:function(t){l=!0,r=t},f:function(){try{o||null==n.return||n.return()}finally{if(l)throw r}}}}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var a=0,n=new Array(e);a/g,">").replace(/"/g,""").replace(/'/g,"'")},l=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};a(this,e),this.element=t,this.tags=[],this.options=n,this.maxTags=n.maxTags||10,this.inputNode=null,this.containerNode=null}return i(e,[{key:"attach",value:function(){if(this.element.style.display="none",this.containerNode=s('
'),this.inputNode=s(''),this.containerNode.appendChild(this.inputNode),this.element.parentNode.insertBefore(this.containerNode,this.element.nextSibling),this.element.value){var e,a=t(this.element.value.split(","));try{for(a.s();!(e=a.n()).done;){var n=e.value;this.addTag(n)}}catch(t){a.e(t)}finally{a.f()}}this.containerNode.addEventListener("keydown",this._handleInputKeyUp.bind(this)),this.containerNode.addEventListener("click",this._handleContainerClick.bind(this))}},{key:"detach",value:function(){this.tags.clear(),this.containerNode.remove(),this.element.style.display="inline-block"}},{key:"updateHiddenInputValue",value:function(){this.element.value=this.tags.join(",")}},{key:"deleteTagNode",value:function(t){this.tags.splice(this.tags.indexOf(t.dataset.value.toLowerCase()),1),t.remove(),this.tags.length'+o(t)+''),this.inputNode),this.tags.length>=this.maxTags&&(this.inputNode.disabled=!0))}},{key:"_handleInputKeyUp",value:function(t){var e=this.inputNode.value;"Backspace"===t.key&&""===e?this.inputNode.previousSibling&&(this.deleteTagNode(this.inputNode.previousSibling),this.updateHiddenInputValue()):","===t.key&&(this.addTag(e),this.inputNode.value="",this.updateHiddenInputValue(),t.preventDefault())}},{key:"_handleContainerClick",value:function(t){t.target&&t.target.classList.contains("delete")&&(this.deleteTagNode(t.target.closest(".tag")),this.updateHiddenInputValue())}}]),e}(),c=function(){function t(e){a(this,t),this.element=e}return i(t,[{key:"attach",value:function(t){this.element.addEventListener("click",(function(e){e.target&&e.target.classList.contains("paginator__button")&&t(+e.target.dataset.page)}))}},{key:"update",value:function(t,e,a){r(this.element);var n=Math.floor(t/e),i=a-0<2?0:a-2<0?a:a-2,o=i+2>n?n:i+2+2,l=Math.abs(0-a)>2,c=Math.abs(n-a)>2,u=0===a?"disabled":"";this.element.appendChild(s(''))),l&&(this.element.appendChild(s('').concat(0,""))),this.element.appendChild(s('…')));for(var d=i;d<=o;d++){var h=d===a?"paginator__button--selected":"";this.element.appendChild(s('').concat(d,"")))}c&&(this.element.appendChild(s('…')),this.element.appendChild(s('').concat(n,""))));var p=a===n?"disabled":"";this.element.appendChild(s('')))}}]),t}(),u=function(){function t(e,n){a(this,t),this.element=e,this.container=e.parentElement,this.options=n,this.ajaxCallback=n.ajaxCallback,this.data=[],this.totalRecords=-1,this.perPage=20,this.currentPage=0,this.paginator=new c(this.container.querySelector(".paginator"))}return i(t,[{key:"attach",value:function(){this.paginator.attach(this._updatePage.bind(this)),this._loadEntries()}},{key:"_loadEntries",value:function(){new Promise(this.ajaxCallback).then(this._updateEntries.bind(this))}},{key:"_updateEntries",value:function(t){this.data=t.data,this.totalRecords=this.data.length;var e=this.element.querySelector("tbody");r(e);for(var a=this.perPage*this.currentPage,n=a+this.perPage>this.totalRecords?this.totalRecords:a+this.perPage,i=a;i\n ').concat(o(t.name),"\n ")})).join("");return'\n ').concat(o(t.title),'\n ').concat(o(t.author),"\n ").concat(e,"\n ")}}).attach()};"loading"!==document.readyState?d():document.addEventListener("DOMContentLoaded",d); //# sourceMappingURL=bundle.min.js.map diff --git a/assets/bundle.min.js.map b/assets/bundle.min.js.map index 7db110b..4bc476b 100644 --- a/assets/bundle.min.js.map +++ b/assets/bundle.min.js.map @@ -1 +1 @@ -{"version":3,"file":"bundle.min.js","sources":["../js/dom.js","../js/tag_input.js","../js/data_tables.js","../js/main.js"],"sourcesContent":["const $ = function(selector) {\n return document.querySelector(selector);\n};\n\nconst $$ = function(selector) {\n return document.querySelectorAll(selector) || [];\n};\n\nconst makeEl = function(html) {\n const template = document.createElement('template');\n\n template.innerHTML = html.trim();\n\n return template.content.firstChild;\n};\n\nconst clearEl = function(el) {\n while (el.firstChild) {\n el.removeChild(el.firstChild);\n }\n};\n\nconst escape = function(unsafe) {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\n\nexport { $, $$, makeEl, clearEl, escape };","import { makeEl, escape } from \"./dom\";\n\nclass TagsInput {\n constructor(element, options = {}) {\n this.element = element;\n this.tags = [];\n this.options = options\n\n this.maxTags = options.maxTags || 10;\n this.inputNode = null;\n this.containerNode = null;\n }\n\n attach() {\n this.element.style.display = 'none';\n\n this.containerNode = makeEl('
');\n this.inputNode = makeEl('');\n this.containerNode.appendChild(this.inputNode);\n\n this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling);\n\n /* Load existing tags from input */\n if (this.element.value) {\n for (const tag of this.element.value.split(',')) {\n this.addTag(tag);\n }\n }\n\n /* Handle addition and removal of tags via key-presses */\n this.containerNode.addEventListener('keydown', this._handleInputKeyUp.bind(this));\n\n /* Handle deletions by clicking the delete button */\n this.containerNode.addEventListener('click', this._handleContainerClick.bind(this));\n }\n\n detach() {\n this.tags.clear();\n this.containerNode.remove();\n this.element.style.display = 'inline-block';\n }\n\n updateHiddenInputValue() {\n this.element.value = this.tags.join(',');\n }\n\n deleteTagNode(node) {\n this.tags.splice(this.tags.indexOf(node.dataset.value.toLowerCase()), 1);\n node.remove();\n\n /* Below the limit? Make sure the input is enabled. */\n if (this.tags.length < this.maxTags) {\n this.inputNode.disabled = false;\n }\n }\n\n addTag(tagValue) {\n tagValue = tagValue.trim();\n\n /* Tag value is probably not empty and we don't already have the same tag. */\n if (tagValue !== '' && this.tags.indexOf(tagValue.toLowerCase()) === -1) {\n this.tags.push(tagValue.toLowerCase());\n\n this.inputNode.parentNode.insertBefore(\n makeEl('' + escape(tagValue) + ''),\n this.inputNode\n );\n\n /* Too many tags, disable the input for now. */\n if (this.tags.length >= this.maxTags) {\n this.inputNode.disabled = true;\n }\n }\n }\n\n _handleInputKeyUp(evt) {\n let tagValue = this.inputNode.value;\n\n if (evt.key === 'Backspace' && tagValue === '') {\n // Remove the child\n if (this.inputNode.previousSibling) {\n this.deleteTagNode(this.inputNode.previousSibling);\n\n this.updateHiddenInputValue();\n }\n } else if (evt.key === ',') {\n this.addTag(tagValue);\n\n this.inputNode.value = ''\n this.updateHiddenInputValue();\n\n evt.preventDefault();\n }\n }\n\n _handleContainerClick(evt) {\n if (evt.target && evt.target.classList.contains('delete')) {\n this.deleteTagNode(evt.target.closest('.tag'));\n this.updateHiddenInputValue();\n }\n }\n}\n\nexport { TagsInput };\n","import { makeEl, clearEl } from \"./dom\";\n\n\nclass SimplePaginator {\n constructor(element) {\n this.element = element;\n }\n\n attach(pageCallback) {\n this.element.addEventListener('click', evt => {\n if (evt.target && evt.target.classList.contains('paginator__button')) {\n pageCallback(+evt.target.dataset.page);\n }\n });\n }\n\n update(totalRecords, perPage, currentPage) {\n clearEl(this.element);\n\n /* First and last page in existence */\n const firstPage = 0;\n const lastPage = Math.ceil(totalRecords / perPage); // ish?\n const numPagesToShow = 3;\n\n /* First and last page the main paginator will show */\n const firstPageShow = (currentPage - numPagesToShow < 0) ? currentPage : currentPage - numPagesToShow;\n const lastPageShow = (firstPageShow + numPagesToShow) > lastPage ? lastPage : (firstPageShow + numPagesToShow * 2);\n\n /* Whether to show the first and last pages in existence at the ends of the paginator */\n const showFirstPage = (Math.abs(firstPage - currentPage)) > (numPagesToShow * 2);\n const showLastPage = (Math.abs(lastPage - currentPage)) > (numPagesToShow * 2);\n\n\n /* Previous button */\n this.element.appendChild(makeEl(\n `Previous`\n ));\n\n /* First page button */\n if (showFirstPage) {\n this.element.appendChild(makeEl(\n `${firstPage}`\n ));\n this.element.appendChild(makeEl(`…`));\n }\n\n /* \"window\" buttons */\n for (let i = firstPageShow; i <= lastPageShow; i++) {\n this.element.appendChild(makeEl(\n `${i}`\n ));\n }\n\n /* Last page button */\n if (showLastPage) {\n this.element.appendChild(makeEl(`…`));\n this.element.appendChild(makeEl(\n `${lastPage}`\n ));\n }\n\n /* Next button */\n this.element.appendChild(makeEl(\n `Next`\n ));\n }\n}\n\nclass DataTable {\n constructor(element, options) {\n this.element = element;\n this.container = element.parentElement;\n this.options = options;\n\n this.ajaxCallback = options.ajaxCallback;\n this.data = [];\n\n this.totalRecords = -1;\n this.perPage = 10;\n this.currentPage = 0;\n\n this.paginator = new SimplePaginator(this.container.querySelector('.paginator'));\n\n }\n\n attach() {\n this.paginator.attach(this._updatePage.bind(this));\n this._loadEntries();\n }\n\n /* Load the requested data from the server, and when done, update the DOM. */\n _loadEntries() {\n new Promise(this.ajaxCallback)\n .then(this._updateEntries.bind(this));\n }\n\n /* Update the DOM to reflect the current state of the data we have loaded */\n _updateEntries(data) {\n this.data = data.data;\n this.totalRecords = this.data.length;\n\n const bodyElement = this.element.querySelector('tbody');\n clearEl(bodyElement);\n\n const firstIndex = (this.perPage * this.currentPage);\n const lastIndex = (firstIndex + this.perPage) > this.totalRecords ? this.totalRecords : (firstIndex + this.perPage);\n\n\n for (let i = firstIndex; i < lastIndex; i++) {\n const rowElem = makeEl(this.options.rowCallback(this.data[i]));\n rowElem.classList.add(i % 2 === 0 ? 'odd' : 'even');\n\n bodyElement.appendChild(rowElem);\n }\n\n this.paginator.update(this.totalRecords, this.perPage, this.currentPage);\n }\n\n _updatePage(n) {\n this.currentPage = n;\n this.paginator.update(this.totalRecords, this.perPage, this.currentPage);\n this._updateEntries({data: this.data});\n }\n\n _updateSort(field, direction) {\n\n }\n}\n\nexport { DataTable };\n","import { $$, escape } from './dom';\nimport { TagsInput } from \"./tag_input\";\nimport { DataTable } from \"./data_tables\";\n\nconst setupSite = function() {\n Array.prototype.forEach.call($$('.js-tag-input'), (el) => {\n new TagsInput(el).attach();\n });\n\n if (document.querySelector('#archive')) {\n const table = new DataTable(document.querySelector('#archive'), {\n ajaxCallback: (resolve) => {\n fetch('/api/ajax_pastes.php')\n .then(r => r.json())\n .then(resolve);\n },\n rowCallback: (rowData) => {\n const tags = rowData.tags.map((tagData) => {\n let tagColorClass;\n if (tagData.name.indexOf('nsfw') !== -1) {\n tagColorClass = 'is-danger';\n } else if (tagData.name.indexOf('safe') !== -1) {\n tagColorClass = 'is-success';\n } else if (tagData.name.indexOf('/') !== -1) {\n tagColorClass = 'is-primary';\n } else {\n tagColorClass = 'is-info';\n }\n\n return `\n ${escape(tagData.name)}\n `;\n }).join('');\n\n return `\n ${escape(rowData.title)}\n ${escape(rowData.author)}\n ${tags}\n `;\n }\n });\n table.attach();\n }\n};\n\nif (document.readyState !== 'loading') {\n setupSite();\n} else {\n document.addEventListener('DOMContentLoaded', setupSite);\n}\n"],"names":["makeEl","html","template","document","createElement","innerHTML","trim","content","firstChild","clearEl","el","removeChild","escape","unsafe","replace","TagsInput","element","options","tags","maxTags","inputNode","containerNode","style","display","appendChild","this","parentNode","insertBefore","nextSibling","value","split","tag","addTag","addEventListener","_handleInputKeyUp","bind","_handleContainerClick","clear","remove","join","node","splice","indexOf","dataset","toLowerCase","length","disabled","tagValue","push","evt","key","previousSibling","deleteTagNode","updateHiddenInputValue","preventDefault","target","classList","contains","closest","SimplePaginator","pageCallback","page","totalRecords","perPage","currentPage","lastPage","Math","ceil","firstPageShow","lastPageShow","numPagesToShow","showFirstPage","abs","showLastPage","i","DataTable","container","parentElement","ajaxCallback","data","paginator","querySelector","attach","_updatePage","_loadEntries","Promise","then","_updateEntries","bodyElement","firstIndex","lastIndex","rowElem","rowCallback","add","update","n","field","direction","setupSite","selector","Array","prototype","forEach","call","querySelectorAll","resolve","fetch","r","json","rowData","map","tagData","tagColorClass","name","slug","id","title","author","readyState"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"bundle.min.js","sources":["../js/dom.js","../js/tag_input.js","../js/data_tables.js","../js/main.js"],"sourcesContent":["const $ = function(selector) {\n return document.querySelector(selector);\n};\n\nconst $$ = function(selector) {\n return document.querySelectorAll(selector) || [];\n};\n\nconst makeEl = function(html) {\n const template = document.createElement('template');\n\n template.innerHTML = html.trim();\n\n return template.content.firstChild;\n};\n\nconst clearEl = function(el) {\n while (el.firstChild) {\n el.removeChild(el.firstChild);\n }\n};\n\nconst escape = function(unsafe) {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\n\nexport { $, $$, makeEl, clearEl, escape };","import { makeEl, escape } from \"./dom\";\n\nclass TagsInput {\n constructor(element, options = {}) {\n this.element = element;\n this.tags = [];\n this.options = options\n\n this.maxTags = options.maxTags || 10;\n this.inputNode = null;\n this.containerNode = null;\n }\n\n attach() {\n this.element.style.display = 'none';\n\n this.containerNode = makeEl('
');\n this.inputNode = makeEl('');\n this.containerNode.appendChild(this.inputNode);\n\n this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling);\n\n /* Load existing tags from input */\n if (this.element.value) {\n for (const tag of this.element.value.split(',')) {\n this.addTag(tag);\n }\n }\n\n /* Handle addition and removal of tags via key-presses */\n this.containerNode.addEventListener('keydown', this._handleInputKeyUp.bind(this));\n\n /* Handle deletions by clicking the delete button */\n this.containerNode.addEventListener('click', this._handleContainerClick.bind(this));\n }\n\n detach() {\n this.tags.clear();\n this.containerNode.remove();\n this.element.style.display = 'inline-block';\n }\n\n updateHiddenInputValue() {\n this.element.value = this.tags.join(',');\n }\n\n deleteTagNode(node) {\n this.tags.splice(this.tags.indexOf(node.dataset.value.toLowerCase()), 1);\n node.remove();\n\n /* Below the limit? Make sure the input is enabled. */\n if (this.tags.length < this.maxTags) {\n this.inputNode.disabled = false;\n }\n }\n\n addTag(tagValue) {\n tagValue = tagValue.trim();\n\n /* Tag value is probably not empty and we don't already have the same tag. */\n if (tagValue !== '' && this.tags.indexOf(tagValue.toLowerCase()) === -1) {\n this.tags.push(tagValue.toLowerCase());\n\n this.inputNode.parentNode.insertBefore(\n makeEl('' + escape(tagValue) + ''),\n this.inputNode\n );\n\n /* Too many tags, disable the input for now. */\n if (this.tags.length >= this.maxTags) {\n this.inputNode.disabled = true;\n }\n }\n }\n\n _handleInputKeyUp(evt) {\n let tagValue = this.inputNode.value;\n\n if (evt.key === 'Backspace' && tagValue === '') {\n // Remove the child\n if (this.inputNode.previousSibling) {\n this.deleteTagNode(this.inputNode.previousSibling);\n\n this.updateHiddenInputValue();\n }\n } else if (evt.key === ',') {\n this.addTag(tagValue);\n\n this.inputNode.value = ''\n this.updateHiddenInputValue();\n\n evt.preventDefault();\n }\n }\n\n _handleContainerClick(evt) {\n if (evt.target && evt.target.classList.contains('delete')) {\n this.deleteTagNode(evt.target.closest('.tag'));\n this.updateHiddenInputValue();\n }\n }\n}\n\nexport { TagsInput };\n","import { makeEl, clearEl } from \"./dom\";\n\n\nclass SimplePaginator {\n constructor(element) {\n this.element = element;\n }\n\n attach(pageCallback) {\n this.element.addEventListener('click', evt => {\n if (evt.target && evt.target.classList.contains('paginator__button')) {\n pageCallback(+evt.target.dataset.page);\n }\n });\n }\n\n update(totalRecords, perPage, currentPage) {\n clearEl(this.element);\n\n /* First and last page in existence */\n const firstPage = 0;\n const lastPage = Math.floor(totalRecords / perPage); // ish?\n const numPagesToShow = 2;\n\n /* First and last page the main paginator will show */\n const firstPageShow = (currentPage - firstPage) < numPagesToShow ? firstPage : ((currentPage - numPagesToShow < 0) ? currentPage : currentPage - numPagesToShow);\n const lastPageShow = (firstPageShow + numPagesToShow) > lastPage ? lastPage : (firstPageShow + numPagesToShow + numPagesToShow);\n\n /* Whether to show the first and last pages in existence at the ends of the paginator */\n const showFirstPage = (Math.abs(firstPage - currentPage)) > (numPagesToShow);\n const showLastPage = (Math.abs(lastPage - currentPage)) > (numPagesToShow);\n\n\n const prevButtonDisabled = currentPage === firstPage ? 'disabled' : ''\n\n /* Previous button */\n this.element.appendChild(makeEl(\n `Previous`\n ));\n\n /* First page button */\n if (showFirstPage) {\n this.element.appendChild(makeEl(\n `${firstPage}`\n ));\n this.element.appendChild(makeEl(`…`));\n }\n\n /* \"window\" buttons */\n for (let i = firstPageShow; i <= lastPageShow; i++) {\n const selected = (i === currentPage ? 'paginator__button--selected' : '');\n this.element.appendChild(makeEl(\n `${i}`\n ));\n }\n\n /* Last page button */\n if (showLastPage) {\n this.element.appendChild(makeEl(`…`));\n this.element.appendChild(makeEl(\n `${lastPage}`\n ));\n }\n\n const nextButtonDisabled = currentPage === lastPage ? 'disabled' : ''\n /* Next button */\n this.element.appendChild(makeEl(\n `Next`\n ));\n }\n}\n\nclass DataTable {\n constructor(element, options) {\n this.element = element;\n this.container = element.parentElement;\n this.options = options;\n\n this.ajaxCallback = options.ajaxCallback;\n this.data = [];\n\n this.totalRecords = -1;\n this.perPage = 20;\n this.currentPage = 0;\n\n this.paginator = new SimplePaginator(this.container.querySelector('.paginator'));\n\n }\n\n attach() {\n this.paginator.attach(this._updatePage.bind(this));\n this._loadEntries();\n }\n\n /* Load the requested data from the server, and when done, update the DOM. */\n _loadEntries() {\n new Promise(this.ajaxCallback)\n .then(this._updateEntries.bind(this));\n }\n\n /* Update the DOM to reflect the current state of the data we have loaded */\n _updateEntries(data) {\n this.data = data.data;\n this.totalRecords = this.data.length;\n\n const bodyElement = this.element.querySelector('tbody');\n clearEl(bodyElement);\n\n const firstIndex = (this.perPage * this.currentPage);\n const lastIndex = (firstIndex + this.perPage) > this.totalRecords ? this.totalRecords : (firstIndex + this.perPage);\n\n\n for (let i = firstIndex; i < lastIndex; i++) {\n const rowElem = makeEl(this.options.rowCallback(this.data[i]));\n rowElem.classList.add(i % 2 === 0 ? 'odd' : 'even');\n\n bodyElement.appendChild(rowElem);\n }\n\n this.paginator.update(this.totalRecords, this.perPage, this.currentPage);\n }\n\n _updatePage(n) {\n this.currentPage = n;\n this.paginator.update(this.totalRecords, this.perPage, this.currentPage);\n this._updateEntries({data: this.data});\n }\n\n _updateSort(field, direction) {\n\n }\n}\n\nexport { DataTable };\n","import { $$, escape } from './dom';\nimport { TagsInput } from \"./tag_input\";\nimport { DataTable } from \"./data_tables\";\n\nconst setupSite = function() {\n Array.prototype.forEach.call($$('.js-tag-input'), (el) => {\n new TagsInput(el).attach();\n });\n\n if (document.querySelector('#archive')) {\n const table = new DataTable(document.querySelector('#archive'), {\n ajaxCallback: (resolve) => {\n fetch('/api/ajax_pastes.php')\n .then(r => r.json())\n .then(resolve);\n },\n rowCallback: (rowData) => {\n const tags = rowData.tags.map((tagData) => {\n let tagColorClass;\n if (tagData.name.indexOf('nsfw') !== -1) {\n tagColorClass = 'is-danger';\n } else if (tagData.name.indexOf('safe') !== -1) {\n tagColorClass = 'is-success';\n } else if (tagData.name.indexOf('/') !== -1) {\n tagColorClass = 'is-primary';\n } else {\n tagColorClass = 'is-info';\n }\n\n return `\n ${escape(tagData.name)}\n `;\n }).join('');\n\n return `\n ${escape(rowData.title)}\n ${escape(rowData.author)}\n ${tags}\n `;\n }\n });\n table.attach();\n }\n};\n\nif (document.readyState !== 'loading') {\n setupSite();\n} else {\n document.addEventListener('DOMContentLoaded', setupSite);\n}\n"],"names":["makeEl","html","template","document","createElement","innerHTML","trim","content","firstChild","clearEl","el","removeChild","escape","unsafe","replace","TagsInput","element","options","tags","maxTags","inputNode","containerNode","style","display","appendChild","this","parentNode","insertBefore","nextSibling","value","split","tag","addTag","addEventListener","_handleInputKeyUp","bind","_handleContainerClick","clear","remove","join","node","splice","indexOf","dataset","toLowerCase","length","disabled","tagValue","push","evt","key","previousSibling","deleteTagNode","updateHiddenInputValue","preventDefault","target","classList","contains","closest","SimplePaginator","pageCallback","page","totalRecords","perPage","currentPage","lastPage","Math","floor","firstPageShow","lastPageShow","showFirstPage","abs","showLastPage","prevButtonDisabled","i","selected","nextButtonDisabled","DataTable","container","parentElement","ajaxCallback","data","paginator","querySelector","attach","_updatePage","_loadEntries","Promise","then","_updateEntries","bodyElement","firstIndex","lastIndex","rowElem","rowCallback","add","update","n","field","direction","setupSite","selector","Array","prototype","forEach","call","querySelectorAll","resolve","fetch","r","json","rowData","map","tagData","tagColorClass","name","slug","id","title","author","readyState"],"mappings":"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"} \ No newline at end of file diff --git a/js/data_tables.js b/js/data_tables.js index 3a39539..5a41d5b 100644 --- a/js/data_tables.js +++ b/js/data_tables.js @@ -19,21 +19,23 @@ class SimplePaginator { /* First and last page in existence */ const firstPage = 0; - const lastPage = Math.ceil(totalRecords / perPage); // ish? - const numPagesToShow = 3; + const lastPage = Math.floor(totalRecords / perPage); // ish? + const numPagesToShow = 2; /* First and last page the main paginator will show */ - const firstPageShow = (currentPage - numPagesToShow < 0) ? currentPage : currentPage - numPagesToShow; - const lastPageShow = (firstPageShow + numPagesToShow) > lastPage ? lastPage : (firstPageShow + numPagesToShow * 2); + const firstPageShow = (currentPage - firstPage) < numPagesToShow ? firstPage : ((currentPage - numPagesToShow < 0) ? currentPage : currentPage - numPagesToShow); + const lastPageShow = (firstPageShow + numPagesToShow) > lastPage ? lastPage : (firstPageShow + numPagesToShow + numPagesToShow); /* Whether to show the first and last pages in existence at the ends of the paginator */ - const showFirstPage = (Math.abs(firstPage - currentPage)) > (numPagesToShow * 2); - const showLastPage = (Math.abs(lastPage - currentPage)) > (numPagesToShow * 2); + const showFirstPage = (Math.abs(firstPage - currentPage)) > (numPagesToShow); + const showLastPage = (Math.abs(lastPage - currentPage)) > (numPagesToShow); + const prevButtonDisabled = currentPage === firstPage ? 'disabled' : '' + /* Previous button */ this.element.appendChild(makeEl( - `` + `` )); /* First page button */ @@ -46,8 +48,9 @@ class SimplePaginator { /* "window" buttons */ for (let i = firstPageShow; i <= lastPageShow; i++) { + const selected = (i === currentPage ? 'paginator__button--selected' : ''); this.element.appendChild(makeEl( - `${i}` + `${i}` )); } @@ -59,9 +62,10 @@ class SimplePaginator { )); } + const nextButtonDisabled = currentPage === lastPage ? 'disabled' : '' /* Next button */ this.element.appendChild(makeEl( - `` + `` )); } } @@ -76,7 +80,7 @@ class DataTable { this.data = []; this.totalRecords = -1; - this.perPage = 10; + this.perPage = 20; this.currentPage = 0; this.paginator = new SimplePaginator(this.container.querySelector('.paginator')); diff --git a/theme/bulma/css/paste.css b/theme/bulma/css/paste.css index c4d7506..f217628 100644 --- a/theme/bulma/css/paste.css +++ b/theme/bulma/css/paste.css @@ -182,4 +182,27 @@ button.button--no-style { .form--inline { display: inline; +} + +.paginator { + float: right; +} + +.paginator__button { + box-sizing: border-box; + display: inline-block; + min-width: 1.5em; + padding: 0.2em 1em; + margin-left: 2px; + text-align: center; + text-decoration: none; + cursor: pointer; + color: #333; + border: 1px solid transparent; + border-radius: 4px; + background: #f2f2f2; +} + +.paginator__button--selected { + background-color: #ddd; } \ No newline at end of file