You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.0 KiB
111 lines
3.0 KiB
(function($) { |
|
|
|
jQuery.fn.progressBar = function( options ) { |
|
|
|
//Default values for progress_bar |
|
var defaults = { |
|
height : "30", |
|
backgroundColor : "#E0E0E0", |
|
barColor : "#F97352", |
|
targetBarColor : "#CCC", |
|
percentage : true, |
|
shadow : false, |
|
border : false, |
|
animation : false, |
|
animateTarget : false, |
|
}; |
|
|
|
var settings = $.extend( {}, defaults, options ); |
|
|
|
return this.each( function() { |
|
var elem = $( this ); |
|
$.fn.replaceProgressBar( elem, settings ); |
|
}); |
|
}; |
|
|
|
$.fn.replaceProgressBar = function( item, settings ) { |
|
var skill = item.text(); |
|
var progress = item.data( 'width' ); |
|
var target = item.data ( 'target' ); |
|
var bar_classes = ' '; |
|
var animation_class = ''; |
|
var bar_styles = 'background-color:' + settings.backgroundColor + ';height:' + settings.height + 'px;'; |
|
if ( settings.shadow ) { bar_classes += 'shadow'; } |
|
if ( settings.border ) { bar_classes += ' border'; } |
|
if ( settings.animation ) { animation_class = ' animate'; } |
|
|
|
var overlay = '<div class="sonny_progressbar' + animation_class + '" data-width="' + progress + '">'; |
|
overlay += '<p class="title">' + skill + '</p>'; |
|
overlay += '<div class="bar-container' + bar_classes + '" style="' + bar_styles + '">'; |
|
|
|
// Render the progress bar background |
|
overlay += '<span class="backgroundBar"></span>'; |
|
|
|
// Display target bar only if set |
|
if ( target ) { |
|
if ( settings.animateTarget ) { |
|
overlay += '<span class="targetBar loader" style="width:' + target + '%;background-color:' + settings.targetBarColor + ';"></span>'; |
|
} |
|
else { |
|
overlay += '<span class="targetBar" style="width:' + target + '%;background-color:' + settings.targetBarColor + ';"></span>'; |
|
} |
|
} |
|
|
|
// Render the progress bar |
|
if ( settings.animation ) { |
|
overlay += '<span class="bar" style="background-color:' + settings.barColor + ';"></span>'; |
|
} |
|
else { |
|
overlay += '<span class="bar" style="width:' + progress + '%;background-color:' + settings.barColor + ';"></span>'; |
|
} |
|
|
|
// Render the percentage if enabled |
|
if ( settings.percentage ) { |
|
overlay += '<span class="progress-percent" style="line-height:' + settings.height + 'px;">' + progress + '%</span>'; |
|
} |
|
|
|
// End |
|
overlay += '</div></div>'; |
|
|
|
// Render the progress bar on the page |
|
$( item ).replaceWith( overlay ); |
|
|
|
}; |
|
|
|
var animate = function() { |
|
|
|
var doc_height = $(window).height(); |
|
|
|
$( '.sonny_progressbar.animate' ).each( function() { |
|
var position = $( this ).offset().top; |
|
|
|
if ( ( $(window).scrollTop() + doc_height - 60 ) > position ) { |
|
var progress = $( this ).data( 'width' ) + "%"; |
|
|
|
$( this ).removeClass( 'animate' ); |
|
$( this ).find( '.bar' ).css('opacity', '0.1'); |
|
|
|
$( this ).find( '.bar' ).animate({ |
|
width : progress, |
|
opacity : 1 |
|
}, 3000 ); |
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
// Looking for an animation element in the view |
|
$(window).scroll(function() { |
|
|
|
if ( $( '.sonny_progressbar.animate' ).length < 1 ) { |
|
return; |
|
} |
|
|
|
// If there is an animate element visible on the page, trigger the animation |
|
animate(); |
|
|
|
}); |
|
|
|
|
|
})(jQuery);
|
|
|