Permalink
Browse files

- make it compatible with packager

- Fx.Tween is enough (only one property)
- animate -> set
- immediate parameter for set (no fx)
- instead of using ids in the optoins, use selectors to create the elements
- toElement method
- updated docs for the above changes
- added demo page
  • Loading branch information...
1 parent 93addf1 commit dbd9fc28c03bdff81c0fa5795d8d4c938cbf1608 Georg Nagel committed Jul 9, 2011
Showing with 108 additions and 50 deletions.
  1. +57 −0 Demo/index.html
  2. +5 −8 Docs/ProgressBar.md
  3. +43 −42 Source/ProgressBar.js
  4. +3 −0 package.yml
View
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <title>Mootools ProgressBar Demo</title>
+ <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
+ <script src="../Source/ProgressBar.js"></script>
+
+ <style type="text/css">
+ div.progress-bar-box {
+ border: 1px solid #000;
+ height: 12px;
+ width: 200px;
+ border-radius: 3px;
+ overflow: hidden;
+ }
+
+ div.progress-bar-box div.progress-bar-percentage {
+ background: rgb(195,224, 232);
+ background-image: -webkit-gradient(linear, right top, left top, color-stop(0.04, rgb(195,224, 232) ), color-stop(1, rgb(178, 168, 152) ) );
+ background-image: -moz-linear-gradient(right center, rgb(195, 224, 232) 4%, rgb(178, 168, 152) 100% );
+ height: 12px;
+ }
+ a { display: block; }
+ </style>
+</head>
+<body>
+ <div id="progress-bar-container"></div>
+ <a href="#" data-progressbar="set-20">Set to 20%</a>
+ <a href="#" data-progressbar="set-90">Set to 90%</a>
+ <a href="#" data-progressbar="step">Adds one step more (defined in options. here 10%)</a>
+ <a href="#" data-progressbar="set-50-1">immediately go to 50</a>
+ <div id="log"></div>
+<script>
+ document.addEvent('domready', function () {
+ var bar = new ProgressBar({
+ container: 'progress-bar-container',
+ speed: 1000,
+ step: 10,
+ onChange: function (value) {
+ document.id('log').set('text', 'changed to: ' + value)
+ },
+ onComplete: function () {
+ document.id('log').set('text', 'completed to 100%')
+ }
+ }).set(50);
+
+ document.getElements('a').each(function (link) {
+ var opts = link.get('data-progressbar').split('-');
+ var method = opts.shift();
+ link.addEvent('click', bar[method].pass(opts, bar));
+ });
+ });
+</script>
+
+</body>
+</html>
View
@@ -25,9 +25,9 @@ ProgressBar Method: constructor {#ProgressBar:constructor}
### 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.
+* boxElement - (*string*) The box's element selector that contains the progress bar.
+* percentageElement - (*string*) The "percentage" element selector
+* displayElement - (*string*) The "display" element selector.
* 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.
@@ -52,14 +52,11 @@ ProgressBar Method: set {#ProgressBar:set}
1. to - (*integer*) Set the progress bar to the desired percentage.
+2. immediate - (*boolean*) If true the progressbar percentage is set by setStyle and is not animated.
ProgressBar Method: step {#ProgressBar:step}
-------------------------------------------------------
### Syntax:
- progressbar.step(20)
-
-### Arguments:
-
-1. to - (*integer*) Set the progress bar to the desired percentage.
+ progressbar.step()
View
@@ -8,11 +8,9 @@ authors:
license:
- MIT-style license
-requires:
- core/1.2.1: '*'
- more/1.2.1: 'Fx.*'
+requires: [Core/Class.Extras, Core/Fx.Tween]
-provides:
+provides:
- ProgressBar
...
*/
@@ -24,9 +22,9 @@ var ProgressBar = new Class({
//options
options: {
container: document.body,
- boxID:'progress-bar-box-id',
- percentageID:'progress-bar-percentage-id',
- displayID:'progress-bar-display-id',
+ boxElement: 'div.progress-bar-box',
+ percentageElement:'div.progress-bar-percentage',
+ displayElement:'div.progress-bar-display',
startPercentage: 0,
displayText: false,
speed:10,
@@ -36,7 +34,7 @@ var ProgressBar = new Class({
onChange: $empty*/
},
- //initialization
+ // initialization
initialize: function(options) {
//set options
this.setOptions(options);
@@ -46,54 +44,57 @@ var ProgressBar = new Class({
this.createElements();
},
- //creates the box and percentage elements
+ // creates the box and percentage elements
createElements: function() {
- var box = new Element('div', {
- id:this.options.boxID
- }).inject(this.options.container);
- var perc = new Element('div', {
- id:this.options.percentageID,
- style:'width:0px;'
- }).inject(box);
+ this.box = new Element(this.options.boxElement)
+ .inject(this.options.container);
+ this.perc = new Element(this.options.percentageElement, {
+ style: 'width: 0px;'
+ }).inject(this.box).set('tween', {
+ duration: this.options.speed,
+ link:'cancel',
+ onComplete: this.fxComplete.bind(this)
+ });
if(this.options.displayText) {
- var text = new Element('div', {
- id:this.options.displayID
- }).inject(this.options.container);
+ this.text = new Element(this.options.displayElement)
+ .inject(this.container);
}
this.set(this.options.startPercentage);
},
- //calculates width in pixels from percentage
+ // calculates width in pixels from percentage
calculate: function(percentage) {
- return (document.id(this.options.boxID).getStyle('width').replace('px','') * (percentage / 100)).toInt();
+ return (this.box.getStyle('width').replace('px','') * (percentage / 100)).toInt();
},
- //animates the change in percentage
- animate: function(go) {
- var run = false, self = this;
- if(!self.options.allowMore && go > 100) go = 100;
- self.to = go.toInt();
- document.id(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) document.id(self.options.displayID).set('text', self.to + '%');
+ // animates the change in percentage via fx or immediately
+ set: function(to, immediate) {
+ var run = false;
+ this.to = to.toFloat();
+ if(!this.options.allowMore && this.to > 100)
+ this.to = 100;
+ this.perc.get('tween').cancel();
+ var func = immediate ? 'setStyle' : 'tween';
+ this.perc[func]('width', this.calculate(this.to));
+ if (immediate) this.fxComplete();
+ if(this.options.displayText) this.text.set('text', this.to + '%');
+ return this;
},
-
- //sets the percentage from its current state to desired percentage
- set: function(to) {
- this.animate(to);
+
+ // fx complete event
+ fxComplete: function () {
+ this.fireEvent('change',[this.to]);
+ if(this.to >= 100) self.fireEvent('complete',[this.to]);
},
- //steps a pre-determined percentage
+ // steps a pre-determined percentage
step: function() {
this.set(this.to + this.options.step);
+ },
+
+ // use for document.id on an instance of ProgressBar
+ toElement: function () {
+ return this.box;
}
});
View
@@ -5,3 +5,6 @@ category: Interface
tags: [progress,fx,forms,images]
docs: http://davidwalsh.name/js/progressbar
demo: http://davidwalsh.name/js/progressbar
+
+sources:
+ - "Source/ProgressBar.js"

0 comments on commit dbd9fc2

Please sign in to comment.