f11y

Install

Install with npm

        
            npm install f11y

via CDN / Script Tag

Accordion

Default Example

"Like all great travellers." said Essper, "I have seen more than I remember, and remember more than I have seen."

"There are people, who the more you do for them, the less they will do for themselves."

"The wide world is all about you: you can fence yourselves in, but you cannot for ever fence it out."

                        
                        const accordionElm = document.querySelector(".f11y--accordion");
                        new f11y.Accordion(
                            accordionElm
                        );

Callback Example

"Let yourself be silently drawn by the stronger pull of what you really love."

"We all live with the objective of being happy; our lives are all different and yet the same."

                        
                        const accordionElm = document.querySelector(".f11y--accordion");
                        const accordionObj = new f11y.Accordion(
                            accordionElm,
                            {
                                showMultiple: false,
                                onOpen: function(itemObj, event){
                                    const externalTrigger = document.querySelector('.external-trigger[data-index="' + itemObj.index + '"]');
                                    externalTrigger.classList.add('is-open');
                                    externalTrigger.classList.remove('is-closed');
                                },
                                onClose: function(itemObj, event){
                                    const externalTrigger = document.querySelector('.external-trigger[data-index="' + itemObj.index + '"]');
                                    externalTrigger.classList.add('is-closed');
                                    externalTrigger.classList.remove('is-open');
                                },
                            }
                        );

                        const externalTriggers = document.querySelectorAll('.external-trigger');
                        externalTriggers.forEach(function(trigger) {
                            const item = accordionObj.items[trigger.dataset.index];

                            trigger.addEventListener( 'click', function(e){
                                accordionObj.toggle(item, e);
                            });
                        });

Name	Type	Default	Description
onOpen	`function`	`(item, event){}`	Fired when an accordion item is opened.
onClose	`function`	`(item, event){}`	Fired when an accordion item is closed.
itemClass	`string`	`f11y--accordion__item`	A valid class name that will be used to discover accordion items.
showMultiple	`boolean`	`true`	Should multiple items within the accordion be allowed to be opened at once.

Name	Parameters	Description
`refresh()`		Clears the class object and re-initialises the accordion
`toggle()`	`accordionItemObject, event`	Toggles passed accordion item. The item object can be retrived from `.accordionItems`
`openItem()`	`accordionItemObject, event`	Opens the passed accordion item. The item object can be retrived from `.accordionItems`
`closeItem()`	`accordionItemObject, event`	Closes the passed accordion item. The item object can be retrived from `.accordionItems`
`openAll()`	`event`	Opens all accordion items.
`closeAll()`	`event`	Closes all accordion items.

Layer

Default Modal

A default modal dialog allows you to close the modal on a background click, with the Esc key and without confirming an action.

                        
                        const modal = document.querySelector("#layer-default");
                        new f11y.Layer(modal,
                            {
                                awaitCloseAnimation: true,
                                awaitOpenAnimation: true,
                            }
                        );

Alert Dialog

An alert dialog forces the user to take an action by disabling the background click and the Esc key methods for closing the dialog

                        
                        const accordionElm = document.querySelector(".f11y--accordion--programmatic");
                        const accordionObj = new f11y.Accordion(
                            accordionElm
                        );

                        const externalTriggers = document.querySelectorAll('.external-trigger');
                        externalTriggers.forEach(function(trigger) {
                            const item = accordionObj.accordionItems[trigger.dataset.index];

                            trigger.addEventListener( 'click', function(e){
                                accordionObj.toggle(item, e);
                            });
                        });

Sidebar Shelf

                        
                        const accordionElm = document.querySelector(".f11y--accordion");
                        const accordionObj = new f11y.Accordion(
                            accordionElm,
                            {
                                showMultiple: false,
                                onOpen: function(itemObj, event){
                                    const index = itemObj.index;
                                    const externalTrigger = document.querySelector('.external-callback-trigger[data-index="' + index + '"]');
                                    externalTrigger.classList.add('is-open');
                                    externalTrigger.classList.remove('is-closed');
                                },
                                onClose: function(itemObj, event){
                                    const index = itemObj.index;
                                    const externalTrigger = document.querySelector('.external-callback-trigger[data-index="' + index + '"]');
                                    externalTrigger.classList.add('is-closed');
                                    externalTrigger.classList.remove('is-open');
                                },
                            }
                        );

                        const externalTriggers = document.querySelectorAll('.external-trigger');
                        externalTriggers.forEach(function(trigger) {
                            const item = accordionObj.accordionItems[trigger.dataset.index];

                            trigger.addEventListener( 'click', function(e){
                                accordionObj.toggle(item, e);
                            });
                        });