Use MBP.fastButton on multiple elements? #86

Closed
Shpigford opened this Issue Dec 28, 2011 · 3 comments

Comments

Projects
None yet
4 participants

How can I add MBP.fastButton on multiple elements?

For instance:

new MBP.fastButton($('.button'), function() { alert("clicked"); });

Right now doing that seems to have no affect.

Member

shichuan commented Jan 8, 2012

we could add this to the road map to make the helper functions more jQuery like, with selectors. For now, the functions are pretty much standalone.

pvnbg commented Jan 9, 2012

I propose the following changes:

MBP.fastButton = function (element, handler) {

this.handler = handler;

if(element.length && element.length > 1) {
    for(var singleElIdx in element) {
        if(element[singleElIdx].addEventListener) {
            this.addClickEvent(element[singleElIdx]);
        }
    }
} else if (element.addEventListener) {
  this.addClickEvent(element)
}

};

..........................

MBP.fastButton.prototype.onTouchStart = function(event) {
event.stopPropagation();
var element = event.srcElement;

element.addEventListener('touchend', this, false);
document.body.addEventListener('touchmove', this, false);
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
element.style.backgroundColor = "rgba(0,0,0,.7)";

};

MBP.fastButton.prototype.onTouchMove = function(event) {

var element = event.srcElement;
if(Math.abs(event.touches[0].clientX - this.startX) > 10 || 
   Math.abs(event.touches[0].clientY - this.startY) > 10    ) {
    this.reset(element);
}

};

MBP.fastButton.prototype.onClick = function(event) {

event.stopPropagation();
var element = event.srcElement;

this.reset(element);
this.handler.apply(event.currentTarget, [event]);

if(event.type == 'touchend') {
    MBP.preventGhostClick(this.startX, this.startY);
}

element.style.backgroundColor = "";

};

MBP.fastButton.prototype.reset = function(srcElement) {
srcElement.removeEventListener('touchend', this, false);
document.body.removeEventListener('touchmove', this, false);
srcElement.style.backgroundColor = "";
};

/**

  • Add events to the selected item
    */
    MBP.fastButton.prototype.addClickEvent = function(element) {

    element.addEventListener('touchstart', this, false);
    element.addEventListener('click', this, false);
    };

By these changes we can:

  • Select an array of elements;
  • Each callback is being executed in event.currentTarget scope, not in MBP object scope.

And another propose that i have not done yet - put the backgroundColor change at the beginning of the function. 10x

Contributor

suprMax commented Mar 6, 2012

Oh, hai. Since you include jQuery (or Zepto in the future), and I did a plugin just like that, I propose this: https://github.com/suprMax/Zepto-onPress

shichuan closed this Apr 13, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment