Skip to content

Instantly share code, notes, and snippets.

@brehaut

brehaut/demo.html

Last active September 20, 2019 01:34
Show Gist options
  • Save brehaut/567947031a477c89a7f89d96e38a908c to your computer and use it in GitHub Desktop.
Save brehaut/567947031a477c89a7f89d96e38a908c to your computer and use it in GitHub Desktop.
Download ZIP
Sketch of newsfoot.js
Raw
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<script async="async" src="newsfoot.js"></script>
<style>
.newsfoot-footnote-container {
position: relative;
display: inline;
}
.newsfoot-footnote-popover {
position: absolute;
display: block;
background: #fafafa;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
padding: 0em 1em;
color: black;
width: 20em;
margin: 1em;
left: calc(-11em + 1px);
border-radius: 0.3em;
border: 1px solid #ccc;
box-sizing: border-box;
}
a.footnote {
display: inline-block;
text-decoration: none;
background: gray;
padding: 0.05em 0.75em;
border-radius: 1em;
min-width: 1em;
text-align: center;
font-size: 0.8em;
color: white;
transition: background-color 200ms ease-out;
}
a.footnote:hover {
background:blue;
transition: background-color 200ms ease-out;
}
figure {
width: 80%;
}
figure > img { width: 80%;}
</style>
</head>
<body>
<h1>Exemplar lifted from <a href="https://sixcolors.com">Six Colors</a>.</h1>
<article>
<h1><a href="https://sixcolors.com/post/2019/09/13-features-in-ios-13-maps-improvements/">13 Features of iOS 13: Maps improvements</a></h1>
<p>If there&#8217;s been anything in the history of iOS that one could perhaps legitimately slap with a term as strong as &#8220;debacle&#8221;, it would probably be Apple&#8217;s choice in 2012 to bid goodbye to Google as its location data provider of choice and launch a wholly new version of Maps. It&#8217;s a decision that was controversial at the time and still affects Apple today, despite Maps&#8217;s steady pace of improvement over the last seven years&#8212;yes, at this point, Maps has been without Google longer than it was with it.</p>
<p>But improve Maps has, year after year. Enough so that it&#8217;s been a solid competitor to Google Maps for some time now, even if there is still plenty of distrust resonating from some quarters&nbsp;<a href="#fn:doubters" id="fnref:doubters" title="see footnote" class="footnote">1</a>. People felt burned from what they saw as Apple pulling out the rug from under them, and that kind of trust can be hard to earn back.</p>
<p>Personally, I&#8217;ve always bounced back and forth between Apple Maps and Google Maps, but I&#8217;ve been impressed by the strides Apple has made, especially in iOS 13. This is the year in which it feels like Apple is finally getting all its fundamentals squared away and started looking at new features.</p>
<p><figure><img src="https://sixcolors.com/images/content/2019/ios13-apple-v-google-6c.jpg" alt="Apple Maps vs. Google Maps" />
<figcaption>Maps in iOS 13 (left) vs. Google Maps (right). Six of one, half dozen of the other?</figcaption>
</figure></p>
<p>There&#8217;s a lot to like in iOS 13&#8217;s Maps&#8212;it&#8217;s possibly the biggest update since the app was first launched&#8212;but chief among them is the improvements to mapping data. Apple took the unusual step of <a href="https://sixcolors.com/link/2018/06/apple-is-revamping-its-maps-data-in-detail/">announcing this initiative more than a year ago</a>, and, in the words of William Gibson, the future is here&#8212;it&#8217;s just not evenly distributed. Apple says it will roll out to more cities throughout the end of 2019 and internationally in 2020, but right now it&#8217;s still hard to tell whether or not the good map fairy has descended upon your area. </p>
<p>I have, however, noticed Apple&#8217;s internal mapping game improving. For example, I now have detailed layouts of Boston&#8217;s Logan Airport, including where gates and restaurants are, which is super handy. Apple claims it will also provide flight information, though I haven&#8217;t yet seen that in action. </p>
<p><figure class="pull-right"><img src="https://sixcolors.com/images/content/2019/ios13-bus-route-6c.jpg" alt="iOS 13 bus route" />
<figcaption>Live transit is finally here, so you can know exactly how late your bus will be.</figcaption>
</figure></p>
<p>But of all the features added in iOS 13, I have two personal favorites. The first is the addition of real-time transit data. Previous version of Maps did have transportation information, but it was pulled from schedules, and anybody who uses public transit regularly knows that, like battle plans, no schedule survives contact with the enemy. </p>
<p>As of iOS 13, however, if you tap on a bus stop or subway station in Apple Maps, you&#8217;ll get a list of when you can expect the next bus or train to arrive based on actual live GPS data.&nbsp;<a href="#fn:areas" id="fnref:areas" title="see footnote" class="footnote">2</a> (You will, however, need to make sure you&#8217;re on iOS&#8217;s Transit layer, accessible by tapping the Info button in Maps&#8217;s top right corner.) This also includes information about delays, all the stops along the route and estimated times of arrival at them, and data on future arrivals.&nbsp;<a href="#fn:shortcuts" id="fnref:shortcuts" title="see footnote" class="footnote">3</a></p>
<p>The real-time data makes transit directions much more useful, since it gives you concrete information rather than a rough estimate. Of course, that&#8217;s something Google Maps has offered for a little while, so it&#8217;s another place Apple is playing catch-up, but it&#8217;s such a worthwhile addition that it&#8217;s hard to make too much fuss now that it&#8217;s arrived.</p>
<p><figure class="pull-right"><img src="https://sixcolors.com/images/content/2019/ios13-maps-shareeta2-6c.jpg" alt="ios13-maps-shareeta2" />
<figcaption>The new Share ETA feature keeps contacts of your choice updated about where you&#8217;re going.</figcaption>
</figure></p>
<p>My other favorite feature is the new Share ETA option, which officially arrives in iOS 13.1 at the end of the month. It&#8217;s one of those features that Apple does best, taking a common task&#8212;letting someone know when you&#8217;ll arrive somewhere&#8212;and making it simpler. You can tap the Share ETA button when you&#8217;re in driving directions&nbsp;<a href="#fn:othertransit" id="fnref:othertransit" title="see footnote" class="footnote">4</a> and it will send an update via iMessage to the contact(s) of your choice, along with the ability for them to tap a link and follow you on your route. It&#8217;ll even send them a text when you&#8217;re getting close, which is particularly handy if you&#8217;re driving. (This feature works great on CarPlay, more on which in a future post.)</p>
<p>Once you reach your destination, Maps stops sharing that information with your contacts, which kind of makes this like a very specific use of Find My Friends-style location sharing. I found it handy when picking up my wife from the subway station, or when one of my podcast compatriots was running late and wanted to let us know how far he was from home.</p>
<p>Not only is Share ETA a useful feature, but Apple does a good job of surfacing it in the Maps app, which means I&#8217;m hopeful people will actually find it and use it. In fact, when you set a location as a Favorite (more on which below), you can set it up to automatically share your ETA with someone <em>every time you navigate to that location</em>, if you always want your partner to know when, say, you&#8217;re coming home from work. I think it&#8217;s a great feature overall: I just hope it adds support for transit and walking in a future update. </p>
<p><figure class="pull-right"><img src="https://sixcolors.com/images/content/2019/ios13-share-eta-3-6c.jpg" alt="" />
<figcaption>When you share your ETA, your contact automatically gets updates about your progress via iMessage.</figcaption>
</figure></p>
<p>Like the more detailed mapping information, the new Look Around feature&nbsp;<a href="#fn:lookaround" id="fnref:lookaround" title="see footnote" class="footnote">5</a>, are still only limited to certain locations. It looks good and works well, and definitely seems to match if not exceed Google&#8217;s own offering, but it will need to roll out to more places before it&#8217;s more than a showy demo. Again, this is a matter of Apple finally bringing itself into line with what Google has had for a long time.</p>
<p><figure class="pull-right"><img src="https://sixcolors.com/images/content/2019/ios13-favorites-6c.jpg" alt="Favorites" />
<figcaption>Not sure why it insists this is an EV Charger, but there should really be more options here.</figcaption>
</figure></p>
<p>Speaking of Google, search has long been one of Apple&#8217;s weak spots compared to Google Maps&#8212;no surprise there, given that search is Google&#8217;s bread-and-butter. Search seems mildly improved in iOS 13, but you don&#8217;t have to go long before you run into some decisions that still seem puzzling. For example, in trying to add my wife&#8217;s work to my Favorites&#8212;another new iOS 13 feature&#8212;it kept insisting that the location was an EV charging station; it took me a while to figure out that was because I&#8217;d spelled out the number in her address, using &#8220;ten&#8221; instead of &#8220;10.&#8221; Who knew? </p>
<p>In addition to marking favorites, you can now create collections of places that you can share with others, but disappointingly those collections are not synced&#8212;it just makes a copy. So you can&#8217;t, say, share a list with your partner of places that you want to visit on a vacation. I&#8217;m also (perhaps unreasonably?) annoyed at the dearth of custom icons in the Favorites feature, and the fact that I can only use the &#8220;Work&#8221; icon for my <em>own</em> office. I work at home, Apple. I don&#8217;t need a separate work option, but would love to be able to assign that to my wife&#8217;s office. </p>
<p>All in all, there&#8217;s no question that Maps is greatly improved in iOS 13. As the default mapping option in iOS, Maps has picked up a lot of users over the years, but there are still holdouts who insist on using Google Maps. Will these new features be enough to entice them away? I&#8217;m not convinced&#8212;as I said up top, trust is hard to rebuild. But there need be no fear about using Apple Maps&#8212;it&#8217;ll get you there in the end. And I&#8217;m hopeful that iOS 14 will offer an opportunity to veer more into new features like Share ETA, rather than just retreading the same ground the Google Maps has already&#8230;mapped.</p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:doubters"><p>My wife, for example, still checks everything in Google Maps, and I know she&#8217;s not alone. <a href="#fnref:doubters" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
<li id="fn:areas"><p>Assuming, of course, that where you are has this information and has allowed Apple to access it.<a href="#fnref:areas" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
<li id="fn:shortcuts"><p>You can also now create shortcuts that open certain locations, so for example, I can have one titled &#8220;When is my next bus&#8221; and it will open Maps to my bus stop, but alas, won&#8217;t simply <em>tell</em> me that information, which would be nicer. <a href="#fnref:shortcuts" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
<li id="fn:othertransit"><p>Sorry, Transit and Walking directions aren&#8217;t compatible yet. <a href="#fnref:othertransit" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
<li id="fn:lookaround"><p>Don&#8217;t call it Street View.<a href="#fnref:lookaround" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
</ol>
</div>
<p>[<em>Don't miss <a href="http://sixcolors.com/topic/ios13/">all our iOS 13 coverage</a>.</em>]
<p>[<strong><a href="http://twitter.com/dmoren">Dan Moren</a></strong> <em>is a tech writer, novelist, podcaster, and the Official Dan of Six Colors. You can email him at <a href="mailto:dan@sixcolors.com">dan@sixcolors.com</a> or find him on Twitter at <a href="http://twitter.com/dmoren">@dmoren</a>.</em>]</p>
</div><!-- column2 -->
</div><!-- article -->
</div><!-- post -->
<hr class="separator">
<div class="post">
<div class="article">
<div class="column1">
<h3>By Jason Snell</h3>
<p class="dateline">September 17, 2019 12:00 PM PT</p>
</div><!-- column1 -->
<div class="column2">
<h1><a href="https://sixcolors.com/post/2019/09/13-features-of-ios-13-find-my/">13 Features of iOS 13: Find My</a></h1>
<p><figure><img src="https://sixcolors.com/images/content/2019/findmy-ios13-lex-6c.jpg" alt="Find My screenshot" />
<figcaption>Find My lets me see the locations of my friends (center, right) as well as all the devices associated with my Apple ID (left).</figcaption>
</figure></p>
<p>Very early on the life of the iPhone, I found myself wishing for the digital equivalent of the <a href="https://harrypotter.fandom.com/wiki/Marauder%27s_Map">Marauder&#8217;s Map</a>, so I could see the locations of my friends at a glance. Though a bunch of early App Store apps tried to make it happen, it didn&#8217;t really catch on for me until Apple added the feature itself as Find My Friends. Separately, Apple created Find My iPhone, a name that kept getting worse as more Apple devices gained location-sensing technology, but an app that was essential for finding lost hardware.</p>
<p>They&#8217;re apps that do basically the same thing&#8212;one for your own devices, and one for the locations of people you know. In iOS 13, Apple has done away with both of them, replacing them with the new Find My app. We can quibble about the name&#8212;I got used to it in a hurry&#8212;but I think it&#8217;s a great step forward.</p>
<p>By default&nbsp;<a href="#fn:friends" id="fnref:friends" title="see footnote" class="footnote">1</a> Find My opens to much the same view as Find My Friends&#8212;the app&#8217;s People tab is selected, and the map will zoom out to show people who are near you. As before, &#8220;people&#8221; is defined as people in your Family Sharing group as well as anyone who has agreed to share their location with you. At the bottom of the screen there&#8217;s a People list that lists everyone who is sharing their location with you, with their current location&#8212;and if you tap on any of them, the map view will switch to show their location. The list also includes anyone you&#8217;re sharing your location with, even if they&#8217;re not reciprocating, so you can decide if you want to continue having that kind of a one-way relationship.</p>
<p>The interface has been refreshed to the style of a modern iOS app, but the features are more or less the same as before. You can get directions to the location of your friend, and add notifications to alert you when they&#8217;re arriving or departing particular locations. </p>
<p>But just hit that new Devices tab and&#8230; you&#8217;re essentially in Find My iPhone, but a much more modern version that&#8217;s using the same interface as the People tab. Here you&#8217;ll see all the devices associated with your Apple ID (and any Apple IDs associated with your family). This section will be a good reminder to de-associate all your old devices&#8212;as a product reviewer I have more of these than most people, but my list was still <em>shockingly</em> long.</p>
<p>As with Find My iPhone, the Devices list is a bit scattershot, because different devices can sense location and phone home via quite different means. AirPods will show up on the list, but it&#8217;s really only going to show the last time and location another device connected to them. Laptops that are asleep or off may appear, but at best the app will only show where they were the last time they were connected.</p>
<p>This is all about to change with iOS 13 and macOS Catalina, as Apple introduces new technology that will <a href="https://www.wired.com/story/apple-find-my-cryptography-bluetooth/">enable other Apple devices to find yours</a>. It&#8217;s all encrypted to ensure privacy, but we are about to enter a world where Apple devices emit low-power Bluetooth pings in order to better let you find where they are. The Find My app will be a major beneficiary of this tech.</p>
<p>Then there&#8217;s <a href="https://sixcolors.com/post/2019/09/the-u1-chip-in-the-iphone-11-is-the-beginning-of-an-ultra-wideband-revolution/">Ultra Wideband</a> tech, which Apple is bringing to the iPhone 11. That technology will allow even more precise discovery of Apple devices. And reports suggest Apple&#8217;s also working on a low-power tracking device that you&#8217;ll be able to place on other objects, which will then appear in a new <a href="https://www.macrumors.com/2019/08/30/apple-tile-like-tag-item-tracker-what-to-expect/">Items tab within Find My</a>. In other words, Find My isn&#8217;t just a much-needed merging of two longstanding location-tracking apps. It&#8217;s a refresh that&#8217;s happening because Apple is introducing a raft of new tracking technologies that go beyond anything we&#8217;ve seen up to this point.</p>
<p>I know this is a series about iOS features, but I also want to mention how great it is that Find My is coming to macOS Catalina via the Catalyst app-translation technology. Previously, you could view the locations of your friends on the Mac via a very limited Notification Center widget. Now Mac users get the complete Find My app experience. As someone who uses Find My Friends on my Mac all the time to figure out where my family is, I&#8217;m happy to finally be able to use an app rather than sliding out a weird little drawer.</p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:friends"><p>I think. I don&#8217;t know what happens if you have no designated friends or family members.<a href="#fnref:friends" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
</ol>
</div>
<p>[<em>Don't miss <a href="http://sixcolors.com/topic/ios13/">all our iOS 13 coverage</a>.</em>]
</div><!-- column2 -->
</div><!-- article -->
</div><!-- post -->
<hr class="separator">
<div class="post">
<div class="article">
<div class="column1">
<h3>By Dan Moren</h3>
<p class="dateline">September 17, 2019 7:51 AM PT</p>
</div><!-- column1 -->
<div class="column2">
<h1><a href="https://sixcolors.com/post/2019/09/13-features-of-ios-13-the-long-press/">13 Features of iOS 13: The long press</a></h1>
<p>When the iPhone&#8217;s multitouch interface first arrived on the scene, it was a testament to the simplicity and straightforwardness that touch could offer. But as the years have gone by and manipulating a slab of glass has become second nature to much of humanity, phone makers have struggled with how to add more complex features to the interface without marring that ease of use.</p>
<p><figure class="pull-right"><img src="https://sixcolors.com/images/content/2019/longpress-music-6c.jpg" alt="longpress-music" />
<figcaption>A long press in the Music app brings up a long menu of possible actions.</figcaption>
</figure></p>
<p>Apple is no exception to this challenge, but in iOS 13 it finally seems to have made a decision to focus on a single answer: the long press. The long press expands upon the Haptic Touch features introduced in last year&#8217;s iPhone XR, as well as absorbing the now deprecated 3D Touch hardware-based features first introduced in the iPhone 6s.</p>
<p>The long press&#8212;or tap and hold&#8212;essentially acts like a right-click/control-click/two-finger-click does on the Mac, bringing up a contextual menu of additional options. </p>
<p>For example, long press on a track in the Music app and you&#8217;ll get a scrollable menu of general actions like copy or share, as well as those specific to music, like adding it to a playlist or your Up Next queue. In Photos, a long press will give you a preview of that image or video (playing it back if it&#8217;s a Live Photo or video), as well as options for copying, sharing, favoriting, or deleting. Long pressing on a link in Safari also gives you an optional preview of the link (much like the peek-and-pop of 3D Touch), along with options for opening the link in the background, downloading it, adding it to your Reading List, and so on. You can even long press on an icon in the home screen to bring up shortcuts to actions within the app. Basically, any time you want to do anything <em>more</em> with an item that you can tap on, you can use the long press.</p>
<p>As someone who has never been a huge fan of 3D Touch, I think the choice to use the long press is great, for several reasons. First, and most importantly, it can be implemented standard across <em>all</em> iOS devices. No iPad&nbsp;<a href="#fn:expensive" id="fnref:expensive" title="see footnote" class="footnote">1</a> or iPod touch ever had 3D Touch, and it wasn&#8217;t even included in every iPhone model. As of iOS 13, you can be sure that whenever you pick up an iOS device, a long press on an item will have the same result.&nbsp;<a href="#fn:macos" id="fnref:macos" title="see footnote" class="footnote">2</a></p>
<p><figure class="pull-right"><img src="https://sixcolors.com/images/content/2019/ios13-longpress.gif" alt="Long Press Safari" />
<figcaption>A long press in Safari brings up a page preview, as well as possible actions.</figcaption>
</figure></p>
<p>It&#8217;s also simpler, in my opinion, to explain a long press to someone than it <em>ever</em> was to explain 3D Touch.&nbsp;<a href="#fn:3dtouch" id="fnref:3dtouch" title="see footnote" class="footnote">3</a> Pretty much anybody who&#8217;s comfortable using a multitouch interface understands the &#8220;tap and hold&#8221; concept. </p>
<p>Finally, it provides a place to put all those additional options that were previously hidden in a variety of places, whether accessible via 3D Touch or under the Share menu. No more trying to figure out where exactly those extra features might be. And even though there&#8217;s nothing that says &#8220;obvious&#8221; about tapping and holding, it&#8217;s a feature that&#8217;s not that hard to discover&#8212;and, once you discover it, you can easily generalize it to the rest of the OS.</p>
<p>My only complaint about the long press is that it&#8217;s not <em>quite</em> as standardized as I&#8217;d like. There are some holdouts: Tapping and holding on a message in Messages, for example, gives you Tapback options, as well as an old-style popover menu of options like Copy. And that long press on a song in the Music app brings up a long list of actions that are usually only accessible in other places via the Share button, which in other places requires an additional tap.</p>
<p>Still, I&#8217;m bullish on the future of the long press as a basic input mechanic in iOS. Just like the right-click on the Mac, you <em>can</em> get by without it, but once you learn it&#8217;s there, it opens up so many possibilities. Once third-party developers start to adopt this setup in their own apps, it may finally be well on its way to becoming a fact of life for iOS users. </p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:expensive"><p>The hardware was reputedly prohibitively expensive on the bigger display of the iPad, meaning it would have driven up the cost of the cheaper iPod touch and lower cost phones.<a href="#fnref:expensive" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
<li id="fn:macos"><p>Frankly, I think Apple spent too much time trying to standardize this technology across both the Macs and iOS devices, to the detriment of both&#8212;it couldn&#8217;t even <a href="https://en.wikipedia.org/wiki/Force_Touch">settle on one terminology</a>. I don&#8217;t think 3D Touch was ever great on iOS devices, and &#8220;Force Touch&#8221; is even less useful on Macs, in my opinion. These are different platforms with different interfaces; you can&#8217;t just drop the same interface conceit on both of them.<a href="#fnref:macos" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
<li id="fn:3dtouch"><p>&#8220;No, press it but then press <em>harder</em>.&#8221; <a href="#fnref:3dtouch" title="return to article" class="reversefootnote">&#160;&#8617;</a></p></li>
</ol>
</article>
</body>
</html>
Raw
newsfoot.js
// @ts-check
/** @param {Node | null} el */
const remove = (el) => { if (el) el.parentElement.removeChild(el) };
const stripPx = (s) => +s.slice(0, -2);
/** @param {string} tag
* @param {string} cls
* @returns HTMLElement
*/
function newEl(tag, cls) {
const el = document.createElement(tag);
el.classList.add(cls);
return el;
}
/** @type {<T extends any[]>(fn: (...args: T) => void, t: number) => ((...args: T) => void)} */
function debounce(f, ms) {
let t = Date.now();
return (...args) => {
const now = Date.now();
if (now - t < ms) return;
t = now;
f(...args);
};
}
const clsPrefix = "newsfoot-footnote-";
const CONTAINER_CLS = `${clsPrefix}container`;
const POPOVER_CLS = `${clsPrefix}popover`;
/**
* @param {Node} content
* @returns {HTMLElement}
*/
function footnoteMarkup(content) {
const popover = newEl("div", POPOVER_CLS);
popover.appendChild(content);
return popover;
}
class Footnote {
/**
* @param {Node} content
* @param {Element} fnref
*/
constructor(content, fnref) {
this.popover = footnoteMarkup(content);
this.style = window.getComputedStyle(this.popover);
this.fnref = fnref;
this.fnref.closest(`.${CONTAINER_CLS}`).appendChild(this.popover);
this.reposition();
/** @type {(ev:MouseEvent) => void} */
this.clickoutHandler = (ev) => {
if (!(ev.target instanceof Element)) return;
if (ev.target.closest(`.${POPOVER_CLS}`) === this.popover) return;
this.cleanup();
}
document.addEventListener("click", this.clickoutHandler, {capture: true});
this.resizeHandler = debounce(() => this.reposition(), 20);
window.addEventListener("resize", this.resizeHandler);
}
cleanup() {
remove(this.popover);
document.removeEventListener("click", this.clickoutHandler, {capture: true});
window.removeEventListener("resize", this.resizeHandler);
delete this.popover;
delete this.clickoutHandler;
delete this.resizeHandler;
}
reposition() {
const refRect = this.fnref.getBoundingClientRect();
const center = refRect.left + (refRect.width / 2);
const popoverHalfWidth = this.popover.clientWidth / 2;
const marginLeft = stripPx(this.style.marginLeft);
const marginRight = stripPx(this.style.marginRight);
let offset = 0;
if (center + popoverHalfWidth + marginRight > window.innerWidth) {
offset = -((center + popoverHalfWidth + marginRight) - window.innerWidth);
}
else if (center - (popoverHalfWidth + marginLeft) < 0) {
offset = (popoverHalfWidth + marginLeft) - center;
}
this.popover.style.transform = `translate(${offset}px)`;
}
}
/** @param {Node} n */
function fragFromContents(n) {
const frag = document.createDocumentFragment();
n.childNodes.forEach((ch) => frag.appendChild(ch));
return frag;
}
/** @param {HTMLAnchorElement} a */
function installContainer(a) {
if (!a.parentElement.matches(`.${CONTAINER_CLS}`)) {
const container = newEl("div", CONTAINER_CLS);
a.parentElement.insertBefore(container, a);
container.appendChild(a);
}
}
document.addEventListener("click", (ev) => {
if (!(ev.target && ev.target instanceof HTMLAnchorElement)) return;
if (!ev.target.matches(".footnote")) return;
ev.preventDefault();
const content = document.querySelector(`[id='${ev.target.hash.substring(1)}']`).cloneNode(true);
if (content instanceof HTMLElement) remove(content.querySelector(".reversefootnote"));
installContainer(ev.target);
void new Footnote(fragFromContents(content), ev.target);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment