Skip to content

Commit

Permalink
Added dropdown with live search to "Custom Command Selection"
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kynlos
Kynlos authored Feb 1, 2024
1 parent d676f44 commit 60cdcfa
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 45 deletions.
16 changes: 8 additions & 8 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
Codyception - Cody Command Creator by Kynlo
</title>
</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&amp;display=swap" rel="stylesheet"/>
Expand Down Expand Up @@ -93,15 +96,12 @@ <h1>

<!-- Pre-made Command Dropdown -->
<div>
<label for="premadeCommands">
Select Pre-made Command (Optional): <a class="sidebar-link" href="#" onclick="openCustomCommandViewerModal()">(Search Commands)</a>
</label>
<select id="premadeCommands" onchange="fillForm()">
<option disabled="" selected="" value="">
Select a pre-made command
</option>
<label for="premadeCommands">Select Pre-made Command (Optional):</label>
<select id="premadeCommands" class="select2-searchable">
<!-- Options will be dynamically populated here -->
</select>
</div>
</div>


<!-- Command Name Input -->
<div>
Expand Down
164 changes: 141 additions & 23 deletions src/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,30 +106,68 @@
window.addEventListener('load', populateDropdown);

// Function to fill the form with selected command data

function fillForm() {
const selectedCommand = document.getElementById('premadeCommands').value;

fetch('Cody.json')
.then(response => response.json())
.then(data => {
const selectedCommandData = data.commands[selectedCommand];

document.getElementById('commandName').value = selectedCommand;
document.getElementById('commandPrompt').value = selectedCommandData.prompt;

contextOptionElements.forEach(option => option.classList.remove('selected'));
$(document).ready(function() {
// Fetch and populate the dropdown with commands from Cody.json
fetch('Cody.json')
.then(response => response.json())
.then(data => {
const commandsData = data.commands; // Store the commands data globally
const dropdown = document.getElementById('premadeCommands');

Object.keys(commandsData).forEach(commandName => {
const option = document.createElement('option');
option.value = commandName;
option.text = commandName;
dropdown.add(option);
});

// Initialize Select2 on the select element
$('.select2-searchable').select2({
placeholder: "Type to search commands...",
allowClear: true
});

// Event listener for when an item is selected from the Select2 dropdown
$('#premadeCommands').on('select2:select', function(event) {
const commandKey = event.params.data.id;
const commandData = commandsData[commandKey];

// Populate the input fields with the selected command data
$('#commandName').val(commandKey);
$('#commandPrompt').val(commandData.prompt);
$('#slashCommand').val(commandData.slashCommand || '');
$('#commandNote').val(commandData.note || '');

// Clear previously highlighted context options
$('.context-option').removeClass('selected');

// Highlight the context options based on the selected command data
if (commandData.context) {
commandData.context.forEach(contextKey => {
$(`.context-option[data-value="${contextKey}"]`).addClass('selected');
});
}
});

// Event listener for when the Select2 dropdown is opened
$('#premadeCommands').on('select2:open', function() {
// Wait for the search box to be displayed
setTimeout(function() {
// Focus the search box within the dropdown
if ($('.select2-search__field').length) {
$('.select2-search__field')[0].focus();
}
}, 0);
});
})
.catch(error => console.error('Error loading Cody.json:', error));
});
}

selectedContexts = [];
Object.keys(selectedCommandData.context).forEach(contextValue => {
const option = contextOptionElements.find(option => option.getAttribute('data-value') === contextValue);
if (option) {
option.classList.add('selected');
selectedContexts.push(contextValue);
}
});
})
.catch(error => console.error('Error fetching Cody.json:', error));
}

// Function to toggle dark mode
function toggleDarkMode() {
Expand Down Expand Up @@ -164,6 +202,7 @@
});

// Function to construct command data

function constructCommandData() {
const commandName = document.getElementById('commandName').value.trim();
const commandPrompt = document.getElementById('commandPrompt').value.trim();
Expand All @@ -175,19 +214,23 @@
return null;
}

// Filter out 'codebase' from the selected contexts
const filteredContexts = selectedContexts.filter(context => context !== 'codebase');
// Get the context options element
const contextOptions = document.getElementById('contextOptions');
const selectedContexts = Array.from(contextOptions.getElementsByClassName('context-option'))
.filter(option => option.classList.contains('selected'))
.map(option => option.getAttribute('data-value'));

const commandData = {
command_name: commandName,
prompt: commandPrompt,
context: filteredContexts, // Use the filtered contexts here
context: selectedContexts,
slashCommand: slashCommand,
note: commandNote
};

return commandData;
}


