From 63e5733a72bccaf966145a00f7a62bec5c13c63a Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Mon, 23 Jan 2023 05:49:23 +0100 Subject: [PATCH 1/6] Make default background darker --- src/shareon.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shareon.css b/src/shareon.css index 5ef8961..795b367 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -24,7 +24,7 @@ margin: calc(var(--padding-ver) / 2); padding: var(--padding-ver) var(--padding-hor); - background-color: #ccc; + background-color: #333; border-radius: calc(var(--icon-size) / 6); border: none; box-sizing: content-box; From 2493e6d014cd4d7794d7faddad0492ff6450e369 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Mon, 23 Jan 2023 05:49:37 +0100 Subject: [PATCH 2/6] Add "Copy URL" button Closes #41 --- src/shareon.css | 4 ++++ src/shareon.js | 11 +++++++++++ 2 files changed, 15 insertions(+) diff --git a/src/shareon.css b/src/shareon.css index 795b367..3675e16 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -73,6 +73,10 @@ vertical-align: bottom; } +.shareon > .copy-url:before { + background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707 1.414-1.414-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071 4.983 4.983 0 0 0 3.535 1.462A4.982 4.982 0 0 0 12 19.071l.707-.707-1.414-1.414-.707.707a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.122-2.121z'/%3E%3Cpath d='m12 4.929-.707.707 1.414 1.414.707-.707a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0z'/%3E%3C/svg%3E"); +} + .shareon > .facebook { background-color: #1877f2; } diff --git a/src/shareon.js b/src/shareon.js index 399197e..cb2d630 100644 --- a/src/shareon.js +++ b/src/shareon.js @@ -50,6 +50,17 @@ const init = () => { for (let k = 0; k < classListLength; k += 1) { 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); + }); + } + // if it's one of the networks if (Object.prototype.hasOwnProperty.call(urlBuilderMap, cls)) { const preset = { From 618627c4189b566b4d4a13db772c6aadb4c00562 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Mon, 23 Jan 2023 05:50:02 +0100 Subject: [PATCH 3/6] Add "Copy URL" buttons to test page --- index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.html b/index.html index 6bf3c70..0c09db0 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,7 @@ +
@@ -60,6 +61,7 @@ +
@@ -83,6 +85,7 @@ +
From 1d766385c9c4cc3688150a1f2cf33e488338f422 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Mon, 23 Jan 2023 05:50:15 +0100 Subject: [PATCH 4/6] Update specimen so that it looks good --- index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0c09db0..4589100 100644 --- a/index.html +++ b/index.html @@ -97,14 +97,15 @@ Pin -
+
- + Отправить + Copy URL
From 10cf0143d8fffb0e4f3019eb79981f83ac646a29 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Mon, 20 Mar 2023 18:49:07 +0100 Subject: [PATCH 5/6] Use a different link icon --- src/shareon.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shareon.css b/src/shareon.css index 3675e16..c56b23d 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -74,7 +74,7 @@ } .shareon > .copy-url:before { - background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707 1.414-1.414-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071 4.983 4.983 0 0 0 3.535 1.462A4.982 4.982 0 0 0 12 19.071l.707-.707-1.414-1.414-.707.707a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.122-2.121z'/%3E%3Cpath d='m12 4.929-.707.707 1.414 1.414.707-.707a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0z'/%3E%3C/svg%3E"); + 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 > .facebook { From d49120ed0f1c828642a591b294c1faf22c3bccd3 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Mon, 20 Mar 2023 19:04:27 +0100 Subject: [PATCH 6/6] Change icon for a second after copying --- src/shareon.css | 4 ++++ src/shareon.js | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/shareon.css b/src/shareon.css index c56b23d..0a352ed 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -77,6 +77,10 @@ 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 { background-color: #1877f2; } diff --git a/src/shareon.js b/src/shareon.js index cb2d630..aede88e 100644 --- a/src/shareon.js +++ b/src/shareon.js @@ -58,6 +58,10 @@ const init = () => { container.dataset.url || window.location.href; navigator.clipboard.writeText(url); + child.classList.add("done"); + setTimeout(() => { + child.classList.remove("done"); + }, 1000); }); }