mirror/zoneminder
1
0
Fork 0
mirror of https://github.com/ZoneMinder/zoneminder.git synced 2026-08-02 16:27:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: make Width/Height inputs update the dimensions dropdown

Browse Source 
updateMonitorDimensions never ran when typing in the capture Width/Height
inputs. initPage() bound it via el.oninput, then a later querySelectorAll
whose selector list also matches newMonitor[Width]/[Height] overwrote that
same property with buffer_setting_oninput. Bind both with addEventListener
so they coexist.

The function would have thrown even once it fired:

- option.size() was removed in jQuery 3.0 and the classic skin ships
  jQuery 3.7.1, so the lookup that picks between a matching resolution and
  Custom raised a TypeError. Use option.length.
- form.elements['preserveAspectRatio'] is undefined for the WebSite monitor
  type, which renders Width/Height without that checkbox. Guard the access.

Drop the inline onkeyup handlers from _monitor_source_nvsocket.php. That
file is included server-side before initPage() runs, so its inputs are
already covered by the binding and the inline handler only made
updateMonitorDimensions fire twice.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
(cherry picked from commit d9ee83b4b0)
This commit is contained in:
Isaac Connor
2026-07-15 19:18:17 -04:00
parent fd851351bc
commit d8c7a368e6
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/skins/classic/views/_monitor_source_nvsocket.php
View File

@@ -11,11 +11,11 @@
<td><?php echo htmlSelect( 'newMonitor[Colours]', $Colours, $monitor->Colours() ); ?></td></tr>
<tr>
<td><?php echo translate('CaptureWidth') ?> (<?php echo translate('Pixels') ?>)</td>
<td><input type="number" name="newMonitor[Width]" value="<?php echo validHtmlStr($monitor->Width()) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/></td>
<td><input type="number" name="newMonitor[Width]" value="<?php echo validHtmlStr($monitor->Width()) ?>" size="4"/></td>
</tr>
<tr>
<td><?php echo translate('CaptureHeight') ?> (<?php echo translate('Pixels') ?>)</td>
<td><input type="number" name="newMonitor[Height]" value="<?php echo validHtmlStr($monitor->Height()) ?>" size="4" onkeyup="updateMonitorDimensions(this);"/></td>
<td><input type="number" name="newMonitor[Height]" value="<?php echo validHtmlStr($monitor->Height()) ?>" size="4"/></td>
</tr>
<tr><td><?php echo translate('PreserveAspect') ?></td><td><input type="checkbox" name="preserveAspectRatio" value="1"/></td></tr>
<tr><td><?php echo translate('Orientation') ?></td><td><?php echo htmlselect( 'newMonitor[Orientation]', $orientations, $monitor->Orientation() );?></td></tr>

16
web/skins/classic/views/js/monitor.js
View File

@@ -14,7 +14,8 @@ function updateMonitorDimensions(element) {
var monitorWidth = parseInt(form.elements['newMonitor[Width]'].value);
var monitorHeight = parseInt(form.elements['newMonitor[Height]'].value);
if ( form.elements['preserveAspectRatio'].checked ) {
// The WebSite monitor type renders Width/Height without a preserveAspectRatio checkbox.
if ( form.elements['preserveAspectRatio'] && form.elements['preserveAspectRatio'].checked ) {
switch ( element.name ) {
case 'newMonitor[Width]':
if ( monitorWidth >= 0 ) {
@@ -37,7 +38,7 @@ function updateMonitorDimensions(element) {
// If we find a matching option in the dropdown, select it or select custom
var option = $j('select[name="dimensions_select"] option[value="'+monitorWidth+'x'+monitorHeight+'"]');
if ( !option.size() ) {
if ( !option.length ) {
$j('select[name="dimensions_select"]').val('');
} else {
$j('select[name="dimensions_select"]').val(monitorWidth+'x'+monitorHeight);
@@ -175,11 +176,10 @@ function initPage() {
document.querySelectorAll('select[name="newMonitor[Devices]"]').forEach(function(el) {
el.onchange = window['devices_onchange'].bind(el, el);
});
document.querySelectorAll('input[name="newMonitor[Width]"]').forEach(function(el) {
el.oninput = window['updateMonitorDimensions'].bind(el, el);
});
document.querySelectorAll('input[name="newMonitor[Height]"]').forEach(function(el) {
el.oninput = window['updateMonitorDimensions'].bind(el, el);
// Width/Height also get a buffer_setting_oninput listener below, so use
// addEventListener rather than oninput= to avoid one clobbering the other.
document.querySelectorAll('input[name="newMonitor[Width]"],input[name="newMonitor[Height]"]').forEach(function(el) {
el.addEventListener('input', window['updateMonitorDimensions'].bind(el, el));
});
document.querySelectorAll('select[name="dimensions_select"]').forEach(function(el) {
el.onchange = window['updateMonitorDimensions'].bind(el, el);
@@ -198,7 +198,7 @@ function initPage() {
};
});
document.querySelectorAll('input[name="newMonitor[ImageBufferCount]"],input[name="newMonitor[MaxImageBufferCount]"],input[name="newMonitor[Width]"],input[name="newMonitor[Height]"],input[name="newMonitor[PreEventCount]"]').forEach(function(el) {
el.oninput = window['buffer_setting_oninput'].bind(el);
el.addEventListener('input', window['buffer_setting_oninput'].bind(el));
});
update_estimated_ram_use();