Skip to content

Commit

Permalink
Escape to close, minor refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@NigelOToole
NigelOToole committed Jan 4, 2022
1 parent 73b3f8f commit 5e81359
Show file tree
Hide file tree
Showing 12 changed files with 261 additions and 229 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Tiny UI Toggle
### Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal.

### [View demo](http://nigelotoole.github.io/tiny-ui-toggle/)
### [Demo and documentation](http://nigelotoole.github.io/tiny-ui-toggle/)

---
## Quick start
Expand Down
27 changes: 19 additions & 8 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ <h3>Tabs</h3>
<h3>Dropdown</h3>

<div class="toggle-outer">
<button id="demo-btn-dropdown" class="toggle toggle-btn" data-toggle-target="#demo-panel-dropdown" aria-expanded="false">Dropdown with auto open and auto close</button>
<button id="demo-btn-dropdown" class="toggle toggle-btn" data-toggle-target="#demo-panel-dropdown" data-toggle-open-auto="true" data-toggle-close-auto="true" aria-expanded="false">Dropdown with auto open and auto close</button>

<div id="demo-panel-dropdown" class="toggle-panel toggle-panel--dropdown" aria-hidden="true">
<div class="toggle-panel-content">
Expand All @@ -244,7 +244,7 @@ <h3>Dialog/Modal</h3>

<button class="toggle toggle-btn" data-toggle-target="#demo-panel-dialog">Show dialog</button>

<div id="demo-panel-dialog" class="toggle-dialog" data-toggle-animate-height="false" data-toggle-body-class="has-dialog" aria-hidden="true" role="dialog">
<div id="demo-panel-dialog" class="toggle-dialog" data-toggle-animate-height="false" data-toggle-body-class="has-dialog" data-toggle-close-on-escape="true" tabindex="-1" aria-hidden="true" role="dialog">
<div class="toggle-dialog-content">
<button class="toggle toggle-btn is-active" data-toggle-target="#demo-panel-dialog">Close</button>

Expand All @@ -258,7 +258,7 @@ <h3>Dialog/Modal</h3>

<button class="toggle toggle-btn" data-toggle-target="#demo-panel-dialog-native">Show native dialog</button>

<dialog id="demo-panel-dialog-native" class="toggle-dialog" data-toggle-animate-height="false" data-toggle-body-class="has-dialog">
<dialog id="demo-panel-dialog-native" class="toggle-dialog" data-toggle-animate-height="false" data-toggle-body-class="has-dialog" tabindex="-1">
<div class="toggle-dialog-content">
<button class="toggle toggle-btn is-active" data-toggle-target="#demo-panel-dialog-native">Close</button>

Expand Down Expand Up @@ -331,7 +331,7 @@ <h3>Import JS</h3>
</code></pre>

<h3>Options</h3>
<p>The options can be set via initialization in the JS or by data attributes on the elements with the prefix 'toggle'. E.g. data-toggle-active-class="is-open"</p>
<p>The options can be set via initialization in the JS or by data attributes on the elements with the prefix 'toggle'. E.g. data-toggle-active-class="is-open". Data attributes will be given the higher priority.</p>

<div class="table-wrapper">
<table class="table">
Expand Down Expand Up @@ -395,6 +395,12 @@ <h3>Options</h3>
<td>Integer(ms)</td>
<td>Delay in auto closing an element when it is not focused.</td>
</tr>
<tr>
<td><code>closeOnEscape</code></td>
<td>false</td>
<td>Boolean</td>
<td>Close the target element when the escape key is pressed.</td>
</tr>
<tr>
<td><code>openAuto</code></td>
<td>false</td>
Expand All @@ -419,14 +425,19 @@ <h3>API</h3>
<td>Toggles the state of the element and any target elements.</td>
</tr>
<tr>
<td><code>instance.toggleState()</code></td>
<td><code>instance.set(state)</code></td>
<td>Method</td>
<td>Sets the state of the element and any target elements.</td>
</tr>
<tr>
<td><code>instance.toggleElement()</code></td>
<td>Method</td>
<td>Toggles the state of the element.</td>
</tr>
<tr>
<td><code>instance.setState()</code></td>
<td><code>instance.setElement(state)</code></td>
<td>Method</td>
<td>Sets the element state.</td>
<td>Sets the state of the element.</td>
</tr>
<tr>
<td><code>instance['element']</code></td>
Expand Down Expand Up @@ -480,7 +491,7 @@ <h2>Demo site</h2>
<p>Clone or download from Github.</p>

