Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

all files

  • Loading branch information...
commit b95eba0e96a39fc63ebb9409d498f2f6441c1ac0 1 parent 7003b79
@darkwing darkwing authored
View
65 Docs/ProgressBar.md
@@ -0,0 +1,65 @@
+Class: ProgressBar {#ProgressBar}
+===========================================
+
+ProgressBar is a highly customizable MooTools progress bar class that animates to the desired percentage and can be styled in any manner by CSS.
+
+### Implements:
+
+Events, Options
+
+
+
+
+ProgressBar Method: constructor {#ProgressBar:constructor}
+---------------------------------------------------------------------
+
+
+### Syntax:
+
+ var myProgressBar = new ProgressBar(options);
+
+### Arguments:
+
+1. options - (*object*) Option key -> values for the ProgressBar instance
+
+### Options:
+
+* container - (*string*) The progress bar's container ID.
+* boxID - (*string*) The ID of the box that contains the progress bar.
+* percentageID - (*string*) The ID of the "percentage" element.
+* displayID - (*string*) The ID of the "display" element.
+* startPercentage - (*integer*) The percentage to start the progress bar at.
+* displayText - (*boolean*, defaults to false) Should the percentage be displayed as text?
+* speed - (*integer*, defaults to 10) The speed at which the progress bar should advance to the next percentage.
+* step - (*integer*, defaults to 1) The amount the progress bar should step each time if no step amount is given.
+* allowMore - (*boolean*, defaults to false) Should the progress bar be allowed to pass 100%?
+
+### Events:
+
+* onComplete - Fires when the progress bar reaches 100%.
+* onChange - Fires each time the progress bar advances.
+
+
+ProgressBar Method: set {#ProgressBar:set}
+-----------------------------------------------------
+
+
+### Syntax:
+
+ progressbar.set(20)
+
+### Arguments:
+
+1. to - (*integer*) Set the progress bar to the desired percentage.
+
+
+ProgressBar Method: step {#ProgressBar:step}
+-------------------------------------------------------
+
+### Syntax:
+
+ progressbar.step(20)
+
+### Arguments:
+
+1. to - (*integer*) Set the progress bar to the desired percentage.
View
34 README.md
@@ -0,0 +1,34 @@
+ProgressBar
+=========
+
+ProgressBar is a highly customizable MooTools progress bar class that animates to the desired percentage and can be styled in any manner by CSS.
+
+![Screenshot](http://davidwalsh.name/dw-content/progressbar.png)
+
+How to Use
+----------
+
+ProgressBar can be initialized at any time but is generally initialized at the top of the document during the page's normal load. There are no required arguments -- only options.
+
+### HTML
+ <div id="put-bar-here2"></div>
+
+### Javascript
+ var pb = new dwProgressBar({
+ container: $('put-bar-here2'),
+ startPercentage: 10,
+ speed:1000,
+ boxID: 'box2',
+ percentageID: 'perc2',
+ displayID: 'text',
+ displayText: true,
+ step:15,
+ onComplete: function() {
+ alert('Done!');
+ },
+ onChange: function() {
+ alert('Changed!');
+ }
+ });
+
+For specific usage and options, please read the documentation or visit [http://davidwalsh.name/js/progressbar](http://davidwalsh.name/js/progressbar)
View
1  Source/ProgressBar-yui-compressed.js
@@ -0,0 +1 @@
+(function(a){this.ProgressBar=new Class({Implements:[Events,Options],options:{container:document.body,boxID:"progress-bar-box-id",percentageID:"progress-bar-percentage-id",displayID:"progress-bar-display-id",startPercentage:0,displayText:false,speed:10,step:1,allowMore:false,onComplete:$empty},initialize:function(b){this.setOptions(b);this.options.container=a(this.options.container);this.createElements();},createElements:function(){var c=new Element("div",{id:this.options.boxID});var b=new Element("div",{id:this.options.percentageID,style:"width:0px;"});b.inject(c);c.inject(this.options.container);if(this.options.displayText){var d=new Element("div",{id:this.options.displayID});d.inject(this.options.container);}this.set(this.options.startPercentage);},calculate:function(b){return(a(this.options.boxID).getStyle("width").replace("px","")*(b/100)).toInt();},animate:function(c){var d=false;var b=this;if(!b.options.allowMore&&c>100){c=100;}b.to=c.toInt();a(b.options.percentageID).set("morph",{duration:this.options.speed,link:"cancel",onComplete:function(){b.fireEvent("change",[b.to]);if(c>=100){b.fireEvent("complete",[b.to]);}}}).morph({width:b.calculate(c)});if(b.options.displayText){a(b.options.displayID).set("text",b.to+"%");}},set:function(b){this.animate(b);},step:function(){this.set(this.to+this.options.step);}});})(document.id);
View
93 Source/ProgressBar.js
@@ -0,0 +1,93 @@
+(function($) {
+ this.ProgressBar = new Class({
+
+ //implements
+ Implements: [Events, Options],
+
+ //options
+ options: {
+ container: document.body,
+ boxID:'progress-bar-box-id',
+ percentageID:'progress-bar-percentage-id',
+ displayID:'progress-bar-display-id',
+ startPercentage: 0,
+ displayText: false,
+ speed:10,
+ step:1,
+ allowMore: false,
+ onComplete: $empty,
+ onChange: $empty
+ },
+
+ //initialization
+ initialize: function(options) {
+ //set options
+ this.setOptions(options);
+ //quick container
+ this.options.container = $(this.options.container);
+ //create elements
+ this.createElements();
+ },
+
+ //creates the box and percentage elements
+ createElements: function() {
+ var box = new Element('div', {
+ id:this.options.boxID
+ });
+ var perc = new Element('div', {
+ id:this.options.percentageID,
+ 'style':'width:0px;'
+ });
+ perc.inject(box);
+ box.inject(this.options.container);
+ if(this.options.displayText) {
+ var text = new Element('div', {
+ id:this.options.displayID
+ });
+ text.inject(this.options.container);
+ }
+ this.set(this.options.startPercentage);
+ },
+
+ //calculates width in pixels from percentage
+ calculate: function(percentage) {
+ return ($(this.options.boxID).getStyle('width').replace('px','') * (percentage / 100)).toInt();
+ },
+
+ //animates the change in percentage
+ animate: function(go) {
+ var run = false;
+ var self = this;
+ if(!self.options.allowMore && go > 100) {
+ go = 100;
+ }
+ self.to = go.toInt();
+ $(self.options.percentageID).set('morph', {
+ duration: this.options.speed,
+ link:'cancel',
+ onComplete: function() {
+ self.fireEvent('change',[self.to]);
+ if(go >= 100) {
+ self.fireEvent('complete',[self.to]);
+ }
+ }
+ }).morph({
+ width:self.calculate(go)
+ });
+ if(self.options.displayText) {
+ $(self.options.displayID).set('text', self.to + '%');
+ }
+ },
+
+ //sets the percentage from its current state to desired percentage
+ set: function(to) {
+ this.animate(to);
+ },
+
+ //steps a pre-determined percentage
+ step: function() {
+ this.set(this.to + this.options.step);
+ }
+
+ });
+})(document.id);
View
10 package.yml
@@ -1,7 +1,7 @@
name: ProgressBar
author: davidwalsh
-current:
-category:
-tags: []
-docs:
-demo:
+current: 1.0
+category: Interface
+tags: [progress,fx,forms,images]
+docs: http://davidwalsh.name/js/progressbar
+demo: http://davidwalsh.name/js/progressbar
Please sign in to comment.
Something went wrong with that request. Please try again.