MediaWiki:Gadget-CargoHelperCore.js

/* Gadget-CargoHelperCore.js
   Heavy logic: dialog creation, Cargo queries, validation,
   insertion, form logic.
   Only loaded on demand by Gadget-CargoHelperLoader.js.
*/
( function () {
'use strict';

// At the very top of CargoHelperCore, before any async loading:
window.CargoHelper = window.CargoHelper || {};

// Create a ready promise that resolves once initialization finishes
window.CargoHelper.ready = new Promise(function(resolve, reject) {

    // Load dependencies
    mw.loader.using([
        'oojs-ui-core',
        'oojs-ui-windows',
        'oojs-ui-widgets',
        'mediawiki.util',
        'mediawiki.api'
    ]).then(function () {

		window.CargoHelper.handleSubmit = function (
		    modeSelect,
		    existingPerfDropdown,
		    existingPerfs,
		    eventInput,
		    dateInput,
		    contextCombo,
		    typeInput,
		    posInput,
		    withInput,
		    commentPInput,
		    urlInput,
		    durationInput,
		    qualityInput,
		    commentVInput,
		    dlg,
		    wm
		) {
	        try {
	            // Clear previous inline error styles
	            function clearInvalid(widget) {
	                if (widget && widget.$input) {
	                    widget.$input.css('outline', '').css('box-shadow', '');
	                } else if (widget && widget.$element) {
	                    widget.$element.css('outline', '').css('box-shadow', '');
	                }
	            }
	            [ eventInput, dateInput, contextCombo, urlInput, posInput, withInput, commentPInput, commentVInput ].forEach(clearInvalid);
	
	            // helper to mark invalid and attach handler to clear when edited
	            function markInvalid(widget) {
	                if (!widget) return;
	                if (widget.$input) {
	                    widget.$input.css('outline', '2px solid #d33').css('box-shadow', '0 0 0 2px rgba(211,51,51,0.08)');
	                    widget.$input.one('input', function () { widget.$input.css('outline', '').css('box-shadow', ''); });
	                } else if (widget.$element) {
	                    widget.$element.css('outline', '2px solid #d33').css('box-shadow', '0 0 0 2px rgba(211,51,51,0.08)');
	                    widget.$element.one('input', function () { widget.$element.css('outline', '').css('box-shadow', ''); });
	                }
	            }
	
	            // Validation helpers (reuse existing validators)
	            function isValidIsoLeadingDate(s) {
	                if (!s) return false;
	                var m = s.match(/^(\d{4})(?:-(\d{2})(?:-(\d{2}))?)?(?:\s.*)?$/);
	                if (!m) return false;
	                if (m[2]) {
	                    var mm = parseInt(m[2], 10);
	                    if (mm < 1 || mm > 12) return false;
	                }
	                if (m[3]) {
	                    var dd = parseInt(m[3], 10);
	                    if (dd < 1 || dd > 31) return false;
	                }
	                return true;
	            }
	            function isValidUrl(s) {
	                if (!s) return false;
	                return /^(https?:\/\/|\/\/).+/i.test(s.trim());
	            }
	
	            // gather values
	            var page = mw.config.get('wgPageName');
	            var mode = modeSelect.getValue();
	            var pidLocal;
	
	            // determine pid
	            if (mode === 'existing') {
	                if (!existingPerfDropdown) { alert('No existing performance to choose.'); return; }
	                var fullPerfID = existingPerfDropdown.getValue();
	                if (!fullPerfID) { alert('Please select an existing performance.'); return; }
	                var lastUnd = fullPerfID.lastIndexOf('_');
	                pidLocal = (lastUnd >= 0) ? fullPerfID.slice(lastUnd + 1) : fullPerfID;
	            } else {
	                pidLocal = computeNextLocalId(existingPerfs || [], page);
	            }
	
	            // run field validation and collect errors
	            var errors = [];
	
	            // URL is always required
	            var urlVal = urlInput.getValue() || '';
	            if (!isValidUrl(urlVal)) {
	                errors.push('Video URL is required and must start with "http://", "https://" or "//".');
	                markInvalid(urlInput);
	            }
	
	            // If new performance, date is required and must be valid ISO-leading
	            var perfDate = dateInput.getValue() || '';
	            if (mode === 'new') {
	                if (!perfDate) {
	                    errors.push('Date is required when creating a new performance.');
	                    markInvalid(dateInput);
	                } else if (!isValidIsoLeadingDate(perfDate)) {
	                    errors.push('Date must start with an ISO date (YYYY, YYYY-MM or YYYY-MM-DD).');
	                    markInvalid(dateInput);
	                }
	            }
	
	            // optionally check that context is present when creating new perf
	            var ctxVal = contextCombo.getValue() || '';
	            if (mode === 'new' && !ctxVal) {
	                errors.push('Context is required when creating a new performance.');
	                markInvalid(contextCombo);
	            }
	
	            // If errors, show OOUI dialog and focus first invalid
	            if (errors.length) {
	                // Message dialog
	                function ValidationDialog(config) { ValidationDialog.super.call(this, config); }
	                OO.inheritClass(ValidationDialog, OO.ui.MessageDialog);
	                ValidationDialog.static.name = 'ValidationDialog';
	                ValidationDialog.static.title = 'Validation error';
	                ValidationDialog.static.actions = [
	                    { action: 'close', label: 'Close', flags: ['primary'] }
	                ];
	
	                var wm = new OO.ui.WindowManager();
	                $(document.body).append(wm.$element);
	                var dlgVal = new ValidationDialog();
	                wm.addWindows([dlgVal]);
	                wm.openWindow(dlgVal, {
	                    message: errors.join('\n')
	                });
	
	                // focus first invalid input after the dialog opens
	                var toFocus = null;
	                if (!isValidUrl(urlVal)) toFocus = urlInput;
	                else if (mode === 'new' && (!perfDate || !isValidIsoLeadingDate(perfDate))) toFocus = dateInput;
	                else if (mode === 'new' && !ctxVal) toFocus = contextCombo;
	
	                if (toFocus) {
	                    // small timeout to wait until dialog is visible
	                    setTimeout(function () {
	                        if (toFocus.focus) toFocus.focus();
	                        else if (toFocus.$input) toFocus.$input.focus();
	                    }, 50);
	                }
	                return;
	            }
	
	            // Build single-line templates
	            var perfBlock = '';
	            if (mode === 'new') {
	                // single-line performance template
	                var perfFields = [];
	                if (page) perfFields.push('song=' + page);
	                if (eventInput.getValue()) perfFields.push('event=' + eventInput.getValue());
	                if (contextCombo.getValue()) perfFields.push('context=' + contextCombo.getValue());
	                if (dateInput.getValue()) perfFields.push('date=' + dateInput.getValue());
	                if (typeInput.getValue()) perfFields.push('type=' + typeInput.getValue());
	                if (posInput.getValue()) perfFields.push('pos=' + posInput.getValue());
	                if (withInput.getValue()) perfFields.push('with=' + withInput.getValue());
	                if (commentPInput.getValue()) perfFields.push('comment=' + commentPInput.getValue());
	                if (pidLocal) perfFields.push('id=' + pidLocal);
	                perfBlock = '{{Performance|' + perfFields.join('|') + '}}';
	            }
	
	            var videoFields = [];
	            if (pidLocal) videoFields.push('pid=' + pidLocal);
	            if (urlInput.getValue()) videoFields.push('url=' + urlInput.getValue());
	            if (durationInput.getValue()) videoFields.push('duration=' + durationInput.getValue());
	            if (qualityInput.getValue()) videoFields.push('quality=' + qualityInput.getValue());
	            if (commentVInput.getValue()) videoFields.push('comment=' + commentVInput.getValue());
	            var videoBlock = '{{Video|' + videoFields.join('|') + '}}';
	
	            // Compose combined text according to beginning-of-line rules
	            var combinedForPreload = (mode === 'new' ? '* ' + perfBlock + '\n*: ' : '') + videoBlock;
	
	            // Insert at cursor if editing, otherwise redirect with single preload param
	            var $textarea = $('#wpTextbox1');
	            if ($textarea.length) {
	                var insertText;
	                // test if cursor at line start
	                var ta = $textarea[0];
	                var start = ta.selectionStart;
	                var textBefore = ta.value.slice(0, start);
	                var atLineStart = textBefore.endsWith('\n') || textBefore === '';
	                if (atLineStart) {
	                    insertText = (mode === 'new' ? '* ' + perfBlock + '\n*: ' : '') + videoBlock;
	                } else {
	                    insertText = (mode === 'new' ? perfBlock : '') + videoBlock;
	                }
	                insertAtCursor(ta, insertText);
	                wm.closeWindow(dlg);
	            } else {
	                var url = mw.util.getUrl(page, {
	                    action: 'edit',
	                    section: 'new',
	                    preload: 'Template:CargoAddVideoPreload',
	                    'preloadparams[]': [ combinedForPreload ]
	                });
	                window.location.href = url;
	            }
	
	        } catch (err) {
	            console.error('Submit handler failed:', err);
	            alert('Error while preparing insertion (see console).');
	        }
		};


        // Register dialog function
        window.CargoHelper.openDialog = function () {

            // ----------------- Helpers -----------------

		    function luaCompatibleSanitize(title) {
		        title = String(title || '');
		        title = title.replace(/&[#\w]+;/g, '_');
		        title = title.replace(/[^\w_.-]/g, '_'); // keep alnum, underscore, hyphen, dot
		        return title;
		    }
		
		    // fetch performances for this page (to list existing perfs)
			function fetchPerformancesForPage() {
			    // Decode page name like decode() does
			    var page = mw.config.get('wgPageName') || '';
			    page = page.replace(/_/g, ' '); // convert underscores to spaces
			    page = $('<textarea/>').html(page).text(); // decode HTML entities just in case
			
			    var api = new mw.Api();
			    return api.get({
			        action: 'cargoquery',
			        tables: 'Performances',
			        fields: 'perfID,event,date,contextstr',
			        where: 'song="' + page.replace(/"/g, '\\"') + '"',
			        order_by: 'perfID',
			        limit: 5000
			    }).then(function (data) {
			        if (!data.cargoquery) return [];
			        return data.cargoquery.map(r => r.title || {}).map(t => ({
			            perfID: t.perfID || '',
			            event: t.event || '',
			            date: t.date || '',
			            contextstr: t.contextstr || ''
			        }));
			    }).catch(function (err) { console.error('fetchPerformancesForPage failed:', err); return []; });
			}
		
		    // fetch ALL distinct contextstr (complete strings) from Performances table
		    function fetchAllContexts() {
		        var api = new mw.Api();
		        // Cargo doesn't have DISTINCT keyword; grouping produces distinct values.
		        return api.get({
		            action: 'cargoquery',
		            tables: 'Performances',
		            fields: 'contextstr',
		            group_by: 'contextstr',
		            order_by: 'contextstr',
		            limit: 5000
		        }).then(function (data) {
		            if (!data.cargoquery) return [];
		            var arr = data.cargoquery.map(function (r) { return (r.title && r.title.contextstr) ? r.title.contextstr : ''; })
		                .filter(function (s) { return !!s; });
		            // preserve query order, already unique via group_by
		            return arr;
		        }).catch(function (err) { console.error('fetchAllContexts failed:', err); return []; });
		    }
		
		    // compute next local numeric id
		    function computeNextLocalId(perfs, page) {
		        var base = luaCompatibleSanitize(page) + '_';
		        var max = 0;
		        perfs.forEach(function (p) {
		            var id = p.perfID || '';
		            if (id.indexOf(base) !== 0) return;
		            var tail = id.slice(base.length);
		            var m = tail.match(/^(\d+)/);
		            if (!m) return;
		            var n = parseInt(m[1], 10);
		            if (!isNaN(n) && n > max) max = n;
		        });
		        return String(max + 1);
		    }
		
		    // Build performance template invocation (literal wikitext)
		    function buildPerformanceTemplate(params) {
		        var lines = ['{{Performance'];
		        if (params.song) lines.push('|song=' + params.song);
		        if (params.event) lines.push('|event=' + params.event);
		        if (params.context) lines.push('|context=' + params.context);
		        if (params.date) lines.push('|date=' + params.date);
		        if (params.type) lines.push('|type=' + params.type);
		        if (params.pos) lines.push('|pos=' + params.pos);
		        if (params.withField) lines.push('|with=' + params.withField);
		        if (params.comment) lines.push('|comment=' + params.comment);
		        if (params.id) lines.push('|id=' + params.id);
		        lines.push('}}');
		        return lines.join('\n');
		    }
		
		    // Build video template invocation (literal wikitext)
		    function buildVideoTemplate(params) {
		        var lines = ['{{Video'];
		        if (params.pid) lines.push('|pid=' + params.pid);
		        if (params.url) lines.push('|url=' + params.url);
		        if (params.duration) lines.push('|duration=' + params.duration);
		        if (params.quality) lines.push('|quality=' + params.quality);
		        if (params.comment) lines.push('|comment=' + params.comment);
		        lines.push('}}');
		        return lines.join('\n');
		    }
		
		    function insertAtCursor(textarea, newText) {
		        var start = textarea.selectionStart;
		        var end = textarea.selectionEnd;
		        var original = textarea.value;
		        textarea.value = original.slice(0, start) + newText + original.slice(end);
		        textarea.selectionStart = textarea.selectionEnd = start + newText.length;
		        textarea.scrollTop = textarea.scrollHeight;
		    }

		    // ----------------- Validation -----------------
		    function validIsoLeadingDate(s) {
		        // Accepts "YYYY", "YYYY-MM", "YYYY-MM-DD" at the start, optionally followed by space + freeform.
		        // Examples accepted: "2020", "2020-05", "2020-05-12", "2020-05-12 extra notes"
		        if (!s) return false;
		        var m = s.match(/^(\d{4})(?:-(\d{2})(?:-(\d{2}))?)?(?:\s.*)?$/);
		        if (!m) return false;
		        // If month exists, must be 01-12; if day exists, must be 01-31 (basic check).
		        if (m[2]) {
		            var mm = parseInt(m[2], 10);
		            if (mm < 1 || mm > 12) return false;
		        }
		        if (m[3]) {
		            var dd = parseInt(m[3], 10);
		            if (dd < 1 || dd > 31) return false;
		        }
		        return true;
		    }
		    function validUrl(s) {
		        if (!s) return false;
		        // Accept absolute http(s) or protocol-relative //.
		        return /^(https?:\/\/|\/\/).+/i.test(s.trim());
		    }
		
		    // ----------------- OOUI dialog -----------------
		
			function openDialog(existingPerfs, allContexts) {
			
			    /************************************************************
			     *  WIDGET DEFINITIONS
			     ************************************************************/
			
			    var modeSelect = new OO.ui.DropdownInputWidget({
			        options: [
			            { data: 'existing', label: 'Use existing performance' },
			            { data: 'new', label: 'Create new performance' }
			        ],
			        value: existingPerfs.length ? 'existing' : 'new'
			    });
			
			    var existingPerfDropdown = null;
			    if (existingPerfs.length) {
			        existingPerfDropdown = new OO.ui.DropdownInputWidget({
			            options: existingPerfs.map(function (p) {
			                var localID = p.perfID.replace(/^.*_/, '');
			                return { data: p.perfID, label: localID + ' — ' + (p.event || '') + ' (' + (p.date || '') + ')' };
			            }),
			            placeholder: 'Choose existing performance'
			        });
			    }
			
			    // PERFORMANCE FIELDS
			    var eventInput    = new OO.ui.TextInputWidget();
			    var dateInput     = new OO.ui.TextInputWidget();
			
			    // CONTEXT: ComboBox with dynamic substring filter
			    var contextCombo = new OO.ui.ComboBoxInputWidget({
			        options: allContexts.map(function (c) { return { data: c, label: c }; }),
			        placeholder: 'Type or pick a full context string'
			    });
			
			    // Keep original as the master list
			    var originalContextOptions = allContexts.map(function (c) {
			        return { data: c, label: c };
			    });
			
				function restoreAllContextOptions() {
				    // If ComboBox supports clearOptions/addOption (some OOUI versions), use them
				    if (typeof contextCombo.clearOptions === 'function' && typeof contextCombo.addOption === 'function') {
				        contextCombo.clearOptions();
				        originalContextOptions.forEach(function (opt) {
				            contextCombo.addOption({ data: opt.data, label: opt.label });
				        });
				    } else {
				        // Fallback: rebuild the internal menu only (works across OOUI versions)
				        var menu = contextCombo.getMenu();
				        if (menu && typeof menu.clearItems === 'function' && typeof menu.addItems === 'function') {
				            menu.clearItems();
				            originalContextOptions.forEach(function (opt) {
				                menu.addItems([
				                    new OO.ui.MenuOptionWidget({
				                        data: opt.data,
				                        label: opt.label
				                    })
				                ]);
				            });
				        }
				    }
				
				    // Ensure the visible input text still matches the underlying value (if any)
				    var cur = contextCombo.getValue();
				    if (cur) {
				        // sometimes ComboBox needs the raw input set as well
				        if (contextCombo.$input && contextCombo.$input.length) {
				            contextCombo.$input.val(cur);
				        }
				    }
				}
			
			    // TYPE
			    var typeInput = new OO.ui.DropdownInputWidget({
			        options: [
			            { data: '', label: '—' },
			            { data: 'recording', label: 'recording' },
			            { data: 'track', label: 'track' },
			            { data: 'music-video', label: 'music-video' },
			            { data: 'live', label: 'live' },
			            { data: 'rehearsal', label: 'rehearsal' },
			            { data: 'soundcheck', label: 'soundcheck' },
			            { data: 'sing-along', label: 'sing-along' },
			            { data: 'lip-sync', label: 'lip-sync' }
			        ]
			    });
			
			    var posInput      = new OO.ui.TextInputWidget();
			    var withInput     = new OO.ui.TextInputWidget({ multiline: true });
			    var commentPInput = new OO.ui.TextInputWidget({ multiline: true });
			
			    // VIDEO
			    var urlInput      = new OO.ui.TextInputWidget();
			    var durationInput = new OO.ui.DropdownInputWidget({
			        options: [
			            { data: '', label: '—' },
			            { data: 'full', label: 'full' },
			            { data: 'short', label: 'short' },
			            { data: 'fragment', label: 'fragment' }
			        ]
			    });
			    var qualityInput  = new OO.ui.DropdownInputWidget({
			        options: [
			            { data: '', label: '—' },
			            { data: 'best', label: 'best' },
			            { data: 'good', label: 'good' },
			            { data: 'acceptable', label: 'acceptable' },
			            { data: 'poor', label: 'poor' }
			        ]
			    });
			    var commentVInput = new OO.ui.TextInputWidget({ multiline: true });
			
			    /************************************************************
			     *  CONTEXT FILTERING (fix)
			     ************************************************************/
				// Use the real input event and rebuild the internal OOUI menu reliably
				contextCombo.$input.on('input', function () {
				    var value = (contextCombo.getValue() || '').toLowerCase();
				    var menu = contextCombo.getMenu();
				
				    // Rebuild menu items from the master list
				    menu.clearItems();
				
				    originalContextOptions.forEach(function (opt) {
				        if (opt.data.toLowerCase().indexOf(value) !== -1) {
				            menu.addItems([
				                new OO.ui.MenuOptionWidget({
				                    data: opt.data,
				                    label: opt.label
				                })
				            ]);
				        }
				    });
				
				    // Ensure the dropdown is visible so the user sees the filtered items
				    if (!menu.isVisible()) {
				        menu.toggle(true);
				    }
				});
			
			    /************************************************************
			     *  FORM LAYOUT
			     ************************************************************/
			
			    var form = new OO.ui.FieldsetLayout({ label: 'Add Video / Performance' });
			
			    form.addItems([ new OO.ui.FieldLayout(modeSelect, { label: 'Mode' }) ]);
			
			    if (existingPerfDropdown) {
			        form.addItems([
			            new OO.ui.FieldLayout(existingPerfDropdown, { label: 'Existing performance' })
			        ]);
			    }
			
			    form.addItems([
			        new OO.ui.FieldLayout(eventInput,   { label: 'Event' }),
			        new OO.ui.FieldLayout(dateInput,    { label: 'Date' }),
			        new OO.ui.FieldLayout(contextCombo, { label: 'Context (complete string, # separated)' }),
			        new OO.ui.FieldLayout(typeInput,    { label: 'Type' }),
			        new OO.ui.FieldLayout(posInput,     { label: 'Position' }),
			        new OO.ui.FieldLayout(withInput,    { label: 'With (partners)' }),
			        new OO.ui.FieldLayout(commentPInput,{ label: 'Performance comment' }),
			
			        // Separator
			        new OO.ui.LabelWidget({ label: $('<hr>') }),
			
			        new OO.ui.FieldLayout(urlInput,     { label: 'Video URL' }),
			        new OO.ui.FieldLayout(durationInput,{ label: 'Duration' }),
			        new OO.ui.FieldLayout(qualityInput, { label: 'Quality' }),
			        new OO.ui.FieldLayout(commentVInput,{ label: 'Video comment' })
			    ]);
			
			    var submitButton = new OO.ui.ButtonWidget({ label: 'Insert', flags: ['primary'] });
			    var cancelButton = new OO.ui.ButtonWidget({ label: 'Cancel', flags: ['destructive'] });
			
			    form.$element.append(
			        $('<div>').css({ marginTop: '1em', textAlign: 'right' })
			            .append(cancelButton.$element)
			            .append(' ')
			            .append(submitButton.$element)
			    );
			
			    var panel = new OO.ui.PanelLayout({ expanded: true, padded: true, content: [ form ] });
			
			    /************************************************************
			     *  DIALOG CONSTRUCTION
			     ************************************************************/
			
			    function AddVideoDialog(config) {
			        AddVideoDialog.super.call(this, config);
			    }
			    OO.inheritClass(AddVideoDialog, OO.ui.ProcessDialog);
			
			    AddVideoDialog.static.name  = 'AddVideoDialog';
			    AddVideoDialog.static.title = 'Add Video / Performance';
			    AddVideoDialog.static.size  = 'medium';
			
			    AddVideoDialog.prototype.initialize = function () {
			        AddVideoDialog.super.prototype.initialize.call(this);
			        this.$body.append(panel.$element);
			        this.$element.css({
			            width: '900px',
			            maxWidth: '95%',
			            left: '50%',
			            transform: 'translateX(-50%)'
			        });
			    };
			
			    var wm = new OO.ui.WindowManager();
			    $(document.body).append(wm.$element);
			    var dlg = new AddVideoDialog();
			    wm.addWindows([dlg]);
			    wm.openWindow(dlg);
			
			    cancelButton.on('click', function () {
			        wm.closeWindow(dlg);
			    });
			
			    /************************************************************
			     *  MODE SWITCHING (fixed with context restore/readOnly)
			     ************************************************************/
			
			    function updateFields() {
			        var isExisting = (modeSelect.getValue() === 'existing');
			
			        // PERFORMANCE FIELDS read-only
			        eventInput.setReadOnly(isExisting);
			        dateInput.setReadOnly(isExisting);
			        posInput.setReadOnly(isExisting);
			        withInput.setReadOnly(isExisting);
			        commentPInput.setReadOnly(isExisting);
			        typeInput.setDisabled(isExisting); // dropdown cannot be readonly
			
			        // CONTEXT special handling
			        if (isExisting) {
			            contextCombo.setReadOnly(true);
			
			            if (existingPerfDropdown) {
			                var id   = existingPerfDropdown.getValue();
			                var perf = existingPerfs.find(p => p.perfID === id) || {};
			
			                eventInput.setValue(perf.event || '');
			                dateInput.setValue(perf.date || '');
			
			                restoreAllContextOptions();
			                contextCombo.setValue(perf.contextstr || '');
			
			                typeInput.setValue(perf.type || '');
			                posInput.setValue(perf.pos || '');
			                withInput.setValue(perf.with || '');
			                commentPInput.setValue(perf.comment || '');
			            }
			        } else {
					    // NEW PERFORMANCE MODE
					
					    // Make fields editable again
					    eventInput.setReadOnly(false);
					    dateInput.setReadOnly(false);
					    posInput.setReadOnly(false);
					    withInput.setReadOnly(false);
					    commentPInput.setReadOnly(false);
					    typeInput.setDisabled(false);
					
					    // Restore context dropdown and allow typing/filtering
					    contextCombo.setReadOnly(false);
					    restoreAllContextOptions();
					
					    // CLEAR ALL PERFORMANCE-RELATED FIELDS (new behavior)
					    eventInput.setValue('');
					    dateInput.setValue('');
					    contextCombo.setValue('');
					    contextCombo.$input.val('');   // must clear raw input too
					    typeInput.setValue('');
					    posInput.setValue('');
					    withInput.setValue('');
					    commentPInput.setValue('');
					}
			
			        // Disable/enable existing perf dropdown
			        if (existingPerfDropdown) {
			            existingPerfDropdown.setDisabled(!isExisting);
			        }
			    }
			
			    modeSelect.on('change', updateFields);
			    if (existingPerfDropdown) {
			        existingPerfDropdown.on('change', updateFields);
			    }
			
			    updateFields();
			
			    /************************************************************
			     *  SUBMIT HANDLER (unchanged)
			     ************************************************************/
			    submitButton.on('click', function () {
			        try {
			            window.CargoHelper.handleSubmit(
			                modeSelect,
			                existingPerfDropdown,
			                existingPerfs,
			                eventInput,
			                dateInput,
			                contextCombo,
			                typeInput,
			                posInput,
			                withInput,
			                commentPInput,
			                urlInput,
			                durationInput,
			                qualityInput,
			                commentVInput,
			                dlg,
			                wm
			            );
			        } catch (err) {
			            console.error('Submit handler failed:', err);
			            alert('Error while preparing insertion (see console).');
			        }
			    });
			
			} // end openDialog
		
	        //---------------------------------------------------------
	        // 1) Run initial Cargo loads + open the dialog
	        //---------------------------------------------------------
	
	        Promise.all([
	            fetchPerformancesForPage(),
	            fetchAllContexts()
	        ]).then(function (res) {
	            var existingPerfsArray = res[0] || [];
	            var allContexts = res[1] || [];
	            openDialog(existingPerfsArray, allContexts);
	        }).catch(function (err) {
	            console.error('CargoHelperCore: failed to load data: ', err);
	            alert('Failed to load data (see console).');
	        });
	
	    }; 
        // Resolve the promise now that initialization is done
        resolve(window.CargoHelper);
	
	    }).catch(function(err) {
	        reject(err);
   });
}); // mw.loader.using
}());