|
|
|
|
|
|
|
|
|
|
|
## Descrição.
|
|
|
|
|
|
|
|
> Sistema para adicionar marcadores sob imagens da Ceicom, utilizado inicialmente para adicionar marcadores contendo **titulo, descrição e imagem**
|
|
|
|
|
|
|
|
## Requisitos.
|
|
|
|
|
|
|
|
> Não existem requisitos desde que utilizado dentro do CMS da **CEICOM**
|
|
|
|
|
|
|
|
## Parâmetros:
|
|
|
|
Estas configurações são definidas via atributos no elemento **"pai"** do input file que receberá a imagem na qual as marcações serão aplicadas.
|
|
|
|
É importante definir este elemento com *12 colunas* afim de evitar quebras de layout, visto que o componente irá gerar todo seu html e inserir depois deste elemento referência.
|
|
|
|
|
|
|
|
>**data-marker**: informa id input no qual o caminho da imagem a receber as marcações vai existir, seguindo o padrão de estrutura do CMS, é um **input hidden** que fica com o **input file**.
|
|
|
|
- *ex: ```data-marker="idIput"```*
|
|
|
|
|
|
|
|
> **data-markersize**: informa tamanho máximo da imagem que receberá o marcador, este limite deve ser **sincronizado** com o front-end do website pois influencia na localização dos pontos da imagem.
|
|
|
|
- *ex: ```data-markersize="470"```*
|
|
|
|
|
|
|
|
> **data-idmarker**: identificador do marcador, tem relação com a chave que vai retornar os **"pontos"** existentes no método **list**
|
|
|
|
- *ex: ```data-idmarker="1"```:
|
|
|
|
|
|
|
|
## Retorn de dados (types):
|
|
|
|
|
|
|
|
- **form**: O sistema deve funcionar apartir do momento que se entra em um registro que já possui a imagem de referência salva, para tal ao salvar o registro (**type=form**) deve-se retornar o id do registro para que o cms permaneça na mesma pagina:
|
|
|
|
```csharp
|
|
|
|
context.Response.ContentType = "text/html";
|
|
|
|
context.Response.Write("id=1");
|
|
|
|
```
|
|
|
|
|
|
|
|
- **info**: Geralmente utilizado para recuperar informações do registro para atualização/visualização de dados, deverá retornar também uma chave exclusiva para o **marcador** chamada de **marker_[idmarker]** com a listagem dos pontos já existentes na imagem:
|
|
|
|
```json
|
|
|
|
{
|
|
|
|
""marker_1"": [{
|
|
|
|
""id"": 1,
|
|
|
|
""top"": 70,
|
|
|
|
""left"": 330,
|
|
|
|
""title"": ""Titulo"",
|
|
|
|
""desc"": ""Descrição"",
|
|
|
|
""img"": ""/images/tmp/led.jpg""
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
- **remove**: Recebe o **id do produto** e **id do ponto** para remoção, não precisa retornar nada.
|
|
|
|
```csharp
|
|
|
|
string marker = context.Request.Form["id"];
|
|
|
|
string product = context.Request.Form["product"];
|
|
|
|
```
|
|
|
|
|
|
|
|
- **add**: Recebe as informações do ponto, para **atualização/criação** de um registro, se existir o parametro **id** deve atualizar o registro com qual, caso contrário, cria novo, o retorno deve seguir a estrutura completa dos dados do ponto:
|
|
|
|
```json
|
|
|
|
{
|
|
|
|
""id"": 1,
|
|
|
|
""top"": 70,
|
|
|
|
""left"": 330,
|
|
|
|
""title"": ""Titulo"",
|
|
|
|
""desc"": ""Descrição"",
|
|
|
|
""img"": ""/images/tmp/led.jpg""
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## Exemplo
|
|
|
|
O exemplo a seguir mostra como implementar o marcador em uma imagem com tamanho máximo de 470px
|
|
|
|
```html
|
|
|
|
<div class="col12" data-marker="hdflMarker" data-markersize="470" data-idmarker="1">
|
|
|
|
<label>Imagem<em class="txt-req">*</em></label>
|
|
|
|
<input id="flMarker" name="flMarker" type="file" />
|
|
|
|
<input type="hidden" id="hdflMarker" name="hdflMarker" />
|
|
|
|
<small>Para a melhor apresentação o sistema esta restrito a imagems com <span class="color-red">470px de largura</span>.</small>
|
|
|
|
</div>
|
|
|
|
``` |
|
|
|
\ No newline at end of file |
