# Loader Animation Library

The idea is to have a set of loader classes that will be **reusable** everywhere in the platform where an AJAX request 
is performed.

- [Requirements](#requirements)
- [What is a loader class?](#what-is-a-loader-class)
- [Using a loader class](#using-a-loader-class)
- [Make your custom loader class](#make-your-custom-loader-class)
- [Conclusion](#conclusion)


## Requirements

- A bit understanding of module in Javascript
- `type="module"` in your script tag to make your browser supporting the import of module JS


## What is a loader class?
A loader class is simply a class in JavaScript that inherits the class `Loader` defined in the `js/js_include/fo_loader.js`;
In crud terms, it is a subclass of `Loader` class. 
Each of these subclasses is a kind of loading animation where the rendering (HTML and CSS) is defined in the class by a method 
called `buildHTML()` and an animation (i.e moving an element from A to B) defined by a method called `animate(timestamp)`;  
The main purpose is to make the use of loader animation more easy and reusable.


## Using a loader class

It is very straightforward to use a loader class. You just need to know what kind of loader animation you want to use and 
instantiate it. Obviously, the loader class must exist first.  
Once you have an instance of your loader class, you have two methods available : 
- `enable()` : show your loading animation where you set it
- `disable()` : hide your loading animation

#### Example: Using the `DotsLoader` class

```js
import { DotsLoader } from './fo_dots_loader.js'

const loader = new DotsLoader('#todoList');

// Showing loading animation before making an AJAX request
loader.enable();

// Performing an AJAX request
$.ajax({url: "/api/todos"})
    .done(function() {
        // Hiding loading animation once the request is done
        loader.disable();
        
        // You can display your todos
        // ...
    });
```


## Make your custom loader class

To add your custom loader class you have to inherit the Loader `class` and define four methods : 
- `constructor` : it's always the same you must wait for an optional parameter `containerSelector` that define where the 
loading animation will be placed.  
Here's a code that you can copy and paste for your `constructor`:
```js
constructor(containerSelector = null) 
{
    super(containerSelector);
    this.buildHTML();
    this.element.appendTo(this.container);
}
```

- `buildHTML` : in this method you will define the rendering (HTML and CSS) of your loading animation, let your imagination
be your guide.

- `enable` : This method allow you to show your animation where you set it. It's already defined in the parent class `Loader`.
You need to redefine this method only if you want to add more logic to the way you show your animation.
Please refer to the `DotsLoader` class if you want to redefine this method.

- `disable` : This method allow you to hide your animation. It's already defined in the parent class `Loader`.
  You need to redefine this method only if you want to add more logic to the way you hide your animation.
  Please refer to the `DotsLoader` class if you want to redefine this method.


## Conclusion

I can't wait to see your animations ?