spinbox

var SpinBox = function(A, B, C) {

// Constructor

this.A = A;

this.B = B;

this.C = C;

this.maxValue = 300;

this.minValue = 100;

this.increment = 2;

};

SpinBox.prototype.getElements = function() {

this.textBox = document.getElementById(this.A);

this.btnUp = document.getElementById(this.B);

this.btnDown = document.getElementById(this.C);

};

SpinBox.prototype.initial = function(e) {

this.textBox.focus();

this.textBox.value = "200";

// this.textBox.blur();

};

SpinBox.prototype.getCurrentValue = function(e) {

return this.textBox.value;

}

SpinBox.prototype.setCurrentValue = function(value) {

var inputValue = parseInt(value);

if (inputValue > this.maxValue) {

this.textBox.value = this.maxValue;

} else if (inputValue < this.minValue) {

this.textBox.value = this.minValue;

} else {

this.textBox.value = inputValue;

}

};

SpinBox.prototype.mouseBlur = function(e) {

var val = this.textBox.value;

var result;

var var_normalize = /[^0-9]/gi;

if (var_normalize.test(val) == true) {

var v_result = val.replace(var_normalize, '');

result = v_result;

} else {

result = val;

}

this.textBox.value = result;

};

SpinBox.prototype.stepUp = function() {

var val = this.textBox.value;

this.textBox.value = parseInt(val) + 1;

if (this.downFlag) {

this.continueTimer = window.setTimeout(this.stepUp.bind(this), 100);

}

};

SpinBox.prototype.onBtnUpClick = function(e) {

var e = e || window.event;

this.downFlag = true;

this.timer = window.setTimeout(this.stepUp.bind(this), 500);

};

SpinBox.prototype.onBtnDownClick = function(e) {

var e = e || window.event;

this.downFlag = true;

this.timer = window.setTimeout(this.stepUp.bind(this), 500);

};

SpinBox.prototype.dragStart = function() {

};

SpinBox.prototype.onBtnUpMouseUp = function(e) {

this.downFlag = false;

window.clearTimeout(this.timer);

window.clearTimeout(this.continueTimer);

var val = this.textBox.value;

this.textBox.value = parseInt(val) + 1;

};

SpinBox.prototype.onBtnDownMouseUp = function(e) {

this.downFlag = false;

window.clearTimeout(this.timer);

window.clearTimeout(this.continueTimer);

var val = this.textBox.value;

this.textBox.value = parseInt(val) - 1;

};

if (!Function.prototype.bind) {

Function.prototype.bind = function(oThis) {

if (typeof this !== "function") // closest thing possible to the

// ECMAScript 5 internal IsCallable

// function

throw new TypeError(

"Function.prototype.bind - what is trying to be fBound is not callable");

var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function() {

}, fBound = function() {

return fToBind.apply(this instanceof fNOP ? this : oThis || window,

aArgs.concat(Array.prototype.slice.call(arguments)));

};

fNOP.prototype = this.prototype;

fBound.prototype = new fNOP();

return fBound;

};

}

SpinBox.prototype.mouseDown2 = function(e) {

var event = e ? e : window.event;

// alert(window.event.srcElement.id);

this.cancelEvent(e);

// addEvent("", mouseDown, true);

}

SpinBox.prototype.cancelEvent = function(e) {

e = e ? e : window.event;

if (e.stopPropagation)

e.stopPropagation();

if (e.preventDefault)

e.preventDefault();

e.cancelBubble = true;

e.cancel = true;

e.returnValue = false;

return false;

}

SpinBox.prototype.onCoinMouseDown = function(e) {

var event = e ? e : window.event;

this.clickFlag = true;

this.drag();

};

