@mael-91/js-components v0.2.2
JS Components
Library regrouping various reusable javascript components
Be careful, I start in JavaScript, everything is not perfect but as time goes by, there will be improvements in the code.
Table of contents
Animations
Flip
To use the Flip animation on maps (bootstrap for the example) you just have to add this in your JS code (or tag <script></script>
).
Of course, this animation can be adapted to different HTML elements, we provide you only one example in this documentation
First of all, you need to import the class named FlipAnimation (import FlipAnimation from @mael/js-components/src/Animations/FlipAnimation.js
)
let cards = Array.from(document.querySelectorAll('.card'));
cards.forEach((card) => {
card.addEventListener('click', function () {
let flip = new FlipAnimation();
flip.read(cards);
flip.remove([card]);
cards = cards.filter(c => c !== card);
flip.play(cards);
})
});
Slide
SlideUp
Very simple to use, let's take the example on the demonstration table (to be adapted according to your project).
Don't forget to import the desired function (SlideUp, SlideDown, SlideToggle from @mael-91/js-components/src/Animations/Slide.js
)
For SlideUp
const slideUpBtn = document.querySelector('#slideUpbtn')
const slideUpBlock = document.querySelector('#slideUpBlock')
slideUpBtn.addEventListener('click', e => {
e.preventDefault()
window.setTimeout(async () => {
await slideUp(slideUpBlock)
}, 500)
})
For SlideDown
const slideDownBtn = document.querySelector('#slideDownBtn')
const slideDownBlock = document.querySelector('#slideDownBlock')
slideDownBtn.addEventListener('click', e => {
e.preventDefault()
window.setTimeout(async () => {
slideDownBlock.style.display = 'block'
await slideDown(slideDownBlock)
}, 500)
})
For SlideToggle
const slideToggleBtn = document.querySelector('#slideToggleBtn')
const slideToggleBlock = document.querySelector('#slideToggleBlock')
slideToggleBtn.addEventListener('click', e => {
e.preventDefault()
window.setTimeout(async () => {
await slideToggle(slideToggleBlock)
}, 500)
})
Words Animation
You want to animate your sentences, your titles? Use this animation
Just add a css class on the desired tag and you're done!
<h4 class="word_animation">Word animation</h4>
It is also possible to add other HTML tags inside the tag you want to animate
<h4 class="word_animation">Word<br> animation</h4>
<h4 class="word_animation">Word <strong>animation</strong></h4>
Loader
The Loader component allows you to display different loader, to display it you just have to add the HTML tag
<loader-element>
with a type attribute (if not defined, the default loader is
<loader-element>Default loader</loader-element>
<loader-element type="double">Loader double</loader-element>
<loader-element type="circles-double">Loader circles double</loader-element>
<loader-element type="bars">Loader bars</loader-element>
You can also add the loader by doing a manipulation of the DOM in JS, nothing simpler, instantiate the class Loader
and
pass it in parameter the type of loader, if you want to display a
message, in second argument, pass your message
new Loader('default', 'Default loader')
new Loader('default', 'Loader double')
new Loader('default', 'Loader circles double')
new Loader('default', 'Loader bars')
Modal
To use the modal box, you just have to add this HTML code in your page (modified by your content)
You have to set the height
attribute of the tag with the size you want
It is also possible to modify the button to close the modal (by adding a svg for example)
<modal-box height="250" id="modalDemo">
<div class="modal">
<div class="modal-header">
<h5 class="modal-title">Modal box Compnent</h5>
<button class="modal-close" id="btnClose">×</button>
</div>
<div class="modal-body">
<p class="modal-text">My modal text</p>
</div>
</div>
</modal-box>
Then in a script tag or in your JS file add the following
(You can change the ids)
const modalDemo = document.querySelector('#modalBtn')
const modalBox = document.querySelector('#modalDemo')
modalDemo.addEventListener('click', e => {
e.preventDefault()
modalBox.style.display = 'block'
modalBox.setAttribute('aria-hidden', 'false')
})
const modalClose = document.querySelector('#btnClose')
modalClose.addEventListener('click', e => {
e.preventDefault()
modalBox.setAttribute('aria-hidden', 'true')
})
Tabs
The Tabs component allows you to display text according to the button clicked.
To use it, just copy and paste the code below.
You can then modify the style by using / adding your own css class
<nav-tabs class="nav-pills">
<a href="#tab1" aria-selected="true">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
</nav-tabs>
<div class="tabs-content">
<div id="tab1">
<p>Your text</p>
</div>
<div id="tab2" hidden="hidden">
<p>Your text</p>
</div>
<div id="tab3" hidden="hidden">
<p>Your text</p>
</div>
</div>
Textarea Auto Grow
The Textarea Auto Grow component allows a textarea to automatically resize itself according to the text.
To use it nothing more simple, in your textarea tag add as attribute is="textarea-autogrow"
<textarea is="textarea-autogrow"></textarea>Proposez un Pull Request
Think about adding a hidden overflow to avoid displaying the scroll bar.
Time Ago
To use the TimeAgo component and display a formatted date, you just have to add in your HTML page the <time-ago></time-ago>
tag with
a data-ago
attribute in this attribute you have to give it a timestamp in second (The component will do the conversion itself)
<time-ago data-ago="1590487761"></time-ago>
Contribute
- Fork this repository
- Make your change
- Submit a Pull Request
License
See the license at the root of the project