Navigation


 Publications en ligne


 Retour au forum

Forum de tests   

Limiter la hauteur des citations

Admin | Publié jeu 4 Mai 2017 - 14:03

Ce tutoriel vous permet de limiter la hauteur des citations afin de ne pas rallonger inutilement vos sujets. Par défaut, vos citations seront limitées à 400px de hauteur, en intégrant un lien permettant de poursuivre la lecture. Ce script est compatible avec toutes les versions de forum.

Installation du script

Panneau d'administration > Modules > HTML & JAVASCRIPT - Gestion des codes Javascript

 Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Limiter citations" et pour placement "Sujets".

Insérez-y le code suivant :

    /* globals jQuery */
         
        /**
         * Make tall quotes on topics collapsed.
         *
         * @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
         * @license MIT
         */
         
        var FA = FA || {};
         
        FA.Topic = FA.Topic || {};
         
        FA.Topic.QuoteCollapse = (function($, settings) {
          'use strict';
         
          var $quotes;
          var version;
         
          /**
          * Initialization function
          */
          function QuoteCollapse() {
            var self = this;
         
            $(function() {
              $.each({
                'phpbb2': 'table.bodylinewidth',
                'phpbb3': 'body#phpbb',
                'punbb': 'div.pun',
                'invision': 'div#ipbwrapper',
                'modernbb': 'body#modernbb',
                'mobile': 'div#mpage-body',
                'mobile-modern': 'body#mpage-body-modern',
              }, function(key, selector) {
                if ($(selector).length !== 0) {
                  version = key;
                }
              });
         
              if (!version) {
                return;
              }
         
              self.init();
              self.collapse();
            });
          }
         
          QuoteCollapse.prototype.init = function() {
            switch (version) {
              case 'phpbb2':
                $quotes = $('.postbody dl.codebox > dd');
                break;
              case 'phpbb3':
                $quotes = $('.postbody blockquote');
                break;
              case 'punbb':
                $quotes = $('.postbody blockquote');
                break;
              case 'invision':
                $quotes = $('.postbody blockquote');
                break;
              case 'modernbb':
                $quotes = $('.postbody blockquote');
                break;
              case 'mobile':
                $quotes = $('.content blockquote .quote_content');
                break;
              case 'mobile-modern':
                $quotes = $('.post-content blockquote .quote_content');
                break;
              default:
                return;
            }
         
            $quotes
              .addClass('fa-quote')
              .append($('<a>', {
                href: '#',
                class: 'fa-quote-expand',
                text: settings.label,
              }));
         
            $quotes.on('click', '.fa-quote-expand', function(event) {
              event.preventDefault();
         
              $(this)
                .closest('.fa-quote')
                .removeClass('fa-quote-collapsed');
            });
          };
         
          QuoteCollapse.prototype.collapse = function() {
            $quotes.each(function() {
              var $self = $(this);
         
              if ($self.height() > settings.height) {
                $self.addClass('fa-quote-collapsed');
              }
            });
          };
         
          return new QuoteCollapse();
        }(jQuery, {
          height: 400,
          label: 'Continuer la lecture',
        }));

Installation du CSS

Panneau d'administration > Affichage > Couleurs - Feuille de style CSS

 Ajoutez le code suivant à votre CSS :

    /** BEGIN Quote Collapse */
    .fa-quote-collapsed {
       display:block;
       height:200px;
       overflow:hidden;
       position:relative;
    }
    a.fa-quote-expand {
       display:none;
       position:absolute;
       z-index:1;
       left:50%;
       width:150px;
       margin-left:-75px;
       height:30px;
       line-height:30px;
       bottom:15px;
       text-align:center;
       text-decoration:none;
       color:inherit;
       background-color:#fff;
       border:1px #999 solid;
    }
    .fa-quote-collapsed a.fa-quote-expand {
       display: block;
    }
    /** END Quote Collapse */
À propos de l'auteur