# MediaList
<style>
    img {
        max-width: 100%;
    }
    pre {
        background-color: #F5F5F5;
        padding: .5rem;
    }
</style>

## Definición

Archivo: `induxsoft.controls.js`

Es un componente que ofrece una interfaz en la que podemos listar un conjunto de recursos multimedia al estilo de una galeria.

<img src="/es/api/web-components/img/medialist-demo-01.jpg">

## Ejemplos

Maquetación HTML mínima.
```html
<media-list id="gallery"></media-list>
```

Este es un ejemplo con todos los atributos que pueden establecerse.
```html
<media-list
    id="gallery"
    data='[
        {"url":"https://induxsoft.net/img/test/img1.png", "mini":"https://induxsoft.net/img/test/img1.png", "titulo":"título"}, 
        {"url":"https://induxsoft.net/img/test/img2.png", "mini":"https://induxsoft.net/img/test/img2.png", "titulo":"título medio"}, 
        {"url":"https://induxsoft.net/img/test/img3.png", "mini":"https://induxsoft.net/img/test/img3.png", "titulo":"título grande con mucho texto"}
    ]'
    can-arrange="false"
    can-drag="false"
    can-drop="false"
    can-delete="true"
    highlight-first="false"
    outline-selected="true"
    media-prop="url"
    miniature-prop="mini"
    label-prop="titulo"
    max-size-media="9rem"
    back-color-media="#F8F8F8">
</media-list>
```

**Ejemplos de uso con JavaScript**

Inicializar componente.
```js
function inicializar() {
    const gallery = document.getElementById("gallery");

    gallery.canArrange = false;
    gallery.canDrag = false;
    gallery.canDrop = false;
    gallery.canDelete = true;
    gallery.highlightFirst = false;
    gallery.outlineSelected = true;
    gallery.mediaProp = "url";
    gallery.miniatureProp = "mini";
    gallery.labelProp = "titulo";
    gallery.maxSizeMedia = "9rem";
    gallery.backColorMedia = "#F8F8F8";
}

document.addEventListener("DOMContentLoaded", () => {
    inicializar();
});
```

Establecer elementos al componente.
```js
function establecer() {
    const gallery = document.getElementById("gallery");
    
    let data = [
        {url:"https://induxsoft.net/img/test/img1.png", mini:"https://induxsoft.net/img/test/img1.png", titulo:"título"},
        {url:"https://induxsoft.net/img/test/img2.png", mini:"https://induxsoft.net/img/test/img2.png", titulo:"título medio"},
        {url:"https://induxsoft.net/img/test/img3.png", mini:"https://induxsoft.net/img/test/img3.png", titulo:"título grande con mucho texto"}
    ];

    gallery.setData(data);
}

establecer();
```

Obtener el elemento seleccionado mediante el uso de la propiedad `onClicking`.
```js
const gallery = document.getElementById("gallery");

gallery.onClicking = (item) => {
    console.log(item); // Salida esperada: {url:"", mini:"", titulo:""}
}
```

Obtener el array de elementos del componente.
```js
const gallery = document.getElementById("gallery");

let data = gallery.getData();
console.log(data); // Salida esperada: [{url:"", mini:"", titulo:""}, ...]
```

Agregar nuevo elemento al componente.
```js
function agregar() {
    const gallery = document.getElementById("gallery");

    let item = {
        url: "https://induxsoft.net/img/test/img1.png",
        mini: "https://induxsoft.net/img/test/img1.png",
        titulo: "Mi elemento"
    };

    gallery.addMedia(item);
}

agregar();
```

Eliminar elemento seleccionado usando el método `removeMediaByIndex`.
```js

const gallery = document.getElementById("gallery");
let selected = null;

gallery.onClicking = (item) => { selected = item }

function eliminar() {
    if (!selected || !confirm("¿Esta seguro que desea eliminar el elemento seleccionado?")) return;

    let internalID = gallery._key_id;
    let index = gallery.getData(false).findIndex(item => item[internalID] == selected[internalID]);

    gallery.removeMediaByIndex(index);
}
```


## Comentarios

El componente no envía nada como parte de la carga útil del formulario al que estuviera relacionado, por lo que si necesitamos enviar información al backend necesitaremos apoyarnos de javascript.

Cada elemento que se liste en el componente necesita al menos tres propiedades que corresponden a los establecidos en los atributos: `media-prop`, `miniature-prop`, `label-prop`.



## Atributos

#### id (opcional)
Identificador del componente, este valor puede ser usado para acceder facilmente al componente mediante javascript.

