├── .gitignore ├── yarn.lock ├── docs └── images │ └── details-polyfill.gif ├── demo.html ├── package.json ├── HISTORY.md ├── LICENSE.md ├── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/images/details-polyfill.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/details-polyfill/master/docs/images/details-polyfill.gif -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

10 |

Hello...

11 | Stuff goes here 12 |

13 | 14 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "details-polyfill", 3 | "version": "1.2.0", 4 | "description": "Polyfill for the HTML5 `

` 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 ", 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 `

` 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 `

` 44 | */ 45 | 46 | function checkSupport () { 47 | var el = document.createElement(DETAILS) 48 | if (!('open' in el)) return false 49 | 50 | el.innerHTML = '<' + SUMMARY + '>ab' 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # details-polyill 2 | 3 | > Polyfill for the HTML5 `

` element, no dependencies 4 | 5 | ![](docs/images/details-polyfill.gif) 6 | 7 |
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 |
27 | 28 | How it works 29 | ------------ 30 | 31 |

32 |

Just include the script on any page that uses <details>.

33 | 34 | In case the browser doesn't support `

45 | 46 | Limitations 47 | ----------- 48 | 49 |

50 |

Keep these guidelines in mind.

51 | 52 | #### No loose text 53 | 54 | The `

` element must not have loose text inside it. Everything inside it should be in elements. 55 | 56 | ```html 57 | 58 |

59 |

More info...

60 | No info available. 61 |

62 | ``` 63 | 64 | ```html 65 | 66 |

67 |

More info...

68 | No info available. 69 |

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 |

82 | 83 | 84 | Alternatives 85 | ------------ 86 | 87 |

88 |

Here are a few other polyfills for <details>.

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 |

101 | 102 | Thanks 103 | ------ 104 | 105 | **details-polyfill** © 2016+, Rico Sta. Cruz. Released under the [MIT] License.
106 | Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]). 107 | 108 | > [ricostacruz.com](http://ricostacruz.com) · 109 | > GitHub [@rstacruz](https://github.com/rstacruz) · 110 | > Twitter [@rstacruz](https://twitter.com/rstacruz) 111 | 112 | [MIT]: http://mit-license.org/ 113 | [contributors]: http://github.com/rstacruz/details-polyfill/contributors 114 | --------------------------------------------------------------------------------