intel_search.user.js

// ==UserScript==
// @name         Intel Intrinsics Guide - Instruction Width Filter
// @version      1.0
// @description  Add filters to the Intel Intrinsics Guide
// @author       cloud11665
// @homepage     https://twitter.com/cloud11665
// @match        https://www.intel.com/content/www/us/en/docs/intrinsics-guide/index.html
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Function to perform the search using the filters
    function doSearch() {
        let searchInput = document.querySelector('#ig_search');
        let fakeSearchInput = document.querySelector('#fake_search');
        if (searchInput && fakeSearchInput) {
            let prefix = selectedWidthRadioButton ? "_mm" + (selectedWidthRadioButton.value !== '128' ? selectedWidthRadioButton.value : '') + "_*" : "";
            let suffix = selectedTypeRadioButton ? "*_" + selectedTypeRadioButton.value : "";
            searchInput.value = prefix + fakeSearchInput.value + suffix;
            let event = new Event('input', { bubbles: true });
            searchInput.dispatchEvent(event);
        }
    }

    // Create a fake search bar
    let searchInput = document.querySelector('#ig_search');
    let fakeSearchInput = document.createElement('input');
    fakeSearchInput.id = 'fake_search';
    fakeSearchInput.type = 'text';
    fakeSearchInput.style.display = 'block';
    fakeSearchInput.style.width = '100%';  // Make the fake search bar full width
    searchInput.parentNode.insertBefore(fakeSearchInput, searchInput);
    searchInput.style.display = 'none';  // Hide the original search bar

    // Hide the search icon
    let searchIcon = document.querySelector('#ig_search_icon');
    if (searchIcon) {
        searchIcon.style.display = 'none';
    }

    // Add an event listener to the fake search input to capture the user's search string
    fakeSearchInput.addEventListener('input', function() {
        doSearch();
    });

    // Add a container for the radio buttons
    let filterContainer = document.createElement('div');
    filterContainer.style.margin = "10px 0";

    // Add a title for the width radio buttons
    let widthTitle = document.createElement('h3');
    widthTitle.textContent = 'Instruction Width';
    filterContainer.appendChild(widthTitle);

    // Array of width radio button labels
    let widthLabels = ['128', '256', '512'];

    // Track the selected width radio button
    let selectedWidthRadioButton = null;

    // Create and append width radio buttons
    widthLabels.forEach(function(label) {
        let radioButton = document.createElement('input');
        radioButton.type = 'radio';
        radioButton.name = 'instructionWidth';
        radioButton.value = label;
        radioButton.style.marginRight = "5px";

        let radioLabel = document.createElement('label');
        radioLabel.textContent = label;
        radioLabel.style.marginRight = "10px";

        filterContainer.appendChild(radioButton);
        filterContainer.appendChild(radioLabel);

        // Add an event listener to update the search input value
        radioButton.addEventListener('click', function() {
            if (selectedWidthRadioButton === this) {
                // If this radio button is already selected, deselect it
                selectedWidthRadioButton = null;
                this.checked = false;
            } else {
                selectedWidthRadioButton = this;
            }
            doSearch();
        });
    });

    // Add a title for the type radio buttons
    let typeTitle = document.createElement('h3');
    typeTitle.textContent = 'Instruction Type';
    filterContainer.appendChild(typeTitle);

    // Array of type radio button labels and their respective suffixes
    let typeLabels = [
        {label: 'int8', suffix: 'epi8'},
        {label: 'int16', suffix: 'epi16'},
        {label: 'int32', suffix: 'epi32'},
        {label: 'int64', suffix: 'epi64'},
        {label: 'float16', suffix: 'ph'},
        {label: 'float32', suffix: 'ps'},
        {label: 'float64', suffix: 'pd'}
    ];

    // Track the selected type radio button
    let selectedTypeRadioButton = null;

    // Create and append type radio buttons
    typeLabels.forEach(function(option) {
        let radioButton = document.createElement('input');
        radioButton.type = 'radio';
        radioButton.name = 'instructionType';
        radioButton.value = option.suffix;
        radioButton.style.marginRight = "5px";

        let radioLabel = document.createElement('label');
        radioLabel.textContent = option.label;
        radioLabel.style.display = "inline";

        let lineBreak = document.createElement('br');

        filterContainer.appendChild(radioButton);
        filterContainer.appendChild(radioLabel);
        filterContainer.appendChild(lineBreak);

        // Add an event listener to append the suffix to the search input value
        radioButton.addEventListener('click', function() {
            if (selectedTypeRadioButton === this) {
                // If this radio button is already selected, deselect it
                selectedTypeRadioButton = null;
                this.checked = false;
            } else {
                selectedTypeRadioButton = this;
            }
            doSearch();
        });
    });

    // Append the filter container to the sidebar
    let sidebar = document.querySelector('#ig_left');
    if (sidebar) {
        let thirdEntry = sidebar.children[2]; // child index starts from 0
        if (thirdEntry) {
            sidebar.insertBefore(filterContainer, thirdEntry.nextSibling);
        } else {
            console.log("Third entry not found, can't add filters");
        }
    } else {
        console.log("Sidebar not found, can't add filters");
    }

    // Trigger initial search
    doSearch();

    // CSS styles to hide the image with id "ig_clear"
    const hideClearImageStyle = `
        #ig_clear {
            display: none !important;
        }
    `;

    GM_addStyle(hideClearImageStyle);
})();