Progress Bar dengan interval
const checkpoints = [
{
perc: 25,
label: "25%\n<b>2018</b>"
},
{
perc: 35,
label: "35%\n<b>2019</b>"
},
{
perc: 45,
label: "45%\n<b>2020</b>"
},
{
perc: 55,
label: "55%\n<b>2021</b>"
},
{
perc: 100,
label: "100%\n<b>2022</b>"
}
];
const step = 1;
const timeInterval = 100;
const playLabel = 'PLAY';
const pauseLabel = 'PAUSE';
//on document ready..
$(document).ready(()=>{
//shows checkpoints under the progressbar
for(checkpoint of checkpoints){
$('#rulers')
.append(`<p class='ruler' style='width:${checkpoint.perc}%;'>${checkpoint.label}</p>`);
}
//attaches click event handler to #playpause button
$('#playpause').on('click', (event)=>{ toggleButton( $(event.currentTarget) ) });
});
function toggleButton(playPauseButton){
const status = $(playPauseButton).attr('data-status');
//if the button was in pause state (and having the Play label)
if (status == "pausing"){
$(playPauseButton)
//toggles it to status 'playing'
.attr('data-status', 'playing')
//toggles it to "Pause" label
.text(pauseLabel);
//begins incrementing the progressbar
const intervals = checkpoints.map(cp => cp.perc);
setProgressWithCheckpoints(intervals, step, timeInterval);
}
//if the button was in playing state (and having the Pause label)
else if(status == 'playing'){
$(playPauseButton)
//toggles it to status 'pausing'
.attr('data-status', 'pausing')
//toggles it to "Play" label
.text(playLabel);
//if the progressbar is still running to complete its task,
if( isStillRunning() === true ){
//sets the playpause button as disabled so that you can't click it
$(playPauseButton).prop('disabled', true);
}
}
}
//set the progressbar at perc
function setProgress(perc){
$(".progress .progress-bar")
.css('width', `${perc}%`)
.attr('aria-valuenow', perc)
$(".progress .progress-bar span")
.text(`${perc}%`);
}
//get progressbar %
function getProgress(){
const valueNow = $(".progress .progress-bar")
.attr('aria-valuenow');
return parseInt(valueNow);
}
//return true/false if the progress is still running
function isStillRunning(){
if ( $('#playpause').attr('data-stillrunning') == 'yes' )
return true;
return false;
}
//sets the state stillrunning to yes
function setStillRunning(){
$('#playpause').attr('data-stillrunning', 'yes');
}
//sets the state stillrunning to no and enables the button (in case it was disabled)
function setNotStillRunning(){
$('#playpause')
.attr('data-stillrunning', 'no')
.prop('disabled', false);
if ( $('#playpause').attr('data-status') == 'playing' )
toggleButton( $('#playpause') );
}
function setProgressWithCheckpoints(intervals, step, ms){
setStillRunning();
const valueNow = getProgress();
const nextIntervals =
intervals.filter((interval) => interval > valueNow);
const nextInterval =
(nextIntervals.length > 0) ? nextIntervals[0] : null;
const newValue = Math.min(nextInterval, valueNow+step);
setProgress(newValue);
const playpauseStatus = $('#playpause').attr('data-status');
//if progress got to 100% OR
// nextInterval got reached while the play button is in pause state
if(newValue >= 100 || (nextInterval == newValue && playpauseStatus == 'pausing')){
//ends the calling and set the button as notStillRunning
setNotStillRunning();
}
//else
else
//call again the progress function
setTimeout(()=>{setProgressWithCheckpoints(intervals, step, ms)}, ms);
}
SAMER SAEID
