Difference between revisions of "MediaWiki:Gadget-calculator-search.js"

Revision as of 23:07, 7 September 2021

/**
 * @author Chris Rishel
 */
( function() {
    mw.calculators.initializeSearch = function() {
        var $searchContainer = $( '#calculator-search' );

        if( !$searchContainer.length ) {
            return;
        }

        var searchLabel = 'Search';

        if( !mw.calculators.isMobile() ) {
            searchLabel += $searchContainer.attr( 'data-title' ) ? ' ' + $searchContainer.attr( 'data-title' ) : '';
        }

        searchLabel += ': ';

        var searchLabelAttributes = {
            class: 'calculator-search-label',
            for: 'calculator-search-input'
        };

        var $searchLabel = $( '<label>', searchLabelAttributes ).html( searchLabel );

        var searchInputAttributes = {
            id: 'calculator-search-input',
            class: 'form-control form-control-sm',
            type: 'text',
            autocomplete: 'off'
        };

        var $searchInput = $( '<input>', searchInputAttributes )
            .on( 'input', function() {
                mw.calculators.searchCalculations( $( this ).val() );
            } );

        $searchContainer
            .append( $( '<form>', {
                class: 'form-inline'
            } )
                .append(
                    $searchLabel, $searchInput ) );

        $searchContainer.append( $( '<form>', {
            id: 'calculator-search-category-form',
        } ) );

        mw.trackSubscribe( 'mw.calculators.CalculatorRendered', function() {
            var categorySelectLabel = mw.calculators.isMobile() ? 'Category' : 'Filter by category';

            categorySelectLabel += ':&nbsp;';

            var categorySelectLabelAttributes = {
                class: 'calculator-category-label',
                for: 'calculator-category-input'
            };

            var $categorySelectLabel = $( '<label>', categorySelectLabelAttributes ).html( categorySelectLabel );

            var categorySelectAttributes = {
                id: 'calculator-category-input',
                class: 'custom-select custom-select-sm'
            };

            var $categorySelectInput = $( '<select>', categorySelectAttributes )
                .on( 'change', function() {
                    mw.calculators.selectCategory( $( this ).val() );
                } );

            $( '.calculator' ).each( function() {
                console.log( this );
                console.log( $( this ) );
                console.log( $( this ).data( 'id' ) );
                console.log( $( this ).data( 'search' ) );
                console.log( $( this ).data( 'title' ) );
                $categorySelectInput.append( $( '<option>', {
                    value: $( this ).attr( 'data-id' ),
                    text: $( this ).attr( 'data-title' )
                } ) );
            } );

            $( '#calculator-search-category-form' )
                .replaceWith( $( '<form>', {
                    class: 'form-inline',
                    id: 'calculator-search-category-form'
                } )
                    .append(
                        $categorySelectLabel, $categorySelectInput ) );
        } );
    };

    mw.calculators.searchCalculations = function( searchText ) {
        var $calculators = $( '.calculator' );

        var reSearch = new RegExp( searchText, 'im' );

        $calculators.each( function() {
            // Get the calculations contained by the calculator
            var $calculations = $( this ).find( '.calculator-calculation' );

            // If no search text is defined or if the search text matches one of the search terms,
            // show the calculator and all calculations.
            var showCalculator = !searchText || reSearch.test( $( this ).data( 'search' ) );

            if( showCalculator ) {
                // If the entire calculator should be shown, show all calculations
                $calculations.each( function() {
                    $( this ).show();
                } );
            } else {
                // If we aren't certain we should show the entire calculator, see if the search matches
                // any of the contained calculations.
                $calculations.each( function() {
                    var showCalculation = !searchText || reSearch.test( $( this ).data( 'search' ) );

                    if( showCalculation ) {
                        $( this ).show();

                        // Make sure the calculator heading and structure gets shown
                        showCalculator = true;
                    } else {
                        $( this ).hide();
                    }
                } );
            }

            // If either the calculator or any contained calculations matched, show the calculator container
            // (i.e. title and structure for the calculations)
            if( showCalculator ) {
                $( this ).show();
            } else {
                $( this ).hide();
            }
        } );
    };

    mw.calculators.initializeSearch();
}() );