From b77d4b7c65b6f186b70100bac3b91e7972ed1db5 Mon Sep 17 00:00:00 2001
From: Bobby Wibowo <bobbywibowo98@gmail.com>
Date: Tue, 27 Aug 2019 05:23:54 +0700
Subject: [PATCH] Updated

Make ellipsis in pagination clickable.
It will set focus to the jump to page input, and "select" its value.
Allowing user to simply type in any numbers and press Enter to navigate.

Bumped v1 version string.
---
 public/css/dashboard.css |  4 ++++
 public/js/dashboard.js   | 13 +++++++++++--
 views/_globals.njk       |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/public/css/dashboard.css b/public/css/dashboard.css
index a9c2889..59b5069 100644
--- a/public/css/dashboard.css
+++ b/public/css/dashboard.css
@@ -82,6 +82,10 @@ a.pagination-link.is-current:hover {
   border-color: #60a8dc;
 }
 
+li[data-action="page-ellipsis"] {
+  cursor: pointer;
+}
+
 .label {
   color: #bdc3c7;
 }
diff --git a/public/js/dashboard.js b/public/js/dashboard.js
index c2f596e..13178db 100644
--- a/public/js/dashboard.js
+++ b/public/js/dashboard.js
@@ -270,6 +270,8 @@ page.domClick = function (event) {
       return page.filterUploads(element)
     case 'view-user-uploads':
       return page.viewUserUploads(id)
+    case 'page-ellipsis':
+      return page.focusJumpToPage()
     case 'page-prev':
     case 'page-next':
     case 'page-goto':
@@ -329,6 +331,13 @@ page.switchPage = function (action, element) {
   }
 }
 
+page.focusJumpToPage = function () {
+  const element = document.querySelector('#jumpToPage')
+  if (!element) return
+  element.focus()
+  element.select()
+}
+
 page.getUploads = function ({ pageNum, album, all, filters, scroll } = {}, element) {
   if (element) page.isLoading(element, true)
 
@@ -2004,12 +2013,12 @@ page.paginate = function (totalItems, itemsPerPage, currentPage) {
     startDots () {
       template += `
         <li><a class="button pagination-link" aria-label="Goto page 1" data-action="page-goto" data-goto="0">1</a></li>
-        <li><span class="pagination-ellipsis">&hellip;</span></li>
+        <li data-action="page-ellipsis"><span class="pagination-ellipsis">&hellip;</span></li>
       `
     },
     endDots () {
       template += `
-        <li><span class="pagination-ellipsis">&hellip;</span></li>
+        <li data-action="page-ellipsis"><span class="pagination-ellipsis">&hellip;</span></li>
         <li><a class="button pagination-link" aria-label="Goto page ${numPages}" data-action="page-goto" data-goto="${numPages - 1}">${numPages}</a></li>
       `
     }
diff --git a/views/_globals.njk b/views/_globals.njk
index 9c85cea..81329a9 100644
--- a/views/_globals.njk
+++ b/views/_globals.njk
@@ -16,7 +16,7 @@
   v3: CSS and JS files (libs such as bulma, lazyload, etc).
   v4: Renders in /public/render/* directories (to be used by render.js).
 #}
-{% set v1 = "MIxMXR8TwU" %}
+{% set v1 = "UOoSqCmggh" %}
 {% set v2 = "hiboQUzAzp" %}
 {% set v3 = "f0nYw5J15T" %}
 {% set v4 = "S3TAWpPeFS" %}