Índice
Arquivos básicos do widget Social Poster
O widget Social Poster é baseado no framework de templates FreeMarker (.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, 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, 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>
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas