EveryCRT Wiki

MediaWiki:CRT Search.js: Difference between revisions

← Older edit
No edit summary
No edit summary
Tag: Manual revert
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
/**
/**
  * EveryCRT Advanced Search
  * EveryCRT CRT Search — page-specific configuration
* Server-side faceted search using Semantic MediaWiki API
  * Loads the shared search engine and passes CRT-specific filters, printouts, and card layout.
*
  * Installation:
* 1. Create MediaWiki:AdvancedSearch.js with this content
* 2. Create MediaWiki:AdvancedSearch.css with the companion stylesheet
* 3. Add to MediaWiki:Common.js:
*    if (mw.config.get('wgPageName') === 'Advanced_Search') {
*        mw.loader.load('/wiki/MediaWiki:AdvancedSearch.js?action=raw&ctype=text/javascript');
*    }
  */
  */
(function() {
(function() {
     'use strict';
     'use strict';


     var API_ENDPOINT = mw.config.get('wgScriptPath') + '/api.php';
     mw.loader.getScript(
    var RESULTS_PER_PAGE = 48;
        mw.config.get('wgScript') + '?title=MediaWiki:EveryCRT-SearchEngine.js&action=raw&ctype=text/javascript'
    var currentOffset = 0;
     ).then(function() {
     var currentFilters = {};
    var filterOptions = {};
    var totalResults = 0;
    var isLoading = false;


    // Filter configuration - defines all available filters
         window.EveryCRTSearch({
    var FILTER_CONFIG = {
         manufacturing: {
            label: 'Manufacturing',
            collapsed: false,
            filters: {
                brand: {
                    label: 'Brand',
                    type: 'select',
                    property: 'Has brand',
                    loadFrom: 'category',
                    category: 'Manufacturers'
                },
                oem: {
                    label: 'OEM Manufacturer',
                    type: 'select',
                    property: 'Has OEM manufacturer',
                    loadFrom: 'category',
                    category: 'Manufacturers'
                },
                series: {
                    label: 'Series',
                    type: 'select',
                    property: 'Has series',
                    loadFrom: 'category',
                    category: 'Series'
                },
                chassis: {
                    label: 'Chassis',
                    type: 'select',
                    property: 'Has chassis',
                    loadFrom: 'category',
                    category: 'Chassis'
                },
                chassis_family: {
                    label: 'Chassis Family',
                    type: 'select',
                    property: 'Has chassis family',
                    loadFrom: 'category',
                    category: 'Chassis families'
                }
            }
        },
        display: {
            label: 'Display',
            collapsed: false,
            filters: {
                crt_type: {
                    label: 'Type',
                    type: 'select',
                    property: 'Has CRT type',
                    loadFrom: 'static',
                    values: ['TV', 'Monitor', 'PVM', 'BVM', 'Computer monitor', 'Presentation', 'Other']
                },
                form_factor: {
                    label: 'Form Factor',
                    type: 'select',
                    property: 'Has form factor',
                    loadFrom: 'static',
                    values: ['Standard', 'Console', 'Portable', 'Wall-mount', 'Other']
                },
                screen_size_min: {
                    label: 'Screen Size (min)',
                    type: 'number',
                    property: 'Has screen size inches',
                    comparison: '>=',
                    placeholder: 'Min inches'
                },
                screen_size_max: {
                    label: 'Screen Size (max)',
                    type: 'number',
                    property: 'Has screen size inches',
                    comparison: '<=',
                    placeholder: 'Max inches'
                },
                aspect_ratio: {
                    label: 'Aspect Ratio',
                    type: 'select',
                    property: 'Has aspect ratio',
                    loadFrom: 'static',
                    values: ['4:3', '16:9']
                },
                tvl_min: {
                    label: 'TVL (min)',
                    type: 'number',
                    property: 'Has TVL',
                    comparison: '>=',
                    placeholder: 'Min lines'
                }
            }
        },
        videoSpecs: {
            label: 'Video Specifications',
            collapsed: true,
            filters: {
                signal_format: {
                    label: 'Signal Format',
                    type: 'multiselect',
                    subobjectQuery: true,
                    subobjectProperty: 'Has video signal format',
                    loadFrom: 'category',
                    category: 'Video signal formats'
                },
                connector: {
                    label: 'Connector',
                    type: 'multiselect',
                    subobjectQuery: true,
                    subobjectProperty: 'Has connector type',
                    loadFrom: 'category',
                    category: 'Connector types'
                }
            }
        },
        mods: {
            label: 'Modifications',
            collapsed: true,
            filters: {
                has_rgb_mod: {
                    label: 'Has RGB Mod',
                    type: 'checkbox',
                    subobjectQuery: true,
                    subobjectProperty: 'Has mod type',
                    subobjectValue: 'RGB'
                },
                has_svideo_mod: {
                    label: 'Has S-Video Mod',
                    type: 'checkbox',
                    subobjectQuery: true,
                    subobjectProperty: 'Has mod type',
                    subobjectValue: 'S-video'
                }
            }
        },
        tvSystem: {
            label: 'TV System',
            collapsed: true,
            filters: {
                av_system: {
                    label: 'AV System',
                    type: 'multiselect',
                    property: 'AV system',
                    loadFrom: 'category',
                    category: 'AV systems'
                },
                frequency: {
                    label: 'AC Frequency',
                    type: 'multiselect',
                    property: 'Frequency',
                    loadFrom: 'static',
                    values: ['50Hz', '60Hz']
                }
            }
        },
        builtIn: {
            label: 'Built-in Devices',
            collapsed: true,
            filters: {
                built_in_vcr: {
                    label: 'VCR',
                    type: 'checkbox',
                    property: 'Has built-in devices',
                    containsValue: 'VCR'
                },
                built_in_dvd: {
                    label: 'DVD',
                    type: 'checkbox',
                    property: 'Has built-in devices',
                    containsValue: 'DVD'
                }
            }
        }
    };


    /**
            containerId: 'advanced-search-app',
    * Initialize the advanced search interface
            category: 'CRT models',
    */
            resultLabel: 'CRTs',
    function init() {
             noImageEmoji: '\uD83D\uDCFA',
        var container = document.getElementById('advanced-search-app');
             subobjectParentProperty: 'Has CRT model',
        if (!container) {
            defaultSort: 'brand',
             console.error('Advanced search container not found');
             return;
        }


        container.innerHTML = buildHTML();
            // ── Sort options ───────────────────────────────────────
        attachEventListeners();
            sortOptions: [
        loadFilterOptions();
                { value: 'brand',      label: 'Brand',      property: 'Has brand',              printoutKey: 'brand' },
          
                { value: 'model',      label: 'Model',      property: 'Has model code',         printoutKey: 'model' },
        // Parse URL parameters for initial filters
                { value: 'screen_size', label: 'Screen Size', property: 'Has screen size inches',  printoutKey: 'size' },
        parseURLParams();
                { value: 'type',        label: 'Type',        property: 'Has CRT type',          printoutKey: 'type' }
    }
            ],


    /**
            // ── Extra printouts (image, brand, model are always included) ──
    * Build the main HTML structure
             printouts: [
    */
                { property: 'Has CRT type',            key: 'type' },
    function buildHTML() {
                { property: 'Has screen size inches',  key: 'size' },
        var html = '<div class="crt-search-wrapper">';
                { property: 'Has aspect ratio',        key: 'aspect' },
       
                { property: 'Has TVL',                key: 'tvl' }
        // Mobile filter toggle
            ],
        html += '<button type="button" class="crt-mobile-filter-toggle" id="mobile-filter-toggle">';
        html += '<span class="crt-filter-icon">☰</span> Filters';
        html += '</button>';
       
        // Filters sidebar
        html += '<div class="crt-search-filters" id="filters-sidebar">';
        html += '<div class="crt-filters-header">';
        html += '<h2>Filters</h2>';
        html += '<button type="button" class="crt-reset-btn" id="reset-filters">Reset All</button>';
        html += '</div>';
       
        // Build filter sections
        for (var sectionKey in FILTER_CONFIG) {
             var section = FILTER_CONFIG[sectionKey];
            html += buildFilterSection(sectionKey, section);
        }
       
        html += '<div class="crt-apply-filters">';
        html += '<button type="button" class="crt-apply-btn" id="apply-filters">Apply Filters</button>';
        html += '</div>';
        html += '</div>';
       
        // Results area
        html += '<div class="crt-search-results">';
        html += '<div class="crt-results-header">';
        html += '<div class="crt-results-count" id="results-count">Loading...</div>';
        html += '<div class="crt-results-controls">';
        html += '<div class="crt-results-sort">';
        html += '<label for="sort-by">Sort by:</label>';
        html += '<select id="sort-by">';
        html += '<option value="brand">Brand</option>';
        html += '<option value="model">Model</option>';
        html += '<option value="screen_size">Screen Size</option>';
        html += '<option value="type">Type</option>';
        html += '</select>';
        html += '</div>';
        html += '<div class="crt-view-toggle">';
        html += '<button class="crt-view-btn active" data-view="grid" title="Grid view">▦</button>';
        html += '<button class="crt-view-btn" data-view="list" title="List view">≡</button>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '<div class="crt-active-filters" id="active-filters"></div>';
        html += '<div class="crt-results-grid" id="results-grid"></div>';
        html += '<div class="crt-pagination" id="pagination"></div>';
        html += '</div>';
       
        html += '</div>';
        return html;
    }


    /**
            // ── Card meta fields ───────────────────────────────────
    * Build a collapsible filter section
            cardMeta: [
    */
                { key: 'type',  cssClass: 'crt-meta-type' },
    function buildFilterSection(sectionKey, section) {
                { key: 'size',  cssClass: 'crt-meta-size',  suffix: '"' },
        var collapsed = section.collapsed ? ' collapsed' : '';
                { key: 'aspect', cssClass: 'crt-meta-aspect' },
        var html = '<div class="crt-filter-section' + collapsed + '" data-section="' + sectionKey + '">';
                { key: 'tvl',    cssClass: 'crt-meta-tvl',    suffix: ' TVL' }
        html += '<div class="crt-section-header">';
             ],
        html += '<span class="crt-section-title">' + section.label + '</span>';
        html += '<span class="crt-section-toggle">▼</span>';
        html += '</div>';
        html += '<div class="crt-section-content">';
       
        for (var filterKey in section.filters) {
             var filter = section.filters[filterKey];
            html += buildFilterInput(filterKey, filter);
        }
       
        html += '</div>';
        html += '</div>';
        return html;
    }


    /**
            // ── Filter configuration ───────────────────────────────
    * Build individual filter input
            filterConfig: {
    */
                manufacturing: {
    function buildFilterInput(filterKey, filter) {
                    label: 'Manufacturing',
        var html = '<div class="crt-filter-item" data-filter="' + filterKey + '">';
                    collapsed: false,
       
                    filters: {
        switch (filter.type) {
                        brand: {
            case 'select':
                            label: 'Brand',
                html += '<label for="filter-' + filterKey + '">' + filter.label + '</label>';
                            type: 'select',
                html += '<select id="filter-' + filterKey + '" class="crt-filter-select" data-filter="' + filterKey + '">';
                            property: 'Has brand',
                html += '<option value="">All</option>';
                            loadFrom: 'category',
                if (filter.loadFrom === 'static' && filter.values) {
                            category: 'Manufacturers'
                    for (var i = 0; i < filter.values.length; i++) {
                        },
                        html += '<option value="' + filter.values[i] + '">' + filter.values[i] + '</option>';
                        oem: {
                            label: 'OEM Manufacturer',
                            type: 'select',
                            property: 'Has OEM manufacturer',
                            loadFrom: 'category',
                            category: 'Manufacturers'
                        },
                        series: {
                            label: 'Series',
                            type: 'select',
                            property: 'Has series',
                            loadFrom: 'category',
                            category: 'Series'
                        },
                        chassis: {
                            label: 'Chassis',
                            type: 'select',
                            property: 'Has chassis',
                            loadFrom: 'category',
                            category: 'Chassis'
                        },
                        chassis_family: {
                            label: 'Chassis Family',
                            type: 'select',
                            property: 'Has chassis family',
                            loadFrom: 'category',
                            category: 'Chassis families'
                        }
                     }
                     }
                 }
                 },
                 html += '</select>';
                 display: {
                break;
                    label: 'Display',
               
                    collapsed: false,
            case 'multiselect':
                    filters: {
                html += '<label>' + filter.label + '</label>';
                        crt_type: {
                html += '<div class="crt-multiselect" id="filter-' + filterKey + '" data-filter="' + filterKey + '">';
                            label: 'Type',
                html += '<div class="crt-multiselect-selected"></div>';
                            type: 'select',
                html += '<input type="text" class="crt-multiselect-input" placeholder="Search ' + filter.label.toLowerCase() + '...">';
                            property: 'Has CRT type',
                html += '<div class="crt-multiselect-dropdown"></div>';
                            loadFrom: 'category',
                html += '</div>';
                            category: 'CRT types',
                break;
                            categoryMemberTypes: 'subcat'
               
                        },
            case 'number':
                        form_factor: {
                html += '<label for="filter-' + filterKey + '">' + filter.label + '</label>';
                            label: 'Form Factor',
                html += '<input type="number" id="filter-' + filterKey + '" class="crt-filter-number" ';
                            type: 'select',
                html += 'data-filter="' + filterKey + '" placeholder="' + (filter.placeholder || '') + '">';
                            property: 'Has form factor',
                break;
                            loadFrom: 'static',
               
                            values: ['Standard', 'Console', 'Portable', 'Wall-mount', 'Other']
            case 'checkbox':
                        },
                html += '<label class="crt-checkbox-label">';
                        screen_size_min: {
                html += '<input type="checkbox" id="filter-' + filterKey + '" class="crt-filter-checkbox" ';
                            label: 'Screen Size (min)',
                html += 'data-filter="' + filterKey + '">';
                            type: 'number',
                html += '<span>' + filter.label + '</span>';
                            property: 'Has screen size inches',
                html += '</label>';
                            comparison: '>=',
                break;
                            placeholder: 'Min inches'
               
                        },
            case 'range':
                        screen_size_max: {
                html += '<label>' + filter.label + '</label>';
                            label: 'Screen Size (max)',
                html += '<div class="crt-range-inputs">';
                            type: 'number',
                html += '<input type="number" id="filter-' + filterKey + '-min" class="crt-filter-range-min" ';
                            property: 'Has screen size inches',
                html += 'data-filter="' + filterKey + '-min" placeholder="Min">';
                            comparison: '<=',
                html += '<span class="crt-range-sep">–</span>';
                            placeholder: 'Max inches'
                html += '<input type="number" id="filter-' + filterKey + '-max" class="crt-filter-range-max" ';
                        },
                html += 'data-filter="' + filterKey + '-max" placeholder="Max">';
                        aspect_ratio: {
                html += '</div>';
                            label: 'Aspect Ratio',
                break;
                            type: 'select',
        }
                            property: 'Has aspect ratio',
       
                            loadFrom: 'static',
        html += '</div>';
                            values: ['4:3', '16:9']
        return html;
                         },
    }
                        tvl_min: {
 
                            label: 'TVL (min)',
    /**
                            type: 'number',
    * Attach event listeners
                            property: 'Has TVL',
    */
                            comparison: '>=',
    function attachEventListeners() {
                             placeholder: 'Min lines'
        // Mobile filter toggle
                         }
        document.getElementById('mobile-filter-toggle').addEventListener('click', function() {
            document.getElementById('filters-sidebar').classList.toggle('visible');
            this.classList.toggle('active');
        });
       
        // Section collapse/expand
        document.querySelectorAll('.crt-section-header').forEach(function(header) {
            header.addEventListener('click', function() {
                var section = this.closest('.crt-filter-section');
                section.classList.toggle('collapsed');
            });
        });
       
        // Apply filters button
        document.getElementById('apply-filters').addEventListener('click', function() {
            currentOffset = 0;
            performSearch();
            updateURL();
           
            // Close mobile filters
            document.getElementById('filters-sidebar').classList.remove('visible');
            document.getElementById('mobile-filter-toggle').classList.remove('active');
        });
       
        // Reset filters button
        document.getElementById('reset-filters').addEventListener('click', resetFilters);
       
        // Sort change
        document.getElementById('sort-by').addEventListener('change', function() {
            currentOffset = 0;
            performSearch();
            updateURL();
        });
       
        // View toggle
        document.querySelectorAll('.crt-view-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.crt-view-btn').forEach(function(b) {
                    b.classList.remove('active');
                });
                this.classList.add('active');
                var view = this.dataset.view;
                var grid = document.getElementById('results-grid');
                grid.classList.remove('grid-view', 'list-view');
                grid.classList.add(view + '-view');
            });
        });
       
        // Enter key on filter inputs
        document.querySelectorAll('.crt-filter-number, .crt-filter-select').forEach(function(input) {
            input.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    currentOffset = 0;
                    performSearch();
                    updateURL();
                }
            });
        });
       
        // Select change triggers search
        document.querySelectorAll('.crt-filter-select').forEach(function(select) {
            select.addEventListener('change', function() {
                // Auto-apply on select change for better UX
                // currentOffset = 0;
                // performSearch();
                // updateURL();
            });
        });
       
        // Multiselect handling
        initMultiselects();
    }
 
    /**
    * Initialize multiselect dropdowns
    */
    function initMultiselects() {
        document.querySelectorAll('.crt-multiselect').forEach(function(ms) {
            var input = ms.querySelector('.crt-multiselect-input');
            var dropdown = ms.querySelector('.crt-multiselect-dropdown');
            var filterKey = ms.dataset.filter;
           
            // Show dropdown on input focus
            input.addEventListener('focus', function() {
                dropdown.classList.add('visible');
                updateMultiselectDropdown(ms, filterKey);
            });
           
            // Filter dropdown on input
            input.addEventListener('input', function() {
                updateMultiselectDropdown(ms, filterKey, this.value);
            });
           
            // Hide dropdown on click outside
            document.addEventListener('click', function(e) {
                if (!ms.contains(e.target)) {
                    dropdown.classList.remove('visible');
                }
            });
        });
    }
 
    /**
    * Update multiselect dropdown with filtered options
    */
    function updateMultiselectDropdown(ms, filterKey, searchText) {
        var dropdown = ms.querySelector('.crt-multiselect-dropdown');
        var options = filterOptions[filterKey] || [];
        var selected = getMultiselectValues(ms);
       
        searchText = (searchText || '').toLowerCase();
       
        var html = '';
        var count = 0;
        options.forEach(function(opt) {
            var optValue = typeof opt === 'object' ? opt.value : opt;
            var optLabel = typeof opt === 'object' ? opt.label : opt;
           
            if (searchText && optLabel.toLowerCase().indexOf(searchText) === -1) {
                return;
            }
           
            var isSelected = selected.indexOf(optValue) !== -1;
            html += '<div class="crt-multiselect-option' + (isSelected ? ' selected' : '') + '" data-value="' + escapeHtml(optValue) + '">';
            html += '<span class="crt-option-check">' + (isSelected ? '✓' : '') + '</span>';
            html += '<span class="crt-option-label">' + escapeHtml(optLabel) + '</span>';
            html += '</div>';
            count++;
        });
       
        if (count === 0) {
            html = '<div class="crt-multiselect-empty">No options found</div>';
        }
       
        dropdown.innerHTML = html;
       
        // Attach click handlers
        dropdown.querySelectorAll('.crt-multiselect-option').forEach(function(opt) {
            opt.addEventListener('click', function(e) {
                e.stopPropagation();
                toggleMultiselectOption(ms, this.dataset.value);
            });
        });
    }
 
    /**
    * Toggle a multiselect option
    */
    function toggleMultiselectOption(ms, value) {
        var selectedContainer = ms.querySelector('.crt-multiselect-selected');
        var existing = selectedContainer.querySelector('[data-value="' + CSS.escape(value) + '"]');
       
        if (existing) {
            existing.remove();
        } else {
            var tag = document.createElement('span');
            tag.className = 'crt-multiselect-tag';
            tag.dataset.value = value;
            tag.innerHTML = escapeHtml(value) + ' <span class="crt-tag-remove">×</span>';
            tag.querySelector('.crt-tag-remove').addEventListener('click', function(e) {
                e.stopPropagation();
                tag.remove();
                updateMultiselectDropdown(ms, ms.dataset.filter, ms.querySelector('.crt-multiselect-input').value);
            });
            selectedContainer.appendChild(tag);
        }
       
        updateMultiselectDropdown(ms, ms.dataset.filter, ms.querySelector('.crt-multiselect-input').value);
    }
 
    /**
    * Get selected values from a multiselect
    */
    function getMultiselectValues(ms) {
        var values = [];
        ms.querySelectorAll('.crt-multiselect-tag').forEach(function(tag) {
            values.push(tag.dataset.value);
        });
        return values;
    }
 
    /**
    * Load filter options from SMW
    */
    function loadFilterOptions() {
        var promises = [];
       
        for (var sectionKey in FILTER_CONFIG) {
            var section = FILTER_CONFIG[sectionKey];
            for (var filterKey in section.filters) {
                var filter = section.filters[filterKey];
               
                if (filter.loadFrom === 'category') {
                    promises.push(loadCategoryOptions(filterKey, filter.category));
                } else if (filter.loadFrom === 'static' && filter.values) {
                    filterOptions[filterKey] = filter.values.map(function(v) {
                         return { value: v, label: v };
                    });
                }
            }
        }
       
        Promise.all(promises).then(function() {
            populateSelectFilters();
            performSearch();
        });
    }
 
    /**
    * Load options from a category
    */
    function loadCategoryOptions(filterKey, category) {
        return new Promise(function(resolve) {
            var api = new mw.Api();
            api.get({
                action: 'query',
                list: 'categorymembers',
                cmtitle: 'Category:' + category,
                cmlimit: 500,
                format: 'json'
            }).done(function(data) {
                filterOptions[filterKey] = [];
                if (data.query && data.query.categorymembers) {
                    data.query.categorymembers.forEach(function(member) {
                        filterOptions[filterKey].push({
                            value: member.title,
                             label: member.title
                        });
                    });
                    filterOptions[filterKey].sort(function(a, b) {
                        return a.label.localeCompare(b.label);
                    });
                }
                resolve();
            }).fail(function() {
                filterOptions[filterKey] = [];
                resolve();
            });
        });
    }
 
    /**
    * Populate select filters with loaded options
    */
    function populateSelectFilters() {
        for (var sectionKey in FILTER_CONFIG) {
            var section = FILTER_CONFIG[sectionKey];
            for (var filterKey in section.filters) {
                var filter = section.filters[filterKey];
               
                if (filter.type === 'select' && filter.loadFrom === 'category') {
                    var select = document.getElementById('filter-' + filterKey);
                    if (select && filterOptions[filterKey]) {
                        var currentValue = select.value;
                        select.innerHTML = '<option value="">All</option>';
                        filterOptions[filterKey].forEach(function(opt) {
                            var option = document.createElement('option');
                            option.value = opt.value;
                            option.textContent = opt.label;
                            select.appendChild(option);
                         });
                        select.value = currentValue;
                     }
                     }
                 }
                 },
            }
                 videoSpecs: {
        }
                     label: 'Video Specifications',
    }
                     collapsed: true,
 
                     filters: {
    /**
                        signal_format: {
    * Collect current filter values
                            label: 'Signal Format',
    */
                            type: 'multiselect',
    function collectFilters() {
                            subobjectQuery: true,
        var filters = {};
                            subobjectProperty: 'Has video signal format',
       
                            loadFrom: 'category',
        // Collect select and number filters
                            category: 'Video signal formats'
        document.querySelectorAll('.crt-filter-select, .crt-filter-number').forEach(function(input) {
                        },
            var value = input.value.trim();
                        connector: {
            if (value) {
                            label: 'Connector',
                 filters[input.dataset.filter] = value;
                            type: 'multiselect',
            }
                            subobjectQuery: true,
        });
                            subobjectProperty: 'Has connector type',
       
                             loadFrom: 'category',
        // Collect checkbox filters
                             category: 'Connector types'
        document.querySelectorAll('.crt-filter-checkbox').forEach(function(input) {
                         }
            if (input.checked) {
                filters[input.dataset.filter] = true;
            }
        });
       
        // Collect multiselect filters
        document.querySelectorAll('.crt-multiselect').forEach(function(ms) {
            var values = getMultiselectValues(ms);
            if (values.length > 0) {
                filters[ms.dataset.filter] = values;
            }
        });
       
        return filters;
    }
 
    /**
    * Reset all filters
    */
    function resetFilters() {
        document.querySelectorAll('.crt-filter-select, .crt-filter-number').forEach(function(input) {
            input.value = '';
        });
       
        document.querySelectorAll('.crt-filter-checkbox').forEach(function(input) {
            input.checked = false;
        });
       
        document.querySelectorAll('.crt-multiselect-selected').forEach(function(container) {
            container.innerHTML = '';
        });
       
        currentOffset = 0;
       
        // Clear URL params
        history.replaceState(null, '', window.location.pathname);
       
        performSearch();
    }
 
    /**
    * Update active filters display
    */
    function updateActiveFilters() {
        var filters = collectFilters();
        var container = document.getElementById('active-filters');
        var html = '';
       
        var hasFilters = false;
        for (var key in filters) {
            hasFilters = true;
            var value = filters[key];
            var label = getFilterLabel(key);
           
            if (Array.isArray(value)) {
                value.forEach(function(v) {
                    html += '<span class="crt-active-filter" data-filter="' + key + '" data-value="' + escapeHtml(v) + '">';
                     html += '<span class="crt-af-label">' + label + ':</span> ';
                    html += '<span class="crt-af-value">' + escapeHtml(v) + '</span>';
                     html += ' <span class="crt-af-remove">×</span>';
                     html += '</span>';
                });
            } else if (value === true) {
                html += '<span class="crt-active-filter" data-filter="' + key + '">';
                html += '<span class="crt-af-value">' + label + '</span>';
                html += ' <span class="crt-af-remove">×</span>';
                html += '</span>';
            } else {
                html += '<span class="crt-active-filter" data-filter="' + key + '">';
                html += '<span class="crt-af-label">' + label + ':</span> ';
                html += '<span class="crt-af-value">' + escapeHtml(value) + '</span>';
                html += ' <span class="crt-af-remove">×</span>';
                html += '</span>';
            }
        }
       
        if (hasFilters) {
            html += '<button class="crt-clear-all-filters">Clear All</button>';
        }
       
        container.innerHTML = html;
       
        // Attach remove handlers
        container.querySelectorAll('.crt-active-filter').forEach(function(af) {
            af.querySelector('.crt-af-remove').addEventListener('click', function() {
                removeActiveFilter(af.dataset.filter, af.dataset.value);
            });
        });
       
        var clearAll = container.querySelector('.crt-clear-all-filters');
        if (clearAll) {
            clearAll.addEventListener('click', resetFilters);
        }
    }
 
    /**
    * Remove an active filter
    */
    function removeActiveFilter(filterKey, value) {
        // Find the filter config
        var filterConfig = null;
        for (var sectionKey in FILTER_CONFIG) {
            if (FILTER_CONFIG[sectionKey].filters[filterKey]) {
                filterConfig = FILTER_CONFIG[sectionKey].filters[filterKey];
                break;
            }
        }
       
        if (!filterConfig) return;
       
        switch (filterConfig.type) {
            case 'select':
            case 'number':
                document.getElementById('filter-' + filterKey).value = '';
                break;
            case 'checkbox':
                document.getElementById('filter-' + filterKey).checked = false;
                break;
            case 'multiselect':
                var ms = document.getElementById('filter-' + filterKey);
                var tag = ms.querySelector('.crt-multiselect-tag[data-value="' + CSS.escape(value) + '"]');
                if (tag) tag.remove();
                break;
        }
       
        currentOffset = 0;
        performSearch();
        updateURL();
    }
 
    /**
    * Get human-readable label for a filter key
    */
    function getFilterLabel(filterKey) {
        for (var sectionKey in FILTER_CONFIG) {
            var section = FILTER_CONFIG[sectionKey];
            if (section.filters[filterKey]) {
                return section.filters[filterKey].label;
            }
        }
        return filterKey;
    }
 
    /**
    * Build SMW query from filters
    */
    function buildSMWQuery() {
        var filters = collectFilters();
        var conditions = ['[[Category:CRT models]]'];
        var subobjectConditions = [];
       
        for (var sectionKey in FILTER_CONFIG) {
            var section = FILTER_CONFIG[sectionKey];
            for (var filterKey in section.filters) {
                var filter = section.filters[filterKey];
                var value = filters[filterKey];
               
                if (value === undefined || value === '') continue;
               
                if (filter.subobjectQuery) {
                    // Handle subobject queries differently
                    if (filter.type === 'checkbox' && value === true) {
                        // Use subquery for mod checks
                        subobjectConditions.push({
                             property: filter.subobjectProperty,
                             value: filter.subobjectValue
                         });
                     }
                     }
                     else if (filter.type === 'multiselect' && Array.isArray(value) && value.length > 0) {
                },
                         value.forEach(function(v) {
                mods: {
                             subobjectConditions.push({
                     label: 'Modifications',
                                property: filter.subobjectProperty,
                    collapsed: true,
                                value: v
                    filters: {
                             });
                         has_rgb_mod: {
                         });
                             label: 'Has RGB Mod',
                            type: 'checkbox',
                            subobjectQuery: true,
                            subobjectProperty: 'Has mod type',
                            subobjectValue: 'RGB',
                            subobjectExtraCondition: '[[Has mod feasible::Yes]]'
                        },
                        has_svideo_mod: {
                            label: 'Has S-Video Mod',
                            type: 'checkbox',
                            subobjectQuery: true,
                            subobjectProperty: 'Has mod type',
                            subobjectValue: 'S-video',
                             subobjectExtraCondition: '[[Has mod feasible::Yes]]'
                         }
                     }
                     }
                 }
                 },
                 else if (filter.type === 'select' && filter.property) {
                 tvSystem: {
                     conditions.push('[[' + filter.property + '::' + value + ']]');
                     label: 'TV System',
                }
                    collapsed: true,
                else if (filter.type === 'number' && filter.property) {
                    filters: {
                    var comp = filter.comparison || '=';
                        av_system: {
                    if (comp === '>=') {
                            label: 'AV System',
                         conditions.push('[[' + filter.property + '::≥' + value + ']]');
                            type: 'multiselect',
                    } else if (comp === '<=') {
                            property: 'AV system',
                        conditions.push('[[' + filter.property + '::≤' + value + ']]');
                            loadFrom: 'category',
                    } else {
                            category: 'AV systems'
                        conditions.push('[[' + filter.property + '::' + value + ']]');
                         },
                        frequency: {
                            label: 'AC Frequency',
                            type: 'multiselect',
                            property: 'Frequency',
                            loadFrom: 'static',
                            values: ['50Hz', '60Hz']
                        }
                     }
                     }
                 }
                 },
                 else if (filter.type === 'checkbox' && filter.property && value === true) {
                 builtIn: {
                     if (filter.containsValue) {
                    label: 'Built-in Devices',
                         conditions.push('[[' + filter.property + '::~*' + filter.containsValue + '*]]');
                    collapsed: true,
                     filters: {
                         built_in_vcr: {
                            label: 'VCR',
                            type: 'checkbox',
                            property: 'Has built-in devices',
                            containsValue: 'VCR'
                        },
                        built_in_dvd: {
                            label: 'DVD',
                            type: 'checkbox',
                            property: 'Has built-in devices',
                            containsValue: 'DVD'
                        }
                     }
                     }
                }
                else if (filter.type === 'multiselect' && filter.property && Array.isArray(value) && value.length > 0) {
                    // OR condition for multi-select
                    var orParts = value.map(function(v) {
                        return filter.property + '::' + v;
                    });
                    conditions.push('[[' + orParts.join('||') + ']]');
                 }
                 }
             }
             }
        }
       
        return {
            mainQuery: conditions.join(''),
            subobjectConditions: subobjectConditions
        };
    }


    /**
    * Perform the search using SMW API
    */
    function performSearch() {
        if (isLoading) return;
       
        isLoading = true;
        showLoading();
        updateActiveFilters();
       
        var queryData = buildSMWQuery();
        var query = queryData.mainQuery;
        var sortBy = document.getElementById('sort-by').value;
       
        var sortProperty = 'Has brand';
        switch (sortBy) {
            case 'model': sortProperty = 'Has model code'; break;
            case 'screen_size': sortProperty = 'Has screen size inches'; break;
            case 'type': sortProperty = 'Has CRT type'; break;
        }
       
        // If we have subobject conditions, we need to use a different query approach
        if (queryData.subobjectConditions.length > 0) {
            performSubobjectSearch(queryData, sortProperty);
            return;
        }
       
        var api = new mw.Api();
       
        // First get count
        api.get({
            action: 'ask',
            query: query + '|format=count',
            format: 'json'
        }).done(function(countData) {
            totalResults = parseCountResult(countData);
           
            // Now get actual results
            api.get({
                action: 'ask',
                query: query +
                    '|?Has image#100px=image' +
                    '|?Has brand=brand' +
                    '|?Has model code=model' +
                    '|?Has CRT type=type' +
                    '|?Has screen size inches=size' +
                    '|?Has aspect ratio=aspect' +
                    '|?Has TVL=tvl' +
                    '|sort=' + sortProperty +
                    '|order=asc' +
                    '|limit=' + RESULTS_PER_PAGE +
                    '|offset=' + currentOffset +
                    '|format=json',
                format: 'json'
            }).done(function(data) {
                isLoading = false;
                displayResults(data);
            }).fail(function(error) {
                isLoading = false;
                showError('Search failed. Please try again.');
                console.error('SMW query error:', error);
            });
           
        }).fail(function(error) {
            isLoading = false;
            showError('Search failed. Please try again.');
            console.error('SMW count error:', error);
         });
         });
    }


     /**
     }, function(error) {
    * Perform search with subobject conditions (inputs/mods)
         console.error('Failed to load EveryCRT search engine:', error);
    * This requires a two-step query due to SMW limitations
         var el = document.getElementById('advanced-search-app');
    */
         if (el) {
    function performSubobjectSearch(queryData, sortProperty) {
             el.innerHTML = '<div style="text-align:center;padding:64px;background:#2a2a2e;border-radius:12px;">' +
        var api = new mw.Api();
                 '<p style="font-size:18px;color:#ddd;">Failed to load search engine.</p>' +
        var subConditions = queryData.subobjectConditions;
                 '<p style="color:#888;font-size:13px;margin-top:12px;">Please try refreshing the page.</p></div>';
       
        // Build a query that finds pages through their subobjects
        var subQueries = [];
        subConditions.forEach(function(cond) {
            var subQuery = '[[' + cond.property + '::' + cond.value + ']]|?Has CRT model|limit=5000|format=json';
            subQueries.push(subQuery);
        });
       
        // Execute subobject queries to find matching CRT models
        var promises = subQueries.map(function(sq) {
            return api.get({
                action: 'ask',
                query: sq,
                format: 'json'
            });
        });
       
        Promise.all(promises).then(function(results) {
            // Collect all CRT models that match
            var matchingModels = new Set();
            var isFirst = true;
           
            results.forEach(function(data) {
                var currentMatches = new Set();
                if (data.query && data.query.results) {
                    Object.values(data.query.results).forEach(function(result) {
                        if (result.printouts && result.printouts['Has CRT model']) {
                            result.printouts['Has CRT model'].forEach(function(model) {
                                var modelName = typeof model === 'object' ? model.fulltext : model;
                                currentMatches.add(modelName);
                            });
                        }
                    });
                }
               
                if (isFirst) {
                    matchingModels = currentMatches;
                    isFirst = false;
                } else {
                    // Intersection - only keep models that match ALL conditions
                    matchingModels = new Set([...matchingModels].filter(function(x) {
                        return currentMatches.has(x);
                    }));
                }
            });
           
            if (matchingModels.size === 0) {
                isLoading = false;
                totalResults = 0;
                displayResults({ query: { results: {} } });
                return;
            }
           
            // Now query for those specific models with main conditions
            var modelConditions = Array.from(matchingModels).map(function(m) {
                return '[[' + m + ']]';
            });
           
            // Combine with main query conditions (remove category since we're targeting specific pages)
            var mainConditions = queryData.mainQuery.replace('[[Category:CRT models]]', '');
            var combinedQuery = '(' + modelConditions.join(' OR ') + ')' + mainConditions;
           
            totalResults = matchingModels.size;
           
            // Get paginated results
            api.get({
                action: 'ask',
                query: combinedQuery +
                    '|?Has image#100px=image' +
                    '|?Has brand=brand' +
                    '|?Has model code=model' +
                    '|?Has CRT type=type' +
                    '|?Has screen size inches=size' +
                    '|?Has aspect ratio=aspect' +
                    '|?Has TVL=tvl' +
                    '|sort=' + sortProperty +
                    '|order=asc' +
                    '|limit=' + RESULTS_PER_PAGE +
                    '|offset=' + currentOffset +
                    '|format=json',
                format: 'json'
            }).done(function(data) {
                isLoading = false;
                displayResults(data);
            }).fail(function(error) {
                isLoading = false;
                showError('Search failed. Please try again.');
                console.error('SMW combined query error:', error);
            });
           
         }).catch(function(error) {
            isLoading = false;
            showError('Search failed. Please try again.');
            console.error('Subobject query error:', error);
         });
    }
 
    /**
    * Parse count result from SMW
    */
    function parseCountResult(data) {
        if (!data.query) return 0;
       
        // SMW returns count in various formats depending on version
        if (typeof data.query.results === 'number') {
            return data.query.results;
        }
        if (typeof data.query.results === 'string') {
            var match = data.query.results.match(/\d+/);
            return match ? parseInt(match[0], 10) : 0;
        }
        if (data.query.meta && data.query.meta.count !== undefined) {
            return parseInt(data.query.meta.count, 10);
        }
       
        return 0;
    }
 
    /**
    * Display search results
    */
    function displayResults(data) {
        var grid = document.getElementById('results-grid');
        var countDiv = document.getElementById('results-count');
       
         if (!data.query || !data.query.results || Object.keys(data.query.results).length === 0) {
             grid.innerHTML = '<div class="crt-no-results">' +
                 '<div class="crt-no-results-icon">📺</div>' +
                '<div class="crt-no-results-text">No CRTs found matching your filters.</div>' +
                 '<div class="crt-no-results-hint">Try adjusting your filters or <a href="#" id="reset-from-no-results">reset all filters</a>.</div>' +
                '</div>';
            countDiv.textContent = '0 results';
            document.getElementById('pagination').innerHTML = '';
           
            var resetLink = document.getElementById('reset-from-no-results');
            if (resetLink) {
                resetLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    resetFilters();
                });
            }
            return;
         }
         }
       
     });
        var results = data.query.results;
        var resultKeys = Object.keys(results);
       
        // Update count
        var startNum = currentOffset + 1;
        var endNum = Math.min(currentOffset + resultKeys.length, totalResults);
        countDiv.textContent = 'Showing ' + startNum + '–' + endNum + ' of ' + totalResults + ' CRTs';
       
        var html = '';
        resultKeys.forEach(function(key) {
            var crt = results[key];
            var printouts = crt.printouts || {};
           
            var title = key.replace(/_/g, ' ');
            var url = crt.fullurl || mw.util.getUrl(key);
            var brand = getFirstValue(printouts.brand);
            var model = getFirstValue(printouts.model) || title;
            var type = getFirstValue(printouts.type);
            var size = getFirstValue(printouts.size);
            var aspect = getFirstValue(printouts.aspect);
            var tvl = getFirstValue(printouts.tvl);
            var image = getImageUrl(printouts.image);
           
            html += '<a href="' + url + '" class="crt-result-card">';
            html += '<div class="crt-card-image">';
            if (image) {
                html += '<img src="' + image + '" alt="' + escapeHtml(title) + '" loading="lazy">';
            } else {
                html += '<div class="crt-no-image"><span>📺</span></div>';
            }
            html += '</div>';
            html += '<div class="crt-card-info">';
            html += '<div class="crt-card-brand">' + escapeHtml(brand || '') + '</div>';
            html += '<div class="crt-card-title">' + escapeHtml(model) + '</div>';
            html += '<div class="crt-card-meta">';
            if (type) html += '<span class="crt-meta-type">' + escapeHtml(type) + '</span>';
            if (size) html += '<span class="crt-meta-size">' + size + '"</span>';
            if (aspect) html += '<span class="crt-meta-aspect">' + escapeHtml(aspect) + '</span>';
            if (tvl) html += '<span class="crt-meta-tvl">' + tvl + ' TVL</span>';
            html += '</div>';
            html += '</div>';
            html += '</a>';
        });
       
        grid.innerHTML = html;
        grid.classList.add('grid-view');
       
        buildPagination();
    }
 
    /**
    * Get first value from SMW printout
    */
    function getFirstValue(printout) {
        if (!printout || !printout[0]) return null;
        var val = printout[0];
        if (typeof val === 'object') {
            return val.fulltext || val.value || null;
        }
        return val;
    }
 
    /**
    * Get image URL from SMW printout
    */
    function getImageUrl(printout) {
        if (!printout || !printout[0]) return null;
        var img = printout[0];
       
        // Extract filename from various formats SMW might return
        var imgName;
        if (typeof img === 'object') {
            // SMW returns object with fulltext like "File:filename.jpg"
            imgName = img.fulltext || '';
        } else {
            imgName = String(img);
        }
       
        // Remove "File:" prefix if present
        imgName = imgName.replace(/^File:/, '');
       
        if (!imgName) return null;
       
        // Use Special:Redirect/file to get the actual image with thumbnail
        return '/wiki/Special:Redirect/file/' + encodeURIComponent(imgName) + '?width=160';
    }
 
    /**
    * Build pagination controls
    */
    function buildPagination() {
        var pagination = document.getElementById('pagination');
       
        if (totalResults <= RESULTS_PER_PAGE) {
            pagination.innerHTML = '';
            return;
        }
       
        var totalPages = Math.ceil(totalResults / RESULTS_PER_PAGE);
        var currentPage = Math.floor(currentOffset / RESULTS_PER_PAGE) + 1;
       
        var html = '<div class="crt-pagination-info">';
        html += 'Page ' + currentPage + ' of ' + totalPages;
        html += '</div>';
        html += '<div class="crt-pagination-buttons">';
       
        // Previous button
        if (currentPage > 1) {
            html += '<button class="crt-page-btn crt-page-prev" data-offset="' + ((currentPage - 2) * RESULTS_PER_PAGE) + '">← Previous</button>';
        }
       
        // Page numbers
        var startPage = Math.max(1, currentPage - 2);
        var endPage = Math.min(totalPages, currentPage + 2);
       
        if (startPage > 1) {
            html += '<button class="crt-page-btn" data-offset="0">1</button>';
            if (startPage > 2) html += '<span class="crt-page-ellipsis">…</span>';
        }
       
        for (var i = startPage; i <= endPage; i++) {
            var active = i === currentPage ? ' active' : '';
            html += '<button class="crt-page-btn' + active + '" data-offset="' + ((i - 1) * RESULTS_PER_PAGE) + '">' + i + '</button>';
        }
       
        if (endPage < totalPages) {
            if (endPage < totalPages - 1) html += '<span class="crt-page-ellipsis">…</span>';
            html += '<button class="crt-page-btn" data-offset="' + ((totalPages - 1) * RESULTS_PER_PAGE) + '">' + totalPages + '</button>';
        }
       
        // Next button
        if (currentPage < totalPages) {
            html += '<button class="crt-page-btn crt-page-next" data-offset="' + (currentPage * RESULTS_PER_PAGE) + '">Next →</button>';
        }
       
        html += '</div>';
        pagination.innerHTML = html;
       
        // Attach click handlers
        pagination.querySelectorAll('.crt-page-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                currentOffset = parseInt(this.dataset.offset, 10);
                performSearch();
                updateURL();
               
                // Scroll to top of results
                document.querySelector('.crt-results-header').scrollIntoView({ behavior: 'smooth' });
            });
        });
    }
 
    /**
    * Update URL with current filters
    */
    function updateURL() {
        var filters = collectFilters();
        var params = new URLSearchParams();
       
        for (var key in filters) {
            var value = filters[key];
            if (Array.isArray(value)) {
                params.set(key, value.join(','));
            } else if (value === true) {
                params.set(key, '1');
            } else {
                params.set(key, value);
            }
        }
       
        var sortBy = document.getElementById('sort-by').value;
        if (sortBy !== 'brand') {
            params.set('sort', sortBy);
        }
       
        if (currentOffset > 0) {
            params.set('offset', currentOffset);
        }
       
        var newUrl = window.location.pathname;
        var paramString = params.toString();
        if (paramString) {
            newUrl += '?' + paramString;
        }
       
        history.replaceState(null, '', newUrl);
    }
 
    /**
    * Parse URL parameters and set filters
    */
    function parseURLParams() {
        var params = new URLSearchParams(window.location.search);
       
        params.forEach(function(value, key) {
            if (key === 'sort') {
                document.getElementById('sort-by').value = value;
                return;
            }
            if (key === 'offset') {
                currentOffset = parseInt(value, 10) || 0;
                return;
            }
           
            // Find the filter
            var filterConfig = null;
            for (var sectionKey in FILTER_CONFIG) {
                if (FILTER_CONFIG[sectionKey].filters[key]) {
                    filterConfig = FILTER_CONFIG[sectionKey].filters[key];
                    break;
                }
            }
           
            if (!filterConfig) return;
           
            switch (filterConfig.type) {
                case 'select':
                case 'number':
                    var input = document.getElementById('filter-' + key);
                    if (input) input.value = value;
                    break;
                case 'checkbox':
                    var checkbox = document.getElementById('filter-' + key);
                    if (checkbox) checkbox.checked = (value === '1' || value === 'true');
                    break;
                case 'multiselect':
                    var ms = document.getElementById('filter-' + key);
                    if (ms) {
                        var values = value.split(',');
                        var selectedContainer = ms.querySelector('.crt-multiselect-selected');
                        values.forEach(function(v) {
                            v = v.trim();
                            if (!v) return;
                            var tag = document.createElement('span');
                            tag.className = 'crt-multiselect-tag';
                            tag.dataset.value = v;
                            tag.innerHTML = escapeHtml(v) + ' <span class="crt-tag-remove">×</span>';
                            tag.querySelector('.crt-tag-remove').addEventListener('click', function(e) {
                                e.stopPropagation();
                                tag.remove();
                            });
                            selectedContainer.appendChild(tag);
                        });
                    }
                    break;
            }
        });
     }
 
    /**
    * Show loading state
    */
    function showLoading() {
        var grid = document.getElementById('results-grid');
        grid.innerHTML = '<div class="crt-loading">' +
            '<div class="crt-spinner"></div>' +
            '<div class="crt-loading-text">Searching...</div>' +
            '</div>';
    }
 
    /**
    * Show error message
    */
    function showError(message) {
        var grid = document.getElementById('results-grid');
        grid.innerHTML = '<div class="crt-error">' +
            '<div class="crt-error-icon">⚠️</div>' +
            '<div class="crt-error-text">' + escapeHtml(message) + '</div>' +
            '</div>';
        document.getElementById('pagination').innerHTML = '';
    }
 
    /**
    * Escape HTML entities
    */
    function escapeHtml(str) {
        if (!str) return '';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }


    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
})();

