marker

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:

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:

{
    ""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.

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:

{
    ""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

<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>