Add 'Print' button (#100)

CHANGELOG.md

@@ -11,6 +11,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - [#99](https://github.com/kytta/shareon/pull/99)
   Email button
 
+- [#100](https://github.com/kytta/shareon/pull/100)
+  Print button
+
 ## [2.3.0] - 2023-08-01
 
 ### Added

README.md

@@ -89,7 +89,7 @@ Shareon.init();
 
 Create a container with class `shareon` and populate it with elements, class
 names of which match the names of the social networks (or `copy-url`, for the
-'Copy URL' button):
+'Copy URL' button, or `print` for the 'Print' button):
 
 ```html
 <div class="shareon">
@@ -111,6 +111,7 @@ names of which match the names of the social networks (or `copy-url`, for the
   <a class="whatsapp"></a>
   <a class="copy-url"></a>
   <a class="email"></a>
+  <a class="print"></a>
 </div>
 ```
 

index.html

@@ -46,6 +46,7 @@
           <a class="whatsapp"></a>
           <a class="copy-url"></a>
           <a class="email"></a>
+          <a class="print"></a>
           <a class="web-share"></a>
         </div>
       </section>
@@ -69,6 +70,7 @@
           <button class="whatsapp"></button>
           <button class="copy-url"></button>
           <button class="email"></button>
+          <button class="print"></button>
           <button class="web-share"></button>
         </div>
       </section>

src/icons/print.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/></svg>

src/shareon.css

@@ -137,6 +137,10 @@
   background-image: url("icons/pocket.svg");
 }
 
+.shareon > .print:before {
+  background-image: url("icons/print.svg");
+}
+
 .shareon > .reddit {
   background-color: #ff4500;
 }

src/shareon.js

@@ -68,6 +68,13 @@ const init = () => {
             });
           }
 
+          // if it's "Print"
+          if (cls === "print") {
+            child.addEventListener("click", () => {
+              window.print();
+            });
+          }
+
           // if it's "Web Share"
           if (cls === "web-share") {
             const data = {