From 6469300af57de0cc6876f12ae3ccf353f63da893 Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Tue, 7 Jul 2020 18:57:11 -0400
Subject: [PATCH] fix some csp violations y

---
 web/skins/classic/views/js/zone.js | 48 ++++++++++++++++++++----------
 web/skins/classic/views/zone.php   |  4 +--
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/web/skins/classic/views/js/zone.js b/web/skins/classic/views/js/zone.js
index c5b6772cd..013df3ea5 100644
--- a/web/skins/classic/views/js/zone.js
+++ b/web/skins/classic/views/js/zone.js
@@ -244,12 +244,14 @@ function limitArea(field) {
   limitRange(field, minValue, maxValue);
 }
 
-function highlightOn(index) {
+function highlightOn(point) {
+  var index = point.getAttribute('data-index');
   $('row'+index).addClass('highlight');
   $('point'+index).addClass('highlight');
 }
 
-function highlightOff(index) {
+function highlightOff(point) {
+  var index = point.getAttribute('data-index');
   $('row'+index).removeClass('highlight');
   $('point'+index).removeClass('highlight');
 }
@@ -310,9 +312,11 @@ function updateActivePoint(index) {
   $('newZone[Points]['+index+'][y]').value = y;
   zone['Points'][index].x = x;
   zone['Points'][index].y = y;
+  console.log('hello');
   var Point = $('zonePoly').points.getItem(index);
-  Point.x =x;
-  Point.y =y;
+  console.log('hello');
+  Point.x = x;
+  Point.y = y;
   updateArea();
 }
 
@@ -353,15 +357,17 @@ function updateArea( ) {
   } else if ( form.elements['newZone[Units]'].value == 'Pixels' ) {
     form.elements['newZone[TempArea]'].value = area;
   } else {
-    alert("Unknown units: " + form.elements['newZone[Units]'].value);
+    alert('Unknown units: ' + form.elements['newZone[Units]'].value);
   }
 }
 
-function updateX(index) {
-  limitPointValue($('newZone[Points]['+index+'][x]'), 0, maxX);
+function updateX(input) {
+  index = input.getAttribute('data-point-index');
+
+  limitPointValue(input, 0, maxX);
 
   var point = $('point'+index);
-  var x = $('newZone[Points]['+index+'][x]').get('value');
+  var x = input.value;
 
   point.setStyle('left', x+'px');
   zone['Points'][index].x = x;
@@ -370,11 +376,12 @@ function updateX(index) {
   updateArea();
 }
 
-function updateY(index) {
-  limitPointValue($('newZone[Points]['+index+'][y]'), 0, maxY);
+function updateY(input) {
+  index = input.getAttribute('data-point-index');
+  limitPointValue(input, 0, maxY);
 
   var point = $('point'+index);
-  var y = $('newZone[Points]['+index+'][y]').get('value');
+  var y = input.value;
 
   point.setStyle('top', y+'px');
   zone['Points'][index].y = y;
@@ -403,6 +410,7 @@ function drawZonePoints() {
   for ( var i = 0; i < zone['Points'].length; i++ ) {
     var div = new Element('div', {
       'id': 'point'+i,
+      'data-index': i,
       'class': 'zonePoint',
       'title': 'Point '+(i+1),
       'styles': {
@@ -410,7 +418,9 @@ function drawZonePoints() {
         'top': zone['Points'][i].y
       }
     });
-    div.addEvent('mouseover', highlightOn.pass(i));
+    //div.addEvent('mouseover', highlightOn.pass(i));
+    div.onmouseover = window['highlightOn'].bind(div, div);
+    div.onmouseout = window['highlightOff'].bind(div, div);
     div.addEvent('mouseout', highlightOff.pass(i));
     div.inject($('imageFrame'));
     div.makeDraggable( {
@@ -439,9 +449,12 @@ function drawZonePoints() {
       'id': 'newZone[Points]['+i+'][x]',
       'name': 'newZone[Points]['+i+'][x]',
       'value': zone['Points'][i].x,
-      'size': 5
+      'type': 'number',
+      'min' : '0',
+      'max' : maxX,
+      'data-point-index' : i
     });
-    input.addEvent('input', updateX.pass(i));
+    input.oninput = window['updateX'].bind(input, input);
     input.inject(cell);
     cell.inject(row);
 
@@ -450,9 +463,12 @@ function drawZonePoints() {
       'id': 'newZone[Points]['+i+'][y]',
       'name': 'newZone[Points]['+i+'][y]',
       'value': zone['Points'][i].y,
-      'size': 5
+      'type': 'number',
+      'min' : '0',
+      'max' : maxY,
+      'data-point-index' : i
     } );
-    input.addEvent('input', updateY.pass(i));
+    input.oninput = window['updateY'].bind(input, input);
     input.inject(cell);
     cell.inject(row);
 
diff --git a/web/skins/classic/views/zone.php b/web/skins/classic/views/zone.php
index e7a54a460..207bd64e5 100644
--- a/web/skins/classic/views/zone.php
+++ b/web/skins/classic/views/zone.php
@@ -212,8 +212,8 @@ xhtmlHeaders(__FILE__, translate('Zone'));
 								</tr>
 								<tr>
 									<th scope="row"><?php echo translate('ZoneMinMaxPixelThres') ?></th>
-									<td><input type="number" name="newZone[MinPixelThreshold]" value="<?php echo $newZone['MinPixelThreshold'] ?>"/></td>
-									<td><input type="number" name="newZone[MaxPixelThreshold]" value="<?php echo $newZone['MaxPixelThreshold'] ?>"/></td>
+									<td><input type="number" name="newZone[MinPixelThreshold]" value="<?php echo $newZone['MinPixelThreshold'] ?>" min="0" max="255"/></td>
+									<td><input type="number" name="newZone[MaxPixelThreshold]" value="<?php echo $newZone['MaxPixelThreshold'] ?>" min="0" max="255"/></td>
 								</tr>
 								<tr>
 									<th scope="row"><?php echo translate('ZoneFilterSize') ?></th>