Use buttons instead of divs and inputs (#2522)

This commit is contained in:
Isaac Connor 2019-02-22 09:23:06 -05:00 committed by GitHub
parent 410cb70ddb
commit 0a7667f2d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 95 additions and 92 deletions

View File

@ -15,6 +15,9 @@
.ptzControls input.ptzTextBtn {
margin-top: 2px;
}
.ptzControls button {
border: none;
}
.ptzControls .controlsPanel {
margin: 0 auto;

View File

@ -21,104 +21,104 @@
function getControlCommands( $monitor ) {
$cmds = array();
$cmds['Wake'] = "wake";
$cmds['Sleep'] = "sleep";
$cmds['Reset'] = "reset";
$cmds['Wake'] = 'wake';
$cmds['Sleep'] = 'sleep';
$cmds['Reset'] = 'reset';
$cmds['PresetSet'] = "presetSet";
$cmds['PresetGoto'] = "presetGoto";
$cmds['PresetHome'] = "presetHome";
$cmds['PresetSet'] = 'presetSet';
$cmds['PresetGoto'] = 'presetGoto';
$cmds['PresetHome'] = 'presetHome';
if ( $monitor->CanZoom() ) {
if ( $monitor->CanZoomCon() )
$cmds['ZoomRoot'] = "zoomCon";
$cmds['ZoomRoot'] = 'zoomCon';
elseif ( $monitor->CanZoomRel() )
$cmds['ZoomRoot'] = "zoomRel";
$cmds['ZoomRoot'] = 'zoomRel';
elseif ( $monitor->CanZoomAbs() )
$cmds['ZoomRoot'] = "zoomAbs";
$cmds['ZoomTele'] = $cmds['ZoomRoot']."Tele";
$cmds['ZoomWide'] = $cmds['ZoomRoot']."Wide";
$cmds['ZoomStop'] = "zoomStop";
$cmds['ZoomAuto'] = "zoomAuto";
$cmds['ZoomMan'] = "zoomMan";
$cmds['ZoomRoot'] = 'zoomAbs';
$cmds['ZoomTele'] = $cmds['ZoomRoot'].'Tele';
$cmds['ZoomWide'] = $cmds['ZoomRoot'].'Wide';
$cmds['ZoomStop'] = 'zoomStop';
$cmds['ZoomAuto'] = 'zoomAuto';
$cmds['ZoomMan'] = 'zoomMan';
}
if ( $monitor->CanFocus() ) {
if ( $monitor->CanFocusCon() )
$cmds['FocusRoot'] = "focusCon";
$cmds['FocusRoot'] = 'focusCon';
elseif ( $monitor->CanFocusRel() )
$cmds['FocusRoot'] = "focusRel";
$cmds['FocusRoot'] = 'focusRel';
elseif ( $monitor->CanFocusAbs() )
$cmds['FocusRoot'] = "focusAbs";
$cmds['FocusFar'] = $cmds['FocusRoot']."Far";
$cmds['FocusNear'] = $cmds['FocusRoot']."Near";
$cmds['FocusStop'] = "focusStop";
$cmds['FocusAuto'] = "focusAuto";
$cmds['FocusMan'] = "focusMan";
$cmds['FocusRoot'] = 'focusAbs';
$cmds['FocusFar'] = $cmds['FocusRoot'].'Far';
$cmds['FocusNear'] = $cmds['FocusRoot'].'Near';
$cmds['FocusStop'] = 'focusStop';
$cmds['FocusAuto'] = 'focusAuto';
$cmds['FocusMan'] = 'focusMan';
}
if ( $monitor->CanIris() ) {
if ( $monitor->CanIrisCon() )
$cmds['IrisRoot'] = "irisCon";
$cmds['IrisRoot'] = 'irisCon';
elseif ( $monitor->CanIrisRel() )
$cmds['IrisRoot'] = "irisRel";
$cmds['IrisRoot'] = 'irisRel';
elseif ( $monitor->CanIrisAbs() )
$cmds['IrisRoot'] = "irisAbs";
$cmds['IrisOpen'] = $cmds['IrisRoot']."Open";
$cmds['IrisClose'] = $cmds['IrisRoot']."Close";
$cmds['IrisStop'] = "irisStop";
$cmds['IrisAuto'] = "irisAuto";
$cmds['IrisMan'] = "irisMan";
$cmds['IrisRoot'] = 'irisAbs';
$cmds['IrisOpen'] = $cmds['IrisRoot'].'Open';
$cmds['IrisClose'] = $cmds['IrisRoot'].'Close';
$cmds['IrisStop'] = 'irisStop';
$cmds['IrisAuto'] = 'irisAuto';
$cmds['IrisMan'] = 'irisMan';
}
if ( $monitor->CanWhite() ) {
if ( $monitor->CanWhiteCon() )
$cmds['WhiteRoot'] = "whiteCon";
$cmds['WhiteRoot'] = 'whiteCon';
elseif ( $monitor->CanWhiteRel() )
$cmds['WhiteRoot'] = "whiteRel";
$cmds['WhiteRoot'] = 'whiteRel';
elseif ( $monitor->CanWhiteAbs() )
$cmds['WhiteRoot'] = "whiteAbs";
$cmds['WhiteIn'] = $cmds['WhiteRoot']."In";
$cmds['WhiteOut'] = $cmds['WhiteRoot']."Out";
$cmds['WhiteAuto'] = "whiteAuto";
$cmds['WhiteMan'] = "whiteMan";
$cmds['WhiteRoot'] = 'whiteAbs';
$cmds['WhiteIn'] = $cmds['WhiteRoot'].'In';
$cmds['WhiteOut'] = $cmds['WhiteRoot'].'Out';
$cmds['WhiteAuto'] = 'whiteAuto';
$cmds['WhiteMan'] = 'whiteMan';
}
if ( $monitor->CanGain() ) {
if ( $monitor->CanGainCon() )
$cmds['GainRoot'] = "gainCon";
$cmds['GainRoot'] = 'gainCon';
elseif ( $monitor->CanGainRel() )
$cmds['GainRoot'] = "gainRel";
$cmds['GainRoot'] = 'gainRel';
elseif ( $monitor->CanGainAbs() )
$cmds['GainRoot'] = "gainAbs";
$cmds['GainUp'] = $cmds['GainRoot']."Up";
$cmds['GainDown'] = $cmds['GainRoot']."Down";
$cmds['GainAuto'] = "gainAuto";
$cmds['GainMan'] = "gainMan";
$cmds['GainRoot'] = 'gainAbs';
$cmds['GainUp'] = $cmds['GainRoot'].'Up';
$cmds['GainDown'] = $cmds['GainRoot'].'Down';
$cmds['GainAuto'] = 'gainAuto';
$cmds['GainMan'] = 'gainMan';
}
if ( $monitor->CanMove() ) {
if ( $monitor->CanMoveCon() ) {
$cmds['MoveRoot'] = "moveCon";
$cmds['Center'] = "moveStop";
$cmds['MoveRoot'] = 'moveCon';
$cmds['Center'] = 'moveStop';
} elseif ( $monitor->CanMoveRel() ) {
$cmds['MoveRoot'] = "moveRel";
$cmds['MoveRoot'] = 'moveRel';
$cmds['Center'] = $cmds['PresetHome'];
} elseif ( $monitor->CanMoveAbs() ) {
$cmds['MoveRoot'] = "moveAbs";
$cmds['MoveRoot'] = 'moveAbs';
$cmds['Center'] = $cmds['PresetHome'];
} else {
$cmds['MoveRoot'] = '';
}
$cmds['MoveUp'] = $cmds['MoveRoot']."Up";
$cmds['MoveDown'] = $cmds['MoveRoot']."Down";
$cmds['MoveLeft'] = $cmds['MoveRoot']."Left";
$cmds['MoveRight'] = $cmds['MoveRoot']."Right";
$cmds['MoveUpLeft'] = $cmds['MoveRoot']."UpLeft";
$cmds['MoveUpRight'] = $cmds['MoveRoot']."UpRight";
$cmds['MoveDownLeft'] = $cmds['MoveRoot']."DownLeft";
$cmds['MoveDownRight'] = $cmds['MoveRoot']."DownRight";
$cmds['MoveUp'] = $cmds['MoveRoot'].'Up';
$cmds['MoveDown'] = $cmds['MoveRoot'].'Down';
$cmds['MoveLeft'] = $cmds['MoveRoot'].'Left';
$cmds['MoveRight'] = $cmds['MoveRoot'].'Right';
$cmds['MoveUpLeft'] = $cmds['MoveRoot'].'UpLeft';
$cmds['MoveUpRight'] = $cmds['MoveRoot'].'UpRight';
$cmds['MoveDownLeft'] = $cmds['MoveRoot'].'DownLeft';
$cmds['MoveDownRight'] = $cmds['MoveRoot'].'DownRight';
}
return( $cmds );
}
@ -128,15 +128,15 @@ function controlFocus( $monitor, $cmds ) {
?>
<div class="arrowControl focusControls">
<div class="arrowLabel"><?php echo translate('Near') ?></div>
<div class="longArrowBtn upBtn" onclick="controlCmd('<?php echo $cmds['FocusNear'] ?>',event,0,-1)"></div>
<div class="arrowCenter"<?php if ( $monitor->CanFocusCon() ) { ?> onclick="controlCmd('<?php echo $cmds['FocusStop'] ?>')"<?php } ?>><?php echo translate('Focus') ?></div>
<div class="longArrowBtn downBtn" onclick="controlCmd('<?php echo $cmds['FocusFar'] ?>',event,0,1)"></div>
<button type="button" class="longArrowBtn upBtn" onclick="controlCmd('<?php echo $cmds['FocusNear'] ?>',event,0,-1)"></button>
<button type="button" class="arrowCenter"<?php if ( $monitor->CanFocusCon() ) { ?> onclick="controlCmd('<?php echo $cmds['FocusStop'] ?>')"<?php } ?>><?php echo translate('Focus') ?></button>
<button type="button" class="longArrowBtn downBtn" onclick="controlCmd('<?php echo $cmds['FocusFar'] ?>',event,0,1)"></button>
<div class="arrowLabel"><?php echo translate('Far') ?></div>
<?php
if ( $monitor->CanAutoFocus() ) {
?>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Auto') ?>" onclick="controlCmd('<?php echo $cmds['FocusAuto'] ?>')"/>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Man') ?>" onclick="controlCmd('<?php echo $cmds['FocusMan'] ?>')"/>
<button type="button" class="ptzTextBtn" value="<?php echo $cmds['FocusAuto'] ?>" onclick="controlCmd('<?php echo $cmds['FocusAuto'] ?>')"><?php echo translate('Auto') ?></button>
<button type="button" class="ptzTextBtn" value="<?php echo $cmds['FocusMan'] ?>" onclick="controlCmd('<?php echo $cmds['FocusMan'] ?>')"><?php echo translate('Man') ?></button>
<?php
}
?>
@ -152,15 +152,15 @@ function controlZoom( $monitor, $cmds ) {
?>
<div class="arrowControl zoomControls">
<div class="arrowLabel"><?php echo translate('Tele') ?></div>
<div class="longArrowBtn upBtn" onclick="controlCmd('<?php echo $cmds['ZoomTele'] ?>',event,0,-1)"></div>
<div class="arrowCenter"<?php if ( $monitor->CanZoomCon() ) { ?> onclick="controlCmd('<?php echo $cmds['ZoomStop'] ?>')"<?php } ?>><?php echo translate('Zoom') ?></div>
<div class="longArrowBtn downBtn" onclick="controlCmd('<?php echo $cmds['ZoomWide'] ?>',event,0,1)"></div>
<button type="button" class="longArrowBtn upBtn" onclick="controlCmd('<?php echo $cmds['ZoomTele'] ?>',event,0,-1)"></button>
<button type="button" class="arrowCenter"<?php if ( $monitor->CanZoomCon() ) { ?> onclick="controlCmd('<?php echo $cmds['ZoomStop'] ?>')"<?php } ?>><?php echo translate('Zoom') ?></button>
<button type="button" class="longArrowBtn downBtn" onclick="controlCmd('<?php echo $cmds['ZoomWide'] ?>',event,0,1)"></button>
<div class="arrowLabel"><?php echo translate('Wide') ?></div>
<?php
if ( $monitor->CanAutoZoom() ) {
?>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Auto') ?>" onclick="controlCmd('<?php echo $cmds['ZoomAuto'] ?>')"/>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Man') ?>" onclick="controlCmd('<?php echo $cmds['ZoomMan'] ?>')"/>
<button type="button" class="ptzTextBtn" value="Auto" onclick="controlCmd('<?php echo $cmds['ZoomAuto'] ?>')"><?php echo translate('Auto') ?></button>
<button type="button" class="ptzTextBtn" value="Man" onclick="controlCmd('<?php echo $cmds['ZoomMan'] ?>')"><?php echo translate('Man') ?></button>
<?php
}
?>
@ -175,15 +175,15 @@ function controlIris( $monitor, $cmds ) {
?>
<div class="arrowControl irisControls">
<div class="arrowLabel"><?php echo translate('Open') ?></div>
<div class="longArrowBtn upBtn" onclick="controlCmd('<?php echo $cmds['IrisOpen'] ?>',event,0,-1)"></div>
<div class="arrowCenter"<?php if ( $monitor->CanIrisCon() ) { ?> onclick="controlCmd('<?php echo $cmds['IrisStop'] ?>')"<?php } ?>><?php echo translate('Iris') ?></div>
<div class="longArrowBtn downBtn" onclick="controlCmd('<?php echo $cmds['IrisClose'] ?>',event,0,1)"></div>
<button type="button" class="longArrowBtn upBtn" onclick="controlCmd('<?php echo $cmds['IrisOpen'] ?>',event,0,-1)"></button>
<button type="button" class="arrowCenter"<?php if ( $monitor->CanIrisCon() ) { ?> onclick="controlCmd('<?php echo $cmds['IrisStop'] ?>')"<?php } ?>><?php echo translate('Iris') ?></button>
<button type="button" class="longArrowBtn downBtn" onclick="controlCmd('<?php echo $cmds['IrisClose'] ?>',event,0,1)"></button>
<div class="arrowLabel"><?php echo translate('Close') ?></div>
<?php
if ( $monitor->CanAutoIris() ) {
?>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Auto') ?>" onclick="controlCmd('<?php echo $cmds['IrisAuto'] ?>')"/>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Man') ?>" onclick="controlCmd('<?php echo $cmds['IrisMan'] ?>')"/>
<button type="button" class="ptzTextBtn" value="Auto" onclick="controlCmd('<?php echo $cmds['IrisAuto'] ?>')"><?php echo translate('Auto') ?></button>
<button type="button" class="ptzTextBtn" value="Man" onclick="controlCmd('<?php echo $cmds['IrisMan'] ?>')"><?php echo translate('Man') ?></button>
<?php
}
?>
@ -199,15 +199,15 @@ function controlWhite( $monitor, $cmds ) {
?>
<div class="arrowControl whiteControls">
<div class="arrowLabel"><?php echo translate('In') ?></div>
<div class="longArrowBtn upBtn" onclick="controlCmd('<?php echo $cmds['WhiteIn'] ?>',event,0,-1)"></div>
<div class="arrowCenter"<?php if ( $monitor->CanWhiteCon() ) { ?> onclick="controlCmd('<?php echo $cmds['WhiteStop'] ?>')"<?php } ?>><?php echo translate('White') ?></div>
<div class="longArrowBtn downBtn" onclick="controlCmd('<?php echo $cmds['WhiteOut'] ?>',event,0,1)"></div>
<button type="button" class="longArrowBtn upBtn" onclick="controlCmd('<?php echo $cmds['WhiteIn'] ?>',event,0,-1)"></button>
<button type="button" class="arrowCenter"<?php if ( $monitor->CanWhiteCon() ) { ?> onclick="controlCmd('<?php echo $cmds['WhiteStop'] ?>')"<?php } ?>><?php echo translate('White') ?></button>
<button type="button" class="longArrowBtn downBtn" onclick="controlCmd('<?php echo $cmds['WhiteOut'] ?>',event,0,1)"></button>
<div class="arrowLabel"><?php echo translate('Out') ?></div>
<?php
if ( $monitor->CanAutoWhite() ) {
?>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Auto') ?>" onclick="controlCmd('<?php echo $cmds['WhiteAuto'] ?>')"/>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Man') ?>" onclick="controlCmd('<?php echo $cmds['WhiteMan'] ?>')"/>
<button type="button" class="ptzTextBtn" value="Auto" onclick="controlCmd('<?php echo $cmds['WhiteAuto'] ?>')"><?php echo translate('Auto') ?></button>
<button type="button" class="ptzTextBtn" value="Man" onclick="controlCmd('<?php echo $cmds['WhiteMan'] ?>')"><?php echo translate('Man') ?></button>
<?php
}
?>
@ -229,19 +229,19 @@ function controlPanTilt( $monitor, $cmds ) {
$hasTilt = $monitor->CanTilt();
$hasDiag = $hasPan && $hasTilt && $monitor->CanMoveDiag();
?>
<div class="arrowBtn upLeftBtn<?php echo $hasDiag?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveUpLeft'] ?>',event,-1,-1)"></div>
<div class="arrowBtn upBtn<?php echo $hasTilt?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveUp'] ?>',event,0,-1)"></div>
<div class="arrowBtn upRightBtn<?php echo $hasDiag?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveUpRight'] ?>',event,1,-1)"></div>
<div class="arrowBtn leftBtn<?php echo $hasPan?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveLeft'] ?>',event,1,0)"></div>
<button type="button" class="arrowBtn upLeftBtn<?php echo $hasDiag?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveUpLeft'] ?>',event,-1,-1)"></button>
<button type="button" class="arrowBtn upBtn<?php echo $hasTilt?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveUp'] ?>',event,0,-1)"></button>
<button type="button" class="arrowBtn upRightBtn<?php echo $hasDiag?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveUpRight'] ?>',event,1,-1)"></button>
<button type="button" class="arrowBtn leftBtn<?php echo $hasPan?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveLeft'] ?>',event,1,0)"></button>
<?php if ( isset($cmds['Center']) ) { ?>
<div class="arrowBtn centerBtn" onclick="controlCmd('<?php echo $cmds['Center'] ?>')"></div>
<button type="button" class="arrowBtn centerBtn" onclick="controlCmd('<?php echo $cmds['Center'] ?>')"></button>
<?php } else { ?>
<div class="arrowBtn NocenterBtn"></div>
<button type="button" class="arrowBtn NocenterBtn"></button>
<?php } ?>
<div class="arrowBtn rightBtn<?php echo $hasPan?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveRight'] ?>',event,1,0)"></div>
<div class="arrowBtn downLeftBtn<?php echo $hasDiag?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveDownLeft'] ?>',event,-1,1)"></div>
<div class="arrowBtn downBtn<?php echo $hasTilt?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveDown'] ?>',event,0,1)"></div>
<div class="arrowBtn downRightBtn<?php echo $hasDiag?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveDownRight'] ?>',event,1,1)"></div>
<button type="button" class="arrowBtn rightBtn<?php echo $hasPan?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveRight'] ?>',event,1,0)"></button>
<button type="button" class="arrowBtn downLeftBtn<?php echo $hasDiag?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveDownLeft'] ?>',event,-1,1)"></button>
<button type="button" class="arrowBtn downBtn<?php echo $hasTilt?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveDown'] ?>',event,0,1)"></button>
<button type="button" class="arrowBtn downRightBtn<?php echo $hasDiag?'':' invisible' ?>" onclick="controlCmd('<?php echo $cmds['MoveDownRight'] ?>',event,1,1)"></button>
</div>
</div>
<?php
@ -270,7 +270,7 @@ function controlPresets( $monitor, $cmds ) {
<?php
for ( $i = 1; $i <= $monitor->NumPresets(); $i++ ) {
?>
<input type="button" class="ptzNumBtn" title="<?php echo isset($labels[$i])?htmlentities($labels[$i]):'' ?>" value="<?php echo $i ?>" onclick="controlCmd('<?php echo $cmds['PresetGoto'] ?><?php echo $i ?>');"/>
<button type="button" class="ptzNumBtn" title="<?php echo isset($labels[$i])?htmlentities($labels[$i]):'' ?>" value="<?php echo $i ?>" onclick="controlCmd('<?php echo $cmds['PresetGoto'] ?><?php echo $i ?>');"/><?php echo $i ?></button>
<?php
if ( $i && (($i%$presetBreak) == 0) ) {
?><br/><?php
@ -282,12 +282,12 @@ function controlPresets( $monitor, $cmds ) {
<?php
if ( $monitor->HasHomePreset() ) {
?>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Home') ?>" onclick="controlCmd('<?php echo $cmds['PresetHome'] ?>');"/>
<button type="button" class="ptzTextBtn" value="<?php echo translate('Home') ?>" onclick="controlCmd('<?php echo $cmds['PresetHome'] ?>');"/>
<?php
}
if ( canEdit('Monitors') && $monitor->CanSetPresets() ) {
?>
<input type="button" class="ptzTextBtn popup-link" value="<?php echo translate('Set') ?>" data-url="?view=controlpreset&amp;mid=<?php echo $monitor->Id() ?>" data-window-name="zmPreset" data-window-tag="preset"/>
<button type="button" class="ptzTextBtn popup-link" value="<?php echo translate('Set') ?>" data-url="?view=controlpreset&amp;mid=<?php echo $monitor->Id() ?>" data-window-name="zmPreset" data-window-tag="preset"/>
<?php
}
?>
@ -308,17 +308,17 @@ function controlPower( $monitor, $cmds ) {
<?php
if ( $monitor->CanWake() ) {
?>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Wake') ?>" onclick="controlCmd('<?php echo $cmds['Wake'] ?>')"/>
<button type="button" class="ptzTextBtn" value="Wake" onclick="controlCmd('<?php echo $cmds['Wake'] ?>')"><?php echo translate('Wake') ?></button>
<?php
}
if ( $monitor->CanSleep() ) {
?>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Sleep') ?>" onclick="controlCmd('<?php echo $cmds['Sleep'] ?>')"/>
<button type="button" class="ptzTextBtn" value="Sleep" onclick="controlCmd('<?php echo $cmds['Sleep'] ?>')"><?php echo translate('Sleep') ?></button>
<?php
}
if ( $monitor->CanReset() ) {
?>
<input type="button" class="ptzTextBtn" value="<?php echo translate('Reset') ?>" onclick="controlCmd('<?php echo $cmds['Reset'] ?>')"/>
<button type="button" class="ptzTextBtn" value="Reset" onclick="controlCmd('<?php echo $cmds['Reset'] ?>')"><?php echo translate('Reset') ?></button>
<?php
}
?>