Imposition 2-up : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(Page créée avec « container = document.getElementsByClassName("pagedjs_pages")[0]; container.style.display = "flex"; <syntaxhighlight lang="javascript"> // on enlève la marge de gauche d... »)
 
 
(5 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 +
À utiliser dans une mise en page type paged.js. 
 +
Attention, pour octomode, prendre l'URL de l'iframe où se trouve réellement les pages! 
 +
Copier/coller le tout dans la Console de l'Inspecteur d'élément.
 +
 +
<syntaxhighlight lang="javascript">
 +
// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
 
container = document.getElementsByClassName("pagedjs_pages")[0];
 
container = document.getElementsByClassName("pagedjs_pages")[0];
 
container.style.display = "flex";
 
container.style.display = "flex";
  
 +
// on enlève la marge de gauche de la première page
 +
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
 +
firstpage.style.marginLeft = 0;
 +
 +
// on récupère les pages du document dans un Array
 +
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
 +
// on enregiste le nombre de pages total dans une variable
 +
nb_pages = pages.length;
 +
 +
// on crée un Array vide qui accueillera les pages dans le nouvel ordre d'imposition
 +
new_pages = []
 +
 +
// on enregistre dans un nouvel Array à chaque fois la dernière et première page, puis la première et dernière page, et on les enlève de la liste initiale de pages.
 +
for(p = 0; p < nb_pages; p++){
 +
    if(p%2) {
 +
    new_pages.push(pages[0]);
 +
    pages.shift();
 +
    new_pages.push(pages[pages.length - 1]);
 +
    pages.pop();
 +
    } else {
 +
    new_pages.push(pages[pages.length - 1]);
 +
    pages.pop();
 +
        new_pages.push(pages[0]);
 +
    pages.shift();
 +
    }
 +
   
 +
 +
}
 +
 +
// On applique en CSS l'ordre des pages de la nouvelle liste de pages
 +
for (p=0; p < new_pages.length; p++) {
 +
    new_pages[p].style.order = p;
 +
}
 +
 +
 +
</syntaxhighlight>
 +
 +
 +
mode Bonus où on peut choisir le nombre de pages par cahier au début du script:
  
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 +
 +
nb_pages_cahier = 16
 +
 +
// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
 +
container = document.getElementsByClassName("pagedjs_pages")[0];
 +
container.style.display = "flex";
 +
 
// on enlève la marge de gauche de la première page
 
// on enlève la marge de gauche de la première page
 
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
 
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
 
firstpage.style.marginLeft = 0;
 
firstpage.style.marginLeft = 0;
  
−
// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
+
// on récupère les pages du document dans un Array
 
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
 
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
 +
console.log(pages);
 +
// on enregiste le nombre de pages total dans une variable
 
nb_pages = pages.length;
 
nb_pages = pages.length;
  
 +
// on crée un Array vide qui accueillera les pages dans le nouvel ordre d'imposition
 
new_pages = []
 
new_pages = []
  
−
// on enregistre dans un nouvel Array à chaque fois la première page, la dernière page, et on les enlève de la première liste de pages.
+
// on enregistre dans un nouvel Array à chaque fois la dernière et première page, puis la première et dernière page, et on les enlève de la liste initiale de pages.
−
for(p = 0; p < nb_pages; p++){
+
nb_cahiers = Math.ceil(nb_pages / nb_pages_cahier);
−
    new_pages.push(pages[0]);
+
for(c = 1; c <= nb_cahiers; c++){
−
    pages.shift();
+
    cahier = pages.splice(0, nb_pages_cahier);
−
    new_pages.push(pages[pages.length - 1]);
+
           
−
    pages.pop();
+
    for(p = 0; p < nb_pages_cahier/2; p++){
 +
 
 +
        if(p%2) {
 +
new_pages.push(cahier[0]);
 +
            cahier.shift();
 +
 
 +
            new_pages.push(cahier[cahier.length - 1]);
 +
            cahier.pop();
 +
 
 +
        } else {
 +
      new_pages.push(cahier[cahier.length - 1]);
 +
            cahier.pop();    
 +
            new_pages.push(cahier[0]);
 +
            cahier.shift();
 +
 
  
 +
        }
 +
    }
 
}
 
}
−
 
 
// On applique en CSS l'ordre des pages de la nouvelle liste de pages
 
// On applique en CSS l'ordre des pages de la nouvelle liste de pages
 
for (p=0; p < new_pages.length; p++) {
 
for (p=0; p < new_pages.length; p++) {
Ligne 28 : Ligne 98 :
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
[[Catégorie:Imposition]]
 +
[[Catégorie:Stéphanie]]

Version actuelle datée du 7 novembre 2024 à 17:49

À utiliser dans une mise en page type paged.js. Attention, pour octomode, prendre l'URL de l'iframe où se trouve réellement les pages! Copier/coller le tout dans la Console de l'Inspecteur d'élément. 

// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
container = document.getElementsByClassName("pagedjs_pages")[0];
container.style.display = "flex";

// on enlève la marge de gauche de la première page
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
firstpage.style.marginLeft = 0;

// on récupère les pages du document dans un Array
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
// on enregiste le nombre de pages total dans une variable
nb_pages = pages.length;

// on crée un Array vide qui accueillera les pages dans le nouvel ordre d'imposition
new_pages = []

// on enregistre dans un nouvel Array à chaque fois la dernière et première page, puis la première et dernière page, et on les enlève de la liste initiale de pages.
for(p = 0; p < nb_pages; p++){
    if(p%2) {
    	new_pages.push(pages[0]);
    	pages.shift();
    	new_pages.push(pages[pages.length - 1]);
    	pages.pop();	
    } else {
    	new_pages.push(pages[pages.length - 1]);
    	pages.pop();
        new_pages.push(pages[0]);
    	pages.shift();
    }
    

}

// On applique en CSS l'ordre des pages de la nouvelle liste de pages
for (p=0; p < new_pages.length; p++) {
    new_pages[p].style.order = p;
}


mode Bonus où on peut choisir le nombre de pages par cahier au début du script: 

nb_pages_cahier = 16

// on met le div pagedjs_page en "display:flex" pour pouvoir changer l'ordre des pages
container = document.getElementsByClassName("pagedjs_pages")[0];
container.style.display = "flex";

// on enlève la marge de gauche de la première page
firstpage = document.getElementsByClassName("pagedjs_first_page")[0];
firstpage.style.marginLeft = 0;

// on récupère les pages du document dans un Array
pages = [].slice.call(document.getElementsByClassName("pagedjs_page"));
console.log(pages);
// on enregiste le nombre de pages total dans une variable
nb_pages = pages.length;

// on crée un Array vide qui accueillera les pages dans le nouvel ordre d'imposition
new_pages = []

// on enregistre dans un nouvel Array à chaque fois la dernière et première page, puis la première et dernière page, et on les enlève de la liste initiale de pages.
nb_cahiers = Math.ceil(nb_pages / nb_pages_cahier);
for(c = 1; c <= nb_cahiers; c++){
    cahier = pages.splice(0, nb_pages_cahier);
            
    for(p = 0; p < nb_pages_cahier/2; p++){

        if(p%2) {
			new_pages.push(cahier[0]);
            cahier.shift();
  
            new_pages.push(cahier[cahier.length - 1]);
            cahier.pop();	

        } else {
      		new_pages.push(cahier[cahier.length - 1]);
            cahier.pop();      
            new_pages.push(cahier[0]);
            cahier.shift();


        }
    }
}
// On applique en CSS l'ordre des pages de la nouvelle liste de pages
for (p=0; p < new_pages.length; p++) {
    new_pages[p].style.order = p;
}
Récupérée de « https://designnumerique.be/w/index.php?title=Imposition_2-up&oldid=4744 »