vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 17:27:57 +01:00
Code Issues Releases Wiki Activity

Implemented new button class #47

Browse Source
This commit is contained in:
peteruithoven 2014-01-30 15:45:03 +01:00
parent 320c5c7d18
commit 8ec5772f77
2 changed files with 154 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
js/Button.js
View File

@ -1,139 +1,131 @@
(function($) { // prototype inheritance
// http://robertnyman.com/2008/10/06/javascript-inheritance-how-and-why/
Button.prototype = new jQuery;
function Button() {
var clickEnabled = true; this.enabled = true;
$.fn.Button = function() { var _clickEnabled = true;
return $(this).each(function(){ var _downTimerFPS = 20;
$.Button($(this)[0]);
});
};
$.Button = function(element) {
var downTimerFPS = 20;
var _timer = undefined; var _timer = undefined;
var _x,_y; var _x,_y;
var isDown = false; var _isDown = false;
var updateCursor = function(e) { var _self = this;
// call jQuery constuctor
// http://blog.santoshrajan.com/2008/10/what-john-resig-did-not-tell-you.html
this.constructor.prototype.init.apply(this, arguments);
// prevent multiple event handlers etc
// make sure you do a more general conversion last
if(this.data("isButton")) return;
else this.data("isButton",true);
this.enable = function() {
if(_self.enabled) return;
_self.removeClass("disabled");
_self.enabled = true;
}
this.disable = function() {
if(!_self.enabled) return;
_self.addClass("disabled");
_self.enabled = false;
}
function updateCursor(e) {
// retrieve cursor position relative to element // retrieve cursor position relative to element
if (e.offsetX != undefined) { if (e.offsetX != undefined) {
_x = e.offsetX; _x = e.offsetX;
_y = e.offsetY; _y = e.offsetY;
} else if(e.pageX != undefined) { } else if(e.pageX != undefined) {
// http://www.quirksmode.org/mobile/tableViewport_desktop.html#t11 // http://www.quirksmode.org/mobile/tableViewport_desktop.html#t11
var offset = $(element).offset(); var offset = _self.offset();
_x = e.pageX - offset.left; _x = e.pageX - offset.left;
_y = e.pageY - offset.top; _y = e.pageY - offset.top;
} else if(e.originalEvent != undefined && e.originalEvent.pageX != undefined) { } else if(e.originalEvent != undefined && e.originalEvent.pageX != undefined) {
//http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/ //http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
var offset = $(element).offset(); var offset = _self.offset();
_x = e.originalEvent.pageX - offset.left; _x = e.originalEvent.pageX - offset.left;
_y = e.originalEvent.pageY - offset.top; _y = e.originalEvent.pageY - offset.top;
} }
//android+chrome-specific hack //android+chrome-specific hack
if (e.originalEvent.changedTouches != undefined) { if (e.originalEvent.changedTouches != undefined) {
var offset = $(element).offset(); var offset = _self.offset();
_x = e.originalEvent.changedTouches[0].pageX - offset.left; _x = e.originalEvent.changedTouches[0].pageX - offset.left;
_y = e.originalEvent.changedTouches[0].pageY - offset.top; _y = e.originalEvent.changedTouches[0].pageY - offset.top;
} }
} }
function startDownTimer() {
var startDownTimer = function() {
if (_timer==undefined) { if (_timer==undefined) {
_timer = setInterval(onDownTimerInterval, 1000/downTimerFPS); _timer = setInterval(onDownTimerInterval, 1000/_downTimerFPS);
isDown = true; _isDown = true;
} }
} }
function stopDownTimer() {
var stopDownTimer = function() {
clearInterval(_timer); clearInterval(_timer);
_timer = undefined; _timer = undefined;
isDown = false; _isDown = false;
// _x = undefined; // _x = undefined;
// _y = undefined; // _y = undefined;
} }
function onDownTimerInterval() {
var onDownTimerInterval = function() {
if (_x!=undefined && _y!=undefined) { if (_x!=undefined && _y!=undefined) {
$(element).trigger("onButtonHold",{x:_x,y:_y}); _self.trigger("onButtonHold",{x:_x,y:_y});
} else { } else {
console.log("Button: warning... _x or _y not set..."); console.log("Button: warning... _x or _y not set...");
} }
} }
var onTouchStart = function(e) { // Event handlers
clickEnabled = false; $(document).mouseup(function(e) {
updateCursor(e);
startDownTimer();
$(element).trigger("onButtonClick",{x:_x,y:_y});
e.preventDefault();
}
var onTouchEnd = function(e) {
updateCursor(e);
stopDownTimer(); 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
}); });
this.on("touchstart", function(e) {
$(document).on("mouseup", onDocumentMouseUp); _clickEnabled = false;
$(element).css("-webkit-user-select","none"); updateCursor(e);
$(element).css("-webkit-touch-callout","none"); 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});
});
} }
}(jQuery)); // to work with multiple objects we need a jQuery plugin
$.fn.Button = function() {
return $(this).each(function(){
new Button(this);
});
};

50
js/buttonbehaviors.js
View File

@ -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);