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
  • Slide
  • Words Animations
• Loader
• Modal
• Tabs
• Textarea Auto Grow
• TimeAgo
• Contribute
• License

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">&times;</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