Untitled
unknown
javascript
a year ago
3.0 kB
4
Indexable
// Get the container element var container = document.querySelector('.emoticon-buttons'); // Get all the buttons inside the container var buttons = container.querySelectorAll('button'); // Get the width and height of the container var containerWidth = container.offsetWidth; var containerHeight = container.offsetHeight; // Get the width and height of a single button (assuming all buttons have the same dimensions) var buttonWidth = buttons[0].offsetWidth; var buttonHeight = buttons[0].offsetHeight; // Calculate the number of columns based on the container width and the width of buttons var columns = Math.floor(containerWidth / buttonWidth); // Calculate the number of rows based on the container height and the height of buttons var rows = Math.floor(containerHeight / buttonHeight); // Create a style element and append it to the head var styleElement = document.createElement('style'); document.head.appendChild(styleElement); // Initialize variables to track the focused button index var focusedButtonIndex = 0; // Attach a click event listener to each button buttons.forEach(function(button, index) { button.addEventListener('click', function() { // Update the focused button index when a button is clicked focusedButtonIndex = index; updateFocus(); }); }); // Log the inferred number of rows, columns, button width, and button height console.log('Inferred Number of Rows:', rows); console.log('Inferred Number of Columns:', columns); console.log('Button Width:', buttonWidth); console.log('Button Height:', buttonHeight); // Log the width and height of the container console.log('Container Width:', containerWidth); console.log('Container Height:', containerHeight); // Update the focus based on the focusedButtonIndex function updateFocus() { buttons.forEach(function(button, index) { // Remove focus from all buttons button.classList.remove('focused'); // Add focus to the button with the focusedButtonIndex if (index === focusedButtonIndex) { button.classList.add('focused'); button.focus(); } }); } // Handle arrow key navigation document.addEventListener('keydown', function(event) { switch (event.key) { case 'ArrowLeft': focusedButtonIndex = Math.max(0, focusedButtonIndex - 1); updateFocus(); break; case 'ArrowRight': focusedButtonIndex = Math.min(buttons.length - 1, focusedButtonIndex + 1); updateFocus(); break; case 'ArrowUp': focusedButtonIndex = Math.max(0, focusedButtonIndex - columns); updateFocus(); break; case 'ArrowDown': focusedButtonIndex = Math.min(buttons.length - 1, focusedButtonIndex + columns); updateFocus(); break; } }); // Set the styles for the 'focused' class styleElement.textContent = ` .focused { border: 2px solid #ff0000 !important; /* Red border */ } `;
Editor is loading...
Leave a Comment