Tipo: `string`, Predeterminado: `""`
```html
<media-list id="gallery">
```

#### data (opcional)
Un array de objetos en JSON con la información de los elementos a mostrar.

Tipo: Array de objectos en JSON, valor predeterminado: `""`, opcional (puede omitirse en el marcado y llenarse con Javascript posteriormente)

```html
<media-list data='[{"url":"", "mini":"", "titulo":""}]'>
```

#### can-arrange (opcional)
Pueden ordenar elementos.

Tipo: `boolean`, valor predeterminado: `true`
```html
<media-list can-arrange="true">
```

#### can-drag (opcional)
Pueden arrastrar elementos.

Tipo: `boolean`, valor predeterminado: `true`
```html
<media-list can-drag="true">
```

#### can-drop (opcional)
Pueden colocar elementos.

Tipo: `boolean`, valor predeterminado: `true`
```html
<media-list can-drop="true">
```

#### can-delete (opcional)
Pueden eliminar elementos.

Tipo: `boolean`, valor predeterminado: `true`
```html
<media-list can-delete="true">
```

#### highlight-first (opcional)
Marcar el primer elemento.

Tipo: `boolean`, valor predeterminado: `true`
```html
<media-list highlight-first="true">
```

#### outline-selected (opcional)
Marcar el primer elemento.

Tipo: `boolean`, valor predeterminado: `false`
```html
<media-list outline-selected="true">
```

#### media-prop (opcional)
Nombre del campo que indica la ubicación del recurso.

Tipo: `string`, valor predeterminado: `url`
```html
<media-list media-prop="url">
```

#### miniature-prop (opcional)
Nombre del campo que indica la ubicación de la miniatura del recurso.

Tipo: `string`, valor predeterminado: `mini`
```html
<media-list miniature-prop="mini">
```

#### label-prop (opcional)
Nombre del campo para ser usado como etiqueta del recurso.

Tipo: `string`, valor predeterminado: `""`
```html
<media-list label-prop="titulo">
```

#### back-color-media (opcional)
Color de fondo de los elementos media

Tipo: `string`, valor predeterminado: `#FFF`
```html
<media-list back-color-media="#FFF">
```

#### max-size-media (opcional)
Valor que se aplica al alto y ancho máximo de los elementos.

Tipo: `string`, valor predeterminado: `8rem`
```html
<media-list max-size-media="5rem">
```

## Propiedades

- `canArrange`: (bool) Pueden ordenar elementos (true/false, def: true)
- `canDrag`: (bool) Pueden arrastrar elementos (true/false, def: true)
- `canDrop`: (bool) Pueden colocar elementos (true/false, def: true)
- `canDelete`: (bool) Pueden eliminar elementos (true/false, def: true)
- `highlightFirst`: (bool) Marcar el primer elemento (true/false, def: true)
- `outlineSelected`: (bool) Remarcar el elemento seleccionado (true/false, def: false)
- `mediaProp`: (bool) Nombre del campo que indica la ubicación del recurso (def: url)
- `miniatureProp`: (string) Nombre del campo que indica la ubicación de la miniatura del recurso (def: mini)
- `label-prop`: (string) Nombre del campo para ser usado como etiqueta del recurso.
- `backColorMedia`: (string) Color de fondo de los elementos media (ej: #FFF o white, def: #FFF)
- `maxSizeMedia`: (string) Valor que se aplica al alto y ancho máximo de los elementos (ej: 12rem, def: 8rem)
- `onClicking`: (function) Se dispara al hacer click sobre un elemento de la lista, envía como parámetro los datos del elemento.

## Métodos

#### setData

Establece los valores de los elementos de la lista.

**Parámetros:**
- `array` **data** Lista de objetos a mostrarse en la lista.

```js
setData(data): void
```

#### getData

Retorna los datos de la lista

**Parámetros:**
- `boolean` **withoutid** Indica si el valor devuelto por la función retornará el id de cada elemento. (opcional)

```js
getData(withoutid = true): array[]
```

#### addMedia

Agrega un elemento a la lista.

**Parámetros:**
- `array` **mediaData** Datos del elemento a agregar.

```js
addMedia(mediaData): void
```

#### removeMediaByIndex
Elimina un elemento de la lista.

**Parámetros**
- `number` **index** Indice del elemento a eliminar.

```js
removeMediaByIndex(index): void
```

#### refreshView

Actualiza la vista de lista.

```js
refreshView(): void
```


<!--
## Eventos
-->