asmerkin / slideform

A JQuery Sliders Form
https://asmerkin.github.io/slideform
21 stars 8 forks source link

[feat. suggestion] Adding / Removing slides #4

Open jarodium opened 4 years ago

jarodium commented 4 years ago

Hello,

I have a use case where I need to add and remove slides. This is why I would like to suggest that feature.

While the feature does not land, how can I trigger the re-render of the progress bar and internal counting of the plugin?

jarodium commented 4 years ago

I was able to fashion a function to add slides. It can re-render the progress bar and the internal counting, but it causes a glitch in which, if I add a slide after the current one, the current one, goes up and down. Maybe it is the height adjustment...

asmerkin commented 4 years ago

Can you show a PR?

jarodium commented 4 years ago

I'm afraid I can't since I have forked it. Besides, I didn't changed the original code. I just did this:

    var STEP = $("#example-manipulation");
    var TOTAL_STEPS = $("#example-manipulation h3").length;

    function addStep() { 
      //4 is there to illustrate insert at index
         $("#example-manipulation").steps('insert',4,{ 
             title: "..", 
             content: '..'  
         });
         TOTAL_STEPS++;        
    }

    STEP.steps({
         ...
         onStepChanged: function (event, currentIndex, priorIndex) {
                    let perc = ((currentIndex+1)*100)/TOTAL_STEPS;
                    $(".progress-bar").attr('aria-valuenow',perc.toFixed(0)).css("width",perc.toFixed(0)+"%");
         },
         onInit:    function (event, currentIndex, priorIndex) {
                    let perc = ((currentIndex+1)*100)/TOTAL_STEPS;
                    $(".progress-bar").attr('aria-valuenow',perc.toFixed(0)).css("width",perc.toFixed(0)+"%");
         }

This is a pretty hackish way to do it. At least it would be great to know which step / percentage I am in the current step. The update of the component can be handled by the developer.