Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Page 3 sur 3 Précédent  1, 2, 3

Voir le sujet précédent Voir le sujet suivant Aller en bas

En cours Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Message par demeter1 le Lun 7 Nov 2016 - 16:56

Rappel du premier message :

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://altitudetropicale.forums-actifs.com/index.forum

Description du problème

Bonjour à tous,
J'utilise sur le forum un système de pagination concocté par Ea qui permet de segmenter du texte ou des suites d' images en plusieurs parties.

Voici le tutoriel :
http://forum.forumactif.com/t355762-pagination-dans-un-message?highlight=pagination

L'utilisation de ce système a été motivé par le fait qu'il permet de différer le chargement des images pour ceux qui ont une connexion défaillante.

Mes membres étant un peu fainéants (comme tous les membres des diverses communautés Clin d\'oeil ), j'ai eu dans l'idée d'automatiser le système. jusqu'ici, je m'occupai de l'édition du message et de l'apposition de la balise vu que personne ne se donnait la peine de le faire.

Résultat : l'administrateur essaye lui aussi de pouvoir faire preuve de fainéantise en automatisant le système Siffleur .

Avec l'aide de Milouze14, nous en sommes arrivé à ce js qui permet de donner une id aux images et qui positionne le bbcode page après une séquence de 6 images

Voici le js dans son intégralité :

Code:
$(function() {
   $('div.postbody').each(function() {
      $(this).find('div').first().find('img:not("[longdesc]")').attr('id', function(img) {
         return 'M14_img_' + img;
      })
   });
   $('img[id^="M14_img"]').unwrap();
});

$(function() {
   $('div.postbody').each(function() {

$(this).find('img[id^="M14_img"]').length;
$(this).find('img[id="M14_img_0"]').before('<div> ');
$(this).find('img[id="M14_img_6"]').before('[page]');
$(this).find('img[id="M14_img_12"]').before('[page]');
$(this).find('img[id="M14_img_18"]').before('[page]');
$(this).find('img[id="M14_img_24"]').before('[page]');
$(this).find('img[id="M14_img_30"]').before('[page]');
$(this).find('img[id^="M14_img"]:last').after('</div>');


   });
});

Tout fonctionne à merveille hormis sur ces deux lignes du js
Code:
$(this).find('img[id="M14_img_0"]').before('<div> ');
et
Code:
$(this).find('img[id^="M14_img"]:last').after('</div>');

L'apposition de la div a été motivée pour isoler la partie paginée du reste du message qui n'a pas à subir de pagination. Avec le système actuel (juste le js de Ea), j'édite le message , j'appose le bbcode page et j'entoure le tout avec un quote pour isoler la séquence à paginer.

En l'état ,ce nouveau js appose bien l'ouverture et la fermeture mais n'arrive pas à l' interpréter.

On a essayé avec du bbcode (balise center ou quote) et du html mais le résultat à été identique.

Dans le js d'Ea, le contenu du postbody est entouré par une div :
Code:
<div class="postpage"></div>
ce qui explique trés certainement la difficulté de cloisonner la séquence contenant les images.

Une démo sera peu être plus parlante
http://altitudetest.forumactif.com/t91-essai-post-photos

sur le premier message nous avons :
- du texte qui ne doit pas être paginé
- la partie paginée constituée par des images avec du texte
- du texte qui ne doit pas être paginé

Afin que cela soit parlant, j'ai installé le bbcode center à la place de la div pour que vous puissiez voir le bbcode affiché en brut et, qui n'est pas interprété.

En faisant fonctionner le système de pagination, vous verrez que le texte du haut et celui du bas font partie intégrante de ce qui est paginé.

Ma question : est-il possible de modifier le script de Ea pour qu'il n'agisse qu'au niveau de la séquence contenant les image auxquelles on a attribué une id ? .


Merci par avance à celles et ceux qui s'intéresseront au sujet.



Dernière édition par demeter1 le Mar 15 Nov 2016 - 14:16, édité 4 fois
avatar

demeter1
+ Hyperactif +

Masculin
Messages : 8325
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Message par demeter1 le Sam 4 Mar 2017 - 13:06

up
avatar

demeter1
+ Hyperactif +

Masculin
Messages : 8325
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Message par demeter1 le Jeu 9 Mar 2017 - 19:45

ula-up barba-up
avatar

demeter1
+ Hyperactif +

Masculin
Messages : 8325
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Message par demeter1 le Mar 14 Mar 2017 - 16:42

up
avatar

demeter1
+ Hyperactif +

Masculin
Messages : 8325
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Message par demeter1 le Ven 17 Mar 2017 - 17:53

up.

Allez, encore un effort pour les 5000 vus Wink
avatar

demeter1
+ Hyperactif +

Masculin
Messages : 8325
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Message par [Nihil] le Ven 17 Mar 2017 - 18:10

Bonjour,

J'attrape le sujet en cours Smile
Le dernier avancement est ici c'est bien ça ? http://forum.forumactif.com/t388766p30-pagination-automatique-sur-les-images-script-fonctionnel-sauf-sur-un-pointl#3275815

La démo est toujours ici ?
Une démo sera peu être plus parlante
http://altitudetest.forumactif.com/t91-essai-post-photos
avatar

[Nihil]
# Tropactif #

Messages : 1182
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

En cours Re: Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Message par demeter1 le Ven 17 Mar 2017 - 19:21

Bonjour Nihi,
merci d'avoir répondu à cette demande d'aide.

le script est toujours en fonctionnement sur le forum de test
http://altitudetest.forumactif.com/t91-essai-post-photos

Rappel du script



Code:
document.addEventListener('DOMContentLoaded', function () {
    var a, b, c, d, e,f, last, l, postbody = document.getElementsByClassName('postbody');
    for (l = 0; l < postbody.length; l++) {
        a = postbody[l];
        b = a.getElementsByTagName('img');
        last = b[b.length - 1].parentNode.nodeName == 'A' ? b[b.length - 1].parentNode : b[b.length - 1];
        for (c = 0; c < b.length; c++) {
         
            d = b[c];
            e = a.innerHTML;
            f = d.parentNode.nodeName == 'A' ? d.parentNode : d;
            (!d.hasAttribute('longdesc') && d.src.indexOf('smiles') == -1) && (d.id = 'M14_img_' + c);
            (b.length > 1 && /M14_img_0/.test(d.id)) && (f.insertAdjacentHTML('beforebegin', '[center]'));
            /M14_img_6/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            /M14_img_12/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            /M14_img_18/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            /M14_img_24/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            /M14_img_30/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            (b.length > 1 && last.id.indexOf('M14_img_') != -1 )&& (last.insertAdjacentHTML('afterend', '[/center]'));
            e.match(/\[center\]/g) && (a.innerHTML = e.replace(/\[center\]/, '<center>'));
            e.match(/\[\/center\]g/) && (a.innerHTML = e.replace(/\[\/center\]/, '</center>'));
        }
    }
});
document.addEventListener('DOMContentLoaded', function () {
  var x= "div.postbody";
  if($("#text_editor_textarea").length && $.sceditor) {
    $(function() {
      if(!$("#text_editor_textarea").sceditor("instance")) {
        return
      }
      $('<a class="sceditor-button" unselectable="on" title="Page"><div unselectable="on" style="background:url(http://i.imgur.com/a3RgTJc.gif);opacity:1">Page</div></a>').insertAfter(".sceditor-button-fahide").click(function(e) {
        $("#text_editor_textarea").sceditor("instance").insertText("[page]")
      })
    })
  }
  var c, y, g = function(a) {
    var b;
    a = document.createElement(a);
    b = "getComputedStyle" in window;
    document.body.appendChild(a);
    b = (b ? window.getComputedStyle(a, "") : a.currentStyle).display;
    document.body.removeChild(a);
    return b
  }, t = function(o) {
    if(o.tagName == "CODE") {
      return
    }
    if(!o.hasChildNodes()) {
      return
    }
    var a = 0;
    var p = [0];
    var i;
    for(i = 0;i < o.childNodes.length;i++) {
      c = o.childNodes[i];
      if(c.nodeType == 1) {
        p.push(c);
        t(c)
      }else {
        if(c.nodeType == 3 && c.nodeValue.indexOf("[page]") != -1) {
          while((y = c.nodeValue.indexOf("[page]")) != -1) {
            if(y != 0) {
              p.push(document.createTextNode(c.nodeValue.substr(0, y)))
            }
            p.push(0);
            a++;
            c.nodeValue = c.nodeValue.substr(y + 6)
          }
          p.push(c)
        }else {
          p.push(c)
        }
      }
    }
    if(a == 0) {
      return
    }
    var b = g(o.tagName) == "block";
    for(i = 0;i < p.length;i++) {
      if(p[i] === 0) {
        y = document.createElement(b ? "DIV" : "SPAN");
        y.className = "postpage";
        o.appendChild(y)
      }else {
        y.appendChild(p[i])
      }
    }
    $("> .postpage", o).not(":first").hide();
    y = document.createElement(b ? "DIV" : "SPAN");
    y.className = "postpagination";
    $(y).append('<span class="pp_current">1</span><span>2</span>');
    if(a > 1) {
      $(y).append("<span>... " + (a + 1) + "</span>")
    }
    if(b) {
      $(y).append('<span class="pp_next">Suivant</span><span class="pp_all">Voir tout</span>')
    }else {
      $(y).append('<span class="pp_next"></span>')
    }
    o.appendChild(y);
    $(y).on("click", "span", function() {
      if($(this).hasClass("pp_all")) {
        $(this).parent().parent().children().show();
        $(this).parent().remove();
        return
      }
      var pagin = $(this).parent();
      var num = parseInt($(".pp_next", pagin).prev().text().replace(/ ?\.\.\. ?/, ""));
      var cur = parseInt($(".pp_current", pagin).text().replace(/ ?\.\.\. ?/, ""));
      if($(this).hasClass("pp_next")) {
        cur += 1
      }else {
        cur = parseInt($(this).text().replace(/ ?\.\.\. ?/, ""))
      }
      if(cur < 1) {
        cur = 1
      }else {
        if(cur > num) {
          cur = num
        }
      }
      $(".pp_next", pagin).prevUntil().remove();
      if(cur < num - 1) {
        $(pagin).prepend("<span>... " + num + "</span>")
      }else {
        if(cur == num) {
          $(pagin).prepend('<span class="pp_current">' + num + "</span>")
        }
      }
      if(cur < num) {
        $(".pp_next", pagin).show();
        $(pagin).prepend('<span class="pp_current">' + cur + "</span><span>" + (cur + 1) + "</span>")
      }else {
        $(".pp_next", pagin).hide()
      }
      if(cur > 1) {
        $(pagin).prepend("<span>" + (cur - 1) + "</span>");
        if(cur > 2) {
          $(pagin).prepend("<span>1 ...</span>")
        }
      }
      $(".postpage", $(pagin).parent()).hide();
      $(".postpage", $(pagin).parent()).eq(cur - 1).show()
    })
  };
  $(x).each(function() {
    t(this)
  })
});


Les soucis :
1 la balise center bien qu'étant affichée se comporte comme du texte brut et non comme une balise bbcode (contrairement à la balise page qui agit correctement).
2 Un texte inclus en fin est automatiquement intégré à la pagination (ce dernier soucis est relatif à la non prise en compte du bbcode.

Merci encore d'avoir répondu à mon appel. ok
avatar

demeter1
+ Hyperactif +

Masculin
Messages : 8325
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Message par [Nihil] le Sam 18 Mar 2017 - 0:10

On va commencer par mon avis sur le premier point.

Je vais essayer d'expliquer à ma manière ce que je pense, j'espère être claire mais il ne faut pas hésiter s'il y a des questions (je vais aussi peut-être dire des évidences pour vous, j'essaye simplement d'expliquer ma pensée). Smile

Pourquoi cette différence de comportement entre "center" et "page" ?
Quand dans un message on met du bbcode "center", forumactif le transforme ensuite en html.

Ainsi un message avec :
Code:
[center]test[/center]

donnera ceci sur la page HTML
Code:
<div align="center">test</div>

Cette transformation est faite par forumactif lui même, au moment d'afficher le contenu du message.

---

Par contre, si dans un message j'écris ceci :
Code:
[page]test[/page]

Dans ma page HTML j'aurai toujours ce même texte d'affiché
Code:
[page]test[/page]

La balise bbcode "page" ne fonctionne que grâce à l'ajour du code javascript qui rajoute la balise Smile

---
Dans un cas on a donc :
-> center, transformé par forumactif. Cela se fait donc avant que la page soit chargée, quand le serveur transforme le message pour en faire du beau HTML !
-> page, transformé par le javascript. Cela se fait donc une fois que la page est chargée.

---
C'est pour ça que quand en javascript on ajoute center, il n'est pas transformé ensuite. Car il n'est transformé que quand on affiche le message dans la HTML.
Or là, on ajoute la balise center après que la page soit chargée, grâce à du javascript.

J'ai pu voir dans le javascript ceci :
Code:
e.match(/\[center\]/g) && (a.innerHTML = e.replace(/\[center\]/, '<center>'));
e.match(/\[\/center\]g/) && (a.innerHTML = e.replace(/\[\/center\]/, '</center>'));
Je suppose que cela sert normalement à remplacer par une balise bbcode center pour en faire du HTML. Je n'ai pas regardé pourquoi ça ne fonctionnait pas, mais je trouve ça dommage de rajouter du bbcode center, pour ensuite le transformer en balise HTML. Sans lancer le code, en regardant, je dirais que c'est par ce que la valeur de la balise "e" est égale à a.innerHTML à un moment "t". Saud que la balise bbcode center est rajoutée après le moment "t". Quand on regarde s'il y a la balise bbcode center dans la variable "e", elle n'est pas encore dedans Smile
Il me semble plus léger de mettre directement du html Smile
Cela évite de demander trop de travail au navigateur, non ?

Plutôt que d'ajouter une balise center, on doit donc ajouter le html pour center.
C'est-à-dire :

Code:
<div align="center">
à la place de
Code:
[center]

et ensuite
Code:
</div>
à la place de :
Code:
[/center]

et du coup on pourrait aussi enlever les 2 lignes qui changeaient le bbcode en balise center.

J'espère que ma réponse pourra déjà aider !

Bonne soirée
avatar

[Nihil]
# Tropactif #

Messages : 1182
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

En cours Re: Pagination automatique sur les images (script fonctionnel sauf sur un pointl)

Message par demeter1 le Mer 22 Mar 2017 - 16:53

Bonjour Nihi,
désolé pour ce retard de correspondance.

j'ai modifié le script (en espérant ne pas m'être trompé sur les modifs ::moitimide:: )
Code:
document.addEventListener('DOMContentLoaded', function () {
    var a, b, c, d, e,f, last, l, postbody = document.getElementsByClassName('postbody');
    for (l = 0; l < postbody.length; l++) {
        a = postbody[l];
        b = a.getElementsByTagName('img');
        last = b[b.length - 1].parentNode.nodeName == 'A' ? b[b.length - 1].parentNode : b[b.length - 1];
        for (c = 0; c < b.length; c++) {
         
            d = b[c];
            e = a.innerHTML;
            f = d.parentNode.nodeName == 'A' ? d.parentNode : d;
            (!d.hasAttribute('longdesc') && d.src.indexOf('smiles') == -1) && (d.id = 'M14_img_' + c);
            (b.length > 1 && /M14_img_0/.test(d.id)) && (f.insertAdjacentHTML('beforebegin', '<div align="center">'));
            /M14_img_6/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            /M14_img_12/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            /M14_img_18/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            /M14_img_24/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            /M14_img_30/.test(d.id) && (f.insertAdjacentHTML('beforebegin', '[page]'));
            (b.length > 1 && last.id.indexOf('M14_img_') != -1 )&& (last.insertAdjacentHTML('afterend', '</div>'));
            e.match(/\[center\]/g) && (a.innerHTML = e.replace(/\[center\]/, '<div align="center">'));
            e.match(/\[\/center\]g/) && (a.innerHTML = e.replace(/\[\/center\]/, '</div>'));
        }
    }
});
document.addEventListener('DOMContentLoaded', function () {
  var x= "div.postbody";
  if($("#text_editor_textarea").length && $.sceditor) {
    $(function() {
      if(!$("#text_editor_textarea").sceditor("instance")) {
        return
      }
      $('<a class="sceditor-button" unselectable="on" title="Page"><div unselectable="on" style="background:url(http://i.imgur.com/a3RgTJc.gif);opacity:1">Page</div></a>').insertAfter(".sceditor-button-fahide").click(function(e) {
        $("#text_editor_textarea").sceditor("instance").insertText("[page]")
      })
    })
  }
  var c, y, g = function(a) {
    var b;
    a = document.createElement(a);
    b = "getComputedStyle" in window;
    document.body.appendChild(a);
    b = (b ? window.getComputedStyle(a, "") : a.currentStyle).display;
    document.body.removeChild(a);
    return b
  }, t = function(o) {
    if(o.tagName == "CODE") {
      return
    }
    if(!o.hasChildNodes()) {
      return
    }
    var a = 0;
    var p = [0];
    var i;
    for(i = 0;i < o.childNodes.length;i++) {
      c = o.childNodes[i];
      if(c.nodeType == 1) {
        p.push(c);
        t(c)
      }else {
        if(c.nodeType == 3 && c.nodeValue.indexOf("[page]") != -1) {
          while((y = c.nodeValue.indexOf("[page]")) != -1) {
            if(y != 0) {
              p.push(document.createTextNode(c.nodeValue.substr(0, y)))
            }
            p.push(0);
            a++;
            c.nodeValue = c.nodeValue.substr(y + 6)
          }
          p.push(c)
        }else {
          p.push(c)
        }
      }
    }
    if(a == 0) {
      return
    }
    var b = g(o.tagName) == "block";
    for(i = 0;i < p.length;i++) {
      if(p[i] === 0) {
        y = document.createElement(b ? "DIV" : "SPAN");
        y.className = "postpage";
        o.appendChild(y)
      }else {
        y.appendChild(p[i])
      }
    }
    $("> .postpage", o).not(":first").hide();
    y = document.createElement(b ? "DIV" : "SPAN");
    y.className = "postpagination";
    $(y).append('<span class="pp_current">1</span><span>2</span>');
    if(a > 1) {
      $(y).append("<span>... " + (a + 1) + "</span>")
    }
    if(b) {
      $(y).append('<span class="pp_next">Suivant</span><span class="pp_all">Voir tout</span>')
    }else {
      $(y).append('<span class="pp_next"></span>')
    }
    o.appendChild(y);
    $(y).on("click", "span", function() {
      if($(this).hasClass("pp_all")) {
        $(this).parent().parent().children().show();
        $(this).parent().remove();
        return
      }
      var pagin = $(this).parent();
      var num = parseInt($(".pp_next", pagin).prev().text().replace(/ ?\.\.\. ?/, ""));
      var cur = parseInt($(".pp_current", pagin).text().replace(/ ?\.\.\. ?/, ""));
      if($(this).hasClass("pp_next")) {
        cur += 1
      }else {
        cur = parseInt($(this).text().replace(/ ?\.\.\. ?/, ""))
      }
      if(cur < 1) {
        cur = 1
      }else {
        if(cur > num) {
          cur = num
        }
      }
      $(".pp_next", pagin).prevUntil().remove();
      if(cur < num - 1) {
        $(pagin).prepend("<span>... " + num + "</span>")
      }else {
        if(cur == num) {
          $(pagin).prepend('<span class="pp_current">' + num + "</span>")
        }
      }
      if(cur < num) {
        $(".pp_next", pagin).show();
        $(pagin).prepend('<span class="pp_current">' + cur + "</span><span>" + (cur + 1) + "</span>")
      }else {
        $(".pp_next", pagin).hide()
      }
      if(cur > 1) {
        $(pagin).prepend("<span>" + (cur - 1) + "</span>");
        if(cur > 2) {
          $(pagin).prepend("<span>1 ...</span>")
        }
      }
      $(".postpage", $(pagin).parent()).hide();
      $(".postpage", $(pagin).parent()).eq(cur - 1).show()
    })
  };
  $(x).each(function() {
    t(this)
  })
});

Alors :
- le centrage est effectif sur le premier message mais pas sur les messages suivants.
- la balise d'ouverture center disparait mais bizarrement la fermeture s'affiche sous format bbcode (voir page 3 du premier message)

Merci encore pour cette aide et milles excuses encore pour ce retard.
avatar

demeter1
+ Hyperactif +

Masculin
Messages : 8325
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Page 3 sur 3 Précédent  1, 2, 3

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum