-
-
+
+
diff --git a/src/scripts.js b/src/scripts.js
index b276e6d..472345c 100644
--- a/src/scripts.js
+++ b/src/scripts.js
@@ -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() {
@@ -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();
@@ -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) {
@@ -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);
diff --git a/src/styles.css b/src/styles.css
index 6112c69..f37debf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -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 {
@@ -297,4 +285,65 @@
.github-updates-content a:hover {
color: #ff8533;
text-decoration: underline;
- }
\ No newline at end of file
+ }
+
+
+/* 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;
+}