Last active
June 11, 2024 12:09
-
-
Save cloud11665/ed5c7da96fd15475b47265f2cf23e876 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment