Skip to content

Amélioration page par page

jbarbin edited this page Apr 8, 2013 · 6 revisions

Découpage des paragraphes en fin/début de page

Actuellement, lorsqu'un paragraphe n'est pas affiché en entier sur l'écran, il est retiré afin d'être affiché sur la page suivante/précédente. Il faudrait améliorer l'affichage des paragraphes afin de découper ceux-ci et permettre de remplir l'écran.

La solution que nous avons commencer à mettre en place est l'affichage mot à mot des derniers/premiers paragraphes afin d'afficher le paragraphe en partie pour remplir l'écran.

Deux fonctions ont été ajoutées dans le fichier "navigate.js" afin de découper le dernier/premier paragraphe affiché.

Ces fonctions sont appelées lorsqu'un paragraphe n'est pas affiché entièrement à l'écran dans :

  • la fonction nextParagraphs
  • la fonction previousParagraphs

` function displayFirstParagraph(paragraphNumber) { var temp = document.getElementById('completeChapter').contentDocument; var ael = temp.getElementsByTagName("p");

var paragraphToDisplay = ael[paragraphNumber].cloneNode(true); var paragraphText = paragraphToDisplay.innerHTML;

var paragraphWords = paragraphText.split(" ");

var paragraph = document.createElement("p"); paragraph.id = "paragraph".concat(paragraphNumber);

for(var i = lastWord, c = paragraphWords.length ; i < c ; i++) { var word = paragraphWords[i]; paragraph.innerHTML = paragraph.innerHTML.concat(" ".concat(word)); document.getElementById("paragraphs").appendChild(paragraph);

if(paragraph instanceof Element) 
{
  var p = elementInViewport(paragraph);

  if(!p) 
  {
    paragraph.innerHTML = paragraph.innerHTML.replace(" ".concat(word), "");
    break;
  }
}

} }

function displayLastParagraph(paragraphNumber) { var temp = document.getElementById('completeChapter').contentDocument; var ael = temp.getElementsByTagName("p");

var paragraphToDisplay = ael[paragraphNumber].cloneNode(true); var paragraphText = paragraphToDisplay.innerHTML;

var paragraphWords = paragraphText.split(" ");

var paragraph = document.createElement("p"); paragraph.id = "paragraph".concat(paragraphNumber);

for(var i = 0, c = paragraphWords.length ; i < c ; i++) { var word = paragraphWords[i]; paragraph.innerHTML = paragraph.innerHTML.concat(" ".concat(word)); document.getElementById("paragraphs").appendChild(paragraph);

if(paragraph instanceof Element) 
{
  var p = elementInViewport(paragraph);

  if(!p) 
  {
    paragraph.innerHTML = paragraph.innerHTML.replace(" ".concat(word), "");
	lastWord = i;
    break;
  }
}

} } `

Il reste à mettre en place un système de sauvegarde du dernier mot affiché dans le paragraphe découpé. Ainsi, au passage aux paragraphes suivant, le paragraphes découpé précédemment pourra reprendre où il a été découpé.

Clone this wiki locally