Added starting/stopping monitor when show/hide page (zones.js)

I also added the functions panZoomOut(el) and panZoomIn(el) to avoid errors in the browser console.
I don't think it's necessary to fully implement PanZoom on this page. At least for now...

web/skins/classic/views/js/zones.js

@@ -35,6 +35,14 @@ function initPage() {
   });
 }
 
+function panZoomIn(el) {
+  zmPanZoom.zoomIn(el);
+}
+
+function panZoomOut(el) {
+  zmPanZoom.zoomOut(el);
+}
+
 function streamCmdQuit() {
   for ( var i = 0, length = monitorData.length; i < length; i++ ) {
     monitors[i] = new MonitorStream(monitorData[i]);
@@ -44,3 +52,18 @@ function streamCmdQuit() {
 
 window.addEventListener('DOMContentLoaded', initPage);
 
+document.onvisibilitychange = () => {
+  if (document.visibilityState === "hidden") {
+    //Stop monitors when closing or hiding page
+    for (let i = 0, length = monitorData.length; i < length; i++) {
+      monitors[i].kill();
+    }
+  } else {
+    //Start monitors when show page
+    for (let i = 0, length = monitorData.length; i < length; i++) {
+      if (!monitors[i].started) {
+        monitors[i].start();
+      }
+    }
+  }
+};