sesam-collapse v5.6.0
1. INSTALL | 2. USE | OPTIONS | API
Install
Option 1: With NPM
1. Install package
npm i sesam-collapse
2. Import package
import {sesamCollapse, sesam} from 'sesam-collapse';
Option 2: Import from a CDN
available from version 4.0
import {sesamCollapse, sesam} from 'https://unpkg.com/sesam-collapse';
sesamCollapse.initialize();
### Option 3: From a CDN
**1. Install package**
Just copy paste this script tag at the end of your dom. If you want to call Sesam functions in other scripts, place this before other scripts.
```html
<script type="module" src="https://unpkg.com/sesam-collapse"></script>
2. Initialize package
Initialize in your javascript-file.
sesamCollapse.initialize();
Use
The only thing Sesam will do, is adding, removing or toggle classes. You have to write the needed css to let something happen on screen.
So sesam can be used in various ways.
- For hamburger menu's
- Custom selection lists (later on, there wil be code snippets available to show how)
- Collapsing text sections
- Just hiding or showing elements
- Add or remove animations
- ...
Possibilities are infinite!
Step 1. DEFINE A TARGET ELEMENT
Let the script know which element will be collapsed
data-sesam-target="placeNameHere"
<div data-sesam-target="placeNameHere">
<p>Some content</p>
</div>
Step 2. DEFINE A TRIGGER ELEMENT
Define which element will trigger the action. Multiple triggers can be defined, just add the same markup.
data-sesam-trigger="placeNameHere"
<button data-sesam-trigger="placeNameHere">
Show / hide
</button>
Triggers and targets don't have to be placed directly next to each other, but can be placed anywhere in the document.
Options
Hide other collapse elements when a collapse is triggered
If you want that another Sesam target is hidden when you click a trigger, just define a group.
Using attributes
Add this to the parent element
<!-- this is the attribute -->
data-sesam-group="groupNameHere"
And define the parent for the children elements
This has to be added to the target element!
<!-- this is the attribute -->
data-sesam-parent="groupNameHere"
Using data-sesam-options
This will be available later.
Show a backdrop
If you use Sesam for creating modals you can activate the backdrop function. This will show a background behind the modal. The backdrop is automatically added when you initialize the script.
Using attributes
Just add data-sesam-backdrop="true"
to the target-element.
<div data-sesam-target="placeNameHere" data-sesam-backdrop="true">
<p>Some content</p>
</div>
Using data-sesam-options
<!-- this is the attribute -->
data-sesam-options="anOtherOption:optionValue, backdrop:true"
Add css
Now you can write all the needed css to display a backdrop
.sesam-backdrop {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 9;
background-color: rgba(0, 0, 0, 0.336);
&.sesam-hidden {
display: none;
}
}
Scrollblock
If you want that the user isn't able to scroll trough the rest of the page just add this to your target-element.
Using attributes
<div data-sesam-target="placeNameHere" data-sesam-scrollblock="true">
<p>Some content</p>
</div>
Using data-sesam-options
<div data-sesam-target="placeNameHere" data-sesam-options="backdrop:true, scrollBlock:true">
<p>Some content</p>
</div>
In a future release (6.x.x) all these data-attributes will be replaced with just the data-sesam-options attribute.
API
sesam({
target: 'example', //doet dit: document.querySelector(`[data-sesam-target='${example}']`)
collapse: true, // gaat gewoon kijken wat de huidige state is van een target en die veranderen
action: 'show', // of 'hide', niet gebruiken in combinatie met collapse argument
execute: (() => { // voer extra javascript uit
console.log('this works!')
})(),
modal: {
backdrop: true, // voegt sesam-hidden/sesam-show classe toe aan het backdrop element,
// backdrop element wordt automatisch gemaakt bij het initialiseren
scrollBlock: true // blokkeert het scrollen door de pagina wanneer deze modal getoont wordt
}
})
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago