|
|
|
|
|
|
|
|
|
|
|
## Descrição.
|
|
|
|
|
|
|
|
> Informações relacionadas ao sistema de Media da Ceicom, utilizado inicialmente para selecionar pastas para vinculo com registros ou administrar arquivos *(imagens geralmente)*, criando, excluindo pastas e enviando e excluindo arquivos.
|
|
|
|
|
|
|
|
## Requisitos.
|
|
|
|
|
|
|
|
> O sistema por si só, somente lista informações de um JSON, necessitando de um WS para consulta de pastas e arquivos.
|
|
|
|
|
|
|
|
## Configurações globais
|
|
|
|
|
|
|
|
Estas configurações são definidas via variaveis globais, geralmente aplicadas na **"masterPage.master"**
|
|
|
|
É importante conhecer a estrutura da requisição para definir estas variaveis:
|
|
|
|
|
|
|
|
Requisição: ```[dominio]:[porta][prefix]/[método]/[url][pasta]```
|
|
|
|
|
|
|
|
Destes, 2 parametros não podem ser alterados:
|
|
|
|
- **método**: o sistema identifica o que deve ser listado e automaticamente passa: **getfile** ou **getdir**
|
|
|
|
- **pasta**: é definida automaticamente com base na navegação entre as pastas do usuário
|
|
|
|
|
|
|
|
**Parametros:**
|
|
|
|
- **mediaDomain**: dominio para sua requisição
|
|
|
|
- *ex: jornaldebeltrao.com.br*
|
|
|
|
- **mediaPort**: porta de conexão com o servidor
|
|
|
|
- *ex: 5858*
|
|
|
|
- **mediaPrefix**: caminho para fazer a requisição.
|
|
|
|
- *ex: modulos/handlers/list, vai gerar a seguinte requisição:
|
|
|
|
```localhost:3000/modulos/handlers/list/getdir/arquivos/media```
|
|
|
|
- **mediaURL**: caminho até a pasta **arquivos/media**
|
|
|
|
- *ex: dominio/httpdocs, vai gerar a seguinte requisição:
|
|
|
|
```localhost:3000/getdir/dominio/httpdocs/arquivos/media```
|
|
|
|
|
|
|
|
## Configurações por instância
|
|
|
|
Estas configurações podem ser definidas para cada instância do sistema de media via html *(data atributes)*
|
|
|
|
|
|
|
|
**Parametros:**
|
|
|
|
- **data-action**: Define quais ações estarão disponiveis, possíveis valores:
|
|
|
|
1. **addfile**: envio de arquivos.
|
|
|
|
2. **addfolder**: criar pastas.
|
|
|
|
3. **removefolder**: remover pasta.
|
|
|
|
4. **removefile**: remover arquivo(s).
|
|
|
|
5. **selectfile**: possibilita seleção de arquivos.
|
|
|
|
6. **sep**: separador, simplesmente coloca um pipe entre os botões de ações.<br>
|
|
|
|
*Ação implementada automaticamente em páginas com editor (**tinymce**), não pode ser implementada avulsa*<br>
|
|
|
|
Ex: ```data-action="addfile,addfolder,sep,removefolder"```
|
|
|
|
|
|
|
|
- **data-folder-input**: Define nome do input que recebe o valor da pasta selecionada.<br>
|
|
|
|
*Gera input hidden automaticamente com o name indicado no parametro*<br>
|
|
|
|
Retorna uma string, ex: ```media/autores```
|
|
|
|
|
|
|
|
- **data-caption-input**: Define nome do input que recebe o valor da legenda dos arquivos.<br>
|
|
|
|
*Gera input hidden automaticamente com o name indicado no parametro*<br>
|
|
|
|
Retorna um objeto *"stringficado"*, ex: ```"{"caminho completa foto":"legenda","caminho completa foto1":"legenda"}"```
|
|
|
|
|
|
|
|
- **data-start**: Pasta inicial.<br>
|
|
|
|
Em conjunto com o atributo **data-folder-input** pode ser aplicado via evento:<br>
|
|
|
|
```$(document).trigger('cfw_media_folder', ['valor do data-folder-input', 'pasta a ser aplicada' ]);```<br>
|
|
|
|
Ex: ```data-start="media/autores"```
|
|
|
|
|
|
|
|
- **data-selection**: Permitir ou não selecionar multiplos arquivos.<br>
|
|
|
|
Possíveis valores são: **multi** e **single**<br>
|
|
|
|
Note que as ações de **selecionar** e **legenda** somente ficam ativas com **1 único item selecionado**, atualmente esta ação somente fica disponivel para **exclusão de arquivos**.<br>
|
|
|
|
Ex: ```data-selection="single"```
|
|
|
|
|
|
|
|
- **data-start-captions**: Legendas iniciais das imagens.<br>
|
|
|
|
Deve seguir o padrão de JSON do valor enviado via **data-caption-input**: ```{ 'caminho completa foto' : 'legenda', 'caminho completa foto1' : 'legenda' }```<br>
|
|
|
|
Em conjunto com o **data-caption-input** pode ser aplicado via evento:<br>
|
|
|
|
```$(document).trigger('cfw_media_caption', ['valor do data-input-caption', obj de legendas ]);```
|
|
|
|
|
|
|
|
- **data-media-modal**: Transforma seletor de imagens/pastas em modal<br>
|
|
|
|
Ex: ```data-media-modal="true"```
|
|
|
|
|
|
|
|
## Estrutura JSON.
|
|
|
|
O sistema de media faz requisições utilizando 2 métodos:
|
|
|
|
- **getdir**: Utilizado para listagem de pastas, segue modelo de **JSON**:
|
|
|
|
```json
|
|
|
|
{
|
|
|
|
"media": {
|
|
|
|
"pasta1": {
|
|
|
|
"subpasta1": {
|
|
|
|
"sub-subpasta1": {}
|
|
|
|
},
|
|
|
|
"subpasta2": {}
|
|
|
|
},
|
|
|
|
"pasta2": {}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
- **getfile**: Utilizado para listagem de arquivos, segue modelo de **JSON**:
|
|
|
|
```json
|
|
|
|
[
|
|
|
|
"arquivo1.jpg",
|
|
|
|
"arquivo2.jpg",
|
|
|
|
"arquivo3.jpg",
|
|
|
|
"arquivo4.jpg"
|
|
|
|
]
|
|
|
|
```
|
|
|
|
|
|
|
|
## ToDo
|
|
|
|
1. Definir capa de Galerias/Notícias
|
|
|
|
2. Gerar galeria com base em múltiplas seleções
|
|
|
|
3. Pesquisa por nome de imagens
|
|
|
|
4. Inserção de múltiplas imagens no Editor (tinymce)
|
|
|
|
5. Upload múltiplas imagens mesmo tempo.
|
|
|
|
6. Upload Drag'n drop
|
|
|
|
7. Zoom imagem para visualização
|
|
|
|
|
|
|
|
## Issues
|
|
|
|
1. Lentidão ao inserir foto do modal para o editor de texto (jdeb) |
|
|
\ No newline at end of file |
