127 lines
3.0 KiB
JavaScript
127 lines
3.0 KiB
JavaScript
function newImageButton() {
|
|
|
|
var thisObject = {
|
|
container: undefined,
|
|
draw: draw,
|
|
status: 'neutral',
|
|
type: undefined,
|
|
getContainer: getContainer,
|
|
initialize: initialize
|
|
};
|
|
|
|
var container = newContainer();
|
|
container.initialize();
|
|
container.isDraggeable = false;
|
|
container.isClickeable = true;
|
|
thisObject.container = container;
|
|
|
|
let idNeutralImage;
|
|
let idOnImage;
|
|
let idOffImage;
|
|
let idDisabledImage;
|
|
|
|
return thisObject;
|
|
|
|
function initialize(pX, pY, pWidth, pHeight, pIdNeutralImage, pIdOnImage, pIdOffImage, pIdDisabledImage) {
|
|
|
|
idNeutralImage = pIdNeutralImage;
|
|
idOnImage = pIdOnImage;
|
|
idOffImage = pIdOffImage;
|
|
idDisabledImage = pIdDisabledImage;
|
|
|
|
/* Lets set the basic dimensions of this thisObject. */
|
|
|
|
var position = {
|
|
x: pX,
|
|
y: pY
|
|
};
|
|
|
|
thisObject.container.frame.position = position;
|
|
thisObject.container.frame.width = pWidth;
|
|
thisObject.container.frame.height = pHeight;
|
|
|
|
/* Now we start listening to the onClick event from the mouse, so that we can allow users operate this thisObject. */
|
|
|
|
thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed, undefined);
|
|
|
|
}
|
|
|
|
function getContainer(point) {
|
|
|
|
var container;
|
|
|
|
/* First we check if this point is inside this space. */
|
|
|
|
if (this.container.frame.isThisPointHere(point, true) === true) {
|
|
|
|
return this.container;
|
|
|
|
} else {
|
|
|
|
/* This point does not belong to this space. */
|
|
|
|
return undefined;
|
|
}
|
|
|
|
}
|
|
|
|
function buttonPressed(event, extraData) {
|
|
|
|
switch (thisObject.status) {
|
|
|
|
case 'neutral':
|
|
browserCanvasContext.fillStyle = onFillStyle;
|
|
return;
|
|
|
|
case 'on':
|
|
thisObject.status = 'off';
|
|
break;
|
|
|
|
case 'off':
|
|
thisObject.status = 'on';
|
|
break;
|
|
|
|
case 'disabled':
|
|
return;
|
|
}
|
|
}
|
|
|
|
function draw() {
|
|
|
|
drawImage();
|
|
|
|
}
|
|
|
|
function drawImage() {
|
|
|
|
let image;
|
|
|
|
let imagePoint = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
|
|
imagePoint = thisObject.container.frame.frameThisPoint(imagePoint);
|
|
|
|
switch (thisObject.status) {
|
|
|
|
case 'neutral':
|
|
image = document.getElementById(idNeutralImage);
|
|
break;
|
|
|
|
case 'on':
|
|
image = document.getElementById(idOnImage);
|
|
break;
|
|
|
|
case 'off':
|
|
image = document.getElementById(idOffImage);
|
|
break;
|
|
|
|
case 'disabled':
|
|
image = document.getElementById(idDisabledImage);
|
|
break;
|
|
|
|
}
|
|
browserCanvasContext.drawImage(image, imagePoint.x, imagePoint.y, thisObject.container.frame.width, thisObject.container.frame.height);
|
|
}
|
|
} |