Aggiunta o rimozione di sezioni/diapositive a fullPage.js dopo l'inizializzazione

Question

Ho un database strutturato ad albero e nel mio sito web sto scendendo dall'albero mentre mostro il loro contenuto in "sezioni" e "diapositive" del plugin fullPage.js . Il problema è che quando aggiungo una nuova sezione a un elemento fullpage, non può far parte del plugin.

Il motivo per cui tracciamo l'albero in questo modo è che le distanze delle "foglie" dalla radice potrebbero non coincidere.

Tl; dr, voglio fare questo: https://github.com/alvarotrigo/fullPage.js/issues/41

Answer 1

Come detto nel link che pubblichi, fullpage.js non fornisce un modo diretto di farlo. L'unico modo è distruggere e inizializzare fullpage.js ogni volta che aggiungi una nuova sezione o diapositiva. Per evitare gli sbalzi, possiamo ricordare la sezione attiva e scorrere per inizializzare nuovamente con quei valori.

Reproduction online

init(); 

function init(){ 
    $('#fullpage').fullpage({ 
     sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    }); 
} 

//adding a section dynamically 
$('button').click(function(){ 
    $('#fullpage').append('<div class="section">New section</div>'); 

    //remembering the active section/slide 
    var activeSectionIndex = $('.fp-section.active').index(); 
    var activeSlideIndex = $('.fp-section.active').find('.slide.active').index(); 

    $.fn.fullpage.destroy('all'); 

    //setting the active section as before 
    $('.section').eq(activeSectionIndex).addClass('active'); 

    //were we in a slide? Adding the active state again 
    if(activeSlideIndex > -1){ 
     $('.section.active').find('.slide').eq(activeSlideIndex).addClass('active'); 
    } 

    init(); 
}); 

Sentitevi liberi di invite me to a coffee :)

Answer 2

Grazie, Alvaro! Voglio anche includere il mio approccio per rimuovere sezioni e diapositive.

Per rimuovere la sezione attiva in basso e vai alla sezione superiore:

$('#fullpage').on('click', 'button#removeSection', function() { 
    var section = $('.fp-section.active'); 
    $.fn.fullpage.moveSectionUp(); 
    setTimeout(function(){ 
     section.remove(); 
    }, 700); 
}); 

Per rimuovere l'ultima diapositiva e passare alla diapositiva a sinistra:

$('#fullpage').on('click', 'button#removeSlide', function() { 
    var slide = $('.fp-section.active').find('.slide.active'); 
    $.fn.fullpage.moveSlideLeft(); 
    setTimeout(function(){ 
     slide.remove(); 
    }, 700); 
}); 

700ms è l'animazione predefinita tempo. Dovremmo aspettare che il tempo di animazione passi, in modo da non vedere la sezione/diapositiva mentre viene rimossa (ciò che osserviamo come lampeggiante).

Answer 3

Avevo bisogno di fare qualcosa di simile ma con un po 'più di flessibilità. Ed era importante abilitare le sezioni sopra, senza spostare il contenuto della pagina corrente.

Ho appena iniziato a utilizzare FullPage.js quindi non ho provato alcun problema con altre funzionalità del plugin. Ma condivido il risultato qui.

È un po 'complicato, ma fa quello che mi serve! Esempi alla fine ...

ho dovuto modificare 2 linee di FullPage.js plugin:

function moveSectionUp(){ 
     var prev = $(SECTION_ACTIVE_SEL).prevAll(SECTION_SEL + ':first'); // <--- THIS 
     // var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL); // <--- INSTEAD OF THIS 

E

function moveSectionDown(){ 
     var next = $(SECTION_ACTIVE_SEL).nextAll(SECTION_SEL + ':first'); // <--- THIS 
     //var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL); // <--- INSTEAD OF THIS 

E queste sono le funzioni aggiunte:

fpInitSkipEl = function(funcSkipEl) { 

    if ($.isFunction(funcSkipEl)) { 
     var nextIndex = 0; 
     $('.section').each(function() { 
      nextIndex++; 
      $('a[href="#' + $(this).attr('data-anchor') + '"]').on('click', function() { 
       var dataAnchor = $(this).attr('href').toString().replace('#', ''); 
       return funcSkipEl($('.section').index($('.section.active')) + 1, $('.section').index($('.section[data-anchor="' + dataAnchor + '"]')) + 1); 
      }); 
     }); 
    } 

} 

fpSkipEl = function(anchorsToSkip, index, nextIndex) { 
    //debugger; 
    $('.section').each(function() { 
     if (anchorsToSkip.indexOf($(this).attr('data-anchor')) > -1 
      && (index==-1 || $(this).attr('data-anchor') != $('.section').eq(index - 1).attr('data-anchor')) 
      && (nextIndex==-1 || $(this).attr('data-anchor') != $('.section').eq(nextIndex - 1).attr('data-anchor'))) { 

      $(this).css('display', 'none').removeClass('fp-section'); 
     } else { 

      $(this).css('display', '').addClass('fp-section'); 
     } 
     $.fn.fullpage.reBuild(); 
    }); 

} 


fpGetRealIndex = function(index) { 
    var realIndex = 0; 
    $('.section').each(function() { 
     realIndex++; 
     if ($(this).hasClass('fp-section')) index--; 
     if (index == 0) return false; 
    }); 
    return realIndex; 
} 

L'utilizzo principale è questo:

fpInitSkipEl(function(index, nextIndex) { 
    // Fire on anchor Click 
    // You can play with index (the current section) and nextIndex (the next section) 

    if (index==1 && nextIndex==4) { 
     fpSkipEl(['page2', 'page3'], index, nextIndex); 

    } 
}); 

E init e impostare la logica su afterLoad

$('#fullpage').fullpage({ 
    anchors: ['page1', 'page2', 'page3', 'page4'], 
    afterLoad: function(anchorLink, index) { 
      // Get the real index with the hidden sections, oterwise index is relative to the visible sections. 
      var realIndex = fpGetRealIndex(index); 

      fpSkipEl([], -1, -1); // Show all sections 
     } 
    }); 

The simple working example on JSFiddle

A more complex example on JSFiddle