Latest revision as of 21:42, 27 February 2026

/**
 * EveryCRT CRT Search — page-specific configuration
 * Loads the shared search engine and passes CRT-specific filters, printouts, and card layout.
 */
(function() {
    'use strict';

    mw.loader.getScript(
        mw.config.get('wgScript') + '?title=MediaWiki:EveryCRT-SearchEngine.js&action=raw&ctype=text/javascript'
    ).then(function() {

        window.EveryCRTSearch({

            containerId: 'advanced-search-app',
            category: 'CRT models',
            resultLabel: 'CRTs',
            noImageEmoji: '\uD83D\uDCFA',
            subobjectParentProperty: 'Has CRT model',
            defaultSort: 'brand',

            // ── Sort options ───────────────────────────────────────
            sortOptions: [
                { value: 'brand',       label: 'Brand',       property: 'Has brand',              printoutKey: 'brand' },
                { value: 'model',       label: 'Model',       property: 'Has model code',         printoutKey: 'model' },
                { value: 'screen_size', label: 'Screen Size', property: 'Has screen size inches',  printoutKey: 'size' },
                { value: 'type',        label: 'Type',        property: 'Has CRT type',           printoutKey: 'type' }
            ],

            // ── Extra printouts (image, brand, model are always included) ──
            printouts: [
                { property: 'Has CRT type',            key: 'type' },
                { property: 'Has screen size inches',  key: 'size' },
                { property: 'Has aspect ratio',        key: 'aspect' },
                { property: 'Has TVL',                 key: 'tvl' }
            ],

            // ── Card meta fields ───────────────────────────────────
            cardMeta: [
                { key: 'type',   cssClass: 'crt-meta-type' },
                { key: 'size',   cssClass: 'crt-meta-size',   suffix: '"' },
                { key: 'aspect', cssClass: 'crt-meta-aspect' },
                { key: 'tvl',    cssClass: 'crt-meta-tvl',    suffix: ' TVL' }
            ],

            // ── Filter configuration ───────────────────────────────
            filterConfig: {
                manufacturing: {
                    label: 'Manufacturing',
                    collapsed: false,
                    filters: {
                        brand: {
                            label: 'Brand',
                            type: 'select',
                            property: 'Has brand',
                            loadFrom: 'category',
                            category: 'Manufacturers'
                        },
                        oem: {
                            label: 'OEM Manufacturer',
                            type: 'select',
                            property: 'Has OEM manufacturer',
                            loadFrom: 'category',
                            category: 'Manufacturers'
                        },
                        series: {
                            label: 'Series',
                            type: 'select',
                            property: 'Has series',
                            loadFrom: 'category',
                            category: 'Series'
                        },
                        chassis: {
                            label: 'Chassis',
                            type: 'select',
                            property: 'Has chassis',
                            loadFrom: 'category',
                            category: 'Chassis'
                        },
                        chassis_family: {
                            label: 'Chassis Family',
                            type: 'select',
                            property: 'Has chassis family',
                            loadFrom: 'category',
                            category: 'Chassis families'
                        }
                    }
                },
                display: {
                    label: 'Display',
                    collapsed: false,
                    filters: {
                        crt_type: {
                            label: 'Type',
                            type: 'select',
                            property: 'Has CRT type',
                            loadFrom: 'category',
                            category: 'CRT types',
                            categoryMemberTypes: 'subcat'
                        },
                        form_factor: {
                            label: 'Form Factor',
                            type: 'select',
                            property: 'Has form factor',
                            loadFrom: 'static',
                            values: ['Standard', 'Console', 'Portable', 'Wall-mount', 'Other']
                        },
                        screen_size_min: {
                            label: 'Screen Size (min)',
                            type: 'number',
                            property: 'Has screen size inches',
                            comparison: '>=',
                            placeholder: 'Min inches'
                        },
                        screen_size_max: {
                            label: 'Screen Size (max)',
                            type: 'number',
                            property: 'Has screen size inches',
                            comparison: '<=',
                            placeholder: 'Max inches'
                        },
                        aspect_ratio: {
                            label: 'Aspect Ratio',
                            type: 'select',
                            property: 'Has aspect ratio',
                            loadFrom: 'static',
                            values: ['4:3', '16:9']
                        },
                        tvl_min: {
                            label: 'TVL (min)',
                            type: 'number',
                            property: 'Has TVL',
                            comparison: '>=',
                            placeholder: 'Min lines'
                        }
                    }
                },
                videoSpecs: {
                    label: 'Video Specifications',
                    collapsed: true,
                    filters: {
                        signal_format: {
                            label: 'Signal Format',
                            type: 'multiselect',
                            subobjectQuery: true,
                            subobjectProperty: 'Has video signal format',
                            loadFrom: 'category',
                            category: 'Video signal formats'
                        },
                        connector: {
                            label: 'Connector',
                            type: 'multiselect',
                            subobjectQuery: true,
                            subobjectProperty: 'Has connector type',
                            loadFrom: 'category',
                            category: 'Connector types'
                        }
                    }
                },
                mods: {
                    label: 'Modifications',
                    collapsed: true,
                    filters: {
                        has_rgb_mod: {
                            label: 'Has RGB Mod',
                            type: 'checkbox',
                            subobjectQuery: true,
                            subobjectProperty: 'Has mod type',
                            subobjectValue: 'RGB',
                            subobjectExtraCondition: '[[Has mod feasible::Yes]]'
                        },
                        has_svideo_mod: {
                            label: 'Has S-Video Mod',
                            type: 'checkbox',
                            subobjectQuery: true,
                            subobjectProperty: 'Has mod type',
                            subobjectValue: 'S-video',
                            subobjectExtraCondition: '[[Has mod feasible::Yes]]'
                        }
                    }
                },
                tvSystem: {
                    label: 'TV System',
                    collapsed: true,
                    filters: {
                        av_system: {
                            label: 'AV System',
                            type: 'multiselect',
                            property: 'AV system',
                            loadFrom: 'category',
                            category: 'AV systems'
                        },
                        frequency: {
                            label: 'AC Frequency',
                            type: 'multiselect',
                            property: 'Frequency',
                            loadFrom: 'static',
                            values: ['50Hz', '60Hz']
                        }
                    }
                },
                builtIn: {
                    label: 'Built-in Devices',
                    collapsed: true,
                    filters: {
                        built_in_vcr: {
                            label: 'VCR',
                            type: 'checkbox',
                            property: 'Has built-in devices',
                            containsValue: 'VCR'
                        },
                        built_in_dvd: {
                            label: 'DVD',
                            type: 'checkbox',
                            property: 'Has built-in devices',
                            containsValue: 'DVD'
                        }
                    }
                }
            }

        });

    }, function(error) {
        console.error('Failed to load EveryCRT search engine:', error);
        var el = document.getElementById('advanced-search-app');
        if (el) {
            el.innerHTML = '<div style="text-align:center;padding:64px;background:#2a2a2e;border-radius:12px;">' +
                '<p style="font-size:18px;color:#ddd;">Failed to load search engine.</p>' +
                '<p style="color:#888;font-size:13px;margin-top:12px;">Please try refreshing the page.</p></div>';
        }
    });

})();
Retrieved from "https://wiki.everycrt.com/index.php?title=MediaWiki:CRT_Search.js&oldid=8962"
MediaWiki Appliance - Powered by TurnKey Linux