jQuery Widget Inheritence

by southerd

HTML

<p class="target" id="green">This is a test paragraph with green level <span class="level">undefined</span>.</p>
<p class="target" id="red">This is a test paragraph with red level <span class="level">undefined</span>.</p>

CSS

.target { border: 1px solid gray; }

JavaScript

Math.clamp = function(x, min, max){return Math.floor(Math.min(max, Math.max(min,x)))};
var Colorer = {
    getLevel: function () { return this.options.level; },
    setLevel: function (x) {
        var level = Math.clamp(x, 0, this.options.colors.length-1);
        this.options.level = level;
        this.element.css({background: this.options.colors[level]});
        this._trigger('change', 0, level);
    },
    _init: function() { this.setLevel(this.getLevel()); }, // grab the default value and use it
    options: {
        level: 15,
        colors: [
            '#000','#010','#020','#030',
            '#040','#050','#060','#070',
            '#080','#090','#0a0','#0b0',
            '#0c0','#0d0','#0e0','#0f0', '#fff'
        ]
    }
};
$.widget("ui.colorer", Colorer);

var ColorerMouse = $.extend(true, {}, $.ui.colorer.prototype, {
    _init: function(){
        $.ui.colorer.prototype._init.call(this); // super call
        this._mouseInit(); // start up the mouse handling
    },
    destroy: function(){
        this._mouseDestroy();
        $.ui.colorer.prototype.destroy.call(this); // super call
    },
    // need to override the mouse functions
    _mouseStart: function(e){
        this.xStart = e.pageX; // keep track of where the mouse started
        this.levelStart = this.options.level;
    },
    _mouseDrag: function(e){
        this.setLevel (this.levelStart +(e.pageX-this.xStart)/this.options.distance);
    },
    options: {
        distance: 10                
    }
});
$.widget("ui.colorerMouse", $.ui.mouse, ColorerMouse);

$('#green').colorerMouse({
    change: function(event, level) { $('.level', this).text(level); }
});
$('#red').colorerMouse({
    change: function(event, level) { $('.level', this).text(level); },
    colors: [
        '#000','#100','#200','#300',
        '#400','#500','#600','#700',
        '#800','#900','#a00','#b00',
        '#c00','#d00','#e00','#f00', '#fff'
    ]
});