Add "Copy URL" button (#44)

index.html

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

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;
 }

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 = {