Permalink
Browse files

fixes for issue #180

  • Loading branch information...
Tim Neil
Tim Neil committed Jun 7, 2012
1 parent 68bb417 commit 3ac42807591749ecdeebe072a024b6e95a2e5c45
Showing with 111 additions and 76 deletions.
  1. +1 −0 CHANGELOG.md
  2. +33 −24 pkg/bbui-0.9.3.js
  3. +33 −24 samples/bbui-0.9.3.js
  4. +6 −4 samples/gauge.htm
  5. +5 −0 samples/js/gauge.js
  6. +33 −24 src/plugins/progress.js
View
@@ -17,6 +17,7 @@ Below you will find all the different changes that have been added since the fir
* Added new BlackBerry 10 styling to check boxes
* Bug Fix: Action Bar overflow used to appear briefly when changing orientation
* Bug Fix: Solid headers on image lists had a JavaScript exception
+* Change: The progress bar _pause()_ function has been removed and replaced with _setState(state)_
View
@@ -3434,17 +3434,21 @@ bb.slider = {
bb.progress = {
+ NORMAL : 0,
+ PAUSED : 1,
+ ERROR : 2,
+
apply: function(elements) {
var i,
progress,
res,
- R,
- G,
- B,
color,
highlightColor,
- accentColor;
+ accentColor,
+ NORMAL = 0,
+ PAUSED = 1,
+ ERROR = 2;
if (bb.device.isBB10) {
res = (bb.device.isPlayBook) ? 'lowres' : 'hires',
@@ -3458,16 +3462,12 @@ bb.progress = {
accentColor = '#8FB03B';
}
- // Get our highlight RGB colors
- R = parseInt((bb.progress.cutHex(highlightColor)).substring(0,2),16)
- G = parseInt((bb.progress.cutHex(highlightColor)).substring(2,4),16);
- B = parseInt((bb.progress.cutHex(highlightColor)).substring(4,6),16);
-
for (i = 0; i < elements.length; i++) {
progress = elements[i];
// Create our container div
outerElement = document.createElement('div');
outerElement.progress = progress;
+ outerElement.state = bb.progress.NORMAL;
progress.parentNode.insertBefore(outerElement, progress);
progress.style.display = 'none';
outerElement.appendChild(progress);
@@ -3490,7 +3490,7 @@ bb.progress = {
outerElement.inner = document.createElement('div');
outerElement.inner.className = 'inner';
outerElement.outer.appendChild(outerElement.inner);
-
+
// Assign our function to set the value for the control
progress.outerElement = outerElement;
progress.setValue = function(value) {
@@ -3509,41 +3509,50 @@ bb.progress = {
} else {
value = parseInt(this.outerElement.value);
}
-
- // Calculate our percentage
+
+ // Calculate percentage and styling
if (value == this.outerElement.maxValue) {
+ this.outerElement.fill.style.background = '-webkit-gradient(linear, center top, center bottom, from(' + accentColor+ '), to('+highlightColor+'))';
percent = 1;
- this.outerElement.fill.style.background ='-webkit-linear-gradient(top, '+accentColor+' 0%, '+highlightColor+' 100%)';
} else if (value == 0) {
this.outerElement.outer.setAttribute('class','outer bb-progress-outer-' + color + ' bb-progress-outer-idle-background-' + color);
} else {
- this.outerElement.outer.setAttribute('class','outer bb-progress-outer-' + color);
- this.outerElement.fill.setAttribute('class',this.outerElement.fill.normal);
- this.outerElement.fill.style.background ='';
- percent = (this.outerElement.value/parseInt(this.outerElement.maxValue));
+ if (this.outerElement.state == bb.progress.PAUSED) {
+ this.outerElement.fill.style.background = '-webkit-gradient(linear, center top, center bottom, from(#EDC842), to(#BA991E))';
+ } else if (this.outerElement.state == bb.progress.ERROR) {
+ this.outerElement.fill.style.background = '-webkit-gradient(linear, center top, center bottom, from( #E04242), to(#D91111))';
+ } else {
+ this.outerElement.outer.setAttribute('class','outer bb-progress-outer-' + color);
+ this.outerElement.fill.setAttribute('class',this.outerElement.fill.normal);
+ this.outerElement.fill.style.background ='';
+ }
+ percent = (this.outerElement.value/parseInt(this.outerElement.maxValue));
}
// Determine width by percentage
xpos = Math.floor(parseInt(window.getComputedStyle(this.outerElement.outer).width) * percent);
this.outerElement.fill.style.width = xpos + 'px';
- this.outerElement.inner.style['-webkit-transform'] = 'translate3d(' + xpos + 'px,0px,0px)';
};
progress.setValue = progress.setValue.bind(progress);
- // Display the control paused
- progress.pause = function() {
- this.outerElement.fill.style.background ='-webkit-linear-gradient(top, '+accentColor+' 0%, '+highlightColor+' 100%)';
+
+ // Set the state of the control
+ progress.setState = function(state) {
+ this.outerElement.state = state;
+ this.setValue();
};
- progress.pause = progress.pause.bind(progress);
+ progress.setState = progress.setState.bind(progress);
+
// Set our value on a timeout so that it can calculate width once in the DOM
window.setTimeout(progress.setValue, 0);
outerElement.doOrientationChange = function() {
- window.setTimeout(outerElement.progress.setValue, 0);
+ window.setTimeout(this.progress.setValue, 0);
};
outerElement.doOrientationChange = outerElement.doOrientationChange.bind(outerElement);
// Assign our document event listeners
- window.addEventListener('orientationchange', outerElement.doOrientationChange,false);
+ window.addEventListener('resize', outerElement.doOrientationChange,false);
}
},
+
cutHex : function(h) {
return (h.charAt(0)=="#") ? h.substring(1,7):h
View
@@ -3434,17 +3434,21 @@ bb.slider = {
bb.progress = {
+ NORMAL : 0,
+ PAUSED : 1,
+ ERROR : 2,
+
apply: function(elements) {
var i,
progress,
res,
- R,
- G,
- B,
color,
highlightColor,
- accentColor;
+ accentColor,
+ NORMAL = 0,
+ PAUSED = 1,
+ ERROR = 2;
if (bb.device.isBB10) {
res = (bb.device.isPlayBook) ? 'lowres' : 'hires',
@@ -3458,16 +3462,12 @@ bb.progress = {
accentColor = '#8FB03B';
}
- // Get our highlight RGB colors
- R = parseInt((bb.progress.cutHex(highlightColor)).substring(0,2),16)
- G = parseInt((bb.progress.cutHex(highlightColor)).substring(2,4),16);
- B = parseInt((bb.progress.cutHex(highlightColor)).substring(4,6),16);
-
for (i = 0; i < elements.length; i++) {
progress = elements[i];
// Create our container div
outerElement = document.createElement('div');
outerElement.progress = progress;
+ outerElement.state = bb.progress.NORMAL;
progress.parentNode.insertBefore(outerElement, progress);
progress.style.display = 'none';
outerElement.appendChild(progress);
@@ -3490,7 +3490,7 @@ bb.progress = {
outerElement.inner = document.createElement('div');
outerElement.inner.className = 'inner';
outerElement.outer.appendChild(outerElement.inner);
-
+
// Assign our function to set the value for the control
progress.outerElement = outerElement;
progress.setValue = function(value) {
@@ -3509,41 +3509,50 @@ bb.progress = {
} else {
value = parseInt(this.outerElement.value);
}
-
- // Calculate our percentage
+
+ // Calculate percentage and styling
if (value == this.outerElement.maxValue) {
+ this.outerElement.fill.style.background = '-webkit-gradient(linear, center top, center bottom, from(' + accentColor+ '), to('+highlightColor+'))';
percent = 1;
- this.outerElement.fill.style.background ='-webkit-linear-gradient(top, '+accentColor+' 0%, '+highlightColor+' 100%)';
} else if (value == 0) {
this.outerElement.outer.setAttribute('class','outer bb-progress-outer-' + color + ' bb-progress-outer-idle-background-' + color);
} else {
- this.outerElement.outer.setAttribute('class','outer bb-progress-outer-' + color);
- this.outerElement.fill.setAttribute('class',this.outerElement.fill.normal);
- this.outerElement.fill.style.background ='';
- percent = (this.outerElement.value/parseInt(this.outerElement.maxValue));
+ if (this.outerElement.state == bb.progress.PAUSED) {
+ this.outerElement.fill.style.background = '-webkit-gradient(linear, center top, center bottom, from(#EDC842), to(#BA991E))';
+ } else if (this.outerElement.state == bb.progress.ERROR) {
+ this.outerElement.fill.style.background = '-webkit-gradient(linear, center top, center bottom, from( #E04242), to(#D91111))';
+ } else {
+ this.outerElement.outer.setAttribute('class','outer bb-progress-outer-' + color);
+ this.outerElement.fill.setAttribute('class',this.outerElement.fill.normal);
+ this.outerElement.fill.style.background ='';
+ }
+ percent = (this.outerElement.value/parseInt(this.outerElement.maxValue));
}
// Determine width by percentage
xpos = Math.floor(parseInt(window.getComputedStyle(this.outerElement.outer).width) * percent);
this.outerElement.fill.style.width = xpos + 'px';
- this.outerElement.inner.style['-webkit-transform'] = 'translate3d(' + xpos + 'px,0px,0px)';
};
progress.setValue = progress.setValue.bind(progress);
- // Display the control paused
- progress.pause = function() {
- this.outerElement.fill.style.background ='-webkit-linear-gradient(top, '+accentColor+' 0%, '+highlightColor+' 100%)';
+
+ // Set the state of the control
+ progress.setState = function(state) {
+ this.outerElement.state = state;
+ this.setValue();
};
- progress.pause = progress.pause.bind(progress);
+ progress.setState = progress.setState.bind(progress);
+
// Set our value on a timeout so that it can calculate width once in the DOM
window.setTimeout(progress.setValue, 0);
outerElement.doOrientationChange = function() {
- window.setTimeout(outerElement.progress.setValue, 0);
+ window.setTimeout(this.progress.setValue, 0);
};
outerElement.doOrientationChange = outerElement.doOrientationChange.bind(outerElement);
// Assign our document event listeners
- window.addEventListener('orientationchange', outerElement.doOrientationChange,false);
+ window.addEventListener('resize', outerElement.doOrientationChange,false);
}
},
+
cutHex : function(h) {
return (h.charAt(0)=="#") ? h.substring(1,7):h
View
@@ -25,10 +25,12 @@
Below you will find an example of how to use the progress bar<br />
</p>
</div>
-
- <div id="watch" data-bb-type="button" data-bb-style="stretch" onclick="watchProgress()" style="margin-bottom:10px">Watch Progress</div>
- <div id="pause" data-bb-type="button" data-bb-style="stretch" data-bb-disabled="true" style="margin-bottom:10px" onclick="paused=true;document.getElementById('progress').pause();">Pause</div>
- <div id="reset" data-bb-type="button" data-bb-style="stretch" style="margin-bottom:10px" onclick="percent=4;document.getElementById('progress').setValue(0);">Reset</div>
+ <div style="margin:15px">
+ <div id="watch" data-bb-type="button" data-bb-style="stretch" onclick="watchProgress()" style="margin-bottom:10px">Watch Progress</div>
+ <div id="pause" data-bb-type="button" data-bb-style="stretch" data-bb-disabled="true" style="margin-bottom:10px" onclick="paused=true;document.getElementById('progress').setState(bb.progress.PAUSED);">Pause</div>
+ <div id="error" data-bb-type="button" data-bb-style="stretch" data-bb-disabled="true" style="margin-bottom:10px" onclick="paused=true;document.getElementById('progress').setState(bb.progress.ERROR);">Simulate Error</div>
+ <div id="reset" data-bb-type="button" data-bb-style="stretch" style="margin-bottom:10px" onclick="percent=4;document.getElementById('progress').setValue(0);">Reset</div>
+ </div>
<div style="margin:20px;">
<progress id="progress" value="0" max="100"></progress>
View
@@ -26,13 +26,15 @@ function doTimedEvent() {
if (paused) {
document.getElementById('reset').enable();
document.getElementById('pause').disable();
+ document.getElementById('error').disable();
document.getElementById('watch').enable();
return;
}
if (percent > 100) {
percent = 4;
document.getElementById('reset').enable();
document.getElementById('pause').disable();
+ document.getElementById('error').disable();
document.getElementById('watch').enable();
return;
}
@@ -43,11 +45,14 @@ function doTimedEvent() {
function watchProgress() {
paused = false;
+ document.getElementById('progress').setState(bb.progress.NORMAL);
document.getElementById('watch').disable();
document.getElementById('reset').disable();
document.getElementById('pause').enable();
+ document.getElementById('error').enable();
doTimedEvent();
}
+
Oops, something went wrong.

0 comments on commit 3ac4280

Please sign in to comment.