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)
|
- [#99](https://github.com/kytta/shareon/pull/99)
|
||||||
Email button
|
Email button
|
||||||
|
|
||||||
|
- [#100](https://github.com/kytta/shareon/pull/100)
|
||||||
|
Print button
|
||||||
|
|
||||||
## [2.3.0] - 2023-08-01
|
## [2.3.0] - 2023-08-01
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|
|
@ -89,7 +89,7 @@ Shareon.init();
|
||||||
|
|
||||||
Create a container with class `shareon` and populate it with elements, class
|
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
|
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
|
```html
|
||||||
<div class="shareon">
|
<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="whatsapp"></a>
|
||||||
<a class="copy-url"></a>
|
<a class="copy-url"></a>
|
||||||
<a class="email"></a>
|
<a class="email"></a>
|
||||||
|
<a class="print"></a>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -46,6 +46,7 @@
|
||||||
<a class="whatsapp"></a>
|
<a class="whatsapp"></a>
|
||||||
<a class="copy-url"></a>
|
<a class="copy-url"></a>
|
||||||
<a class="email"></a>
|
<a class="email"></a>
|
||||||
|
<a class="print"></a>
|
||||||
<a class="web-share"></a>
|
<a class="web-share"></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
@ -69,6 +70,7 @@
|
||||||
<button class="whatsapp"></button>
|
<button class="whatsapp"></button>
|
||||||
<button class="copy-url"></button>
|
<button class="copy-url"></button>
|
||||||
<button class="email"></button>
|
<button class="email"></button>
|
||||||
|
<button class="print"></button>
|
||||||
<button class="web-share"></button>
|
<button class="web-share"></button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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");
|
background-image: url("icons/pocket.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shareon > .print:before {
|
||||||
|
background-image: url("icons/print.svg");
|
||||||
|
}
|
||||||
|
|
||||||
.shareon > .reddit {
|
.shareon > .reddit {
|
||||||
background-color: #ff4500;
|
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 it's "Web Share"
|
||||||
if (cls === "web-share") {
|
if (cls === "web-share") {
|
||||||
const data = {
|
const data = {
|
||||||
|
|
Loading…
Reference in New Issue