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'));