Merge branch 'master' into zma_to_thread

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;

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() {

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' ) {
 ?>
           <div id="activity" class="activitySize">