oncode / handorgel Goto Github PK
View Code? Open in Web Editor NEWAccessible W3C conform accordion written in ES6.
Home Page: https://oncode.github.io/handorgel/
License: MIT License
Accessible W3C conform accordion written in ES6.
Home Page: https://oncode.github.io/handorgel/
License: MIT License
i needed to place these accordion inside a form and the fact
that i cant choose the trigger element by type / class is a problem.
Anyway around that?
:-)
We are using Handorgel in a legacy .net Web Forms application. So far it works perfectly, except if we want to have an open fold after a postback (or partial postback).
We can open a fold with Accordion.folds[n].open(false) or with the data-open property, but the problem ist that the accordion gets initialized (with closed folds) after a postback and then we open the fold. This means there's a "blink" of the fold every time there is a postback.
Is there any way to initialize the accordion with an already opened fold?
Hi, thanks a lot for this great plugin!
Is it possible to activate Handorgel only on certain viewports?
(The content should nevertheless be displayed on all viewports.)
Love the library, one thing I noticed in the documentation. To properly import SASS from node_modules directory the code should be formatted like @import '~handorgel/src/style';
Currently the script is not compatible with IE10 and I can't find the problem. I guess it's in the function proto.emitEvent. But I'm not sure. Can you have a look please?
In some cases, the --open
classes aren't removed once a handorgel is closed. I'm having difficulty figuring out exactly when this happens, but it seems to happen more often when you quickly open and close. In the screenshot below, you can see that the handorgel__content
has height: 0px;
set, but both it and its related handorgel__header
both still have their --open
modifiers. This may be Firefox specific; the issue occurs in Firefox Developer Edition 84.0b4, but not in Chrome 87.0.4280.66 (both tested on Windows 10). I haven't had a chance to test in other browsers yet.
I have the footnotes for a financial table hidden inside an accordion. It works great, but I want to be able to anchor the notes in the table down to the accordion, which will then open.
(The functionality of how the accordion opens is less important than it opening.)
I realise this may be outside of the accordion's scope, but thanks for getting this far.
It would be usefull if we had bare-bones version of css, just with animations and nothing like background color, font size etc.
While using Nested accordions like:
---accordion A
--accordion A.1
--accordion A.2
--accordion A.3
--accordion B
--accordion B.1
--accordion B.2
If I am trying to open accordion A.1 after opening accordion A i.e the parent accordion. The height of the content of accordion A "the parent accordion" is not getting recalculated.
Resulting the content of Accordion A.1 to overflow out of the accordion A content's allocated height. Which is breaking the view.
So the question is:
Is it feasible to nest the accordions using Handorgel?
It'd be awesome if we could specify our own classes for each element of the handorgel instance. Something like:
{
containerClass: 'handorgel',
headerClass: 'handorgel__header',
buttonClass: 'handorgel__header__button',
contentClass: 'handorgel__content',
contentInnerClass: 'handorgel__content__inner',
}
Some notes:
containerClass
may not be necessary, because I think it's specified in the first parameter that gets passed.If you'd like, I can look in to what it would take to implement and possibly submit a pull request.
I'm getting this alert in the latest version of Lighthouse:
[aria-*]
attributes do not match their rolesEach ARIA
role
supports a specific subset ofaria-*
attributes. Mismatching these invalidates thearia-*
attributes. Learn more.Failing elements:
<div class="handorgel" id="handorgel1" aria-multiselectable="true">
I'm not very good with aria
stuff, so I'm not exactly sure what the problem is, but the alert seems to indicate that it's the multiselectable
attribute. Perhaps a role
needs added to the container as well?
If this is something I can fix on my end, please do let me know, I just don't have much experience with aria
so I'm not sure where to even find the appropriate documentation.
Hi there
I seem to have done everything to make it work, but I am getting the above JS error on this page:
http://rimesweb.staging.wpengine.com/privacy-confidentiality-2/
Ta for any help!
If you run a Lighthouse report on your own demo, you'll get this notice:
[aria-*]
attributes do not match their rolesEach ARIA role supports a specific subset of
aria-*
attributes. Mismatching these invalidates thearia-*
attributes. Learn how to match ARIA attributes to their roles.Failing Elements
Lorem ipsum (autofocused) Lorem ipsum (default opened) Lorem ipsum dolor sit a…
<div class="handorgel default" id="handorgel1" aria-multiselectable="true">
Looking in to aria-multiselectable
, I see that it's only valid on elements with these roles: grid
, listbox
, tablist
, or tree
. Additionally, the W3's accordion example doesn't include aria-multiselectable
.
Can you please remove this attribute? From everything I've found, it seems unnecessary in this context, and one of my clients is complaining about this warning in Lighthouse. I know I could just disable multiselection, but that's not really the problem, the aria-multiselectable
attribute appears to be unneeded either way.
Currently Handorgel sets the .handorgel__content
element to height: auto
after the opening transition, presumably so that the wrapper's height will be correct when the viewport is resized etc.
However, this means there can't be a close animation as you cannot transition from height: auto
to height: 0
. Would it make sense to change Handorgel so that it does not set height: auto
after the opening transition? Or am I missing something?
Package version: 0.4.9
JS
const handorgel = require('handorgel');
const options = {
multiSelectable: true
}
var h = new handorgel(document.querySelector('.handorgel'), options);
Some functional pictures, gif, or demo link would be very helpful!
Hi! First thank you for your work!
I am trying to use handorgel inside another handorgel. It actually does not even have to be handorgel just anything that changes height.
The issue is that obviously the height of content is fixed px number. I understand this is needed for the animation back. The solution probably would be to have middlestep with height: auto. I am wondering if you've given this any thought - maybe its a bad idea.
var accordion = new handorgel(el, {});
accordion.on('fold:opened', (fold) => {
fold.content.style.height = 'auto';
});
accordion.on('fold:close', (fold) => {
fold.content.style.height = fold.content.offsetHeight + 'px';
});
This naive solution works for the nested handorgel the parent handrogel.content is height: auto so it works nicely. The problem si closing - first the event seems to fire after the resize so it animates instantly it goes from height: auto to height: 0px. Then there are things like the resize that has to also use 'auto'. But i am just wondering if there is some reason why you didn't go for this kind of implementation? Is it better to solve nesting by using events and recalculate parent handorgel accordigly (this approach seemed to work even worse for me)?
How can I make it works with markup like this one:
<div class="handorgel">
<div class="card>
<h3 class="handorgel__header">
<button class="handorgel__header__button">
Title
</button>
</h3>
<div class="handorgel__content" data-open>
<div class="handorgel__content__inner">
Content openened by default
</div>
</div>
</div>
<div class="card>
<h3 class="handorgel__header">
<button class="handorgel__header__button">
Title
</button>
</h3>
<div class="handorgel__content" data-open>
<div class="handorgel__content__inner">
Content openened by default
</div>
</div>
</div>
</div>
?
It seems like it would make things a lot easier if the handorgel__header element could be auto generated based on the handorgel__content if it had a data-handorgel__header to specify the header text.
Have you considered this?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.