diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e2eb76..dac8001 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index 968c07e..82a8a98 100644
--- a/README.md
+++ b/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
@@ -111,6 +111,7 @@ names of which match the names of the social networks (or `copy-url`, for the
+
```
diff --git a/index.html b/index.html
index 67907ed..45935fd 100644
--- a/index.html
+++ b/index.html
@@ -46,6 +46,7 @@ <a>
+
@@ -69,6 +70,7 @@ <button>
+
diff --git a/src/icons/print.svg b/src/icons/print.svg
new file mode 100644
index 0000000..400e24a
--- /dev/null
+++ b/src/icons/print.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/shareon.css b/src/shareon.css
index c5024d5..1964807 100644
--- a/src/shareon.css
+++ b/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;
}
diff --git a/src/shareon.js b/src/shareon.js
index c8cfc50..63d75c5 100644
--- a/src/shareon.js
+++ b/src/shareon.js
@@ -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 = {