Combining a mouseleave with mousedown/mouseup function? - php

Question

Ok, here's my issue. The following code works as intended, but I have this nagging feeling that I should be able to solve the problem more succinctly. I'm writing a script that will allow a person to pan/tilt/zoom an IP camera using custom controls on an html page. I've layed out the direction icons in a numberpad-style arrangement representing up, down, left-up etc... like so:
1 2 3
4 _ 6
7 8 9
When the user holds the mousedown on an icon, the img is swapped out for an active version and the command to begin the action is sent to a php cURL script, along with the respective direction (icon id). When the mouse is released the image is again swapped for the inactive version and the command is sent to the cURL script to stop moving in that same direction.
This works as long as the mouse is kept hovering over the same icon that was initially selected. If the person let the mouse leave the icon and then releases it, the second function checks to see if any of the directions are currently activated, inactivating them and sending a respective stop command to the cURL script.
Is there a way to actually accomplish this using one function?
// PTZ MOVEMENT / IMAGE SWAP
$('.nav-control').on('mousedown mouseup', '.ptz-cmd', function(e){
var thisCmd = $(this).attr('id'); // 1 - 9, designating numberpad style of movement
var thisAction = $(this).attr('action') // pantilt or zoom
if (e.type == 'mousedown') {
$(this).attr('src','img/' + thisCmd + 'h.png'); // example: 1h.png = active icon, 1b.png = inactive icon
$('#ptz').load("ptz.php?action=" + thisAction + "&cmd=" + thisCmd); // movement is handled by php cURL script and 'loaded' into a hidden div
} else {
$(this).attr('src','img/' + thisCmd + 'b.png');
$('#ptz').load("ptz.php?action=" + thisAction + "&cmd=stop"); // stop the movement or zoom for this direction...
}
});
// CANCEL MOVEMENT AND REPLACE IMAGE IF MOUSE LEAVES ICON AND IS RELEASED
$('.nav-control').on('mouseleave', '.ptz-cmd', function(e){
$('#ptz').load("ptz.php?action=pantilt&cmd=stop");
$('.ptz-cmd:not([action=preset])').each(function(){
if($(this).attr('src').substring(5) == "h.png"){
var whichDirection = $(this).attr('src').substring(0,5);
$(this).attr('src',whichDirection + 'b.png')
}
});
});

Answer 1

Absolutely:
var $ptz = $('#ptz');
$('.nav-control').on({
mousedown:function(){
var self = this,
thisCmd = self.id,
thisAction = self.action;
self.src = 'img/' + thisCmd + 'h.png';
$ptz.load("ptz.php?action=" + thisAction + "&cmd=" + thisCmd);
},
mouseup:function(){
var self = this,
thisCmd = self.id,
thisAction = self.action;
self.src = 'img/' + thisCmd + 'b.png';
$ptz.load("ptz.php?action=" + thisAction + "&cmd=stop");
},
mouseleave:function(){
$ptz.load("ptz.php?action=pantilt&cmd=stop");
$('.ptz-cmd').filter(':not([action=preset])').each(function(){
var self = this,
src = self.src;
if(src.substring(5) === 'h.png'){
self.src = src.substring(0,5) + 'b.png';
}
});
}
},'.ptz-cmd');
Changes:
By using the object form of .on(), you can consolidate these three events into a single binding
By splitting mousedown and mouseup, there is less runtime parsing (no checking events, less code per run of each, etc)
Using vanilla JS vs jQuery is faster, used for items like src,id, and action.
Use of === instead of == is more strict, and therefore more standards-compliant
Caching of $('#ptz') at top will save extra DOM scrapes
This isn't tested, but the theory behind it is sound. Even if you only take away the first point, you will have consolidated all your event bindings into a single call, and delegated appropriately.
Alternative:
var $ptz = $('#ptz');
$('.nav-control').on({
'mousedown mouseup':function(e){
var self = this,
cmdImg = self.id,
thisAction = self.action,
img = 'h',
thisCmd = cmdImg;
if(e.type === 'mouseup'){
img = 'b';
thisCmd = 'stop';
}
self.src = 'img/' + cmdImg + img + '.png';
$ptz.load("ptz.php?action=" + thisAction + "&cmd=" + thisCmd);
},
mouseleave:function(){
$ptz.load("ptz.php?action=pantilt&cmd=stop");
$('.ptz-cmd').filter(':not([action=preset])').each(function(){
var self = this,
src = self.src;
if(src.substring(5) === 'h.png'){
self.src = src.substring(0,5) + 'b.png';
}
});
}
},'.ptz-cmd');
This just maintains the mouseup and mousedown combination, checking the event type to see which it is. Its every-so-slightly slower, but consolidates the codebase into a single function, making maintenance a bit easier. Notice in this option when you have two different events you need to make it a string, e.g. 'mouseup mousedown' vs mouseup mousedown ... you can only use the object names if there is a single object.
Either one of these options should put you on the right track.