137 lines
8.5 KiB
Markdown
137 lines
8.5 KiB
Markdown
|
---
|
|||
|
|
title: Camada Visual Social Poster
|
|||
|
|
source: https://tdn.totvs.com/display/fluig/Camada+Visual+Social+Poster
|
|||
|
|
path: \Plataforma Documentação técnica\Recurso de Comunidades (Social)\Componentes de Publicação\Camada Visual Social Poster.md
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Índice
|
|||
|
|
|
|||
|
|
- 1 [Arquivos básicos do widget Social Poster](#CamadaVisualSocialPoster-ArquivosbásicosdowidgetSocialPoster)
|
|||
|
|
- 2 [Ação de Publicação](#CamadaVisualSocialPoster-AçãodePublicação)
|
|||
|
|
- 3 [Ação de Publicação de Usuário](#CamadaVisualSocialPoster-AçãodePublicaçãodeUsuário)
|
|||
|
|
- 4 [Área de publicação na Comunidade](#CamadaVisualSocialPoster-ÁreadepublicaçãonaComunidade)
|
|||
|
|
- 5 [Estrutura do widget Social Poster](#CamadaVisualSocialPoster-EstruturadowidgetSocialPoster)
|
|||
|
|
|
|||
|
|
### Arquivos básicos do widget Social Poster
|
|||
|
|
|
|||
|
|
O *widget* Social Poster é baseado no *framework* de *templates* [FreeMarker](http://freemarker.org/) (.ftl). O FreeMarker é responsável pela camada de visualização, onde sobre ele é escrito todo HTML do componente. Bem como o(s) arquivo(s) de [FreeMarker](http://freemarker.org/), todos os componentes possuem arquivos próprios de CSS (.css) e JavaScript (.js).
|
|||
|
|
|
|||
|
|
Além desses componentes, o *widget* Social Poster utiliza um componente de *template* chamado [Mustache](http://mustache.github.io/), que é uma especificação de *templates* que não utiliza lógica, ou seja, não possui declarações com *if, for, while* etc.; toda sua construção é baseada em *tags*.
|
|||
|
|
|
|||
|
|
### Ação de Publicação
|
|||
|
|
|
|||
|
|
O Social Poster é responsável por absorver todo o conteúdo digitado pelo usuário no Campo de Publicação e enviar para a exibição de uma nova publicação na *Timeline*.
|
|||
|
|
|
|||
|
|
### Ação de Publicação de Usuário
|
|||
|
|
|
|||
|
|
Ação de Publicação de Usuário é o campo de texto onde o usuário digita o conteúdo para publicação. Esse campo de texto está disponível na página inicial.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**Área de publicação de usuário**
|
|||
|
|
|
|||
|
|
### Área de publicação na Comunidade
|
|||
|
|
|
|||
|
|
Na publicação em comunidade, além de publicar conteúdo de texto, é possível anexar imagens, um vídeo, documento ou artigo de acordo com a disponibilidade desses recursos.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**Área de publicação de comunidade**
|
|||
|
|
|
|||
|
|
### Estrutura do widget Social Poster
|
|||
|
|
|
|||
|
|
Veja a seguir a estrutura que compõe o *widget* Social Poster:
|
|||
|
|
|
|||
|
|
**No HTML**
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<div class="wcm-widget-class wcm-widget-post-share">
|
|||
|
|
<!-- Verifica se o recurso está bloqueado -->
|
|||
|
|
{{#socialStateBlocked}}
|
|||
|
|
<!-- Verifica se tipo é comunidade -->
|
|||
|
|
{{#socialTypeCommunity}}
|
|||
|
|
<p class="message-information">${i18n.getTranslation('community.disabled')}</p>
|
|||
|
|
{{/socialTypeCommunity}}
|
|||
|
|
<!-- Verifica se tipo é usuário -->
|
|||
|
|
{{#socialTypeUser}}
|
|||
|
|
<p class="message-information">${i18n.getTranslation('user.disabled')}</p>
|
|||
|
|
{{/socialTypeUser}}
|
|||
|
|
{{/socialStateBlocked}}
|
|||
|
|
<!-- Se o recurso não está bloqueado faz carregamento dos elementos da social poster -->
|
|||
|
|
{{#socialStateActive}}
|
|||
|
|
<!-- Verifica se existe um alias -->
|
|||
|
|
{{#socialAlias}}
|
|||
|
|
<!-- Verifica se usuário está em sua própria página ou se usuário é membro da comunidade -->
|
|||
|
|
{{#isUserOwnPageOrMember}}
|
|||
|
|
<!-- Área da imagem do usuário ou comunidade -->
|
|||
|
|
<figure class="user-avatar-container">
|
|||
|
|
<img src="/social/api/rest/social/imagetype/{{socialType}}/thumb/{{socialAlias}}" class="image-responsive">
|
|||
|
|
</figure>
|
|||
|
|
<form method="post" class="totvs-form grid post-share-form" data-post-share-form>
|
|||
|
|
<fieldset class="col-1">
|
|||
|
|
<!-- Área de postagem do conteúdo -->
|
|||
|
|
<div class="post-area" data-post-area>
|
|||
|
|
<div class="post-share-text-container">
|
|||
|
|
<span class="close-post-share byyou-controller byyou-controller-close3" data-close-post-share></span>
|
|||
|
|
<textarea name="post-share-text" class="post-share-text" id="post-share-text" placeholder="${i18n.getTranslation('share.question')}" data-post-share-text></textarea>
|
|||
|
|
</div>
|
|||
|
|
<!-- Verifica se tipo é comunidade -->
|
|||
|
|
{{#socialTypeCommunity}}
|
|||
|
|
<nav class="post-options-container">
|
|||
|
|
<!-- Habilita link de seleção de imagem se recurso estiver disponível -->
|
|||
|
|
{{#photoIsEnabled}}
|
|||
|
|
<a href="#" class="post-options post-photo" data-attach-media="photo">${i18n.getTranslation('post.picture')}</a>
|
|||
|
|
{{/photoIsEnabled}}
|
|||
|
|
<!-- Habilita link de seleção de vídeo se recurso estiver disponível -->
|
|||
|
|
{{#videoIsEnabled}}
|
|||
|
|
<a href="#" class="post-options post-video" data-attach-media="video">${i18n.getTranslation('post.video')}</a>
|
|||
|
|
{{/videoIsEnabled}}
|
|||
|
|
<!-- Habilita link de seleção de documento se recurso estiver disponível -->
|
|||
|
|
{{#documentIsEnabled}}
|
|||
|
|
<a href="#" class="post-options post-document" data-attach-media="document">${i18n.getTranslation('post.document')}</a>
|
|||
|
|
{{/documentIsEnabled}}
|
|||
|
|
</nav>
|
|||
|
|
{{/socialTypeCommunity}}
|
|||
|
|
</div>
|
|||
|
|
</fieldset>
|
|||
|
|
<fieldset class="col-1">
|
|||
|
|
<div class="submit-area group form-inline">
|
|||
|
|
<!-- Área da lista de restrição do post e do botão de envio -->
|
|||
|
|
<div class="post-submit-type fr">
|
|||
|
|
<span class="post-text-limit">600</span>
|
|||
|
|
<select name="post-share-visibility" class="post-share-visibility" {{#postShareVisibility}}disabled{{/postShareVisibility}}>
|
|||
|
|
<!-- Se página possuir contexto de usuário habilita opções de acordo com o mesmo -->
|
|||
|
|
{{#socialTypeUser}}
|
|||
|
|
<option value="PUBLIC">${i18n.getTranslation('public')}</option>
|
|||
|
|
<option value="PRIVATE">${i18n.getTranslation('follower')}</option>
|
|||
|
|
{{/socialTypeUser}}
|
|||
|
|
<!-- Se página possuir contexto de comunidade habilita opções de acordo com o mesmo -->
|
|||
|
|
{{#notSocialTypeUser}}
|
|||
|
|
<!-- Se conteúdo for privado não exibe opção 'publico' -->
|
|||
|
|
{{#socialPrivateContent}}
|
|||
|
|
<option value="PRIVATE">${i18n.getTranslation('member')}</option>
|
|||
|
|
{{/socialPrivateContent}}
|
|||
|
|
<!-- Se conteúdo não for privado adiciona opção 'publico' -->
|
|||
|
|
{{#notSocialPrivateContent}}
|
|||
|
|
<option value="PUBLIC">${i18n.getTranslation('public')}</option>
|
|||
|
|
<option value="PRIVATE">${i18n.getTranslation('member')}</option>
|
|||
|
|
{{/notSocialPrivateContent}}
|
|||
|
|
{{/notSocialTypeUser}}
|
|||
|
|
</select>
|
|||
|
|
<!-- Se o recurso está bloqueado desabilita botão -->
|
|||
|
|
{{#socialStateBlocked}}
|
|||
|
|
<button class="totvs-btn-disabled" disabled="disabled">${i18n.getTranslation('profile.disabled')}</button>
|
|||
|
|
{{/socialStateBlocked}}
|
|||
|
|
<!-- Se o recurso não está bloqueado exibe botão -->
|
|||
|
|
{{#notSocialStateBlocked}}
|
|||
|
|
<button type="submit" class="totvs-btn-disabled post-share-submit" disabled="disabled">${i18n.getTranslation('publish')}</button>
|
|||
|
|
{{/notSocialStateBlocked}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</fieldset>
|
|||
|
|
</form>
|
|||
|
|
{{/isUserOwnPageOrMember}}
|
|||
|
|
{{/socialAlias}}
|
|||
|
|
{{/socialStateActive}}
|
|||
|
|
</div>
|
|||
|
|
```
|