SpinBox.prototype.onCoinMouseMove = function(e) {

if (this.clickFlag) {

document.addEventListener("mousemove", moveHandler, true);

// alert("a");

var event = e ? e : window.event;

var elementToDrag = event.srcElement.id;

var elementToDrag2 = elementToDrag;

var startX = event.clientX;

var startY = event.clientY;

var origX = elementToDrag.offsetLeft;

var origY = elementToDrag.offsetTop;

var deltaX = startX - origX, deltaY = startY - origY;

// addEvent("mousemove", elementToDrag, moveHandler, true);

addEvent("mouseup", elementToDrag, upHandler, true);

cancelEvent(event);

function moveHandler(e) {

e = e ? e : window.event;

elementToDrag.style.visibility = 'visible';

elementToDrag.style.left = (e.clientX - deltaX) + "px";

elementToDrag.style.top = (e.clientY - deltaY) + "px";

return cancelEvent(e);

}

function computeDistance(e) {

e = e ? e : window.event;

var t1 = targetNode.offsetLeft;

var t2 = t1 + targetNode.offsetWidth;

var t3 = targetNode.offsetTop;

var t4 = t3 + targetNode.offsetHeight;

var isSatisfied = (t1 < e.clientX) && (t2 > e.clientX)

&& (t3 < e.clientY) && (t4 > e.clientY);

if (isSatisfied) {

alert("Drop!");

}

elementToDrag2.style.visibility = 'hidden';

return cancelEvent(e);

}

function upHandler(e) {

e = e ? e : window.event;

computeDistance(e);

removeEvent("mouseup", elementToDrag, upHandler, true);

removeEvent("mousemove", elementToDrag, moveHandler, true);

return cancelEvent(e);

}

function addEvent(type, el, handler, bubbling) {

if (document.addEventListener) {

document.addEventListener(type, handler, bubbling);

} else if (document.attachEvent) {

el.setCapture();

el.attachEvent("on" + type, handler);

}

function removeEvent(type, el, handler, bubbling) {

if (document.removeEventListener) {

document.removeEventListener(type, handler, bubbling);

} else if (document.detachEvent) {

el.detachEvent("on" + type, handler);

el.releaseCapture();

}

this.cancelEvent(e);

}

this.cancelEvent(e);

};

SpinBox.prototype.onCoinMouseUp = function(e) {

var e = e || window.event;

alert("MOUSE Up");

}

SpinBox.prototype.bindEvent = function(e) {

// mouse down on each object;

this.c1000.onmousedown = this.onCoinMouseDown.bind(this);

var self = this;

this.onCoinMouseDown.apply(self, arguments);

this.c500.onmousedown = this.onCoinMouseDown.bind(this);

var self = this;

this.onCoinMouseDown.apply(self, arguments);

this.c100.onmousedown = this.onCoinMouseDown.bind(this);

var self = this;

this.onCoinMouseDown.apply(self, arguments);

this.c50.onmousedown = this.onCoinMouseDown.bind(this);

var self = this;

this.onCoinMouseDown.apply(self, arguments);

this.targetNode.onmouseup = this.onCoinMouseUp.bind(this);

var self = this;

this.onCoinMouseUp.apply(self, arguments);

// Blur

this.textBox.onblur = this.mouseBlur.bind(this);

var self = this;

this.mouseBlur.apply(self, arguments);

// Button Up - mouse Down, mouse Up

this.btnUp.onmousedown = this.onBtnUpClick.bind(this);

this.onBtnUpClick.apply(self, arguments);

this.btnUp.onmouseup = this.onBtnUpMouseUp.bind(this);

this.onBtnUpMouseUp.apply(self, arguments);

// Button Down - mouse Down, mouse Up

this.btnDown.onmousedown = this.onBtnDownClick.bind(this);

this.onBtnDownClick.apply(self, arguments);

this.btnDown.onmouseup = this.onBtnDownMouseUp.bind(this);

this.onBtnDownMouseUp.apply(self, arguments);

* this.btnDown.onclick = function() { var val = self.textBox.value;

* self.textBox.value = parseInt(val) - 1; }

};

function tune(title, type) {

this.title = title;

this.type = type;

this.getTitle = function() {

return "Song : " + this.title + " Type: " + this.type;

};

}

function artist_tune(title, type, artist) {

this.artist = artist;

this.toString("Artist is " + artist);

tune.apply(this, arguments);

this.toString = function() {

return "Artist : " + this.artist + " " + this.getTitle();

};

}

function aCoin(cost, add) {

this.cost = cost;

this.count = 0;

parseInt(add) > 0 && (this.count += parseInt(add));

this.putCoin = function(unit) {

this.count += parseInt(unit);

// alert(this.count);

};

this.getStatus = function() {

return "동전 " + this.cost + " 의 가치 " + this.count;

};

}

function currency(cost, add, type) {

// this.element = element;

this.cost = cost;

this.type = type;

this.add = add;

aCoin.apply(this, arguments);

this.toString = function() {

return this.cost + "원 짜리 " + this.type + " , " + this.getStatus();

};

}

SpinBox.prototype.setCoins = function(coinBag) {

artist_tune.prototype = new tune();

currency.prototype = new aCoin();

this.clickFlag = false;

var w50 = new currency(50, 2, "COIN");

var w100 = new currency(100, 0, "COIN");

var w500 = new currency(500, 0, "COIN");

var w1000 = new currency(1000, 0, "PAPER");

w50.putCoin(3);

// alert(w50.getStatus());

// var song = new artist_tune("I want to hold your body", "rock", "Smith");

// var song2 = new artist_tune("The power of the love", "pop", "Celine

// Dion");

// alert(song.toString());

// alert(song2.toString());

this.c50 = document.getElementById(coinBag[0]);

this.c100 = document.getElementById(coinBag[1]);

this.c500 = document.getElementById(coinBag[2]);

this.c1000 = document.getElementById(coinBag[3]);

this.targetNode = document.getElementById(coinBag[4]);

};

SpinBox.prototype.drag = function(e) {

var event = e ? e : window.event;

var elementToDrag = event.srcElement;

alert(event.srcElement);

var targetNode = this.targetNode;

var elementToDrag2 = elementToDrag.cloneNode(true);

document.body.appendChild(elementToDrag2);

var startX = event.clientX, startY = event.clientY;

var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

var deltaX = startX - origX, deltaY = startY - origY;

addEvent("mousemove", elementToDrag, moveHandler, true);

addEvent("mouseup", elementToDrag, upHandler, true);

cancelEvent(event);

function computeDistance(e) {

e = e ? e : window.event;

var t1 = targetNode.offsetLeft;

var t2 = t1 + targetNode.offsetWidth;

var t3 = targetNode.offsetTop;

var t4 = t3 + targetNode.offsetHeight;

var isSatisfied = (t1 < e.clientX) && (t2 > e.clientX)

&& (t3 < e.clientY) && (t4 > e.clientY);

if (isSatisfied) {

alert("Drop!");

}

elementToDrag2.style.visibility = 'hidden';

return cancelEvent(e);

}

function moveHandler(e) {

e = e ? e : window.event;

elementToDrag2.style.visibility = 'visible';

elementToDrag2.style.left = (e.clientX - deltaX) + "px";

elementToDrag2.style.top = (e.clientY - deltaY) + "px";

return cancelEvent(e);

}

function upHandler(e) {

e = e ? e : window.event;

computeDistance(e);

removeEvent("mouseup", elementToDrag, upHandler, true);

removeEvent("mousemove", elementToDrag, moveHandler, true);

return cancelEvent(e);

}

alert("Hello3");

}

function setupEvents() {

var s = new SpinBox("text1", "btnUp", "btnDown");

var coins = [ "C50", "C100", "C500", "C1000", "boxdrop" ];

s.setCoins(coins);

s.getElements();

s.bindEvent();

s.initial();

}

<html>

<head>

#C50,#C100,#C500,#C1000 {

border: 3px dashed #999;

}

#C50 {

width: 50px;

height: 50px;

background-color: orange;

margin: 10 20 20 10;

}

#C100 {

width: 50px;

height: 50px;

background-color: orange;

margin: 10 20 20 10;

}

#C500 {

width: 50px;

height: 50px;

background-color: orange;

margin: 10 20 20 10;

}

#C1000 {

width: 50px;

height: 50px;

background-color: violet;

margin: 10 20 20 10;

}

#boxdrop {

border: 3px dashed #999;

background-color: blue;

padding: 3px;

width: 460px;

height: 200px;

margin: 100 100 100 100;

position: absolute;

float: left;

}

</style>

</head>

</body>

</html>

development note

spinbox

티스토리툴바