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