ZoneMinder
/
zoneminder
mirror of https://github.com/ZoneMinder/zoneminder.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

centralize thumb animation js, add delay

pull/3099/head
Andrew Bauer 2020-12-04 14:35:39 -06:00
parent 0d0eac98be
commit 21aeccb5d0
10 changed files with 34 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/skins/classic/css/base/skin.css
View File

@ -728,23 +728,11 @@ li.search-choice {
}
.zoom {
padding: 50px;
transition: transform .2s; /* Animation */
margin: 0 auto;
}
.zoom:hover {
transform-origin: 70% 50%;
transform: scale(5); /* (arbitray zoom value - Note if the zoom is too large, it will go outside of the viewport) */
}
.zoom-right {
padding: 0px;
transition: transform .2s; /* Animation */
margin: 0 auto;
}
.zoom-right:hover {
.zoom-console {
transform-origin: 0% 50%;
transform: scale(5); /* (arbitray zoom value - Note if the zoom is too large, it will go outside of the viewport) */
}

28
web/skins/classic/js/skin.js
View File

@ -889,3 +889,31 @@ function manageShutdownBtns(element) {
})
.fail(logAjaxFail);
}
function thumbnail_onmouseover(event) {
timeout = setTimeout(function () {
var img = event.target;
var imgClass = ( currentView == 'console' ) ? 'zoom-console' : 'zoom-hover';
img.src = '';
img.src = img.getAttribute('stream_src');
img.addClass(imgClass);
}, 350);
}
function thumbnail_onmouseout(event) {
clearTimeout(timeout);
var img = event.target;
var imgClass = ( currentView == 'console' ) ? 'zoom-console' : 'zoom-hover';
img.src = '';
img.src = img.getAttribute('still_src');
img.removeClass(imgClass);
}
function initThumbAnimation() {
if ( ANIMATE_THUMBS ) {
$j('.colThumbnail img').each(function() {
this.addEventListener('mouseover', thumbnail_onmouseover, false);
this.addEventListener('mouseout', thumbnail_onmouseout, false);
});
}
}

2
web/skins/classic/js/skin.js.php
View File

