[TUTORIAL] Adicionar ações de mensagem na versão mobile

[Fraise]

Adicionar ações de mensagem na versão mobile

Por padrão, a versão mobile não dispõe das ações de mensagem como na versão clássica, como por exemplo: citar, editar e deletar.

Atenção! No momento, esta função só funciona para mensagens secundárias, ou seja, ainda não é possível editar o tópico em si.

--> Tutoriais, dicas e astúcias <--
Adicionar ações de mensagem na versão mobile

1º - Modificação do template viewtopic_body
Para adicionar esta função, deveremos aceder ao nosso template viewtopic_body.
     

Vá em: Painel de Controle   Visualização Templates Versão Mobile

Clique no ícone "" no template viewtopic_body.

Se você nunca tiver modificado esse template, siga o Método 1, caso você já tenha feito modificações, terá de seguir o Método 2.


- Método 1
Apague o seu template inteiro e substitua-o por este:

Código:

<style type="text/css">.mobile-actions{float:right;padding-top:3px}
.mobile-actions li{float:left;list-style:none}
#mobile_editor {text-align:center}
#text_box {padding:6px 5%}
#mobile_editor textarea {width:100%;height:100px}
#post_status {color:#000;background:#FFF;border:1px solid #2F6BC2;border-left-width:4px;margin:4px auto;padding:4px;width:90%}
#post_status.post_progress {background-color:#FFE;border-color:#990}
#post_status.post_done {background-color:#EFE;border-color:#090}
#post_status.post_fail {background-color:#FEE;border-color:#C33}
blockquote {display:block}</style>
<script type="text/javascript">
//<![CDATA[
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
      
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
        {
            if( $(this).is(":visible") )
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
        });
        }
    }
    catch(e) { }
  
  return false;
};

//]]>
</script>

<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}">
  <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
        <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
      </div>
  <!-- END hidden -->
  <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="style2 post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
        <div class="postbody">
            <div class="post_header">{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>
            <ul class="mobile-actions">
              <li>{postrow.displayed.QUOTE_IMG}</li>
              <li>{postrow.displayed.EDIT_IMG}</li>
              <li>{postrow.displayed.DELETE_IMG}</li>
            </ul>
                                <br class="clear"/>
                                <div class="content">
              <div>{postrow.displayed.MESSAGE}</div>
                    <!-- BEGIN switch_attachments -->
                    <div class="attachbox">
                        <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
                        <dl class="attachments">
                          <!-- BEGIN switch_post_attachments -->
                              <dt>
                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->
                                <!-- BEGIN switch_no_dl_att -->
                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                              </dt>
                              <dd>
                                <!-- BEGIN switch_no_comment -->
                                <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
                                <!-- END switch_no_comment -->
                                <!-- BEGIN switch_no_dl_att -->
                                <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                <!-- END switch_no_dl_att -->
                  <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
              </dd>
                          <!-- END switch_post_attachments -->
                        </dl>
                    </div>
                    <!-- END switch_attachments -->
            </div>
            {postrow.displayed.EDITED_MESSAGE}
        </div>
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
  <!-- END displayed -->
</div>
<!-- END postrow -->
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{INLINE_MESSAGE}
{QUICK_REPLY_FORM}

<script type="text/javascript">//<![CDATA[
(function() {
  'ForumActif Mobile Actions';
  window.$FAMA = {
  
   lang : {
      title_reply : '<b>Responder</b>',
      title_edit : '<b>Editar</b>',
      
      status_progress : 'Enviando...',
      status_done : function(url) {
        return 'Mensagem enviada. <a href="' + url + '">Clique</a> aqui se não for redireccionado.'
      },
      status_fail : 'Um erro ocorreu, por favor, tente mais tarde.',
      
      delete_warning : 'Tem a certeza que quer apagar esta mensagem?',
      delete_done : 'Mensagem apagada com sucesso.',
      delete_fail : 'Mensagem não pôde ser apagada, por favor, tente mais tarde.',
      
      textarea_placeholder : 'Mensagem..',
      button_submit : 'Enviar'
    },
  
    node : null,
  
    id : window.location.href.replace(/.*?\/t(\d+).*/, '$1'),
  
    store : new Object(),
  
    create : function(node, href) {
      var form = document.createElement('form');
      form.action = '/post';
      form.method = 'post';
      form.name = 'post';
      form.id = 'mobile_editor';
      form.innerHTML = '<div id="editor_title" class="post_header"></div><div id="text_box"><textarea placeholder="' + $FAMA.lang.textarea_placeholder + '" name="message"></textarea></div><div><input type="submit" value="' + $FAMA.lang.button_submit + '" name="post" class="defaultBtn"/><div id="post_status" style="display:none"></div></div><div id="mobile_data"></div>';
    
      form.onsubmit = function(e) {
        var t = this,
            data = $(t).serialize() + '&post=1',
            status = document.getElementById('post_status');
      
        t.post.style.display = 'none';
        status.style.display = 'block';
        status.className = 'post_progress';
        status.innerHTML = $FAMA.lang.status_progress;
      
        e.preventDefault();
      
        $.post('/post', data, function(d) {
          var redir = d.match(/.*content="\d;url=(.*?)".*/i, '$1'),
              url = redir[1] ? redir[1].replace(/&amp;/g, '&') : window.location.pathname + (/mode=reply/.test(data) ? '?view=newest' : '');
            
          status.className = 'post_done';
          status.innerHTML = $FAMA.lang.status_done(url);
        
          window.setTimeout(function() {
            window.location.href = url;
          }, 1500);
        
        }).fail(function() {
          status.className = 'post_fail';
          status.innerHTML = $FAMA.lang.status_fail;
          t.post.style.display = '';
        });
      };
    
    
      $FAMA.node = form;
      $FAMA.change(node, href);
    },
  
    change : function(node, href) {
      node.appendChild($FAMA.node);
    
      if ($FAMA.node.mode) {
        var oldid = document.getElementById('old_post_id');
        if ($FAMA.node.mode.value == 'reply' && oldid)  {
          if (!$FAMA.store['post_' + oldid.value]) $FAMA.store['post_' + oldid.value] = new Object();
          $FAMA.store['post_' + oldid.value].reply = $FAMA.node.message.value;
        }
        else if ($FAMA.node.mode.value == 'editpost' && $FAMA.node.p) {
          if (!$FAMA.store['post_' + $FAMA.node.p.value]) $FAMA.store['post_' + $FAMA.node.p.value] = new Object();
          $FAMA.store['post_' + $FAMA.node.p.value].editpost = $FAMA.node.message.value;
        }
      }
    
      $FAMA.node.message.value = '';
    
      var mode = href.replace(/.*?mode=(.*)/, '$1'),
          pid = href.replace(/.*?p=(\d+).*/, '$1'),
          data = document.getElementById('mobile_data'),
          title = document.getElementById('editor_title');
    
    
      if (mode == 'quote') {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].reply) $FAMA.node.message.value = $FAMA.store['post_' + pid].reply;
        title.innerHTML = $FAMA.lang.title_reply;
        data.innerHTML = '<input id="old_post_id" type="hidden" value="' + pid + '"/><input type="hidden" name="mode" value="reply"/><input type="hidden" name="t" value="' + $FAMA.id + '"/>';
      } else {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].editpost) $FAMA.node.message.value = $FAMA.store['post_' + pid].editpost;
        title.innerHTML = $FAMA.lang.title_edit;
        data.innerHTML = '<input type="hidden" name="mode" value="editpost"/><input type="hidden" name="p" value="' + pid + '"/>';
      }

      $.get(href, function(d) {
        $('input[name="auth[]"]', d).appendTo(data);
        if (!$FAMA.node.message.value) $FAMA.node.message.value = $('#text_editor_textarea', d)[0].value;
      });
    }
  
  };
 
  for (var a = document.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
    if (/mobile-actions/.test(a[i].parentNode.parentNode.className)) {
      if (/mode=(?:quote|editpost)/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var node = this.parentNode.parentNode.parentNode, href = this.href;
          e.preventDefault();
          $FAMA.node ? $FAMA.change(node, href) : $FAMA.create(node, href);
        };
      } else if (/mode=delete/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var del = confirm($FAMA.lang.delete_warning);

          if (del) {
            $.post('/post', 'p=' + this.href.replace(/.*?p=(\d+).*/, '$1') + '&mode=delete&confirm=1', function(d) {
              alert($FAMA.lang.delete_done);
              window.location.reload();
            }).fail(function() {
              alert($FAMA.lang.delete_fail);
            });
          }
        
          e.preventDefault();
        };
      }
    }
  }
})();
//]]></script>

Não se esqueça de publicar o template, clicando no ícone "".


- Método 2
Cole o código abaixo no inicio do template:

Código:

<style type="text/css">.mobile-actions{float:right;padding-top:3px}
.mobile-actions li{float:left;list-style:none}
#mobile_editor {text-align:center}
#text_box {padding:6px 5%}
#mobile_editor textarea {width:100%;height:100px}
#post_status {color:#000;background:#FFF;border:1px solid #2F6BC2;border-left-width:4px;margin:4px auto;padding:4px;width:90%}
#post_status.post_progress {background-color:#FFE;border-color:#990}
#post_status.post_done {background-color:#EFE;border-color:#090}
#post_status.post_fail {background-color:#FEE;border-color:#C33}
blockquote {display:block}</style>

Procure por:

Código:

<div class="post_header">{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>

E em baixo, coloque:

Código:

<ul class="mobile-actions">
  <li>{postrow.displayed.QUOTE_IMG}</li>
  <li>{postrow.displayed.EDIT_IMG}</li>
  <li>{postrow.displayed.DELETE_IMG}</li>
</ul>

Por fim, coloque o código abaixo no fim do template:

Código:

<script type="text/javascript">//<![CDATA[
(function() {
  'ForumActif Mobile Actions';
  window.$FAMA = {
    
   lang : {
      title_reply : '<b>Responder</b>',
      title_edit : '<b>Editar</b>',
      
      status_progress : 'Enviando...',
      status_done : function(url) {
        return 'Mensagem enviada. <a href="' + url + '">Clique</a> aqui se não for redireccionado.'
      },
      status_fail : 'Um erro ocorreu, por favor, tente mais tarde.',
      
      delete_warning : 'Tem a certeza que quer apagar esta mensagem?',
      delete_done : 'Mensagem apagada com sucesso.',
      delete_fail : 'Mensagem não pôde ser apagada, por favor, tente mais tarde.',
      
      textarea_placeholder : 'Mensagem..',
      button_submit : 'Enviar'
    },
    
    node : null,
    
    id : window.location.href.replace(/.*?\/t(\d+).*/, '$1'),
    
    store : new Object(),
    
    create : function(node, href) {
      var form = document.createElement('form');
      form.action = '/post';
      form.method = 'post';
      form.name = 'post';
      form.id = 'mobile_editor';
      form.innerHTML = '<div id="editor_title" class="post_header"></div><div id="text_box"><textarea placeholder="' + $FAMA.lang.textarea_placeholder + '" name="message"></textarea></div><div><input type="submit" value="' + $FAMA.lang.button_submit + '" name="post" class="defaultBtn"/><div id="post_status" style="display:none"></div></div><div id="mobile_data"></div>';
      
      form.onsubmit = function(e) {
        var t = this,
            data = $(t).serialize() + '&post=1',
            status = document.getElementById('post_status');
        
        t.post.style.display = 'none';
        status.style.display = 'block';
        status.className = 'post_progress';
        status.innerHTML = $FAMA.lang.status_progress;
        
        e.preventDefault();
        
        $.post('/post', data, function(d) {
          var redir = d.match(/.*content="\d;url=(.*?)".*/i, '$1'),
              url = redir[1] ? redir[1].replace(/&amp;/g, '&') : window.location.pathname + (/mode=reply/.test(data) ? '?view=newest' : '');
              
          status.className = 'post_done';
          status.innerHTML = $FAMA.lang.status_done(url);
          
          window.setTimeout(function() {
            window.location.href = url;
          }, 1500);
          
        }).fail(function() {
          status.className = 'post_fail';
          status.innerHTML = $FAMA.lang.status_fail;
          t.post.style.display = '';
        });
      };
      
      
      $FAMA.node = form;
      $FAMA.change(node, href);
    },
    
    change : function(node, href) {
      node.appendChild($FAMA.node);
      
      if ($FAMA.node.mode) {
        var oldid = document.getElementById('old_post_id');
        if ($FAMA.node.mode.value == 'reply' && oldid)  {
          if (!$FAMA.store['post_' + oldid.value]) $FAMA.store['post_' + oldid.value] = new Object();
          $FAMA.store['post_' + oldid.value].reply = $FAMA.node.message.value;
        }
        else if ($FAMA.node.mode.value == 'editpost' && $FAMA.node.p) {
          if (!$FAMA.store['post_' + $FAMA.node.p.value]) $FAMA.store['post_' + $FAMA.node.p.value] = new Object();
          $FAMA.store['post_' + $FAMA.node.p.value].editpost = $FAMA.node.message.value;
        }
      }
      
      $FAMA.node.message.value = '';
      
      var mode = href.replace(/.*?mode=(.*)/, '$1'),
          pid = href.replace(/.*?p=(\d+).*/, '$1'),
          data = document.getElementById('mobile_data'),
          title = document.getElementById('editor_title');
      
      
      if (mode == 'quote') {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].reply) $FAMA.node.message.value = $FAMA.store['post_' + pid].reply;
        title.innerHTML = $FAMA.lang.title_reply;
        data.innerHTML = '<input id="old_post_id" type="hidden" value="' + pid + '"/><input type="hidden" name="mode" value="reply"/><input type="hidden" name="t" value="' + $FAMA.id + '"/>';
      } else {
        if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].editpost) $FAMA.node.message.value = $FAMA.store['post_' + pid].editpost;
        title.innerHTML = $FAMA.lang.title_edit;
        data.innerHTML = '<input type="hidden" name="mode" value="editpost"/><input type="hidden" name="p" value="' + pid + '"/>';
      }

      $.get(href, function(d) {
        $('input[name="auth[]"]', d).appendTo(data);
        if (!$FAMA.node.message.value) $FAMA.node.message.value = $('#text_editor_textarea', d)[0].value;
      });
    }
    
  };
  
  for (var a = document.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
    if (/mobile-actions/.test(a[i].parentNode.parentNode.className)) {
      if (/mode=(?:quote|editpost)/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var node = this.parentNode.parentNode.parentNode, href = this.href;
          e.preventDefault();
          $FAMA.node ? $FAMA.change(node, href) : $FAMA.create(node, href);
        };
      } else if (/mode=delete/.test(a[i].href)) {
        a[i].onclick = function(e) {
          var del = confirm($FAMA.lang.delete_warning);

          if (del) {
            $.post('/post', 'p=' + this.href.replace(/.*?p=(\d+).*/, '$1') + '&mode=delete&confirm=1', function(d) {
              alert($FAMA.lang.delete_done);
              window.location.reload();
            }).fail(function() {
              alert($FAMA.lang.delete_fail);
            });
          }
          
          e.preventDefault();
        };
      }
    }
  }
})();
//]]></script>

