Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
TODO:
- ☑️
Trim the length of the copied hashes to the limit defined by thehash-digitssetting. - ☑️
Also apply the same limit to the link text for hashes? - ☑️
Reevaluate the position of the "Copy Hash" icon on the tooltip. - ❌
Refresh my trigonometry skills, and calculate the outline of the icon more accurately.See comment below.
Copy text to clipboard using Javascript:
- https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
- https://stackoverflow.com/questions/46275918/copy-plain-text-with-no-rich-styles-to-clipboard-without-losing-focus
- https://blog.codeinside.eu/2016/05/12/copy-to-clipboard-with-javascript/
- https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/
Uncompressed source code for the "Copy Hash" icon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="64" height="64"> <path style="fill: black; opacity:0" d="M 14 14 H 0 V 0 h 14 v 14 z" /> <path style="fill:rgb(240,240,240)" d="M 1 0 h 6.6 l 2 2 h 1 l 3.4 3.4 v 8.6 h -10 v -2 h -3 z" /> <path style="fill:rgb(64,64,64)" d="M 2 1 h 5 l 3 3 v 7 h -8 z" /> <path style="fill:rgb(248,248,248)" d="M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z" /> <path style="fill:rgb(80,128,208)" d="M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" /> <path style="fill:rgb(64,64,64)" d="M 5 3 h 5 l 3 3 v 7 h -8 z" /> <path style="fill:rgb(248,248,248)" d="M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z" /> <path style="fill:rgb(80,128,208)" d="M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" /> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path
style="fill: black; opacity:0"
d="M 14 14 H 0 V 0 h 14 v 14 z" />
<path
style="fill:rgb(240,240,240)"
d="M 1 0 h 6.6 l 2 2 h 1 l 3.4 3.4 v 8.6 h -10 v -2 h -3 z" />
<path
style="fill:rgb(64,64,64)"
d="M 2 1 h 5 l 3 3 v 7 h -8 z" />
<path
style="fill:rgb(248,248,248)"
d="M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z" />
<path
style="fill:rgb(80,128,208)"
d="M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" />
<path
style="fill:rgb(64,64,64)"
d="M 5 3 h 5 l 3 3 v 7 h -8 z" />
<path
style="fill:rgb(248,248,248)"
d="M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z" />
<path
style="fill:rgb(80,128,208)"
d="M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" />
</svg>
Following are example and source code for the icon with the outline calculated more accurately, i.e. narrower on the sloping side. Yet it turns out the original variant (drawn by eye) looks better at small sizes of 14 to ≈28 (device) pixels on dark backgrounds, due to the resulting softer anti-aliasing on the sloping side.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="64" height="64"> <path style="fill: black; opacity:0" d="M 14 14 H 0 V 0 h 14 v 14 z" /> <path style="fill:rgb(240,240,240)" d="M 1 0 h 6.42 l 2 2 h 1 l 3.58 3.58 v 8.42 h -10 v -2 h -3 z" /> <path style="fill:rgb(64,64,64)" d="M 2 1 h 5 l 3 3 v 7 h -8 z" /> <path style="fill:rgb(248,248,248)" d="M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z" /> <path style="fill:rgb(80,128,208)" d="M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" /> <path style="fill:rgb(64,64,64)" d="M 5 3 h 5 l 3 3 v 7 h -8 z" /> <path style="fill:rgb(248,248,248)" d="M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z" /> <path style="fill:rgb(80,128,208)" d="M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" /> </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path
style="fill: black; opacity:0"
d="M 14 14 H 0 V 0 h 14 v 14 z" />
<path
style="fill:rgb(240,240,240)"
d="M 1 0 h 6.42 l 2 2 h 1 l 3.58 3.58 v 8.42 h -10 v -2 h -3 z" />
<path
style="fill:rgb(64,64,64)"
d="M 2 1 h 5 l 3 3 v 7 h -8 z" />
<path
style="fill:rgb(248,248,248)"
d="M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z" />
<path
style="fill:rgb(80,128,208)"
d="M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" />
<path
style="fill:rgb(64,64,64)"
d="M 5 3 h 5 l 3 3 v 7 h -8 z" />
<path
style="fill:rgb(248,248,248)"
d="M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z" />
<path
style="fill:rgb(80,128,208)"
d="M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z" />
</svg>
|
2019-06-03
| ||
| 09:10 | Cherry-pick [787650c36a]: Minimize impact of the SVG icon on line height. ... (Closed-Leaf check-in: 0a9f12ce66 user: florian tags: copybtn.js-demonstration) | |
| 08:51 | Cherry-pick [2196555351]: Use the longer hash prefix for the click-to-copy. ... (Closed-Leaf check-in: 21f38e85b3 user: florian tags: tooltip-copyhash) | |
| 08:48 | Minimize impact of the SVG icon on line height. ... (check-in: 787650c36a user: florian tags: tooltip-copyhash) | |
|
2019-06-02
| ||
| 12:36 | Cherry-pick [6a54cf2939]: Trim leading and trailing white space from the text to be copied to clipboard (do this in Javascript, so no need to care about the extra white space when generating HTML elements). ... (check-in: 698245db8d user: florian tags: copybtn.js-demonstration) | |
| 12:32 | Trim leading and trailing white space from the text to be copied to clipboard (do this in Javascript, so no need to care about the extra white space when generating HTML elements). ... (check-in: 6a54cf2939 user: florian tags: tooltip-copyhash) | |
|
2019-06-01
| ||
| 00:52 | Use the longer hash prefix for the click-to-copy. ... (check-in: 2196555351 user: drh tags: copybtn.js-demonstration) | |
|
2019-05-31
| ||
| 16:36 | Demonstration of the copybtn.js module beyond tooltips: add a copy button near the full-length hash of check-ins on the /info page, to copy only the hash prefix when clicked. ... (check-in: 46f91da1a8 user: florian tags: copybtn.js-demonstration) | |
| 15:34 | Auto-init HTML-defined buttons during the "DOMContentLoaded" event, so no more Javascript code required, apart from loading the copybtn.js module. ... (check-in: 148b01359c user: florian tags: tooltip-copyhash) | |
| 15:01 | Revamp the comments, and refactor the code in preparation for an auto-init functionality for HTML-defined buttons. ... (check-in: 7fddf96cd6 user: florian tags: tooltip-copyhash) | |
| 14:44 | Check that the value of the "data-copylength" attribute is a positive number prior to chopping the text. ... (check-in: b9823751c9 user: florian tags: tooltip-copyhash) | |
|
2019-05-30
| ||
| 11:33 | Add the "data-copylength" attribute to control the length of the copied text. (Rationale: Allow copying just the shortened hash prefixes from elements displaying the full-length hashes, because the short forms are preferred when building command-lines or URLs, and because the full-length hashes are already much easier to copy.) ... (check-in: 2e17a063a2 user: florian tags: tooltip-copyhash) | |