@ -1,4 +1,3 @@
import prettyMilliseconds from 'pretty-ms' ;
import { createTippy } from '../modules/tippy.js' ;
import { GET } from '../modules/fetch.js' ;
import { hideElem , showElem } from '../utils/dom.js' ;
@ -10,28 +9,31 @@ export function initStopwatch() {
return ;
}
const stopwatchEl = document . querySelector ( '.active-stopwatch-trigger ' ) ;
const stopwatchEls = document . querySelectorAll ( '.active-stopwatch' ) ;
const stopwatchPopup = document . querySelector ( '.active-stopwatch-popup' ) ;
if ( ! stopwatchEl || ! stopwatchPopup ) {
if ( ! stopwatchEls . length || ! stopwatchPopup ) {
return ;
}
stopwatchEl . removeAttribute ( 'href' ) ; // intended for noscript mode only
createTippy ( stopwatchEl , {
content : stopwatchPopup ,
placement : 'bottom-end' ,
trigger : 'click' ,
maxWidth : 'none' ,
interactive : true ,
hideOnClick : true ,
} ) ;
// global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.
const currSeconds = document . querySelector ( '.stopwatch-time' ) ? . getAttribute ( 'data-seconds' ) ;
if ( currSeconds ) {
updateStopwatchTime ( currSeconds ) ;
const seconds = stopwatchEls [ 0 ] ? . getAttribute ( 'data-seconds' ) ;
if ( seconds ) {
updateStopwatchTime ( parseInt ( seconds ) ) ;
}
for ( const stopwatchEl of stopwatchEls ) {
stopwatchEl . removeAttribute ( 'href' ) ; // intended for noscript mode only
createTippy ( stopwatchEl , {
content : stopwatchPopup . cloneNode ( true ) ,
placement : 'bottom-end' ,
trigger : 'click' ,
maxWidth : 'none' ,
interactive : true ,
hideOnClick : true ,
theme : 'default' ,
} ) ;
}
let usingPeriodicPoller = false ;
@ -124,10 +126,9 @@ async function updateStopwatch() {
function updateStopwatchData ( data ) {
const watch = data [ 0 ] ;
const btnEl = document . querySelector ( '.active-stopwatch-trigger ' ) ;
const btnEls = document . querySelectorAll ( '.active-stopwatch' ) ;
if ( ! watch ) {
clearStopwatchTimer ( ) ;
hideElem ( btnEl ) ;
hideElem ( btnEls ) ;
} else {
const { repo _owner _name , repo _name , issue _index , seconds } = watch ;
const issueUrl = ` ${ appSubUrl } / ${ repo _owner _name } / ${ repo _name } /issues/ ${ issue _index } ` ;
@ -137,31 +138,28 @@ function updateStopwatchData(data) {
const stopwatchIssue = document . querySelector ( '.stopwatch-issue' ) ;
if ( stopwatchIssue ) stopwatchIssue . textContent = ` ${ repo _owner _name } / ${ repo _name } # ${ issue _index } ` ;
updateStopwatchTime ( seconds ) ;
showElem ( btnEl ) ;
showElem ( btnEls ) ;
}
return Boolean ( data . length ) ;
}
let updateTimeIntervalId = null ; // holds setInterval id when active
function clearStopwatchTimer ( ) {
if ( updateTimeIntervalId !== null ) {
clearInterval ( updateTimeIntervalId ) ;
updateTimeIntervalId = null ;
}
}
// TODO: This flickers on page load, we could avoid this by making a custom
// element to render time periods. Feeding a datetime in backend does not work
// when time zone between server and client differs.
function updateStopwatchTime ( seconds ) {
const secs = parseInt ( seconds ) ;
if ( ! Number . isFinite ( secs ) ) return ;
clearStopwatchTimer ( ) ;
const stopwatch = document . querySelector ( '.stopwatch-time' ) ;
// TODO: replace with <relative-time> similar to how system status up time is shown
const start = Date . now ( ) ;
const updateUi = ( ) => {
const delta = Date . now ( ) - start ;
const dur = prettyMilliseconds ( secs * 1000 + delta , { compact : true } ) ;
if ( stopwatch ) stopwatch . textContent = dur ;
} ;
updateUi ( ) ;
updateTimeIntervalId = setInterval ( updateUi , 1000 ) ;
if ( ! Number . isFinite ( seconds ) ) return ;
const datetime = ( new Date ( Date . now ( ) - seconds * 1000 ) ) . toISOString ( ) ;
for ( const parent of document . querySelectorAll ( '.header-stopwatch-dot' ) ) {
const existing = parent . querySelector ( ':scope > relative-time' ) ;
if ( existing ) {
existing . setAttribute ( 'datetime' , datetime ) ;
} else {
const el = document . createElement ( 'relative-time' ) ;
el . setAttribute ( 'format' , 'micro' ) ;
el . setAttribute ( 'datetime' , datetime ) ;
el . setAttribute ( 'lang' , 'en-US' ) ;
el . setAttribute ( 'title' , '' ) ; // make <relative-time> show no title and therefor no tooltip
parent . append ( el ) ;
}
}
}
silverwind
7 months ago
committed by
GitHub