RectangleSelection.js

[jnbdz]

/*

description: RectangleSelection utility makes it easy to select multiple elements on a page with a mouse.

authors:

• Jean-Nicolas Boulay (http://jean-nicolas.com/)

license:

• MIT-style license

requires:

• core/1.4
• More:/Element.Measure
• Element.Collide/0.5

provides:

• RectangleSelection
  ...
  */

var RectangleSelection = new Class({

Implements: [Options, Events],

options: {/*
    onAttach: function(thisSelectionRectangleEl){},
    onDetach: function(){},
    onDisplay: function(thisPoy, thisPox){},
    onSelection: function(thisMy, thisMx, thisHeight, thisWidth, thisPtop, thisPleft){},
    onSelected: function(thisSelectionRectangleEl){},
    onLeave: function(thisSelectionRectangleEl, thisSelectables, thisOvered){},
    onEnter: function(thisSelectionRectangleEl, thisSelectables, overed){},
    onDeselect: function(){},
    */
    container: null,
    className: 'selection-rectangle',
    fadeOut: true,
    selectionMethod: 'collide'
},

initialize: function(selectables, options) {

    this.setOptions(options || {});

    this.selectables = $$(selectables);
    this.container = document.id(this.options.container);

    if (this.container && typeOf(this.container) != 'element')
            this.container = document.id(this.container.getDocument().body);

    this.bound = {
            start: this.start.bind(this),
            drag: this.drag.bind(this),
            stop: this.stop.bind(this),
            select: this.select.bind(this),
            deselect: this.deselect.bind(this)
    };

    this.attach();

    this.addEvent('selection', this.bound.select, true);
},

attach: function(){

    this.pox = null;
    this.poy = null;
    this.ptop = null;
    this.pleft = null;
    this.height = null;
    this.width = null;
    this.newSelector = true;
    this.mousedown = false;
    this.periodicalRectChange = null;

    this.selectionRectangleEl = new Element('div', {
        'display': 'none',
        'position': 'absolute',
        'class': this.options.className
    }).inject(this.container);

    this.document = this.selectionRectangleEl.getDocument();

    this.opacity = this.selectionRectangleEl.getStyle('opacity');

    this.tween = this.selectionRectangleEl.get('tween');

    this.document.addEvents({
        'mousedown': this.bound.start,
        'mousemove': this.bound.drag,
        'mousewheel': this.bound.drag,
        'mouseup': this.bound.stop
    });

    this.selectables.addEvent('mousedown', function(e){
        e.stopPropagation();
    });

    this.fireEvent('attach', [this.selectionRectangleEl]);

    return this;

},

detach: function(){
    this.selectionRectangleEl.dispose();
    this.fireEvent('detach');
    return this;
},

start: function(e) {
    this.deselect();

    var target = document.id(e.target);
    if (!target.match(this.container) && !target.match(this.selectionRectangleEl)) return;
    e.stop();
    if (e.rightClick) return;

    this.addScrollY = 0;
    this.addScrollX = 0;
    this.poy = e.page.y;
    this.pox = e.page.x;
    this.mousedown = true;
    this.newSelector = false;

    this.tween.stop();

    this.selectionRectangleEl.setStyles({
        'display': 'block',
        'height': 0,
        'width': 0,
        'top': this.poy,
        'left': this.pox,
        'opacity': this.opacity,
        'filter': 'alpha(opacity=' + this.opacity + ')'
    });

    this.element = this.selectionRectangleEl;

    this.limits = this.calculateLimit();

    this.fireEvent('display', [this.poy, this.pox]);

},

resizeRectangle: function(e) {

    var mx = e.page.x,
        my = e.page.y;

    if(this.scrollToX != 0 || this.scrollToY != 0) {

        var rectSelHeight = this.selectionRectangleEl.getStyle('height').toInt();
        this.winScroll = window.getScroll();
        this.winScrollY = this.winScroll.y;
        this.winScrollX = this.winScroll.x;
        this.toScrollToX = this.winScrollX + this.scrollToX;
        this.toScrollToY = this.winScrollY + this.scrollToY;

        this.toScrollToX = (this.toScrollToX >= 0) ? this.toScrollToX : 0;
        this.toScrollToY = (this.toScrollToY >= 0) ? this.toScrollToY : 0;

        if((this.winScrollY <= 8 && this.scrollToY < 0) ||
            (((this.winSizeY + this.winScrollY) == this.scrollSize.y) && this.scrollToY > 0) ||
            (this.winScrollX <= 8 && this.scrollToX < 0) ||
            (((this.winSizeX + this.winScrollX) == this.scrollSize.x) && this.scrollToX > 0)
        ) {
            clearInterval(this.periodicalRectChange);
        } else {
            window.scrollTo(this.toScrollToX, this.toScrollToY);
        }

        my = my + this.toScrollToY - this.toRemoveY;
        mx = mx + this.toScrollToX - this.toRemoveX;

    }

    mx = (mx >= this.limits['left']) ? mx : this.limits['left'];
    mx = (mx <= this.limits['right']) ? mx : this.limits['right'];
    my = (my >= this.limits['top']) ? my : this.limits['top'];
    my = (my <= this.limits['bottom']) ? my : this.limits['bottom'];

    if (mx >= this.limits['left'] && mx <= this.limits['right']) {
        if (this.pox < mx) {
            this.width = (mx - this.pox).abs();
            this.pleft = this.pox;
        } else {
            this.width = (mx - this.pox).abs();
            this.pleft = mx;
        }
    }

    if (my >= this.limits['top'] && my <= this.limits['bottom']) {
        if (this.poy < my) {
            this.height = (my - this.poy).abs();
            this.ptop = this.poy;
        } else {
            this.height = (my - this.poy).abs();
            this.ptop = my;
        }
    }

    this.selectionRectangleEl.setStyles({
        height: this.height,
        width: this.width,
        top: this.ptop,
        left: this.pleft
    });

    this.fireEvent('selection', [my, mx, this.height, this.width, this.ptop, this.pleft]);

},

drag: function(e){

    if (this.mousedown) {

        clearInterval(this.periodicalRectChange);

        this.scrollSize = window.getScrollSize();
        this.winSize = window.getSize();
        this.winSizeY = this.winSize.y;
        this.winSizeX = this.winSize.x;
        var getScroll = window.getScroll();
        this.toRemoveY = getScroll.y;
        this.toRemoveX = getScroll.x;
        this.clientY = e.client.y;
        this.clientX = e.client.x;
        this.scrollToX = 0;
        this.scrollToY = 0;
        this.toScrollToX = 0;
        this.toScrollToY = 0;

        // For the Bottom
        if ((this.winSizeY - 5).abs() < this.clientY) {
            this.scrollToY = 30;
        } else if((this.winSizeY - 10).abs() < this.clientY) {
            this.scrollToY = 20;
        } else if((this.winSizeY - 20).abs() < this.clientY) {
            this.scrollToY = 10;
        }
        // For the Top
        else if(5 > this.clientY) {
            this.scrollToY = -30;
        } else if(10 > this.clientY) {
            this.scrollToY = -20;
        } else if(20 > this.clientY) {
            this.scrollToY = -10;
        }

        // For the Right
        if ((this.winSizeX - 5).abs() < this.clientX) {
            this.scrollToX = 30;
        } else if((this.winSizeX - 10).abs() < this.clientX) {
            this.scrollToX = 20;
        } else if((this.winSizeX - 20).abs() < this.clientX) {
            this.scrollToX = 10;
        }
        // For the Left
        else if(5 > this.clientX) {
            this.scrollToX = -30;
        } else if(10 > this.clientX) {
            this.scrollToX = -20;
        } else if(20 > this.clientX) {
            this.scrollToX = -10;
        }

        if(this.scrollToX != 0 || this.scrollToY != 0) {
            this.periodicalRectChange = this.resizeRectangle.periodical(10, this, e);
        } else {
            this.resizeRectangle(e);
        }

    }

},

stop: function(e){

    clearInterval(this.periodicalRectChange);
    this.mousedown = false;
    if(!this.options.fadeOut){

        this.selectionRectangleEl.setStyle('display', 'none');

        this.fireEvent('selected', [this.selectionRectangleEl]);
        return;
    }

    this.tween.start('opacity', 0);
    this.tween.chain(function() {
        this.selectionRectangleEl.setStyle('display', 'none');
        this.fireEvent('selected', [this.selectionRectangleEl]);
    }.bind(this));

},

select: function(){

        var overed = this.selectables.filter(function(el, i){
            return el[this.options.selectionMethod](this.selectionRectangleEl);
        }, this);

        if (this.overed != overed){
            if (this.overed) this.fireEvent('leave', [this.selectionRectangleEl, this.selectables, this.overed]);
            if (overed) this.fireEvent('enter', [this.selectionRectangleEl, this.selectables, overed]);
            this.overed = overed;
        }

},

deselect: function(){
        this.fireEvent('deselect', [this.selectables]);
},

calculateLimit: function(){
    var container = this.container,
        selRectEl = this.selectionRectangleEl,
        borderTop = selRectEl.getStyle('border-top').toInt(),
        borderLeft = selRectEl.getStyle('border-left').toInt(),
        coors = container.getCoordinates();

    coors['top'] += borderTop;
    coors['left'] += borderLeft;
    coors['bottom'] -= selRectEl.getStyle('border-bottom').toInt() + borderTop;
    coors['right'] -= selRectEl.getStyle('border-right').toInt() + borderLeft;

    return coors;
}

});