// Function to show modal with JSON data
function showModalWithJson(jsonData) {
Expand Down Expand Up @@ -329,3 +372,78 @@
sidebar.classList.toggle('active'); // Use the appropriate class that shows/hides the sidebar
//console.log('After toggle, active class:', sidebar.classList.contains('active'));
}




// Function to populate the dropdown menu
// Global variable to store the commands data
var commandsData = {};

function populatePremadeCommandsList() {
const dropdown = document.getElementById('premadeCommands');

fetch('Cody.json')
.then(response => response.json())
.then(data => {
commandsData = data.commands; // Store the commands data globally
Object.keys(commandsData).forEach(commandName => {
const option = document.createElement('option');
option.value = commandName;
option.text = commandName;
dropdown.add(option);
});

// Initialize Select2 on the select element
$('.select2-searchable').select2({
placeholder: "Type to search commands...",
allowClear: true
});

// Event listener for when an item is selected from the Select2 dropdown
$('#premadeCommands').on('select2:select', function(event) {
// Retrieve the selected command's data from the event
const commandKey = event.params.data.id;
const commandData = commandsData[commandKey];

// Populate the input fields with the selected command data
$('#commandName').val(commandKey);
$('#commandPrompt').val(commandData.prompt);
// Check if 'slashCommand' and 'note' exist in the JSON data and populate them if they do
$('#slashCommand').val(commandData.slashCommand || '');
$('#commandNote').val(commandData.note || '');

// Clear previously highlighted context options
$('.context-option').removeClass('selected');

// Highlight the context options based on the selected command data
let contextArray = [];
if (commandData.context) {
Object.keys(commandData.context).forEach(contextKey => {
if (commandData.context[contextKey]) {
$(`.context-option[data-value="${contextKey}"]`).addClass('selected');
contextArray.push(contextKey); // Add the context key to the array
}
});
}

});

// Event listener for when the Select2 dropdown is opened
$('#premadeCommands').on('select2:open', function() {
// Wait for the search box to be displayed
setTimeout(function() {
// Focus the search box within the dropdown
if ($('.select2-search__field').length) {
$('.select2-search__field')[0].focus();
}
}, 0);
});
})
.catch(error => console.error('Error loading Cody.json:', error));
}

// Call this function on page load or when the commands list is ready
document.addEventListener('DOMContentLoaded', populatePremadeCommandsList);
// Event listener for the dropdown change event
document.getElementById('premadeCommands').addEventListener('change', fillForm);
77 changes: 63 additions & 14 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,19 +73,7 @@
background-color: #4cae4c;
}

/* Styles for the context option and #premadeCommands */
.context-option,
#premadeCommands {
color: #333;
background-color: inherit;
}

/* Dark mode styles for the context option and #premadeCommands */
.dark-mode .context-option,
.dark-mode #premadeCommands {
color: white;
background-color: #333;
}


/* Styles for the context option */
.context-option {
Expand Down Expand Up @@ -297,4 +285,65 @@
.github-updates-content a:hover {
color: #ff8533;
text-decoration: underline;
}
}


/* Light theme styles for Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background-color: #fff; /* Light background for the dropdown */
border: 1px solid #aaa; /* Light border color */
color: #000000; /* Dark text color */
margin-top: 15px; /* Add padding above the dropdown */
}

.select2-container--default .select2-selection__arrow {
top: 20px; /* Adjust the value to position the arrow below the dropdown */
}

.select2-dropdown {
background-color: #fff; /* Light background for the dropdown options */
border: 1px solid #aaa; /* Light border color */
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #eaeaea; /* Light background for highlighted option */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #000000; /* Dark text color for light mode */
line-height: 28px;
}

/* Dark theme styles for Select2 when .dark-mode class is active */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
background-color: #333; /* Dark background for the dropdown */
border: 1px solid #555; /* Darker border color */
color: #e0e0e0; /* Lighter grey text color, adjusted for better visibility */
margin-top: 15px; /* Add padding above the dropdown */
margin-bottom: 15px; /* Add padding above the dropdown */
}

body.dark-mode .select2-container--default .select2-selection__arrow {
top: 20px; /* Adjust the value to position the arrow below the dropdown */
}

body.dark-mode .select2-dropdown {
background-color: #333; /* Dark background for the dropdown options */
border: 1px solid #555; /* Darker border color */
}

body.dark-mode .select2-container--default .select2-results__option {
color: #ffffff; /* Lighter grey text color for dropdown options, adjusted for better visibility */
}

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #444; /* Darker background for highlighted option */
color: #ffffff; /* White text color for highlighted option, for maximum contrast */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #ffffff;
line-height: 28px;
}

0 comments on commit 60cdcfa

Please sign in to comment.