From 06767271bfe703e07d41f54598c4d325be472848 Mon Sep 17 00:00:00 2001 From: Stanislaw Adaszewski Date: Tue, 3 Mar 2020 18:36:23 +0100 Subject: [PATCH] Added a discrete indeterminate progress indicator following the mouse cursor to signal outstanding API requests. --- .../src/js/misc/wb-apply-promise-ordering.js | 49 ++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/frontend/src/js/misc/wb-apply-promise-ordering.js b/frontend/src/js/misc/wb-apply-promise-ordering.js index 161b0db..855ebb9 100644 --- a/frontend/src/js/misc/wb-apply-promise-ordering.js +++ b/frontend/src/js/misc/wb-apply-promise-ordering.js @@ -1,12 +1,56 @@ const defaultOrderRegistry = {}; +/* function notify(orderRegistry) { + if (!('listeners' in orderRegistry)) + return; + for (let k in orderRegistry.listeners) { + orderRegistry.listeners[k](orderRegistry); + } +} */ + +function cursorDecor() { + let d = $('#cursor-decor'); + if (d.length === 1) + return $(d[0]); + d = $('
\ +
\ +
\ +
\ +
'); + $(document.body).append(d); + let pageX = 0, pageY = 0, scrollX = 0, scrollY = 0; + document.addEventListener('mousemove', e => { + pageX = e.pageX; + pageY = e.pageY; + d.css({ left: (e.pageX + 16) + 'px', top: (e.pageY + 16) + 'px' }) + scrollX = window.scrollX; + scrollY = window.scrollY; + }); + document.addEventListener('scroll', e => { + d.css({ left: (pageX + window.scrollX - scrollX + 16) + 'px', + top: (pageY + window.scrollY - scrollY + 16) + 'px' }); + }); + return d; +} + +function updateCursorDecor(orderRegistry) { + const d = cursorDecor(); + if (Object.keys(orderRegistry.pendingCompletion).length === 0) + d.hide(); + else + d.show(); +} + function wbApplyPromiseOrdering(prom, orderRegistry) { let orderId; if (!orderRegistry) orderRegistry = defaultOrderRegistry; - if (Object.keys(orderRegistry).length === 0) { + //if (Object.keys(orderRegistry).length === 0) { + if (!('started' in orderRegistry)) { orderRegistry.started = 0; orderRegistry.pendingCompletion = {}; orderRegistry.completed = { 0: true }; @@ -15,6 +59,8 @@ function wbApplyPromiseOrdering(prom, orderRegistry) { orderRegistry.started += 1; orderId = orderRegistry.started; // console.log('New orderId: ' + orderId); + // notify(orderRegistry); + cursorDecor().show(); const orderCallback = ((isCatch, payload) => { // console.log('orderId: ' + orderId + @@ -41,6 +87,7 @@ function wbApplyPromiseOrdering(prom, orderRegistry) { // console.log('Garbage collect'); orderRegistry.started = 0; orderRegistry.completed = { 0: true }; + cursorDecor().hide(); } if (isCatch)