ndf-elements
Version:
My collection of useful custom elements.
163 lines (140 loc) • 9.35 kB
HTML
<!--
Work-in-progress!
@copyright © Nick Freear, 3-July-2022.
-->
<!--<template>-->
<style>
ul {
list-style: none;
line-height: 1;
margin: 0;
padding: 0;
X-width: calc(2.3rem + .2rem);
}
.X-li { display: inline-block; }
a {
display: block;
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
border-radius: .25rem;
font: 0/0 a;
margin: .2rem 0;
outline-offset: 2px;
height: 2.3rem;
width: 2.3rem;
}
use[ href *= fa-facebook ] { fill: #3b5998; }
use[ href *= fa-twitter ] { fill: #00aced; }
use[ href *= fa-envelope ] { fill: #555; }
use[ href *= fa-link ] { fill: brown; }
use[ href *= fa-rss ] { fill: #e5842f; }
:focus use[ href ],
:hover use[ href ] {
fill: #a22;
stroke: black;
X-stroke-width: 10px;
transition: all 500ms;
}
:focus,
a:hover {
background: #ccc;
X-box-shadow: 0 0 2px 2px #444;
X-outline: 2px solid black;
transition: all 500ms;
}
.X-facebook a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/facebook.png); }
.X-twitter a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/twitter.png); }
.X-tumblr a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/tumblr.png); }
.X-email a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/mail.png); }
.X-copylink a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/link.png); }
</style>
<ul id="my-share">
<li class="facebook" title="Share on Facebook"><a href="#" data-href="https://www.facebook.com/sharer.php?u=${url}&title=${txt}" data-width=400 data-height=500
>Facebook
<svg viewBox="0 0 448 512"><use href="#fa-facebook-sq"/></svg>
</a></li>
<li class="twitter" title="Share on Twitter"><a href="#" data-href="https://twitter.com/intent/tweet?status=${txt}+${url}" data-width=400 data-height=500
>Twitter
<svg viewBox="0 0 448 512"><use href="#fa-twitter-sq"/></svg>
</a></li>
<li class="linkedin"><a href="#" data-href="https://www.linkedin.com/sharing/share-offsite/?url={url}"
>LinkedIn
<svg viewBox="0 0 "><use href="#fa-linkedin"/></svg>
</a></li>
<!-- <li class="google" title="Share on Google+"><a href="#" data-href="https://plus.google.com/share?url=${url}" data-width=400 data-height=250 >Google+</a></li>-->
<!-- <li class="tumblr" title="Share on Tumblr"><a href="#" data-href="https://www.tumblr.com/share?v=3&u=${url}&t=${txt}" data-width=400 data-height=500 >Tumblr</a></li> -->
<li class="email" title="Share on Email"><a href="#" data-href="mailto:?subject=${txt}&body=${url}"
>Email
<svg viewBox="0 0 512 512"><use href="#fa-envelope-solid"/></svg>
</a></li>
<li class="copylink" title="Copy Link"><a href="#" id="copy"
>Copy Link
<svg viewBox="0 0 640 512"><use href="#fa-link"/></svg>
</a></li>
<li class="rss" title="RSS Feed"><a href="#"
>RSS feed
<svg viewBox="0 0 448 512"><use href="#fa-rss-sq"/></svg>
</a></li>
</ul>
<svg xmlns="http://www.w3.org/2000/svg" data-viewBox="0 0 512 512">
<defs>
<path id="fa-twitter" d=
"M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
/>
<!-- viewBox="0 0 448 512" -->
<path id="fa-twitter-sq" d=
"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"
/>
<!-- viewBox="0 0 448 512"-->
<path id="fa-facebook-sq" d=
"M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"
/>
<!-- viewBox="0 0 640 512" -->
<path id="fa-link" d=
"M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"
/>
<!-- viewBox="0 0 512 512" -->
<path id="fa-envelope" d=
"M0 128C0 92.65 28.65 64 64 64H448C483.3 64 512 92.65 512 128V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V128zM48 128V150.1L220.5 291.7C241.1 308.7 270.9 308.7 291.5 291.7L464 150.1V127.1C464 119.2 456.8 111.1 448 111.1H64C55.16 111.1 48 119.2 48 127.1L48 128zM48 212.2V384C48 392.8 55.16 400 64 400H448C456.8 400 464 392.8 464 384V212.2L322 328.8C283.6 360.3 228.4 360.3 189.1 328.8L48 212.2z"
/>
<!-- viewBox="0 0 512 512" -->
<path id="fa-envelope-solid" d=
"M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z"
/>
<!-- viewBox="0 0 448 512" -->
<path id="fa-rss-sq" d=
"M384 32H64C28.65 32 0 60.66 0 96v320c0 35.34 28.65 64 64 64h320c35.35 0 64-28.66 64-64V96C448 60.66 419.3 32 384 32zM150.6 374.6C144.4 380.9 136.2 384 128 384s-16.38-3.121-22.63-9.371c-12.5-12.5-12.5-32.76 0-45.26C111.6 323.1 119.8 320 128 320s16.38 3.121 22.63 9.371C163.1 341.9 163.1 362.1 150.6 374.6zM249.6 383.9C249 383.1 248.5 384 247.1 384c-12.53 0-23.09-9.75-23.92-22.44C220.5 306.9 173.1 259.5 118.4 255.9c-13.22-.8438-23.25-12.28-22.39-25.5c.8594-13.25 12.41-22.81 25.52-22.38c77.86 5.062 145.3 72.5 150.4 150.4C272.8 371.7 262.8 383.1 249.6 383.9zM345 383.1C344.7 384 344.3 384 343.1 384c-12.8 0-23.42-10.09-23.97-23C315.6 254.6 225.4 164.4 119 159.1C105.8 159.4 95.47 148.3 96.02 135C96.58 121.8 107.9 111.2 121 112c130.7 5.469 241.5 116.3 246.1 246.1C368.5 372.3 358.3 383.4 345 383.1z"
/>
</defs>
</svg>
</template>
<!--!
Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License
Copyright 2022 Fonticons, Inc.
https://fontawesome.com/search?q=facebook&s=solid%2Cbrands
https://github.com/FortAwesome/Font-Awesome/tree/6.x/svgs/brands
-->
<!--
NDF, 13-Jul-2022.
https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/activities#!/home
https://stackoverflow.com/questions/33426752/linkedin-share-post-url
-->
<script>
const SHARE = document.querySelector('#my-share');
SHARE.addEventListener('click', ev => {
// ev.preventDefault();
const EL = ev.target.closest('a');
if (!EL) return console.debug('(click):', ev.target, ev); // <ul> etc.
const HREF = EL.dataset.href;
EL.setAttribute('target', '_blank');
EL.href = 'https://example.com';
console.debug('Click:', HREF, EL, ev);
});
const TEXT = '<empty clipboard> ' + new Date().toISOString();
navigator.clipboard.writeText(TEXT).then(
() => console.debug(`Clipboard write OK: "${TEXT}"`),
ex => console.error('Clipboard write error', ex)
);
</script>