mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-25 18:47:57 +01:00
Implemented new button class #47
This commit is contained in:
peteruithoven
parent
320c5c7d18
commit
8ec5772f77
266
js/Button.js
266
js/Button.js
@ -1,139 +1,131 @@
|
|||||||
(function($) {
|
// prototype inheritance
|
||||||
|
// http://robertnyman.com/2008/10/06/javascript-inheritance-how-and-why/
|
||||||
var clickEnabled = true;
|
Button.prototype = new jQuery;
|
||||||
|
function Button() {
|
||||||
$.fn.Button = function() {
|
|
||||||
return $(this).each(function(){
|
this.enabled = true;
|
||||||
$.Button($(this)[0]);
|
|
||||||
});
|
var _clickEnabled = true;
|
||||||
};
|
var _downTimerFPS = 20;
|
||||||
|
var _timer = undefined;
|
||||||
$.Button = function(element) {
|
var _x,_y;
|
||||||
var downTimerFPS = 20;
|
var _isDown = false;
|
||||||
var _timer = undefined;
|
|
||||||
var _x,_y;
|
var _self = this;
|
||||||
var isDown = false;
|
|
||||||
|
// call jQuery constuctor
|
||||||
var updateCursor = function(e) {
|
// http://blog.santoshrajan.com/2008/10/what-john-resig-did-not-tell-you.html
|
||||||
// retrieve cursor position relative to element
|
this.constructor.prototype.init.apply(this, arguments);
|
||||||
if (e.offsetX != undefined) {
|
|
||||||
_x = e.offsetX;
|
// prevent multiple event handlers etc
|
||||||
_y = e.offsetY;
|
// make sure you do a more general conversion last
|
||||||
} else if(e.pageX != undefined) {
|
if(this.data("isButton")) return;
|
||||||
// http://www.quirksmode.org/mobile/tableViewport_desktop.html#t11
|
else this.data("isButton",true);
|
||||||
var offset = $(element).offset();
|
|
||||||
_x = e.pageX - offset.left;
|
this.enable = function() {
|
||||||
_y = e.pageY - offset.top;
|
if(_self.enabled) return;
|
||||||
} else if(e.originalEvent != undefined && e.originalEvent.pageX != undefined) {
|
_self.removeClass("disabled");
|
||||||
//http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
|
_self.enabled = true;
|
||||||
var offset = $(element).offset();
|
}
|
||||||
_x = e.originalEvent.pageX - offset.left;
|
this.disable = function() {
|
||||||
_y = e.originalEvent.pageY - offset.top;
|
if(!_self.enabled) return;
|
||||||
}
|
_self.addClass("disabled");
|
||||||
|
_self.enabled = false;
|
||||||
//android+chrome-specific hack
|
|
||||||
if (e.originalEvent.changedTouches != undefined) {
|
|
||||||
var offset = $(element).offset();
|
|
||||||
_x = e.originalEvent.changedTouches[0].pageX - offset.left;
|
|
||||||
_y = e.originalEvent.changedTouches[0].pageY - offset.top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var startDownTimer = function() {
|
|
||||||
if (_timer==undefined) {
|
|
||||||
_timer = setInterval(onDownTimerInterval, 1000/downTimerFPS);
|
|
||||||
isDown = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var stopDownTimer = function() {
|
|
||||||
clearInterval(_timer);
|
|
||||||
_timer = undefined;
|
|
||||||
isDown = false;
|
|
||||||
// _x = undefined;
|
|
||||||
// _y = undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
var onDownTimerInterval = function() {
|
|
||||||
if (_x!=undefined && _y!=undefined) {
|
|
||||||
$(element).trigger("onButtonHold",{x:_x,y:_y});
|
|
||||||
} else {
|
|
||||||
console.log("Button: warning... _x or _y not set...");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var onTouchStart = function(e) {
|
|
||||||
clickEnabled = false;
|
|
||||||
updateCursor(e);
|
|
||||||
startDownTimer();
|
|
||||||
$(element).trigger("onButtonClick",{x:_x,y:_y});
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
var onTouchEnd = function(e) {
|
|
||||||
updateCursor(e);
|
|
||||||
stopDownTimer();
|
|
||||||
}
|
|
||||||
|
|
||||||
var onTouchMove = function(e) {
|
|
||||||
updateCursor(e);
|
|
||||||
startDownTimer();
|
|
||||||
}
|
|
||||||
|
|
||||||
var onMouseDown = function(e) {
|
|
||||||
updateCursor(e);
|
|
||||||
startDownTimer();
|
|
||||||
}
|
|
||||||
|
|
||||||
var onMouseUp = function(e) {
|
|
||||||
updateCursor(e);
|
|
||||||
stopDownTimer();
|
|
||||||
}
|
|
||||||
|
|
||||||
var onMouseMove = function(e) {
|
|
||||||
updateCursor(e);
|
|
||||||
if (isDown) onMouseDrag(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
var onMouseDrag = function(e) {
|
|
||||||
updateCursor(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
var onDocumentMouseUp = function(e) {
|
|
||||||
stopDownTimer();
|
|
||||||
}
|
|
||||||
|
|
||||||
var onClick = function(e) {
|
|
||||||
if(!clickEnabled) return;
|
|
||||||
updateCursor(e);
|
|
||||||
stopDownTimer();
|
|
||||||
$(element).trigger("onButtonClick",{x:_x,y:_y});
|
|
||||||
}
|
|
||||||
|
|
||||||
var onStartDrag = function(e) {
|
|
||||||
}
|
|
||||||
|
|
||||||
var onContextMenu = function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
//this needs to be done after the function declarations
|
|
||||||
|
|
||||||
$(element).bind({
|
|
||||||
touchstart: onTouchStart,
|
|
||||||
touchend: onTouchEnd,
|
|
||||||
touchmove: onTouchMove,
|
|
||||||
mousedown: onMouseDown,
|
|
||||||
mouseup: onMouseUp,
|
|
||||||
mousemove: onMouseMove,
|
|
||||||
contextmenu: onContextMenu,
|
|
||||||
click: onClick
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on("mouseup", onDocumentMouseUp);
|
|
||||||
$(element).css("-webkit-user-select","none");
|
|
||||||
$(element).css("-webkit-touch-callout","none");
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}(jQuery));
|
function updateCursor(e) {
|
||||||
|
// retrieve cursor position relative to element
|
||||||
|
if (e.offsetX != undefined) {
|
||||||
|
_x = e.offsetX;
|
||||||
|
_y = e.offsetY;
|
||||||
|
} else if(e.pageX != undefined) {
|
||||||
|
// http://www.quirksmode.org/mobile/tableViewport_desktop.html#t11
|
||||||
|
var offset = _self.offset();
|
||||||
|
_x = e.pageX - offset.left;
|
||||||
|
_y = e.pageY - offset.top;
|
||||||
|
} else if(e.originalEvent != undefined && e.originalEvent.pageX != undefined) {
|
||||||
|
//http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
|
||||||
|
var offset = _self.offset();
|
||||||
|
_x = e.originalEvent.pageX - offset.left;
|
||||||
|
_y = e.originalEvent.pageY - offset.top;
|
||||||
|
}
|
||||||
|
|
||||||
|
//android+chrome-specific hack
|
||||||
|
if (e.originalEvent.changedTouches != undefined) {
|
||||||
|
var offset = _self.offset();
|
||||||
|
_x = e.originalEvent.changedTouches[0].pageX - offset.left;
|
||||||
|
_y = e.originalEvent.changedTouches[0].pageY - offset.top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function startDownTimer() {
|
||||||
|
if (_timer==undefined) {
|
||||||
|
_timer = setInterval(onDownTimerInterval, 1000/_downTimerFPS);
|
||||||
|
_isDown = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function stopDownTimer() {
|
||||||
|
clearInterval(_timer);
|
||||||
|
_timer = undefined;
|
||||||
|
_isDown = false;
|
||||||
|
// _x = undefined;
|
||||||
|
// _y = undefined;
|
||||||
|
}
|
||||||
|
function onDownTimerInterval() {
|
||||||
|
if (_x!=undefined && _y!=undefined) {
|
||||||
|
_self.trigger("onButtonHold",{x:_x,y:_y});
|
||||||
|
} else {
|
||||||
|
console.log("Button: warning... _x or _y not set...");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event handlers
|
||||||
|
$(document).mouseup(function(e) {
|
||||||
|
stopDownTimer();
|
||||||
|
});
|
||||||
|
this.on("touchstart", function(e) {
|
||||||
|
_clickEnabled = false;
|
||||||
|
updateCursor(e);
|
||||||
|
startDownTimer();
|
||||||
|
_self.trigger("onButtonClick",{x:_x,y:_y});
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
this.on("touchend", function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
stopDownTimer();
|
||||||
|
});
|
||||||
|
this.on("touchmove", function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
startDownTimer();
|
||||||
|
});
|
||||||
|
this.mousedown(function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
startDownTimer();
|
||||||
|
});
|
||||||
|
this.mouseup(function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
stopDownTimer();
|
||||||
|
});
|
||||||
|
this.mousemove(function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
//if (_isDown) mousedrag(e);
|
||||||
|
});
|
||||||
|
//this.mousedrag(function(e) {
|
||||||
|
// updateCursor(e);
|
||||||
|
//});
|
||||||
|
this.contextmenu(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
this.click(function(e) {
|
||||||
|
if(!_clickEnabled) return;
|
||||||
|
updateCursor(e);
|
||||||
|
stopDownTimer();
|
||||||
|
_self.trigger("onButtonClick",{x:_x,y:_y});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// to work with multiple objects we need a jQuery plugin
|
||||||
|
$.fn.Button = function() {
|
||||||
|
return $(this).each(function(){
|
||||||
|
new Button(this);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|||||||
@ -24,38 +24,38 @@ var gcodeGenerateDelay = 50;
|
|||||||
function initButtonBehavior() {
|
function initButtonBehavior() {
|
||||||
console.log("f:initButtonBehavior");
|
console.log("f:initButtonBehavior");
|
||||||
|
|
||||||
$(".btn").Button(); //initalizes all buttons
|
btnOops = new Button("#btnOops");
|
||||||
|
btnInfo = new Button("#btnInfo");
|
||||||
btnOops = $("#btnOops");
|
btnSettings = new Button("#btnSettings");
|
||||||
btnInfo = $("#btnInfo");
|
btnNew = new Button("#btnNew");
|
||||||
btnSettings = $("#btnSettings");
|
btnPrint= new Button("#btnPrint");
|
||||||
btnNew = $("#btnNew");
|
btnStop = new Button("#btnStop");
|
||||||
btnPrint= $("#btnPrint");
|
btnPrevious = new Button("#btnPrevious");
|
||||||
btnStop = $("#btnStop");
|
btnNext = new Button("#btnNext");
|
||||||
btnPrevious = $("#btnPrevious");
|
btnSave = new Button("#btnSave");
|
||||||
btnNext = $("#btnNext");
|
|
||||||
btnSave = $("#btnSave");
|
|
||||||
buttonGroupAdd = $("#buttonGroupAdd");
|
buttonGroupAdd = $("#buttonGroupAdd");
|
||||||
btnShape = $("#btnShape");
|
btnShape = new Button("#btnShape");
|
||||||
btnWordArt = $("#btnWordArt");
|
btnWordArt = new Button("#btnWordArt");
|
||||||
popupWordArt = $("#popupWordArt");
|
popupWordArt = $("#popupWordArt");
|
||||||
popupShape = $("#popupShape");
|
popupShape = $("#popupShape");
|
||||||
popupMask = $("#popupMask");
|
popupMask = $("#popupMask");
|
||||||
logoPanel = $("#logopanel");
|
logoPanel = $("#logopanel");
|
||||||
btnToggleEdit = $("#btnToggleEdit");
|
btnToggleEdit = new Button("#btnToggleEdit");
|
||||||
buttonGroupEdit = $("#buttonGroupEdit");
|
buttonGroupEdit = $("#buttonGroupEdit");
|
||||||
btnZoom = $("#btnZoom");
|
btnZoom = new Button("#btnZoom");
|
||||||
btnMove = $("#btnMove");
|
btnMove = new Button("#btnMove");
|
||||||
btnRotate = $("#btnRotate");
|
btnRotate = new Button("#btnRotate");
|
||||||
btnToggleVerticalShapes = $("#btnToggleVerticalShapes");
|
btnToggleVerticalShapes = new Button("#btnToggleVerticalShapes");
|
||||||
buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
|
buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
|
||||||
btnHeight = $("#btnHeight");
|
btnHeight = new Button("#btnHeight");
|
||||||
btnTwist = $("#btnTwist");
|
btnTwist = new Button("#btnTwist");
|
||||||
btnStraight = $("#btnStraight");
|
btnStraight = new Button("#btnStraight");
|
||||||
btnDiv = $("#btnDiv");
|
btnDiv = new Button("#btnDiv");
|
||||||
btnConv = $("#btnConv");
|
btnConv = new Button("#btnConv");
|
||||||
btnSine = $("#btnSine");
|
btnSine = new Button("#btnSine");
|
||||||
btnAdd = $("#btnAdd");
|
btnAdd = new Button("#btnAdd");
|
||||||
|
|
||||||
|
$(".btn").Button(); //initalize other buttons
|
||||||
|
|
||||||
logoPanel.on("onButtonClick", onLogo);
|
logoPanel.on("onButtonClick", onLogo);
|
||||||
btnNew.on("onButtonClick", onBtnNew);
|
btnNew.on("onButtonClick", onBtnNew);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user