Permalink
Browse files

Pulled in updates from master

  • Loading branch information...
1 parent 267da09 commit 13bdbfdb4e909806e3fa354f376f8d7e152a8ba8 @plamoni committed Apr 4, 2012
Showing with 91 additions and 58 deletions.
  1. +8 −0 percentselector.css
  2. +83 −58 percentselector.js
View
@@ -22,4 +22,12 @@
.percentSelector>.PBfallbackColor { /*** for IE7-8 ***/
background-color: green;
+}
+
+.percentSelector>.PBfallbackOverlay {
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
+}
+
+.fallback {
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#60000000',GradientType=0 ); /* IE6-9 */
}
View
@@ -1,29 +1,44 @@
-var fallbackMode = ($.browser.msie && $.browser.version < 9);
$(function() {
$(".percentSelector").each(function() {
- initBar(this);
+ PercentSelector.initBar(this);
});
});
+var PercentSelector = {};
+
+PercentSelector.fallbackMode = ($.browser.msie && $.browser.version < 9);
+
//This will init a bar (calling this directly is useful for re-doing a bar's sizes in the event it's been resized).
-var initBar = function(bar) {
+PercentSelector.initBar = function(bar) {
+ if(!bar) return;
+
var $bar = $(bar);
var height=$bar.innerHeight();
- $bar.children(".PBcolorGrad").css("height", height*20).css("top", -(2 * height));
+ $bar.children(".PBcolorGrad").remove();
$bar.children(".PBoverlay").remove();
- if($bar.attr("onpercentchange")) {
- eval("var opc = function(percent) {" + $bar.attr("onpercentchange") + "}");
- $bar.get(0).onpercentchange = opc;
+ var opcAttr = $bar.attr("onpercentchange");
+ if(opcAttr) {
+ if(typeof opcAttr == "function") {
+ $bar.get(0).onpercentchange = opcAttr;
+ } else if (typeof opcAttr == "string") {
+ if (/^function/.test(opcAttr)) {
+ eval("$bar.get(0).onpercentchange = " + opcAttr);
+ } else {
+ eval("$bar.get(0).onpercentchange = function() {" + opcAttr + "}");
+ }
+ }
}
- if(!fallbackMode) {
+ if(!PercentSelector.fallbackMode) {
$bar.append($("<canvas class='PBoverlay'></canvas>").css("height", height).css("width", $bar.innerWidth()));
$bar.append($("<div class='PBcolorGrad'></div>").css("height", height*20).css("top", -(2 * height)));
- createOverlay($bar);
+ PercentSelector.createOverlay($bar);
} else {
+ $bar.addClass("fallback");
$bar.append($("<div class='PBfallbackColor'></div>").css("height", height).css("width", $bar.innerWidth()));
+ //$bar.append($("<div class='PBfallbackOverlay'></div>").css("height", height).css("width", $bar.innerWidth()).css("margin-top", -$bar.innerHeight()));
}
if($bar.attr("percent") != null) {
@@ -33,24 +48,29 @@ var initBar = function(bar) {
// re-initialize to the percent given.
var percent = parseInt($bar.attr("percent"));
$bar.attr("percent", 100);
- setPercent($bar, percent, true);
+ PercentSelector.setPercent($bar, percent, true);
}
- if(!($bar.attr("enabled") && $bar.attr("enabled").toLowerCase() == "false")) {
- if(document.createTouch == undefined) {
- $bar.bind("mousedown", pbMousedown);
- $bar.bind("mousemove", pbMousemove);
- $bar.bind("mouseup", pbMouseup);
- $bar.bind("mouseout", pbMouseout);
- } else {
- $bar.bind("touchstart", pbTouchStart);
- $bar.bind("touchmove", pbTouchMove);
- $bar.bind("touchend", pbTouchEnd);
+ if(!bar.isBound) {
+ if(!($bar.attr("enabled") && $bar.attr("enabled").toLowerCase() == "false")) {
+ var $bindBar = $bar;
+
+ if(document.createTouch == undefined) {
+ $bindBar.bind("mousedown", PercentSelector.handlers.mouseDown);
+ $bindBar.bind("mousemove", PercentSelector.handlers.mouseMove);
+ $bindBar.bind("mouseup", PercentSelector.handlers.mouseUp);
+ $bindBar.bind("mouseout", PercentSelector.handlers.mouseOut);
+ } else {
+ $bindBar.bind("touchstart", PercentSelector.handlers.touchStart);
+ $bindBar.bind("touchmove", PercentSelector.handlers.touchMove);
+ $bindBar.bind("touchend", PercentSelector.handlers.touchEnd);
+ }
}
+ bar.isBound = true; //to prevent multi-binding!
}
}
-var setPercent = function(bar, newPercent, animate) {
+PercentSelector.setPercent = function(bar, newPercent, animate) {
var $bar = $(bar);
var step = $bar.attr("step");
@@ -63,9 +83,9 @@ var setPercent = function(bar, newPercent, animate) {
$bar.attr("percent", newPercent);
- if(fallbackMode) {
+ if(PercentSelector.fallbackMode) {
$bar.children(".PBfallbackColor").css("width", $bar.innerWidth() * newPercent / 100.0);
- //console.log("setting percent to: " + newPercent);
+ console.log("setting percent to: " + newPercent);
} else {
if(animate) {
@@ -93,7 +113,7 @@ var setPercent = function(bar, newPercent, animate) {
}
}
-var setPercentFromPageX = function(bar, page_x, animate) {
+PercentSelector.setPercentFromPageX = function(bar, page_x, animate) {
var $bar = $(bar);
var x = page_x - $bar.offset().left;
var width = $bar.outerWidth();
@@ -103,10 +123,10 @@ var setPercentFromPageX = function(bar, page_x, animate) {
if(percent < 0) percent = 0;
percent = Math.round(percent);
- setPercent(bar, percent, animate);
+ PercentSelector.setPercent(bar, percent, animate);
}
-var createOverlay = function(bar) {
+PercentSelector.createOverlay = function(bar) {
var $bar = $(bar);
$overlay = $bar.children(".PBoverlay");
var width = $overlay.innerWidth();
@@ -145,64 +165,69 @@ var createOverlay = function(bar) {
}
}
+PercentSelector.handlers = {};
+
/**** touch handling ****/
-var touchDragging = false;
+PercentSelector.handlers.touchDragging = false;
-var pbTouchStart = function(event) {
+PercentSelector.handlers.touchStart = function(event) {
var touches = event.originalEvent.touches;
if(touches.length > 1) return;
event.preventDefault();
- touchDragging = false;
+ PercentSelector.handlers.touchDragging = false;
}
-var pbTouchEnd = function(event) {
- if(!touchDragging) {
- touches = event.originalEvent.touches;
- if(touches.length == 0) touches = event.originalEvent.changedTouches;
- if(touches.length > 1) return;
- event.preventDefault();
-
- var bar = touches[0].target.parentNode;
-
- setPercentFromPageX(bar, touches[0].pageX, true);
- if(bar.onpercentchange != undefined)
- bar.onpercentchange($(bar).attr("percent"));
+PercentSelector.handlers.touchEnd = function(event) {
+ touches = event.originalEvent.touches;
+ if(touches.length == 0) touches = event.originalEvent.changedTouches;
+ if(touches.length > 1) return;
+
+ var bar = touches[0].target.parentNode;
+
+ PercentSelector.setPercentFromPageX(bar, touches[0].pageX, true);
+
+ if(bar.onpercentchange != undefined) {
+ bar.onpercentchange($(bar).attr("percent"));
}
+
+
+ event.preventDefault();
+
}
-var pbTouchMove = function(event) {
- var touchDragging = true;
+PercentSelector.handlers.touchMove = function(event) {
+ PercentSelector.handlers.touchDragging = true;
var touches = event.originalEvent.touches;
if(touches.length > 1) return;
event.preventDefault();
- setPercentFromPageX(touches[0].target.parentNode, touches[0].pageX);
+ PercentSelector.setPercentFromPageX(touches[0].target.parentNode, touches[0].pageX);
}
/*** mouse handling ***/
-var isDragging = false;
-var pbMousedown = function(event) { isDragging = true; }
-var pbMouseout = function(event) {
- if(isDragging) {
- var bar = (fallbackMode) ? event.currentTarget : event.originalEvent.target.parentNode;
+PercentSelector.handlers.mouseDragging = false;
+PercentSelector.handlers.mouseDown = function(event) { PercentSelector.handlers.mouseDragging = true; }
+PercentSelector.handlers.mouseOut = function(event) {
+ if(PercentSelector.handlers.mouseDragging) {
+ var bar = (PercentSelector.fallbackMode) ? event.currentTarget : event.originalEvent.target.parentNode;
if(bar.onpercentchange != undefined)
bar.onpercentchange($(bar).attr("percent"));
}
- isDragging = false;
+ PercentSelector.handlers.mouseDragging = false;
}
-var pbMouseup = function(event) {
- isDragging = false;
- var bar = (fallbackMode) ? event.currentTarget : event.originalEvent.target.parentNode;
- setPercentFromPageX(bar, event.pageX, true);
+PercentSelector.handlers.mouseUp = function(event) {
+ PercentSelector.handlers.mouseDragging = false;
+ var bar = (PercentSelector.fallbackMode) ? event.currentTarget : event.originalEvent.target.parentNode;
+ PercentSelector.setPercentFromPageX(bar, event.pageX, true);
if(bar.onpercentchange != undefined)
bar.onpercentchange($(bar).attr("percent"));
}
-var pbMousemove = function(event) {
- if(isDragging) {
+PercentSelector.handlers.mouseMove = function(event) {
+ if(PercentSelector.handlers.mouseDragging) {
event.preventDefault();
- var bar = (fallbackMode) ? event.currentTarget : event.originalEvent.target.parentNode;
- setPercentFromPageX(bar, event.pageX);
+ var bar = (PercentSelector.fallbackMode) ? event.currentTarget : event.originalEvent.target.parentNode;
+ PercentSelector.setPercentFromPageX(bar, event.pageX);
}
}

0 comments on commit 13bdbfd

Please sign in to comment.