Add 'Print' button (#100)

Author: kytta

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 @@ <h2><code>&lt;a&gt;</code></h2>
           <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 @@ <h2><code>&lt;button&gt;</code></h2>
           <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

@@ -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.css

@@ -17,7 +17,7 @@ import "./shareon.css";
  * }) => string}}
  */
 const urlBuilderMap = {
-  facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags? `&hashtag=%23${d.hashtags.split('%2C')[0]}` : ''}`,
+  facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}${d.hashtags ? `&hashtag=%23${d.hashtags.split('%2C')[0]}` : ''}`,
   email: (d) => `mailto:?subject=${d.title}&body=${d.url}`,
   linkedin: (d) => `https://www.linkedin.com/sharing/share-offsite/?url=${d.url}`,
   mastodon: (d) => `https://toot.kytta.dev/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}${d.via ? `%0D%0A%0D%0A${d.via}` : ''}`,
@@ -28,8 +28,8 @@ const urlBuilderMap = {
   reddit: (d) => `https://www.reddit.com/submit?title=${d.title}&url=${d.url}`,
   teams: (d) => `https://teams.microsoft.com/share?href=${d.url}${d.text ? `&msgText=${d.text}` : ''}`,
   telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.text ? `&text=${d.text}` : ''}`,
-  tumblr: (d) => `https://www.tumblr.com/widgets/share/tool?posttype=link${d.hashtags? `&tags=${d.hashtags}` : ''}&title=${d.title}&content=${d.url}&canonicalUrl=${d.url}${d.text? `&caption=${d.text}`:''}${d.via? `&show-via=${d.via}`:''}`,
-  twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.via ? `&via=${d.via}` : ''}${d.hashtags? `&hashtags=${d.hashtags}` : ''}`,
+  tumblr: (d) => `https://www.tumblr.com/widgets/share/tool?posttype=link${d.hashtags ? `&tags=${d.hashtags}` : ''}&title=${d.title}&content=${d.url}&canonicalUrl=${d.url}${d.text ? `&caption=${d.text}` : ''}${d.via ? `&show-via=${d.via}` : ''}`,
+  twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.via ? `&via=${d.via}` : ''}${d.hashtags ? `&hashtags=${d.hashtags}` : ''}`,
   viber: (d) => `viber://forward?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`,
   vkontakte: (d) => `https://vk.com/share.php?url=${d.url}&title=${d.title}${d.media ? `&image=${d.media}` : ''}`,
   whatsapp: (d) => `https://wa.me/?text=${d.title}%0D%0A${d.url}${d.text ? `%0D%0A%0D%0A${d.text}` : ''}`,
@@ -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 = {