A suite of utilities to add more features to the details element.

Related tags

Learning resource details-utils
Overview

Related work elsewhere:

Installation

npm install @zachleat/details-utils

Add details-utils.js to your bundle.

Usage

Wrap around one or more

elements to add enhancements to their behavior:

  • Click outside to close (also bind an optional close button)
  • Animate open and close (obeys prefers-reduced-motion)
  • Force open/closed based on:
    • JavaScript
    • Media query
      • (e.g. viewport size, prefers-reduced-motion, even prefers-reduced-data if browsers ever support it 😅 )
      • Optionally restores user state when media query does not match (use force-restore attribute)
  • Close via esc Key
    • With optional Media query.
  • Toggle Document Class (toggles a class on when active, useful for modals to disable document overflow)

Changelog

v2.0.0

  • Renamed attribute force-closed to force-close
  • Added force-open to complement force-close
  • Added force-restore to be used with force-open and force-close (restores state when media query does not match).
You might also like...

MagicCap is a image/GIF capture suite for Mac and Linux

MagicCap is a image/GIF capture suite for Mac and Linux

MagicCap is a image/GIF capture suite for Mac and Linux. You can get a precompiled copy from the releases page of this GitHub page.

Sep 15, 2022

A Gun DB extension that ships secure* ephemeral messaging between Gun peers using Bugout, secured by Gun's SEA suite

Bugoff A Gun DB extension that ships secure* ephemeral messaging between Gun peers using Bugout, secured by Gun's SEA suite About Bugoff creates an SE

Nov 12, 2022

The official API of the OwnStore suite.

This project is part of OwnStore suite. Learn more here: https://ownstore.dev The suite contains the following projects: Website API CMS Doc Apps TWA

Aug 13, 2022

Boilerplate project to run MOBILE Test Automation with WebdriverIO v7, Mocha, Appium, Allure reporting and Momentum Suite cloud device farm support

Boilerplate project to run MOBILE Test Automation with WebdriverIO v7, Mocha, Appium, Allure reporting and Momentum Suite cloud device farm support

WebdriverIO Mocha Appium Momentumsuite WebdriverIO Integration with local or Momentum Suite real mobile farm devices Supports Native or Hybrid Android

Dec 5, 2022

A suite of tools for protecting the web's open knowledge.

Unblocked Web This project maintains a suite of tools for protecting the web's open knowledge. Its primary function is to create a web-scraping engine

Dec 15, 2022

REST API complete test suite using openapi.json

Openapi Test Suite Objective This package aims to solve the following two problems: Maintenance is a big problem to solve in any test suite. As the AP

Nov 3, 2022

Uma suíte completa de leitura: pesquise, baixe e leia livros gratuitamente.

bibliomar-react A complete rewrite of Bibliomar based on React. Português Do que se trata? Bibliomar é um buscador de livros que usa o acervo do Libra

Jan 7, 2023

Little Alpine.js plugin to add a typewriter effect to any HTML element.

Little Alpine.js plugin to add a typewriter effect to any HTML element.

⌨️ Alpine Typewriter ⌨️ An Alpine.js plugin to add a typewriter effect to any HTML element. 🚀 Installation CDN Include the following script tag in

Dec 28, 2022

You view the Twitch channel chat and you can access the details of the users who wrote during the viewing period.

Twitch Chat Web Page You view the Twitch channel chat and you can access the details of the users who wrote during the viewing period. Getting Started

Dec 13, 2022
Comments
  • Review the registration of event listeners

    Review the registration of event listeners

    👋🏻 Zach

    I randomly found your project via the Frontend Focus newsletter and playing around with your demos I realised you are generating X event listeners for each component within the page.

    You might want to review the way your web component registers event listeners and perhaps check if the listener already exists to avoid bloating the whatever interface uses this component:

    Screenshot 2022-04-20 at 18 27 09

    education 
    opened by dvago 1
  • hidden=until-found

    hidden=until-found

    https://twitter.com/chriscoyier/status/1578476966704865281 https://developer.chrome.com/articles/hidden-until-found/

    Note that Chrome offers this behavior to <details> for free.

    Will browsers add hidden=until-found or add this feature to <details> for free?

    • https://caniuse.com/mdn-html_global_attributes_hidden_until-found_value

    Polyfill would require beforematch:

    • https://caniuse.com/mdn-api_htmlelement_beforematch_event
    enhancement 
    opened by zachleat 0
Owner
Zach Leatherman
bleep blorp the singularity is nigh
Zach Leatherman
GitHub
AweSome Book App displays the book details entered by user and saves the information in Local storage. User can add and remove a book title/author to the library and from the library.

Awesome Book App with ES6 Used npm init -y command to create package.json file. Created the entry point for the JavaScript code called index.js Create

Krishna Prasad Acharya 8 Aug 15, 2022
This is a single page web application that keeps tracks of books. Book details captured are the book title, author and ISBN. User can add a book, view a list of books and also remove any un wanted books.

Project Name This is a single page web application that keeps tracks of books. Book details captured are the book title, author and ISBN. User can add

Olivier 6 Nov 20, 2022
A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 2022
A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Max 18 Nov 21, 2022
A set of utilities and additional features for my creative coding class aiming to help students while introducing the algorithmic thinking.

p5.utils A set of utilities and additional features for my creative coding class aiming to help students while introducing the algorithmic thinking. T

alp tuğan 15 Dec 25, 2022
JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

Boyleing Point 5 May 13, 2021
🗜️ AstroJS compression utilities. Compress CSS, HTML, JavaScript and more.

astro-compress ??️ This Astro integration brings compression utilities to your Astro project. csso html-minifier-terser terser Installation There are

Nikola Hristov 144 Jan 8, 2023
This plugin add a new utilities classes so you can use from 0% to 100%!

This plugin add new utilities classes so you can use from 0% to 100%!

Ehsan Akbarzadeh 2 Apr 3, 2022
A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.

TweenJS TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent

CreateJS 3.5k Jan 3, 2023
🤪 A linter, prettier, and test suite that does everything as-simple-as-possible.

Features Fully Featured Code Grading Knowing if you need to work on your code is important- that's why we grade your code automatically. But, unlike o

Fairfield Programming Association 18 Sep 25, 2022