# Lisio widget

This project is the interface of product LisioWeb4All. It's written in TypeScript and based on component-based architecture.  
It use lisio-engine package to rendering and lisio-profils to have all features of LisioWeb4All.  
It tends to be as light and efficient as possible to be in harmony with Lisio's values.  
  
## Introduction
  
To use it properly, you need to understand what is component-based architecture. To be brief, this architecture aims to make a software with small and loosely-coupled components. Each components has to be responsible of a simple task and be modular for a better reuse.  
For exemple, if we modelize a car as a sofwtare, engine, wheel, steering wheel, light, etc will be components. Each with they logic, materials to be reusable in another car.  
  
[For more details about components](https://www.mendix.com/blog/what-is-component-based-architecture/#:~:text=Component%2Dbased%20architecture%20is%20a,application%20without%20modifying%20other%20components.)
  
You also need to read documentation of lisio-engine and lisio-profils to fully understand all processes.  
[Lisio-engine](https://env-preprod-docs.lisio.fr/lisio-engine/)  
[Lisio-profils](https://env-preprod-docs.lisio.fr/lisio-profils/)  
Use as few at possible native DOM interaction like querySelector, appendChild, dispatchEvent, prefer use managers, controllers, or method of LisioComponent. There are complexes interactions between inputs and dynamic loading from lisio-engine and can lead to unwanted behaviors.
  
## How it works ?
  
This project can be divided into following modules :  
* Components : Module containing components representing UI elements
* Screens : Module containing screen logic
* Versions : Module containing widget versions logic
* Controllers : Module containing all controllers
* Managers : Module containing all managers
* Messages : Module containing message exchange logic  
  
There are few concepts to explain :
* Parameter : A parameter is a feature that Lisio will use to modify client page. To display them in the widget, use inputs corresponding to parameter type.
* Profile : A profile is a set of parameter with determined value. To display them in the widget, use a checkbox input.
* Category : A category is a set of subcategories, profiles and parameters. To display them in the widget, use a screen.
* Screen : A screen is a section of the widget, you can navigate between screen. Only one screen a time can be displayed.
* RenderObject : It's all piece of informations needed to create a UI component of a concept. For exemple if you need to represent the concept of "A button to toggle Dyslexia" you need to use CheckboxButton but this button need a title, a name, etc. It permits to automate creation of components and be more maintenable.  
Here you have renderObject for dyslexia
```
{
    buttonId: "dyslexia",
    titleId: "dyslexia-button",
    position: 0,
    name: LisioProfileNames.DYSLEXIA,
    value: false,
    cssClass: "btn-medium btn-pill secondary space-between",
    infoBoxes: [
        {
            textId: "infobox-dyslexia",
            cssClassText: ["info-text"],
        },
    ],
},
```  
And here his representation in HTML  
```
<li class="lisio-custom-list-item ">
    <div class="lisio-elements-container lisio-button-infobox-container">
        <button id="dyslexia" class="lisio-custom-button btn-medium btn-pill secondary space-between" role="checkbox" aria-checked="true" aria-describedby="infobox-dyslexia">
            <div class="lisio-texts-container button-title-subtitle">
                <label class="lisio-custom-text medium" for="dyslexia-input">
                    Dyslexie
                </label>
            </div>
            <div class="lisio-elements-container row switch ">
                <div class="lisio-custom-switch ">
                    <input name="dyslexia" id="dyslexia-input" type="checkbox" class="lisio-custom-input hidden" checked="" aria-hidden="true" tabindex="-1">
                    <div class="lisio-switch-round"></div>
                </div>
                <div class="lisio-texts-container ">
                    <p class="lisio-custom-text bold regular capitalize" id="lisio-dyslexia-on-off">
                        actif
                    </p>
                </div>
            </div>
        </button>
        <div id="infobox-dyslexia" class="lisio-elements-container " aria-hidden="false">
            <p class="lisio-custom-text info-text">
                Adapte la police de caractères, espace les mots et la hauteur de lignes.<br> 6 à 8 % de la population est concernée par les troubles DYS.
            </p>
        </div>
    </div>
</li>
```  
You have an exemple for only one concept, now imagine the HTML produced with ten or more profile.
  
### Components
  
As components, all this classes extend LisioComponent but not represented for better legibility. For the same reason, all inputs related classes are grouped under "Inputs" and detailed in another diagram.

![Components diagram](media://components_diagram.webp)
  
![Inputs diagram](media://inputs_diagram.webp)
  
### How to create, modify or delete a component ?
  
See [LisioComponent](https://env-preprod-docs.lisio.fr/lisio-engine/classes/Src_Core_Components.LisioComponent.html)

### How inputs work ?

![Inputs diagram](media://toggle_inputs.webp)
  
### Screens
  
![Screens diagram](media://screens_diagram.webp)
  
#### How to create, modify, delete a screen ?
  
See [LisioScreen](./classes/Src_Screens.LisioScreen.html)
  
### How to add a category, profile or parameter in screen ?
  
See [LisioScreen](./classes/Src_Screens.LisioScreen.html)
  
### Versions
  
![Versions diagram](media://versions_diagram.webp)

#### How to create, modify, delete a version ?

See [LisioVersion](./Src_Versions.WidgetVersion.html)
  
### Controllers
    
![Controllers diagram](media://controllers_diagram.webp)
  
### How to add a profile or parameter to be encoded ?
  
See [CompressorControler](./classes/Src_Controllers.CompressorController.html)
  
### Managers
  
![Managers diagram](media://managers_diagram.webp)