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

From WikiAnesthesia
Line 29: Line 29:
         var $searchInput = $( '<input>', searchInputAttributes )
         var $searchInput = $( '<input>', searchInputAttributes )
             .on( 'input', function() {
             .on( 'input', function() {
                 console.log( $( this ).val() );
                 mw.calculators.searchCalculations( $( this ).val() );
             } );
             } );


Line 38: Line 38:
                 .append(
                 .append(
                     $searchLabel, $searchInput ) );
                     $searchLabel, $searchInput ) );
    };
    mw.calculators.searchCalculations = function( searchText ) {
        var $calculators = $( '.calculator' );
        $calculators.each( function() {
            var showCalculator = false;
            var $calculations = $( this ).find( '.calculator-calculation' );
            $calculations.each( function() {
                var reSearch = new RegExp( searchText, 'im' );
                var showCalculation = !searchText || reSearch.test( $( this ).attr( 'data-search' ) );
                if( showCalculation ) {
                    $( this ).show();
                    showCalculator = true;
                } else {
                    $( this ).hide();
                }
            } );
            if( showCalculator ) {
                $( this ).show();
            } else {
                $( this ).hide();
            }
        } );
     };
     };


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

Revision as of 01:22, 28 August 2021

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

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

        var searchLabel = 'Search';
        searchLabel += $searchContainer.attr( 'data-title' ) ? ' ' + $searchContainer.attr( 'data-title' ) : '';
        searchLabel += ':&nbsp;';

        var searchLabelAttributes = {
            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( $( '<div>', {
                class: 'form-group row'
            } )
                .append(
                    $searchLabel, $searchInput ) );
    };

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

        $calculators.each( function() {
            var showCalculator = false;

            var $calculations = $( this ).find( '.calculator-calculation' );

            $calculations.each( function() {
                var reSearch = new RegExp( searchText, 'im' );

                var showCalculation = !searchText || reSearch.test( $( this ).attr( 'data-search' ) );

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

                    showCalculator = true;
                } else {
                    $( this ).hide();
                }
            } );

            if( showCalculator ) {
                $( this ).show();
            } else {
                $( this ).hide();
            }
        } );
    };

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