All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
- improve default button contrast (#419) (82492d4)
- popover z-index everywhere (#658) (be257e7)
- sticky scrolling indicator moving on page scroll (f2c845e)
- position is above by default (45de8ac)
- popover margin (e246f20)
- remove aria-expanded from default button template (a2edfa6)
- scope custom properties instead of polluting :root (88392a3)
⚠ BREAKING CHANGES
The new version overhauls the style definitions of littlefoot elements. This is a breaking change because users will experience visual changes.
Additionally, changes may affect users who have customised their button or popover templates, those who have custom styles applied to footnote elements, or those targetting elements using custom logic.
- Theming support through CSS custom properties.
- Overhauled default theme.
- More robust selector escaping (uses CSS.escape in supporting browsers).
- Restore popover fade effect (1dcbdcd).
- a11y: allow tabbing to content when it overflows popover (0ecde14)
- remove body scroll locking over content shifting issues (0ce0369)
- styles: adjust content bottom padding (93d349c)
- styles: popover content padding tweaks (7f99b66)
- better locking of body scroll (d9b609c)
- prevent page scroll when scrolling footnote content (3192512)
- remove deprecated mousewheel event (4b17eb6)
- allow passing a timeout to activate() (13563e0)
- use initial font-style in footnote content (c843357)
⚠ BREAKING CHANGES
- This change removes a partial check for existing footnote-like elements in the document, which adjusted the ID of new footnotes to prevent collisions (an unlikely scenario).
change internal footnote model, create popovers on setup (728e485)
- Fixes an issue with the popover’s bottom padding on Firefox (#21).
- Fixed regression with pressing the Escape key to dismiss footnotes.
littlefoot has been rewritten in TypeScript, which enabled a cleaner architecture and slight reduction in bundle size. Browser compatibility is not as extensive as with 1.0.x, and I will no longer support older versions of Internet Explorer.
Testing framework was replaced with Jest and Cypress, and tests were adapted for simplicity.
This version introduces a number of breaking changes to advanced features. If you’ve been using littlefoot without relying on custom templates or its
.dismiss() methods, and don’t need to provide support for older browsers, it should be safe to upgrade.
.unmount()method to completely remove littlefoot footnotes from the document and return it to its original structure.
- Breaking change:
.dismiss()methods now receive the footnote identifier instead of a selector. The identifier is the sequential ordering of all footnotes in the document, starting from 1.
buttonTemplatetemplates include fewer attributes and improperly-defined custom templates are now less likely to break functionality.
- Improved pixel size calculations to determine popover height.
- Improved handling of popover hover state when dismissing.
- Resolved an issue with the
anchorParentSelectorelement not being hidden (#17).
- Resolved an issue with inherited font weights and sizes when a footnote was included inside header or
- Reduced dependency on DOM element properties for critical functionality.
- Breaking change: The
.activate()method no longer takes a custom class name to be added to the popover, as the feature is redundant. You can manipulate both the button and the popover upon activation via the
- Breaking change: The
footnote-processedclass is no longer applied to processed footnotes. Only the
footnote-print-onlyis used now.
- Breaking change: The
is-hoverclass is no longer applied to hovered footnotes.
- The purpose of the
footnoteParentClasssetting ported over from Bigfoot wasn’t clear, and it did not appear to change behaviour, so it was removed.
Differences from Bigfoot.js
In forking the Bigfoot.js project and adapting it for simplicity, I have embraced a Decisions, not options philosophy. As such, some features provided by Bigfoot.js have been replaced with simpler alternatives, a sensible set of defaults, and in some cases removed altogether.
Users planning to migrate from Bigfoot should therefore be aware of the following changes.
allowMultipleFNwas renamed to
anchorParentTagnamewas renamed to
deleteOnUnhoverwas renamed to
footnoteTagnamewas renamed to
popoverCreateDelaywas renamed to
popoverDeleteDelaywas renamed to
buttonMarkupwas replaced with
buttonTemplate. Please refer to the documentation for a list of valid tokens.
contentMarkupwas replaced with
contentTemplate. Please refer to the documentation for a list of valid tokens.
useFootnoteOnlyOncewas replaced with
allowDuplicates. The truth value should be flipped.
actionOriginalFNwas removed. All original footnotes are only hidden, leaving you free to select footnote DOM elements for removal if you need them gone from the document.
breakpointswas removed. All size-aware display changes should be declared via CSS
footnoteParentClasswas removed. After some tests, I couldn’t determine its purpose or benefits.
maxWidthRelativeTowas removed. It was undocumented and will not be missed.
preventPageScrollwas removed. Scrolling inside a scrollable footnote will not trigger a page scroll.
positionContentwas removed. Popover positioning is now always in effect.
Methods on the returning object were overhauled, removing breakpoint logic.
activate()will no longer return a list of activated popovers, it takes a footnote ID instead of a selector, and no longer allows setting a custom class on the popover element through it. Use
activateCallbackif you wish to manipulate the button or popover elements.
dismiss(), it optionally takes a footnote ID instead of a selector, and will no longer return the list of deactivated buttons.
removeBreakpoint()were removed, set breakpoint-dependent styles using CSS.
createPopover()alias was removed, use
removePopovers()alias was removed, use
All style variants have been folded into a single stylesheet. The footnote popover is now automatically fixed to the bottom of the viewport on smaller screens, and you may alter this behaviour by overriding the CSS.
Breakpoint methods were dropped in favour of a CSS-based approach. Override the stylesheets to customize screen width limits.
The markup for the footnote button ellipsis changed from three
<svg> elements with a
<circle> each to a single
<svg> element containing all three