Need private packages and team management tools?Check out npm Teams »

lavu-details-polyfill

0.1.1 • Public • Published

Details Element Polyfill

details

travis build codecov coverage semantic-release version

The <details> element specifies additional details that the user can view or hide on demand. The <summary> element defines a visible heading for the <details> element. The heading can be clicked to show/hide the details.

The <details> element currently has very limited cross-browser support. This polyfill provides support for the <details> element across all modern browsers.

The polyfill is based on the spec for the details element.

If you'd like to use the details element and don't know where to start, take a look at this tutorial The details and summary elements at the html5doctor, read the tests or clone this repo and try out the demo.

Features

  • keyboard and ARIA-friendly
  • fires click event when open state changes
  • fully customisable via CSS

Install

$ npm install --save lavu-details-polyfill

Usage

Use it in your page

<script type="text/javascript" 
        src="node_modules/lavu-details-polyfill/lib/index.min.js"
        charset="utf-8">
</script> 

... or require the polyfill

var polyfillDetails = require('lavu-details-polyfill');

... or import the polyfill

import { polyfillDetails } from 'lavu-details-polyfill';

Start using it

<details role="group">
  <summary role="button">Show/Hide me</summary>
  <section>
    <p>Some content.</p>
  </section>
</details>

The script uses the load event to polyfill the <details> elements.

If you load HTML fragments dynamically, e.g. in a single page application, then you must call the polyfill after loading the HTML.

polyfillDetails(content);

Where content is the parent node of the loaded HTML fragment.

Notes

The polyfill provides a minimal CSS meant to mimic the default unstyled browser look which you can override in your own CSS/SASS/LESS module. Code that overrides the default CSS is provided in the snippets example.

details, details>summary {
  display: block;
}
details > summary {
  min-height: 1.4em;
  padding: 0.125em;
}
details > summary:before {
  content:"►";
  font-size: 1em;
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  -webkit-transform-origin: 0.4em 0.6em;
     -moz-transform-origin: 0.4em 0.6em;
      -ms-transform-origin: 0.4em 0.6em;
          transform-origin: 0.4em 0.6em;
}
details[open] > summary:before {
  content:"▼"
}
details > *:not(summary) {
  display: none;
  opacity: 0;
}
details[open] > *:not(summary) {
  display: block;
  opacity: 1;
}

The polyfill does not preserve the child elements layout when toggeling the details. Also, there is no guarantee that a browser's native implementation of the <details> element will respect it's child elements layout when toggeling the details. To preserve the child elements layout, you should always wrap the child elements inside a block element, e.g. <div>, <article>, <section> etc.

<style>
  .inline-element { display : inline-block; }
</style> 
<details role="group">
  <summary role="button">Show/Hide me</summary>
  <article>
    <div class="inline-element">
      <p>Some content ..... etc.</p>
    </div>
  </article>
</details>

Credits: The <details> polyfill is partly based on/inspired by the following sources:

Licence

MIT Licence 2016 © Leif Olsen

Install

npm i lavu-details-polyfill

DownloadsWeekly Downloads

3

Version

0.1.1

License

MIT

Last publish

Collaborators

  • avatar