share-this
Version:
Medium-like text selection sharing without dependencies
85 lines (84 loc) • 3.95 kB
HTML
<html>
<head>
<title>share-this test</title>
<link rel="stylesheet" href="../dist/share-this.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style media="screen">
body {
font-family: Roboto Slab;
color: #333;
line-height: 1.428;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, <strong>quis nostrud exercitation</strong> ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p id="shareable">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu <strong>fugiat nulla</strong> pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui <em>officia deserunt mollit</em> anim id est laborum.
</p>
<p>
Aenean pharetra turpis tellus, et dapibus ipsum tincidunt ultricies. Duis ornare
accumsan ante, vel sagittis justo porttitor ut. Phasellus neque metus, euismod at
libero maximus, pretium viverra lectus. Nunc sit amet arcu congue ante semper
gravida non pharetra urna. Nam malesuada maximus nulla sed maximus. Donec ut quam
commodo, tempus felis quis, ultrices leo.
</p>
<button type="button">Remove partem</button>
<!-- <script src="../dist/share-this.js"></script>
<script src="../dist/sharers/twitter.js"></script>
<script src="../dist/sharers/facebook.js"></script>
<script src="../dist/sharers/linked-in.js"></script>
<script src="../dist/sharers/reddit.js"></script>
<script src="../dist/sharers/email.js"></script>
<script>
// var logger = console.log.bind(console);
// [ "mouseup", "mousedown", "click", "touchstart", "touchend", "touchcancel", "selectionchange", "selectstart" ]
// .forEach(function(type) { document.addEventListener(type, logger); });
var st = ShareThis({
sharers: [ ShareThisViaTwitter, ShareThisViaFacebook, /* ShareThisViaLinkedIn, */ShareThisViaReddit, ShareThisViaEmail ],
selector: "#shareable"
});
st.init();
(function(repeat) {
var ps = document.querySelectorAll("p");
repeat(ps[0], 0);
repeat(ps[2], 0);
})(function repeat(element, count) {
var parent = element.parentNode;
for (var i = 0; i < count; i++)
parent.insertBefore(element.cloneNode(true), element);
});
document.querySelector("button").addEventListener("click", function() {
var par = document.querySelector("#shareable");
if (par) {
par.parentElement.removeChild(par);
}
});
</script> -->
<script type="module">
import ShareThis from "../src/core.js";
import * as ShareThisViaEmail from "../src/sharers/email.js";
import * as ShareThisViaTwitter from "../src/sharers/twitter.js";
import * as ShareThisViaFacebook from "../src/sharers/facebook.js";
import * as ShareThisViaReddit from "../src/sharers/reddit.js";
const st = ShareThis({
sharers: [ ShareThisViaTwitter, ShareThisViaFacebook, /* ShareThisViaLinkedIn, */ShareThisViaReddit, ShareThisViaEmail ],
selector: "#shareable"
});
st.init();
window.st = st;
document.querySelector("button").addEventListener("click", () => {
st.destroy();
// document.querySelector("#shareable").remove();
});
</script>
</body>
</html>