Le Khoa Nhi Wiki

 

Moo_Slider

Page history last edited by Le Nhat Anh 2 yrs ago

Moo.Slider, a plugin of Mootools by Le Nhat Anh. 

 

Edit Info :

 

  • moo.slider ver 1.00
  • no change

 

// BEGIN CODE

 

// By lenhatanh | nhatanh.voxfamilyvn.com | a plugin of mootools

var Slider = new Class({

    

    options: function(id_1, id_2, id_3, id_4, options) {

        this.opt = {

            onComplete: Class.empty,

            onDrag: Class.empty,

            a: 'hoz'

        };

        Object.extend(this.opt, options || {});

       

        this.bar = $(id_1);

        this.addvalue = this.firstPos();

        aX = this.bar.getStyle('width') || this.bar.width;

        aY = this.bar.getStyle('height') || this.bar.height;

        var _2 = this.checkA() ? aX : aY;

        this.length = parseInt(_2);

       

        if($(id_2)) {

            this.button = $(id_2);

            bX = this.button.getStyle('width') || this.button.width;

            bY = this.button.getStyle('height') || this.button.height;

            var _1 = this.checkA() ? bX : bY;

            _1 = parseInt(_1);

            this.w_1 = Math.ceil(_1/2);

            this.w_2 = _1 - this.w_1;

        } else {

            this.w_1 = 0;

            this.w_2 = 0;

        }

       

        if($(id_3)) this.gonebar = $(id_3);

        if($(id_4)) this.emptybar = $(id_4);

       

        this.pos_min = this.addvalue + this.w_1;

        this.pos_max = this.addvalue + this.length - this.w_2;

        this.s_length = this.pos_max - this.pos_min;

        if(this.opt.defvalue) this.p_length = Math.floor(this.s_length / this.opt.defvalue);

    },

    

    reOptions: function(x) {

        if (this.addvalue != this.firstPos()) {

            this.addvalue = this.firstPos();

            this.pos_min = this.addvalue + this.w_1;

            this.pos_max = this.addvalue + this.length - this.w_2;

        }

    },

    

    initialize: function(id_1, id_2, id_3, id_4, options) {

        this.options(id_1, id_2, id_3, id_4, options);

        if(this.opt.defPos) this.defPos();

        if(this.button) this.button.onmousedown = this.start.bind(this);

        this.bar.onmousedown = this.setPos.bind(this);

    },

    

    checkA: function () {

        return this.opt.a == 'hoz' ? 1 : 0;

    },

    

    firstPos: function() {

        return this.checkA() ? this.bar.getLeft() : this.bar.getTop();

    },

    

    curPos: function(e) {

        var e = new Event(e);

        return this.checkA() ? e.client.x : e.client.y;

    },

    

    getScroll: function() {

        return this.checkA() ? Window.getScrollLeft() : Window.getScrollTop();

    },

    

    checkPos: function(x) {

        x = (x<this.pos_min) ? this.pos_min : x;

        x = (x>this.pos_max) ? this.pos_max : x;

        return x;

    },

    

    checkValue: function(x) {

        x = (x<0) ? 0 : x;

        x = (x>this.opt.defvalue) ? this.opt.defvalue : x;

        return x;

    },

    

    getValue: function() {

        _1 = Math.ceil(this.pos_cur / this.p_length);

        _1 = this.checkValue(_1);

        return _1;

    },

    

    fixPos: function() {

        return (this.value==this.opt.defvalue) ? this.s_length : this.value*this.p_length; //Cheat

    },

    

    start: function() {

        this.reOptions();

        document.onmousemove = this.drag.bind(this);

        document.onmouseup = this.end.bind(this);

    },

    

    drag: function(e){

        this.reOptions();

        cur_pos = this.checkPos(this.curPos(e) + this.getScroll());

        this.pos_cur = cur_pos - this.pos_min;

        this.process();

    },

    

    addStyles: function(){

        z = this.w_2 + this.w_1 + this.pos_cur;

        y = this.length - z;

        _1 = this.checkA() ? ['left',1] : ['top',2];

        if(this.button) this.button.setStyle(_1[0], this.pos_cur + 'px');

        if(this.gonebar) eval('this.addStyle' + _1[1] + '(this.gonebar,this.pos_cur)');

        if(this.emptybar) {

            eval('this.addStyle' + _1[1] + '(this.emptybar,y)');

            this.emptybar.setStyle(_1[0], z + 'px'); //Tiny bugs in IE when set emptybar -> 0 (vertical);

        }

    },

    

    addStyle1: function(el,x) {

        if(el.width) el.width = x + 'px';

        else el.setStyle('width', x + 'px');

    },

    

    addStyle2: function(el,x) {

        if(el.height) el.height = x + 'px';

        else el.setStyle('height', x + 'px');

    },

    

    end: function(){

        document.onmousemove = null;

        document.onmouseup = null;

        this.process();

    },

    

    defPos: function() {

        if(!this.opt.defvalue) {

            if(this.opt.defPosby=='%') cur_pos = Math.ceil(this.s_length/100*this.opt.defPos)

            else cur_pos = this.opt.defPos;

            cur_pos = this.checkPos(cur_pos + this.pos_min);

            this.pos_cur = cur_pos - this.pos_min;

            this.opt.onComplete([this.pos_cur,this.s_length], this);

        } else {

            this.value = this.checkValue(this.opt.defPos);

            this.pos_cur = this.p_length * this.value;

            this.opt.onComplete([this.value,this.opt.defvalue], this);

        }

        this.addStyles();

    },

    

    setPos: function(e) {

        this.reOptions();

        cur_pos = this.checkPos(this.curPos(e) + this.getScroll());

        this.pos_cur = cur_pos - this.pos_min;

        this.process();

    },

    

    process: function () {

        if(!this.opt.defvalue) this.opt.onComplete([this.pos_cur,this.s_length], this);

        else {

            this.value = this.getValue();

            this.pos_cur = this.fixPos();

            this.opt.onComplete([this.value,this.opt.defvalue], this);

        }

        this.addStyles();

    }

});

 

// END CODE

 

Comments (0)

You don't have permission to comment on this page.