Não se esqueça de publicar o template, clicando no ícone "".


2º - Modificações nos textos
Se você quiser fazer alguma modificação nos textos, procure por lang, que se encontra logo abaixo de $FAMA no template mobile viewtopic_body.
Em lang, você deverá encontrar o citado abaixo:

Código:

   lang : {
      title_reply : '<b>Responder</b>',
      title_edit : '<b>Editar</b>',
      
      status_progress : 'Enviando...',
      status_done : function(url) {
        return 'Mensagem enviada. <a href="' + url + '">Clique</a> aqui se não for redireccionado.'
      },
      status_fail : 'Um erro ocorreu, por favor, tente mais tarde.',
      
      delete_warning : 'Tem a certeza que quer apagar esta mensagem?',
      delete_done : 'Mensagem apagada com sucesso.',
      delete_fail : 'Mensagem não pôde ser apagada, por favor, tente mais tarde.',
      
      textarea_placeholder : 'Mensagem..',
      button_submit : 'Enviar'
    },

À esquerda, é o nome da variável, você NÃO deverá modificar essa parte. A parte que poderá modificar é à direita.

Exemplo:
Imagine que você quer editar o texto do botão Enviar por Mandar, basta localizar essa parte e substituir o texto que se encontra à direita, veja:

Antes

Código:

button_submit : 'Enviar'

Depois

Código:

button_submit : 'Mandar'

---

© Fórum dos Fóruns & Ange Tuteur

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Adicionar ações de mensagem na versão mobile