Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Come aggiungere bottoni alla versione mobile


Tutorial Come aggiungere bottoni alla versione mobile

Messaggio Da MattiaDes il Mar 22 Set 2015, 14:43

Come aggiungere bottoni alla versione mobile

Di default, la versione mobile non possiede i 3 bottoni per le azioni sui post, ovvero: citazione, modificare ed eliminare. Questo tutorial vi aiuterà a installarli sul tuo forum.


 Exclamation  Attenzione: Per eseguire questa modifica è necessario accedere con l'account fondatore, in modo da poter modificare i templates!

1. Modifica del template viewtopic_body

Per effettuare queste modifiche, dirigiti su Pannello di amministrazione ► Visualizzazione ►Templates ► Versione Mobile ► viewtopic_body

Se non hai mai modificato i template segui le Istruzioni A, altrimenti segui le Istruzioni B.

Istruzioni A: Per templates di default

Questa modifica è pensata per coloro che non hanno mai modificato il template viewtopic_body della versione mobile. Elimina dunque l'intero template e sostituiscilo con il template sottostante:

Codice:
<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} {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>Pubblica una risposta</b>',
      title_edit : '<b>Modifica Messaggio</b>',
  
      status_progress : 'Invio in corso...',
      status_done : function(url) {
        return 'Il messaggio è stato inviato con successo. Si prega di <a href="' + url + '">cliccare qui</a>, se non siete reindirizzati.'
      },
      status_fail : 'Si è verificato un errore, riprova più tardi.',
  
      delete_warning : 'Sei sicuro di voler eliminare questo post?',
      delete_done : 'Il messaggio è stato eliminato con successo.',
      delete_fail : 'Il messaggio non può essere eliminato, riprova più tardi.',
  
      textarea_placeholder : 'Corpo del messaggio...',
      button_submit : 'Inviare'
    },
 
    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" style="display:none"></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 && redir[1]) ? redir[1].replace(/&/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) {
        var titre = $('input[name="subject"]', d)[0],
            editer = $('input[name="edit_reason"]', d)[0];
      
        $('input[name="auth[]"]', d).appendTo(data);
        if (!$FAMA.node.message.value) $FAMA.node.message.value = $('#text_editor_textarea', d)[0].value;
        if (titre && titre.value) data.appendChild(titre);
        if (editer && editer.value) data.appendChild(editer);
      });
    }
 
  };
 
  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>

Ricordati di salvare e pubblicare il modello quando hai finito.  :new:


Istruzioni B: Per templates modificati

Questa modifica è pensata per coloro che hanno già modificato il template viewtopic_body della versione mobile. Si prega di seguire i passaggi per completare l'installazione.

1. Aggiungi questo codice all'inizio del template:

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

2. Cerca questo codice:

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

Dopo di esso, aggiungi il seguente codice:

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

3. Alla fine del templates, aggiungi il seguente codice:

Codice:
<script type="text/javascript">//<![CDATA[
(function() {
  'ForumActif Mobile Actions';
  window.$FAMA = {
 
    lang : {
      title_reply : '<b>Pubblica una risposta</b>',
      title_edit : '<b>Modifica Messaggio</b>',
  
      status_progress : 'Invio in corso...',
      status_done : function(url) {
        return 'Il messaggio è stato inviato con successo. Si prega di <a href="' + url + '">cliccare qui</a>, se non siete reindirizzati.'
      },
      status_fail : 'Si è verificato un errore, riprova più tardi.',
  
      delete_warning : 'Sei sicuro di voler eliminare questo post?',
      delete_done : 'Il messaggio è stato eliminato con successo.',
      delete_fail : 'Il messaggio non può essere eliminato, riprova più tardi.',
  
      textarea_placeholder : 'Corpo del messaggio...',
      button_submit : 'Inviare'
    },
 
    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" style="display:none"></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 && redir[1]) ? redir[1].replace(/&/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) {
        var titre = $('input[name="subject"]', d)[0],
            editer = $('input[name="edit_reason"]', d)[0];
      
        $('input[name="auth[]"]', d).appendTo(data);
        if (!$FAMA.node.message.value) $FAMA.node.message.value = $('#text_editor_textarea', d)[0].value;
        if (titre && titre.value) data.appendChild(titre);
        if (editer && editer.value) data.appendChild(editer);
      });
    }
 
  };
 
  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>

Salva e pubblica il tutto  :new:

Quando tutto è fatto, recati in un post nella versione mobile e si dovrebbero ora vedere i bottoni per la citazione, per modificare ed eliminare. Cliccando i primi due si aprirà un editor direttamente sotto il post, mentre per il tasto di cancellazione si aprirà semplicemente una finestra di conferma.

Buona giornata!  :zen:





MattiaDes
Moderattivo
Moderattivo

Sesso : Maschile
Età : 20
Messaggi : 2336
Località : Modena, Italy


Vedere il profilo dell'utente http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum