├── .gitignore
├── HISTORY.md
├── LICENSE.md
├── README.md
├── demo.html
├── docs
    └── images
    │   └── details-polyfill.gif
├── index.js
├── package.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/HISTORY.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | See https://github.com/rstacruz/details-polyfill/releases for newer releases
 4 | 
 5 | ## [v1.1.0]
 6 | 
 7 | > May 28, 2017
 8 | 
 9 | - Use escape sequences for arrows ([#2], [@Garbee])
10 | - Fix Mardown rendering error in README.md ([#8], [@Flimm])
11 | 
12 | [v1.1.0]: https://github.com/rstacruz/details-polyfill/compare/v1.0.2...v1.1.0
13 | 
14 | ## [v1.0.2]
15 | 
16 | > Jul 29, 2016
17 | 
18 | - Fix `open` attribute.
19 | 
20 | [v1.0.2]: https://github.com/rstacruz/details-polyfill/compare/v1.0.1...v1.0.2
21 | 
22 | ## [v1.0.1]
23 | 
24 | > Jul 28, 2016
25 | 
26 | - Make the npm bundle smaller.
27 | 
28 | [v1.0.1]: https://github.com/rstacruz/details-polyfill/compare/v1.0.0...v1.0.1
29 | 
30 | ## [v1.0.0]
31 | 
32 | > Jul 28, 2016
33 | 
34 | - Initial release.
35 | 
36 | [v1.0.0]: https://github.com/rstacruz/details-polyfill/tree/v1.0.0
37 | [#2]: https://github.com/rstacruz/details-polyfill/issues/2
38 | [#8]: https://github.com/rstacruz/details-polyfill/issues/8
39 | [@garbee]: https://github.com/Garbee
40 | [@flimm]: https://github.com/Flimm
41 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Rico Sta. Cruz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # details-polyill
  2 | 
  3 | > Polyfill for the HTML5 `<details>` element, no dependencies
  4 | 
  5 | ![](docs/images/details-polyfill.gif)
  6 | 
  7 | <br>
  8 | 
  9 | Usage
 10 | -----
 11 | 
 12 | details-polyfill is available via npm.
 13 | 
 14 | ```
 15 | npm install --save details-polyfill
 16 | ```
 17 | 
 18 | Requiring it will immediately inject the needed behaviors.
 19 | 
 20 | ```js
 21 | require('details-polyfill')
 22 | ```
 23 | 
 24 | The file [index.js](index.js) is also usable as a standalone script.
 25 | 
 26 | <br>
 27 | 
 28 | How it works
 29 | ------------
 30 | 
 31 | <details>
 32 | <summary>Just include the script on any page that uses <code>&lt;details&gt;</code>.</summary>
 33 | 
 34 | In case the browser doesn't support `<details>`, it adds the following behaviors:
 35 | 
 36 |   - When clicking `details > summary`, it toggles the `open` attribute in `details`.
 37 | 
 38 | It also adds these CSS styles:
 39 | 
 40 |   - `summary:before` is styled with a disclosure triangle.
 41 |   - `details:not([open]) > :not(summary)` elements are hidden. (that is: all children of closed `details`, except `summary`)
 42 |   - The `<html>` element gets the `no-details` class.
 43 |  
 44 | </details>
 45 | 
 46 | Limitations
 47 | -----------
 48 | 
 49 | <details>
 50 | <summary>Keep these guidelines in mind.</summary>
 51 | 
 52 | #### No loose text
 53 | 
 54 | The `<details>` element must not have loose text inside it. Everything inside it should be in elements.
 55 | 
 56 | ```html
 57 | <!-- ✗ This will NOT work -->
 58 | <details>
 59 |   <summary>More info...</summary>
 60 |   No info available.
 61 | </details>
 62 | ```
 63 | 
 64 | ```html
 65 | <!-- ✓ But this will -->
 66 | <details>
 67 |   <summary>More info...</summary>
 68 |   <span>No info available.</span>
 69 | </details>
 70 | ```
 71 | 
 72 | #### Don't style summary::before
 73 | ...unless it's for a disclosure triangle. This library uses `summary::before` to create a default triangle.
 74 | 
 75 | #### Summary as first child
 76 | The `summary` element must also be the first child of the `details` element. Browsers supporting the `details` element natively will hoist `summary` elements up, but details-polyfill.js won't.
 77 | 
 78 | #### JavaScript `el.open = true`
 79 | ...will not work like how you think it does. You also need to do `.setAttribute('open', 'open')` or `.removeAttribute('open')`.
 80 | 
 81 | </details>
 82 | 
 83 | 
 84 | Alternatives
 85 | ------------
 86 | 
 87 | <details>
 88 | <summary>Here are a few other polyfills for <code>&lt;details&gt;</code>.</summary>
 89 | 
 90 | I wrote this because everything else out there either depend on big libraries, or are too complicated. In contrast, `details-polyfill` has <100 lines of code, and only comes with a *.js* file.
 91 | 
 92 | * [better-details-polyfill](https://github.com/chemerisuk/better-details-polyfill) - depends on better-dom-boilerplate.
 93 | * [manuelbieh/Details-Polyfill](https://github.com/manuelbieh/Details-Polyfill) - depends on jQuery.
 94 | * [html5-details-jquery](https://mathiasbynens.be/notes/html5-details-jquery) - depends on jQuery.
 95 | * [jquery-deets](https://github.com/Akkuma/jquery-deets) - depends on jQuery UI.
 96 | * [Element.details](https://github.com/termi/Element.details) - supports legacy IE, but is harder to implement (has `.htc` files).
 97 | * [Complete polyfill for the HTML5 details element](https://www.smashingmagazine.com/2014/11/complete-polyfill-html5-details-element/) (smashingmagazine.com)
 98 | * [Cross browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#details-and-summary) (github.com/modernizr)
 99 | 
100 | </details>
101 | 
102 | Thanks
103 | ------
104 | 
105 | **details-polyfill** © 2016+, Rico Sta. Cruz. Released under the [MIT] License.<br>
106 | Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]).
107 | 
108 | > [ricostacruz.com](http://ricostacruz.com) &nbsp;&middot;&nbsp;
109 | > GitHub [@rstacruz](https://github.com/rstacruz) &nbsp;&middot;&nbsp;
110 | > Twitter [@rstacruz](https://twitter.com/rstacruz)
111 | 
112 | [MIT]: http://mit-license.org/
113 | [contributors]: http://github.com/rstacruz/details-polyfill/contributors
114 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <title></title>
 6 |   <script src='index.js'></script>
 7 | </head>
 8 | <body>
 9 | <details>
10 | <summary>Hello...</summary>
11 | <span>Stuff goes here</span>
12 | </details>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/docs/images/details-polyfill.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rstacruz/details-polyfill/a04e8f888612cdcbf478423b5054b740504d167b/docs/images/details-polyfill.gif


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | void (function (root, factory) {
 2 |   if (typeof define === 'function' && define.amd) define(factory)
 3 |   else if (typeof exports === 'object') module.exports = factory()
 4 |   else factory()
 5 | }(this, function () {
 6 |   var DETAILS = 'details'
 7 |   var SUMMARY = 'summary'
 8 | 
 9 |   var supported = checkSupport()
10 |   if (supported) return
11 | 
12 |   // Add a classname
13 |   document.documentElement.className += ' no-details'
14 | 
15 |   window.addEventListener('click', clickHandler)
16 | 
17 |   injectStyle('details-polyfill-style',
18 |     'html.no-details ' + DETAILS + ' { display: block; }\n' +              
19 |     'html.no-details ' + DETAILS + ':not([open]) > :not(' + SUMMARY + ') { display: none; }\n' +
20 |     'html.no-details ' + DETAILS + ' > ' + SUMMARY + ':before { content: "\u25b6"; display: inline-block; font-size: .8em; width: 1.5em; }\n' +
21 |     'html.no-details ' + DETAILS + '[open] > ' + SUMMARY + ':before { content: "\u25bc"; }')
22 | 
23 |   /*
24 |    * Click handler for `<summary>` tags
25 |    */
26 | 
27 |   function clickHandler (e) {
28 |     if (e.target.nodeName.toLowerCase() === 'summary') {
29 |       var details = e.target.parentNode
30 |       if (!details) return
31 | 
32 |       if (details.getAttribute('open')) {
33 |         details.open = false
34 |         details.removeAttribute('open')
35 |       } else {
36 |         details.open = true
37 |         details.setAttribute('open', 'open')
38 |       }
39 |     }
40 |   }
41 | 
42 |   /*
43 |    * Checks for support for `<details>`
44 |    */
45 | 
46 |   function checkSupport () {
47 |     var el = document.createElement(DETAILS)
48 |     if (!('open' in el)) return false
49 | 
50 |     el.innerHTML = '<' + SUMMARY + '>a</' + SUMMARY + '>b'
51 |     document.body.appendChild(el)
52 | 
53 |     var diff = el.offsetHeight
54 |     el.open = true
55 |     var result = (diff != el.offsetHeight)
56 | 
57 |     document.body.removeChild(el)
58 |     return result
59 |   }
60 | 
61 |   /*
62 |    * Injects styles (idempotent)
63 |    */
64 | 
65 |   function injectStyle (id, style) {
66 |     if (document.getElementById(id)) return
67 | 
68 |     var el = document.createElement('style')
69 |     el.id = id
70 |     el.innerHTML = style
71 | 
72 |     document.getElementsByTagName('head')[0].appendChild(el)
73 |   }
74 | })); // eslint-disable-line semi
75 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "details-polyfill",
 3 |   "version": "1.2.0",
 4 |   "description": "Polyfill for the HTML5 `<details>` element",
 5 |   "main": "index.js",
 6 |   "directories": {
 7 |     "doc": "docs"
 8 |   },
 9 |   "scripts": {
10 |     "test": "echo \"Error: no test specified\" && exit 0"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/rstacruz/details-polyfill.git"
15 |   },
16 |   "keywords": [
17 |     "details",
18 |     "summary",
19 |     "html5",
20 |     "polyfill"
21 |   ],
22 |   "author": "Rico Sta. Cruz <rico@ricostacruz.com>",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/rstacruz/details-polyfill/issues"
26 |   },
27 |   "homepage": "https://github.com/rstacruz/details-polyfill#readme",
28 |   "files": [
29 |     "index.js"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | 
4 | 
5 | 


--------------------------------------------------------------------------------