Add "Copy URL" button (#44)

pull/50/head
Nikita Karamov 2023-03-20 19:16:57 +01:00 committed by GitHub
commit fdf4c946c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 3 deletions

View File

@ -42,6 +42,7 @@
<a class="viber"></a> <a class="viber"></a>
<a class="vkontakte"></a> <a class="vkontakte"></a>
<a class="whatsapp"></a> <a class="whatsapp"></a>
<a class="copy-url"></a>
</div> </div>
</section> </section>
<section> <section>
@ -60,6 +61,7 @@
<button class="viber"></button> <button class="viber"></button>
<button class="vkontakte"></button> <button class="vkontakte"></button>
<button class="whatsapp"></button> <button class="whatsapp"></button>
<button class="copy-url"></button>
</div> </div>
</section> </section>
<section> <section>
@ -83,6 +85,7 @@
<a class="viber"></a> <a class="viber"></a>
<a class="vkontakte"></a> <a class="vkontakte"></a>
<a class="whatsapp"></a> <a class="whatsapp"></a>
<a class="copy-url"></a>
</div> </div>
</section> </section>
<section> <section>
@ -94,14 +97,15 @@
<a class="messenger" data-fb-app-id="3619024578167617"></a> <a class="messenger" data-fb-app-id="3619024578167617"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest">Pin</a> <a class="pinterest">Pin</a>
<br />
<a class="pocket"></a> <a class="pocket"></a>
<a class="reddit"></a> <a class="reddit"></a>
<br />
<a class="telegram"></a> <a class="telegram"></a>
<a class="twitter"></a> <a class="twitter">트윗</a>
<a class="viber"></a> <a class="viber"></a>
<a class="vkontakte">Отправить</a> <a class="vkontakte">Отправить</a>
<a class="whatsapp"></a> <a class="whatsapp"></a>
<a class="copy-url">Copy URL</a>
</div> </div>
</section> </section>
</main> </main>

View File

@ -24,7 +24,7 @@
margin: calc(var(--padding-ver) / 2); margin: calc(var(--padding-ver) / 2);
padding: var(--padding-ver) var(--padding-hor); padding: var(--padding-ver) var(--padding-hor);
background-color: #ccc; background-color: #333;
border-radius: calc(var(--icon-size) / 6); border-radius: calc(var(--icon-size) / 6);
border: none; border: none;
box-sizing: content-box; box-sizing: content-box;
@ -73,6 +73,14 @@
vertical-align: bottom; vertical-align: bottom;
} }
.shareon > .copy-url:before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/g%3E%3C/svg%3E");
}
.shareon > .copy-url.done:before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.shareon > .facebook { .shareon > .facebook {
background-color: #1877f2; background-color: #1877f2;
} }

View File

@ -50,6 +50,21 @@ const init = () => {
for (let k = 0; k < classListLength; k += 1) { for (let k = 0; k < classListLength; k += 1) {
const cls = child.classList.item(k); const cls = child.classList.item(k);
// if it's "Copy URL"
if (cls === "copy-url") {
child.addEventListener("click", () => {
const url =
child.dataset.url ||
container.dataset.url ||
window.location.href;
navigator.clipboard.writeText(url);
child.classList.add("done");
setTimeout(() => {
child.classList.remove("done");
}, 1000);
});
}
// if it's one of the networks // if it's one of the networks
if (Object.prototype.hasOwnProperty.call(urlBuilderMap, cls)) { if (Object.prototype.hasOwnProperty.call(urlBuilderMap, cls)) {
const preset = { const preset = {