diff --git a/web/skins/classic/css/base/views/timeline.css b/web/skins/classic/css/base/views/timeline.css index c2efed713..815492bb6 100644 --- a/web/skins/classic/css/base/views/timeline.css +++ b/web/skins/classic/css/base/views/timeline.css @@ -227,7 +227,7 @@ div.majLabelY { font-weight: normal; } -div.zoom { +div.tlzoom { position: absolute; z-index: 2; bottom: 0px; diff --git a/web/skins/classic/views/js/timeline.js b/web/skins/classic/views/js/timeline.js index a4e564b9d..b9970ee6d 100644 --- a/web/skins/classic/views/js/timeline.js +++ b/web/skins/classic/views/js/timeline.js @@ -1,10 +1,10 @@ var events = {}; function showEvent(e) { - eid = e.getAttribute('data-event-id'); - fid = e.getAttribute('data-frame-id'); - var url = '?view=event&eid='+eid+'&fid='+fid; - url += filterQuery; + var eid = e.getAttribute('data-event-id'); + var fid = e.getAttribute('data-frame-id'); + var url = '?view=event&eid='+eid+'&fid='+fid+filterQuery; + window.location.href = url; } @@ -27,7 +27,7 @@ function createEventHtml(zm_event, frame) { function showEventDetail(eventHtml) { $j('#instruction').addClass('hidden'); - $j('#eventData').empty().append(eventHtml).removeClass('Hidden'); + $j('#eventData').empty().append(eventHtml).removeClass('hidden'); } function eventDataResponse(respObj, respText) { @@ -58,7 +58,7 @@ function frameDataResponse( respObj, respText ) { } if ( !zm_event['frames'] ) { - console.log("No frames data in event response"); + console.log('No frames data in event response'); console.log(zm_event); console.log(respObj); zm_event['frames'] = {}; @@ -77,8 +77,7 @@ function showEventData(eventId, frameId) { if ( zm_event['frames'][frameId] ) { showEventDetail( zm_event['frames'][frameId]['html'] ); var imagePath = 'index.php?view=image&eid='+eventId+'&fid='+frameId; - var videoName = zm_event.DefaultVideo; - loadEventImage( imagePath, eventId, frameId, zm_event.Width, zm_event.Height, zm_event.Frames/zm_event.Length, videoName, zm_event.Length, zm_event.StartDateTime, monitors[zm_event.MonitorId]); + loadEventImage(imagePath, eventId, frameId); return; } else { console.log('No frames for ' + frameId); @@ -126,18 +125,20 @@ function previewEvent(slot) { } } -function loadEventImage( imagePath, eid, fid, width, height, fps, videoName, duration, startTime, Monitor ) { +function loadEventImage( imagePath, eid, fid ) { var imageSrc = $j('#imageSrc'); imageSrc.show(); imageSrc.attr('src', imagePath); - imageSrc.data('event-id', eid); - imageSrc.data('frame-id', fid); + imageSrc.attr('data-event-id', eid); + imageSrc.attr('data-frame-id', fid); imageSrc.click(window['showEvent'].bind(imageSrc, imageSrc)); var eventData = $j('#eventData'); eventData.off('click'); eventData.click(showEvent.pass()); + + divDataOnClick(); } function tlZoomBounds(event) { @@ -158,7 +159,7 @@ function tlPanRight() { location.replace('?view='+currentView+filterQuery+'&midTime='+maxTime+'&range='+range); } -window.addEventListener('DOMContentLoaded', function() { +function divDataOnClick() { // These look like the code in skin.js, but that code doesn't select for divs. document.querySelectorAll('div.event').forEach(function(el) { el.onclick = window[el.getAttribute('data-on-click-this')].bind(el, el); @@ -168,12 +169,12 @@ window.addEventListener('DOMContentLoaded', function() { el.onclick = window[el.getAttribute('data-on-click-this')].bind(el, el); el.onmouseover = window[el.getAttribute('data-on-mouseover-this')].bind(el, el); }); - document.querySelectorAll('div.zoom').forEach(function(el) { + document.querySelectorAll('div.tlzoom').forEach(function(el) { el.onclick = function(ev) { window[el.getAttribute('data-on-click')](ev); }; }); -}); +} function initPage() { var backBtn = $j('#backBtn'); @@ -197,6 +198,9 @@ function initPage() { evt.preventDefault(); window.location.assign('?view=events'+filterQuery); }); + + // Bind the data-on-click attributes associated with a div + divDataOnClick(); } $j(document).ready(function() { diff --git a/web/skins/classic/views/timeline.php b/web/skins/classic/views/timeline.php index 53ea0f03d..4817540e2 100644 --- a/web/skins/classic/views/timeline.php +++ b/web/skins/classic/views/timeline.php @@ -742,7 +742,7 @@ function drawSlot($slot,$index) { if ( $mode == 'overlay' ) { echo drawYGrid( $chart, $majYScale, 'majLabelY', 'majTickY', 'majGridY graphWidth' ); } -echo drawXGrid( $chart, $majXScale, 'majLabelX', 'majTickX', 'majGridX graphHeight', 'zoom graphHeight' ); +echo drawXGrid( $chart, $majXScale, 'majLabelX', 'majTickX', 'majGridX graphHeight', 'tlzoom graphHeight' ); if ( $mode == 'overlay' ) { ?>