<pre><code>$ npm install
$ gulp serve
$ npm run dev
</code></pre>

</div>
Expand Down
47 changes: 22 additions & 25 deletions docs/scripts/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
import { Toggle, toggleAutoInit } from './tiny-ui-toggle.js';

// ----- Initialize -----

// Toggle({ selector: '#demo-btn-single' })
// Toggle({ selector: '#demo-btn-single-copy' })



// Initialize all elements with default options, these can be overridden by reinitializing or by data attributes on the element
// Initialize all elements with default options, these can be overridden by reinitializing or with data attributes on the element.
toggleAutoInit();

// Initialize all elements manually which allows you to pass in custom options

// Initialize all elements manually which allows you to pass in custom options.
// const toggleElements = document.querySelectorAll('.toggle');
// for (const item of toggleElements) {
// Toggle({ selector: item });
// };


// Init with string - default setup for one instance
// const defaultToggle = Toggle({ selector: '#demo-btn-single' });


// Initialize an element with different options
const toggleDropdown = Toggle({ selector: '#demo-btn-dropdown', closeAuto: true, openAuto: true });


// Manually set state - used by the toggle panel only demo
document.querySelector('#demo-btn-self').addEventListener('click', function(event) {
event.preventDefault();
Expand All @@ -30,41 +29,39 @@ document.querySelector('#demo-btn-self').addEventListener('click', function(even



// Methods
// ----- Methods -----

// setTimeout(() => {
// // Toggle used for the below examples
// const defaultToggle = Toggle({ selector: '#demo-btn-single' });
// // Toggle used for the below examples
// const defaultToggle = Toggle({ selector: '#demo-btn-single' });

// // Toggles the state of an element, the trigger element is the default
// defaultToggle.toggleState();
// defaultToggle.toggleState(document.querySelector('#demo-panel-single'));
// // Toggles the state of the trigger and the target
// defaultToggle.toggle();

// Equivalent to the above without initializing
// Toggle().toggleState(document.querySelector('#demo-btn-single'));
// Toggle().toggleState(document.querySelector('#demo-panel-single'));
// // Equivalent to the above without initializing
// Toggle().toggle(document.querySelector('#demo-btn-single'));

// // Sets the state of the trigger and the target
// defaultToggle.set(true);

// // Sets the state of an element, the trigger element is the default
// defaultToggle.setState(true);
// defaultToggle.setState(true, document.querySelector('#demo-panel-single'));

// Toggle().setState(true, document.querySelector('#demo-btn-single'));
// Toggle().setState(true, document.querySelector('#demo-panel-single'));
// // Toggles the state of an element, the trigger element is the default
// defaultToggle.toggleElement();
// defaultToggle.toggleElement(document.querySelector('#demo-panel-single'));


// // Toggles the state of the trigger and the target
// defaultToggle.toggle();
// // Sets the state of an element, the trigger element is the default
// defaultToggle.setElement(true);
// defaultToggle.setElement(true, document.querySelector('#demo-panel-single'));

// Toggle().toggle(document.querySelector('#demo-btn-single'));

// console.log(defaultToggle['element']);
// console.log(defaultToggle['props']);
// }, 500);



// Event listener
// ----- Event listener -----

// document.querySelector('#demo-panel-single').addEventListener('toggle', (event) => {
// if (event.detail) console.log(`Action: ${event.detail.action}, Active: ${event.detail.active}`);
Expand Down
Loading

0 comments on commit 5e81359

Please sign in to comment.