GitLab

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.
     Ação implementada automaticamente em páginas com editor (tinymce), não pode ser implementada avulsa
     Ex: data-action="addfile,addfolder,sep,removefolder"

• data-folder-input: Define nome do input que recebe o valor da pasta selecionada.
  Gera input hidden automaticamente com o name indicado no parametro
  Retorna uma string, ex: media/autores

• data-caption-input: Define nome do input que recebe o valor da legenda dos arquivos.
  Gera input hidden automaticamente com o name indicado no parametro
  Retorna um objeto "stringficado", ex: "{"caminho completa foto":"legenda","caminho completa foto1":"legenda"}"

• data-start: Pasta inicial.
  Em conjunto com o atributo data-folder-input pode ser aplicado via evento:
  $(document).trigger('cfw_media_folder', ['valor do data-folder-input', 'pasta a ser aplicada' ]);
  Ex: data-start="media/autores"

• data-selection: Permitir ou não selecionar multiplos arquivos.
  Possíveis valores são: multi e single
  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.
  Ex: data-selection="single"

• data-start-captions: Legendas iniciais das imagens.
  Deve seguir o padrão de JSON do valor enviado via data-caption-input: { 'caminho completa foto' : 'legenda', 'caminho completa foto1' : 'legenda' }
  Em conjunto com o data-caption-input pode ser aplicado via evento:
  $(document).trigger('cfw_media_caption', ['valor do data-input-caption', obj de legendas ]);

• data-media-modal: Transforma seletor de imagens/pastas em modal
  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:

{
  "media": {
    "pasta1": {
      "subpasta1": {
        "sub-subpasta1": {}
      },
      "subpasta2": {}
    },
    "pasta2": {}
  }
}

• getfile: Utilizado para listagem de arquivos, segue modelo de 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)