mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-01-18 06:08:20 +01:00
update social links when scrolling
This commit is contained in:
Pomax
parent
717749c4bf
commit
acc6d10afc
@ -97,13 +97,13 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
|
||||
</a>
|
||||
<a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -97,13 +97,13 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
|
||||
</a>
|
||||
<a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -97,13 +97,13 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
|
||||
</a>
|
||||
<a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -97,13 +97,13 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
|
||||
</a>
|
||||
<a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
87
lib/site/social-updater.js
Normal file
87
lib/site/social-updater.js
Normal file
@ -0,0 +1,87 @@
|
||||
/**
|
||||
* This file is responsible for making sure that the reddit, hn, twitter, etc. linkouts
|
||||
* are updated to reflect the section someone is reading, rather than always pointing to
|
||||
* base article itself.
|
||||
*/
|
||||
(function tryToBind() {
|
||||
|
||||
if (document.querySelectorAll("section h2 a").length < 30) {
|
||||
return setTimeout(tryToBind, 300);
|
||||
}
|
||||
|
||||
class Tracker {
|
||||
constructor() {
|
||||
this.section = false;
|
||||
this.hash = false;
|
||||
this.socials = ["Reddit","HN","Twitter"];
|
||||
}
|
||||
|
||||
update(data) {
|
||||
this.section = data.section;
|
||||
this.hash = data.hash;
|
||||
this.socials.forEach(social => {
|
||||
var a = document.querySelector("a.social." + social.toLowerCase());
|
||||
a.href = this["get"+social]();
|
||||
});
|
||||
}
|
||||
|
||||
getURL() {
|
||||
var url = "https://pomax.github.io/bezierinfo";
|
||||
if (this.hash) {
|
||||
url += this.hash;
|
||||
}
|
||||
return encodeURIComponent(url);
|
||||
}
|
||||
|
||||
getTitle() {
|
||||
var title = "A Primer on Bézier Curves";
|
||||
if (this.section) {
|
||||
title = this.section + " - " + title;
|
||||
}
|
||||
return encodeURIComponent(title);
|
||||
}
|
||||
|
||||
getReddit() {
|
||||
var url = this.getURL();
|
||||
var title = this.getTitle();
|
||||
var text = encodeURIComponent("A free, online book for when you really need to know how to do Bézier things.");
|
||||
return `https://www.reddit.com/submit?url=${url}&title=${title}&text=${text}`;
|
||||
}
|
||||
|
||||
getHN() {
|
||||
var url = this.getURL();
|
||||
var title = this.getTitle();
|
||||
return `https://news.ycombinator.com/submitlink?u=${url}&t=${title}`;
|
||||
}
|
||||
|
||||
getTwitter() {
|
||||
var url = this.getURL();
|
||||
var text = encodeURIComponent(`Reading "${this.section}" by @TheRealPomax over on `) + url;
|
||||
return `https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=${url}&text=${text}`;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// we set the section and fragmentid based on which ever section's heading is nearest
|
||||
// the top of the screen, either just off-screen or in-screen
|
||||
var tracker = new Tracker();
|
||||
var anchors = Array.from(document.querySelectorAll("section h2 a"));
|
||||
var sections = anchors.map(a => a.parentNode);
|
||||
var sectionData = sections.map(section => {
|
||||
return {
|
||||
section: section.textContent,
|
||||
hash: section.querySelector("a").hash
|
||||
};
|
||||
});
|
||||
|
||||
window.addEventListener("scroll", function(evt) {
|
||||
var min = 99999999999999999;
|
||||
var element = false;
|
||||
sections.forEach( (s,pos) => {
|
||||
var v = Math.abs(s.getBoundingClientRect().top);
|
||||
if (v < min) { min = v; element = pos; }
|
||||
});
|
||||
tracker.update(sectionData[element]);
|
||||
}, { passive: true });
|
||||
|
||||
}());
|
||||
@ -97,13 +97,13 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<a href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<a class="social reddit" href="https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things.">
|
||||
<img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
|
||||
</a>
|
||||
<a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<a class="social hn" href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
||||
<img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
|
||||
</a>
|
||||
<a href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<a class="social twitter" href="https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo">
|
||||
<img src="images/twitter.ico" alt="tweet your read" title="tweet your read">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user