2021-10-16 20:28:04 +03:00
// For all DOM elements with [data-clipboard-target] or [data-clipboard-text], this copy-to-clipboard will work for them
2020-02-08 02:03:42 +03:00
2021-05-30 22:15:57 +03:00
// TODO: replace these with toast-style notifications
function onSuccess ( btn ) {
if ( ! btn . dataset . content ) return ;
$ ( btn ) . popup ( 'destroy' ) ;
btn . dataset . content = btn . dataset . success ;
$ ( btn ) . popup ( 'show' ) ;
btn . dataset . content = btn . dataset . original ;
}
function onError ( btn ) {
if ( ! btn . dataset . content ) return ;
$ ( btn ) . popup ( 'destroy' ) ;
btn . dataset . content = btn . dataset . error ;
$ ( btn ) . popup ( 'show' ) ;
btn . dataset . content = btn . dataset . original ;
}
2020-02-08 02:03:42 +03:00
2021-10-16 20:28:04 +03:00
export default function initGlobalCopyToClipboardListener ( ) {
document . addEventListener ( 'click' , async ( e ) => {
let target = e . target ;
// in case <button data-clipboard-text><svg></button>, so we just search up to 3 levels for performance.
for ( let i = 0 ; i < 3 && target ; i ++ ) {
2021-05-30 22:15:57 +03:00
let text ;
2021-10-16 20:28:04 +03:00
if ( target . dataset . clipboardText ) {
text = target . dataset . clipboardText ;
} else if ( target . dataset . clipboardTarget ) {
text = document . querySelector ( target . dataset . clipboardTarget ) ? . value ;
2021-05-30 22:15:57 +03:00
}
2021-10-16 20:28:04 +03:00
if ( text ) {
e . preventDefault ( ) ;
try {
await navigator . clipboard . writeText ( text ) ;
onSuccess ( target ) ;
} catch {
onError ( target ) ;
}
break ;
2021-05-30 22:15:57 +03:00
}
2021-10-16 20:28:04 +03:00
target = target . parentElement ;
}
} ) ;
2020-02-08 02:03:42 +03:00
}