@ -49,6 +49,8 @@ var canViewMonitors = <?php echo canView('Monitors')?'true':'false' ?>;
var canEditGroups = <?php echo canEdit('Groups')?'true':'false' ?>;
var ANIMATE_THUMBS = <?php echo ZM_WEB_ANIMATE_THUMBS?'true':'false' ?>;
var refreshParent = <?php
if ( ! empty($refreshParent) ) {
if ( $refreshParent == true ) {

4
web/skins/classic/views/console.php
View File

@ -296,7 +296,7 @@ for( $monitor_i = 0; $monitor_i < count($displayMonitors); $monitor_i += 1 ) {
$imgHTML='';
if ( ZM_WEB_LIST_THUMBS && ($monitor['Status'] == 'Connected') && $running ) {
$options = array();
$thmbClass = ZM_WEB_ANIMATE_THUMBS ? 'colThumbnail zoom-right' : 'colThumbnail';
$ratio_factor = $Monitor->ViewHeight() / $Monitor->ViewWidth();
$options['width'] = ZM_WEB_LIST_THUMB_WIDTH;
$options['height'] = ZM_WEB_LIST_THUMB_HEIGHT ? ZM_WEB_LIST_THUMB_HEIGHT : ZM_WEB_LIST_THUMB_WIDTH*$ratio_factor;
@ -309,7 +309,7 @@ for( $monitor_i = 0; $monitor_i < count($displayMonitors); $monitor_i += 1 ) {
$thmbWidth = ( $options['width'] ) ? 'width:'.$options['width'].'px;' : '';
$thmbHeight = ( $options['height'] ) ? 'height:'.$options['height'].'px;' : '';
$imgHTML = '<div class="'.$thmbClass.'"><a';
$imgHTML = '<div class="colThumbnail"><a';
$imgHTML .= $stream_available ? ' href="?view=watch&amp;mid='.$monitor['Id'].'">' : '>';
$imgHTML .= '<img id="thumbnail' .$Monitor->Id(). '" src="' .$stillSrc. '" style="'
.$thmbWidth.$thmbHeight. '" stream_src="' .$streamSrc. '" still_src="' .$stillSrc. '"'.

21
web/skins/classic/views/js/console.js
View File

@ -1,24 +1,3 @@
function thumbnail_onmouseover(event) {
var img = event.target;
img.src = '';
img.src = img.getAttribute('stream_src');
}
function thumbnail_onmouseout(event) {
var img = event.target;
img.src = '';
img.src = img.getAttribute('still_src');
}
function initThumbAnimation() {
if ( WEB_ANIMATE_THUMBS ) {
$j('.colThumbnail img').each(function() {
this.addEventListener('mouseover', thumbnail_onmouseover, false);
this.addEventListener('mouseout', thumbnail_onmouseout, false);
});
}
}
function setButtonStates( element ) {
var form = element.form;
var checked = 0;

1
web/skins/classic/views/js/console.js.php
View File

@ -1,5 +1,4 @@
var consoleRefreshTimeout = <?php echo 1000*ZM_WEB_REFRESH_MAIN ?>;
var WEB_ANIMATE_THUMBS = <?php echo ZM_WEB_ANIMATE_THUMBS?'true':'false' ?>;
<?php
if ( canEdit('System') && ZM_DYN_SHOW_DONATE_REMINDER ) {

21
web/skins/classic/views/js/events.js
View File

@ -74,27 +74,6 @@ function processRows(rows) {
return rows;
}
function thumbnail_onmouseover(event) {
var img = event.target;
img.src = '';
img.src = img.getAttribute('stream_src');
}
function thumbnail_onmouseout(event) {
var img = event.target;
img.src = '';
img.src = img.getAttribute('still_src');
}
function initThumbAnimation() {
if ( WEB_ANIMATE_THUMBS ) {
$j('.colThumbnail img').each(function() {
this.addEventListener('mouseover', thumbnail_onmouseover, false);
this.addEventListener('mouseout', thumbnail_onmouseout, false);
});
}
}
// Returns the event id's of the selected rows
function getIdSelections() {
var table = $j('#eventTable');

1
web/skins/classic/views/js/events.js.php
View File

@ -12,4 +12,3 @@ var emailedString = "<?php echo translate('Emailed') ?>";
var yesString = "<?php echo translate('Yes') ?>";
var noString = "<?php echo translate('No') ?>";
var WEB_LIST_THUMBS = <?php echo ZM_WEB_LIST_THUMBS?'true':'false' ?>;
var WEB_ANIMATE_THUMBS = <?php echo ZM_WEB_ANIMATE_THUMBS?'true':'false' ?>;

24
web/skins/classic/views/js/watch.js
View File

@ -83,27 +83,6 @@ function processRows(rows) {
return rows;
}
function thumbnail_onmouseover(event) {
var img = event.target;
img.src = '';
img.src = img.getAttribute('stream_src');
}
function thumbnail_onmouseout(event) {
var img = event.target;
img.src = '';
img.src = img.getAttribute('still_src');
}
function initThumbAnimation() {
if ( ANIMATE_THUMBS ) {
$j('.colThumbnail img').each(function() {
this.addEventListener('mouseover', thumbnail_onmouseover, false);
this.addEventListener('mouseout', thumbnail_onmouseout, false);
});
}
}
function showEvents() {
$j('#ptzControls').addClass('hidden');
$j('#events').removeClass('hidden');
@ -903,8 +882,7 @@ function initPage() {
var thumb_ndx = $j('#eventList tr th').filter(function() {
return $j(this).text().trim() == 'Thumbnail';
}).index();
var thmbClass = ANIMATE_THUMBS ? 'colThumbnail zoom' : 'colThumbnail';
table.find("tr td:nth-child(" + (thumb_ndx+1) + ")").addClass(thmbClass);
table.find("tr td:nth-child(" + (thumb_ndx+1) + ")").addClass('colThumbnail');
});
} // initPage

1
web/skins/classic/views/js/watch.js.php
View File

@ -51,7 +51,6 @@ var SCALE_BASE = <?php echo SCALE_BASE ?>;
var SOUND_ON_ALARM = <?php echo ZM_WEB_SOUND_ON_ALARM ?>;
var POPUP_ON_ALARM = <?php echo ZM_WEB_POPUP_ON_ALARM ?>;
var LIST_THUMBS = <?php echo ZM_WEB_LIST_THUMBS?'true':'false' ?>;
var ANIMATE_THUMBS = <?php echo ZM_WEB_ANIMATE_THUMBS?'true':'false' ?>;
var streamMode = "<?php echo $streamMode ?>";
var showMode = "<?php echo ($showPtzControls && !empty($control))?"control":"events" ?>";