JavaScript Inheritance and Object Programming

Coding Tutorial, Chapter 5g

Add Custom Methods

Results

Buttons that visibly respond to mouseover and mouseout, and that respond when clicked.

Code

These event-responding methods are added to the button's DOM element at the end of button.init().

The complete source file to this point.

<!DOCTYPE html>

<html><head><title>JIOP Lesson 5g</title>

</head><body>

"use strict";

var ns = {}; // rename ns (namespace)!!!
	ns.registry = {};

ns.DEFAULTS = {
	borders: {
		bcolor: 'red',
		bstyle: 'double',
		bwidth: 5
	},
	button: {
		backgroundColor: '#c0d0e0',
		borders: {
			bcolor: 'yellow',
			bstyle: 'outset',
			bwidth: 2
		}
	}
} // end: DEFAULTS{}

ns.o2s = function(obj) {
	var arr = [];

for (var name in obj) {
		arr.push(name + ':' + obj[name]);
	}

return '{' + arr.join(',') + '}';
} // end: o2s()

ns.shallow_copy = function (object) {
	var ret = {};

for (var name in object) { ret[name] = object[name]; }

return ret;
} // end of shallow_copy()

ns.sum = function(obj1, obj2) {
	var ret = {};
	for (var name in obj1) { ret[name] = obj1[name]; }
	for (name in obj2) { ret[name] = obj2[name]; }

return ret;
}

ns.Borders = function (bcolor, bstyle, bwidth) {
	var new_borders = this;

ns.Borders.init(new_borders, bcolor, bstyle, bwidth);
}

ns.Borders.init = function (new_borders, bcolor, bstyle, bwidth) {

new_borders.bcolor = bcolor;
	new_borders.bstyle = bstyle;
	new_borders.bwidth = bwidth;

} // end: Borders.init()

ns.Borders.prototype.get_styles = function () {
	var border = this;

return {borderColor: border.bcolor, borderStyle: border.bstyle,
			borderWidth: border.bwidth + 'px'};
}

ns.Borders.prototype.toString = function () {
	return 'Borders{' +
			'get_styles()=' + ns.o2s( this.get_styles() ) +
	'}';
}

ns.Box = function (parent, id, pos_size, styles) {
    var new_box = this;

ns.Box.init(new_box, parent, id, pos_size, styles);
}

ns.Box.init = function(new_box, parent, id, pos_size, styles) {

new_box.parent = parent;
	new_box.id = id;
	new_box.pos_size = pos_size;
	new_box.styles = styles;

new_box.borders = new ns.Borders(
			ns.DEFAULTS.borders.bcolor,
			ns.DEFAULTS.borders.bstyle,
			ns.DEFAULTS.borders.bwidth
		);

new_box.delem = document.createElement('div');
	new_box.delem.id = id;
	ns.registry[id] = new_box;

new_box.set_styles();

// parent is document.body or another Box
	if (parent.appendChild !== undefined) {
		parent.appendChild(new_box.delem);
	} else {
		parent.delem.appendChild(new_box.delem);
	}

} // end: Box.init()

ns.Box.prototype.set_borders = function (bcolor, bstyle, bwidth) {
	var box = this;

box.borders = new ns.Borders(bcolor, bstyle, bwidth);
	box.set_styles();

} // end: Box.set_borders()

ns.Box.prototype.set_styles = function () {
	var box = this;

var box_styles = get_ps_styles(box);
		box_styles.position = 'absolute';
		box_styles = ns.sum( box_styles, box.borders.get_styles() );
		box_styles = ns.sum(box_styles, box.styles);

for (var name in box_styles) {
		box.delem.style[name] = box_styles[name];
	}

function get_ps_styles(new_box) {
		var ps = new_box.pos_size,
			ret = {};

ret.left	= ps[0] + 'px';
		ret.top		= ps[1] + 'px';
		ret.width	= ps[2] + 'px';
		ret.height	= ps[3] + 'px';

return ret;
	}

} // end: Box.set_styles()

ns.Box.prototype.toString = function () {
    return 'Box{' +
		'parent=' + this.parent +
		',id=' + this.id +
		',pos_size=' + this.pos_size +
		',styles=' + ns.o2s(this.styles) +
    '}'
}

ns.Button = function (parent, id, pos_size, styles) {
	var new_button = this;

ns.Button.init(new_button, parent, id, pos_size, styles);
}

ns.Button.init = function (new_button, parent, id, pos_size, styles) {

if (styles === undefined) { styles = {}; }
	if (styles.backgroundColor === undefined) {
			styles.backgroundColor = ns.DEFAULTS.button.backgroundColor; }
	ns.Box.init(new_button, parent, id, pos_size, styles);

new_button.set_borders(
			ns.DEFAULTS.button.borders.bcolor,
			ns.DEFAULTS.button.borders.bstyle,
			ns.DEFAULTS.button.borders.bwidth
	);

new_button.delem.onmouseover = function (event) {
			var delem = this;
				delem.style.backgroundColor = 'white';
				delem.style.cursor = 'pointer';
		};
	new_button.delem.onmouseout = function (event) {
			var delem = this;
				delem.style.backgroundColor =
						ns.DEFAULTS.button.backgroundColor;
				delem.style.cursor = 'default';
		};
	new_button.delem.onclick = function (event) {
			var delem = this;

alert( 'Click on button "' + delem.id + '".' );
		};

} // end: Button.init()

// Inherit Box methods.
ns.Button.prototype = ns.sum(ns.Button.prototype, ns.Box.prototype);

ns.Button.prototype.toString = function () {
	return 'Button(' +
		ns.Box.prototype.toString.call(this) +
	'}';
}

ns.Maskable = function(box, args) {

alert( 'making a box Maskable' );
} // end: Maskable()

// --------------------------- mainline ---------------------------

var box = new ns.Box(document.body, 'box', [100,100, 300,100],
	{backgroundColor: '#c0e0ff',
	fontSize: '24pt',
	padding: '10px',
	textAlign: 'center'} );

box.delem.innerHTML = 'Lesson 5, Box object<br>with Borders!';
	box.set_borders('#a0a0ff', 'ridge', 5);

var button = new ns.Button( box, 'button', [0,0, 20,20] );

</script></body></html>

Feedback: Martin Rinehart at gmail dot com.

# # #