Fine tune click-to-load widget

Notably, add clickable link to open the widget
in its own tab. Also, allows the URL to be text-
selected so that it becomes possible to use the
selection in a browser contextual menu's "Open
in a new tab" option.
This commit is contained in:
Raymond Hill 2020-11-14 08:34:47 -05:00
parent 54c8a0a6f2
commit 46d7f8a70c
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
3 changed files with 10 additions and 4 deletions

View File

@ -42,7 +42,10 @@ body {
overflow: hidden;
word-break: break-all;
}
#frameURL > a {
font-size: 1rem;
}
#clickToLoad {
cursor: default;
margin-bottom: 1em;

View File

@ -34,7 +34,8 @@ const url = new URL(self.location.href);
const frameURL = url.searchParams.get('url');
const frameURLElem = document.getElementById('frameURL');
frameURLElem.textContent = frameURL;
frameURLElem.children[0].textContent = frameURL;
frameURLElem.children[1].href = frameURL;
const onWindowResize = function() {
document.body.style.width = `${self.innerWidth}px`;
@ -47,7 +48,7 @@ self.addEventListener('resize', onWindowResize);
document.body.addEventListener('click', ev => {
if ( ev.isTrusted === false ) { return; }
//if ( ev.target === frameURLElem ) { return; }
if ( ev.target.closest('#frameURL') !== null ) { return; }
vAPI.messaging.send('default', {
what: 'clickToLoad',
frameURL,

View File

@ -6,6 +6,7 @@
<title>uBlock Origin Click-to-Load</title>
<link rel="stylesheet" href="../css/themes/default.css">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/fa-icons.css">
<link rel="stylesheet" href="../css/click2load.css">
</head>
@ -13,8 +14,9 @@
<span class="logo"><img src="../img/ublock.svg"></span>
<span id="clickToLoad" data-i18n="clickToLoad"></span>
<div id="frameURL"></div>
<div id="frameURL"><span></span>&nbsp;<a class="fa-icon" href="" rel="noreferrer noopener" target="_blank">external-link</a></div>
<script src="../js/fa-icons.js"></script>
<script src="../js/vapi.js"></script>
<script src="../js/vapi-common.js"></script>
<script src="../js/vapi-client.js"></script>