diff --git a/index.html b/index.html index 6bf3c70..4589100 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,7 @@ +
@@ -60,6 +61,7 @@ +
@@ -83,6 +85,7 @@ +
@@ -94,14 +97,15 @@ Pin -
+
- + 트윗 Отправить + Copy URL
diff --git a/src/shareon.css b/src/shareon.css index 5ef8961..0a352ed 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; @@ -73,6 +73,14 @@ 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 { background-color: #1877f2; } diff --git a/src/shareon.js b/src/shareon.js index 399197e..aede88e 100644 --- a/src/shareon.js +++ b/src/shareon.js @@ -50,6 +50,21 @@ 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); + child.classList.add("done"); + setTimeout(() => { + child.classList.remove("done"); + }, 1000); + }); + } + // if it's one of the networks if (Object.prototype.hasOwnProperty.call(urlBuilderMap, cls)) { const preset = {