Add 'Print' button (#100)
This commit is contained in:
commit
a82093cf3f
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
```
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 266 B |
|
@ -137,6 +137,10 @@
|
|||
background-image: url("icons/pocket.svg");
|
||||
}
|
||||
|
||||
.shareon > .print:before {
|
||||
background-image: url("icons/print.svg");
|
||||
}
|
||||
|
||||
.shareon > .reddit {
|
||||
background-color: #ff4500;
|
||||
}
|
||||
|
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in New Issue