Custom shortcuts!

README.md

@@ -13,6 +13,9 @@ Maybe you don't need it. I need it >.<
 
 # Updates
 
+- 08-09-2024
+  - Custom shortcuts!
+
 - 04-09-2024
   - Changed the resize system of the n-sidebar (it can now be resized directly from its sides NOTE: the top side wilL only move the bar)
   - Added the ability to directly download CIVITAI models into chosen folders (this includes Checkpoint, Textual Inversion, Hypernetwork, Aesthetic Gradient, LORA, LoCon, DoRA, Controlnet, Upscaler, Motion Module, VAE, Poses, Wildcards, Workflows). [More Info](#assets-downloader).
@@ -205,7 +208,7 @@ NOTE: you can set your own API key for models that are not publicly available.
 - [x] Workflows
 - [x] Templates
 - [x] Export and Import Settings
-- [ ] Custom Shortcuts
+- [x] Custom Shortcuts
 - [ ] Touch Support
 
 

__init__.py

@@ -150,6 +150,9 @@ def scan_directory(directory, workflows_dict, existing_names, main_path=''):
 
 def check_model_existence(metadata_path, config_manager, id_model=None):
     metadata_current_path = os.path.join(metadata_path, "models")
+    if not os.path.exists(metadata_current_path):
+        #create directory
+        os.makedirs(metadata_current_path)
     models_report = []
 
     # Scansione del primo livello della directory

app/css/base_style_sb.css

@@ -522,9 +522,6 @@
         margin-right: 8px;
     }
 
-    .sb_hidden {
-        display: none;
-    }
 
     .IMAGE {
         background-color: #64b5f6;
@@ -765,7 +762,7 @@
         box-sizing: content-box;
     }
 
-    #sb_settingsDiv,#sb_settingsDiv_export, #sb_settingsDiv_import {
+    #sb_settingsDiv,#sb_settingsDiv_export, #sb_settingsDiv_import, #sb_settingsDiv_shortcut {
         outline: 0;
         border: 0;
         border-radius: 6px;
@@ -786,10 +783,14 @@
         text-transform: uppercase;
         font-weight: bold;
     }
-    #sb_settingsDiv_export, #sb_settingsDiv_import {
+    #sb_settingsDiv_export, #sb_settingsDiv_import{
         z-index: 1005;
         width: 30vh;
     }
+    #sb_settingsDiv_shortcut {
+        z-index: 1005;
+        width: 100%;
+    }
     #sb_settingsDiv .setting{
         height: 28px;
         width: 100%;
@@ -800,7 +801,7 @@
      
     }
 
-    #sb_settingsDiv .setting  input[type="text"]{
+    #sb_settingsDiv .setting  input[type="text"], #sb_settingsDiv_shortcut .setting input[type="text"]{
         background: var(--comfy-menu-bg);
         color: var(--drag-text);
         padding: 5px;
@@ -810,6 +811,11 @@
         border-radius: 5px;
         border: solid 1px var(--descrip-text);
     }
+
+     #sb_settingsDiv_shortcut .setting input[type="text"] {
+
+        width: 48% !important;
+    }
     #sb_settingsDiv .setting  textarea{
         background: var(--comfy-menu-bg);
         color: var(--drag-text);
@@ -826,10 +832,10 @@
         width: 18px;
         height: 18px;
     }
-    #sb_settingsDiv_export .setting, #sb_settingsDiv_import .setting{
+    #sb_settingsDiv_export .setting, #sb_settingsDiv_import .setting , #sb_settingsDiv_shortcut .setting{
         height: 36px;
     }
-    #sb_settingsDiv .setting input, #sb_settingsDiv_export .setting input , #sb_settingsDiv_import .setting input{
+    #sb_settingsDiv .setting input, #sb_settingsDiv_export .setting input , #sb_settingsDiv_import .setting input, #sb_settingsDiv_shortcut .setting input{
         float: right;
     }
     #sb_settingsDiv .setting label{
@@ -845,12 +851,12 @@
         margin: 5px auto;
         }
 
-        #sb_settingsDiv_export h1, #sb_settingsDiv_import h1{
+        #sb_settingsDiv_export h1, #sb_settingsDiv_import h1, #sb_settingsDiv_shortcut h1{
             font-size: medium;
  
         }
 
-    #sb_settingsDiv h1,#sb_settingsDiv_export h1, #sb_settingsDiv_import h1{
+    #sb_settingsDiv h1,#sb_settingsDiv_export h1, #sb_settingsDiv_import h1 , #sb_settingsDiv_shortcut h1{
         margin: 0 0 20px 0;
         padding: 0 0 5px 0;
         text-align: center;

app/html/sidebar.html

@@ -67,6 +67,34 @@
             <button id="sb_runImportButton">Import</button>
         </div>
     </div>
+
+    <div id="sb_settingsDiv_shortcut"  class="sb_hidden">
+        <h1>Shortcut Settings</h1>
+
+        <div  class="setting">
+            <label>Show/hide Sidebar (<span class="current-shortcut" data-action="action1"></span>)</label>
+            <input type="text" class="sb-shortcut" data-action="action1" placeholder="Press Ctrl/Alt/Shift + Letter/Number" readonly>
+            
+        </div>
+    
+        <div  class="setting">
+            <label>Quick Search (<span class="current-shortcut" data-action="action2"></span>) </label>
+            <input type="text" class="sb-shortcut" data-action="action2" placeholder="Press Ctrl/Alt/Shift + Letter/Number" readonly>
+          
+        </div>
+        
+        <div class="setting">
+            <label>Open Settings (<span class="current-shortcut" data-action="action3"></span>)</label>
+            <input type="text" class="sb-shortcut" data-action="action3" placeholder="Press Ctrl/Alt/Shift + Letter/Number" readonly>
+            
+        </div>
+    
+
+        <div id="sb_buttonsContainer">
+            <button id="sb_saveAllShortcuts">Save Shortcuts</button>
+            <button id="sb_resetToDefault">Reset to Default</button>  
+        </div>
+    </div>
     <style>
         #g_section, #w_section, #t_section, #m_section {
             margin-top: 3vh;
@@ -100,6 +128,7 @@
                 <button id="sb_factoryResetButton">Factory Reset</button>
                 <button id="sb_exportButton">Export Config</button>
                 <button id="sb_importButton">Import Config</button>
+                <button id="sb_shortcutButton">Shortcuts</button>
             </div>
             <div id="g_section"><h3>General Settings</h3></div>
             <div id="w_section"><h3>Workflow Panel</h3></div>

app/js/functions/settings.js

@@ -565,9 +565,11 @@ addSBSetting( "w_section", {
     const switch_settings = document.getElementById("switch_settings");
     const sb_exportButton = document.getElementById("sb_exportButton");
     const sb_importButton = document.getElementById("sb_importButton");
+    const sb_shortcutButton = document.getElementById("sb_shortcutButton");
     const sb_modal_backdrop = document.getElementById("sb-modal-backdrop-settings");
     const sb_settingsDiv_export = document.getElementById("sb_settingsDiv_export");
     const sb_settingsDiv_import = document.getElementById("sb_settingsDiv_import");
+    const sb_settingsDiv_shortcut = document.getElementById("sb_settingsDiv_shortcut");
     const sb_settingsDiv = document.getElementById("sb_settingsDiv");
         switch_settings.addEventListener('click', function() {
 
@@ -588,6 +590,11 @@ addSBSetting( "w_section", {
         })
 
 
+        sb_shortcutButton.addEventListener('click', function() {
+            showIESettings("shortcut");
+        })
+
+
         document.body.addEventListener('click', function(event) {
             const modalBackdrop = document.querySelector('.sb-modal-backdrop-settings');
          
@@ -614,7 +621,17 @@ addSBSetting( "w_section", {
                     !event.target.matches('#sb_importButton')
                 ) {
                     sb_settingsDiv_import.classList.add('sb_hidden');
-                    sb_settingsDiv_import.classList.add('sb_hidden');
+                    //sb_settingsDiv_import.classList.add('sb_hidden');
+                }
+            }
+
+            if (!sb_settingsDiv_shortcut.classList.contains('sb_hidden')) {
+                if (
+                    (event.target === sb_modal_backdrop || sb_settingsDiv.contains(event.target)) &&
+                    !event.target.matches('#sb_shortcutButton')
+                ) {
+                    sb_settingsDiv_shortcut.classList.add('sb_hidden');
+                    //sb_settingsDiv_shortcut.classList.add('sb_hidden');
                 }
             }
 
@@ -670,7 +687,7 @@ addSBSetting( "w_section", {
             document.getElementById('importFileInput').click();
         });
 
-        
+       
         document.getElementById('sb_runImportButton').addEventListener('click', async function() {
             const selectedItems = [];
             
@@ -709,6 +726,135 @@ addSBSetting( "w_section", {
                 alert('Please select a file to import.');
             }
         });
+
+
+
+        /*SHORTCUTS*/
+        const shortcutInputs = document.querySelectorAll('.sb-shortcut');
+        const saveAllButton = document.getElementById('sb_saveAllShortcuts');
+        const resetButton = document.getElementById('sb_resetToDefault');
+        const defaultShortcuts = {
+            action1: 'Alt + X',
+            action2: 'Alt + Z',
+            action3: 'Alt + G'
+        };
+       
+        let shortcuts = JSON.parse(await getConfiguration('sb_shortcuts')) || defaultShortcuts;
+
+
+
+       
+        let currentShortcutKeys = {
+            ctrl: false,
+            alt: false,
+            shift: false,
+            key: null
+        };
+    
+        // Function to update the input with the current shortcut
+        function updateShortcutInput(inputElement) {
+            const modifiers = [];
+            if (currentShortcutKeys.ctrl) modifiers.push('Ctrl');
+            if (currentShortcutKeys.meta) modifiers.push('Meta'); // Display Meta key separately
+            if (currentShortcutKeys.alt) modifiers.push('Alt');
+            if (currentShortcutKeys.shift) modifiers.push('Shift');
+
+            if (modifiers.length > 0 && currentShortcutKeys.key) {
+                inputElement.value = `${modifiers.join(' + ')} + ${currentShortcutKeys.key.toUpperCase()}`;
+            } else {
+                inputElement.value = '';
+            }
+        }
+        // Mostra le shortcut salvate accanto a ciascun campo
+        function displayShortcuts() {
+            
+            shortcutInputs.forEach(inputElement => {
+                const action = inputElement.dataset.action;
+                const shortcutSpan = document.querySelector(`.current-shortcut[data-action="${action}"]`);
+                if (shortcuts[action]) {
+                    shortcutSpan.textContent = shortcuts[action];
+                } else {
+                    shortcutSpan.textContent = 'Not Set';
+                }
+            });
+        }
+    
+        document.addEventListener('keydown', (event) => {
+            // Check if the active element is one of your shortcut input fields
+            const activeElement = document.activeElement;
+            const isShortcutInputActive = Array.from(shortcutInputs).includes(activeElement);
+        
+            if (isShortcutInputActive) {
+                // Only prevent default behavior when interacting with shortcut input fields
+                event.preventDefault();
+        
+                // Separate handling for Ctrl, Alt, Shift, and Meta (Command on Mac)
+                if (event.ctrlKey) currentShortcutKeys.ctrl = true;
+                if (event.metaKey) currentShortcutKeys.meta = true; // Handle Meta separately
+                if (event.altKey) currentShortcutKeys.alt = true;
+                if (event.shiftKey) currentShortcutKeys.shift = true;
+        
+                // Check if the key is a letter, number, special character, or accented letter
+                if (event.key && !['Control', 'Meta', 'Alt', 'Shift'].includes(event.key)) {
+                    currentShortcutKeys.key = event.key;
+                }
+        
+                // Update the input element with the current shortcut combination
+                updateShortcutInput(activeElement);
+            }
+        });
+        
+        document.addEventListener('keyup', (event) => {
+            // Reset the modifier keys when they are released
+            if (!event.ctrlKey) currentShortcutKeys.ctrl = false;
+            if (!event.metaKey) currentShortcutKeys.meta = false; // Reset Meta separately
+            if (!event.altKey) currentShortcutKeys.alt = false;
+            if (!event.shiftKey) currentShortcutKeys.shift = false;
+        });
+        // Funzione per salvare tutte le shortcut
+        function saveAllShortcuts() {
+            shortcutInputs.forEach(inputElement => {
+                const action = inputElement.dataset.action;
+                const shortcut = inputElement.value;
+    
+                if (shortcut) {
+                    shortcuts[action] = shortcut;
+                }
+            });
+    
+            // Salva tutte le shortcut
+            updateConfiguration('sb_shortcuts', JSON.stringify(shortcuts));
+            displayShortcuts();
+            alert('Shortcuts saved successfully!');
+        }
+    
+        // Evento per il pulsante "Save All Shortcuts"
+        saveAllButton.addEventListener('click', () => {
+            saveAllShortcuts();
+        });
+    
+        // Funzione per riportare le shortcut a quelle di default
+        function resetToDefault() {
+            shortcuts = { ...defaultShortcuts };
+            updateConfiguration('sb_shortcuts', JSON.stringify(shortcuts));
+            displayShortcuts();
+        }
+    
+        // Evento per il pulsante "Reset to Default"
+        resetButton.addEventListener('click', () => {
+            resetToDefault();
+        });
+    
+        // Mostra le shortcut salvate all'avvio
+        displayShortcuts();
+
+        /* END OF SHORTCUTS */
+
+
+
+
+
+
         
 // General function to handle tab switching
 function createTabManager(tabs, contents) {

app/js/sidebar_node.js

@@ -938,33 +938,64 @@ async function addSidebar() {
 
 //Shortcuts
 
-function handleKeyPress(event) {
 
-    // Per la combinazione Alt + X
-    if (event.altKey && (event.key.toLowerCase() === "x" || event.keyCode === 88)) {
-        // Toggle sidebar if it's closed
+
+async function handleKeyPress(event) {
+    // Retrieve user-saved shortcuts from localStorage, or fall back to default values if not set
+    let shortcuts = JSON.parse(await getConfiguration('sb_shortcuts')) || {
+        action1: 'Alt + X',
+        action2: 'Alt + Z',
+        action3: 'Alt + G'
+    };
+
+    // Function to check if a key press matches the given shortcut
+    function isShortcutMatch(shortcut, event) {
+        const parts = shortcut.split(' + ');
+        const key = parts.pop().toLowerCase(); // Extract the main key (e.g., 'X')
+        const modifiers = parts; // Remaining parts are the modifiers (e.g., 'Alt', 'Ctrl')
+
+        // Return true if all the modifiers and the main key match the current event
+        return (
+            modifiers.includes('Ctrl') === event.ctrlKey &&
+            modifiers.includes('Alt') === event.altKey &&
+            modifiers.includes('Shift') === event.shiftKey &&
+            key === event.key.toLowerCase()
+        );
+    }
+
+    let isCustomShortcut = false; // Flag to track if a custom shortcut is matched
+
+    // Check if the pressed keys match the shortcut for action1 (Alt + X by default)
+    if (isShortcutMatch(shortcuts.action1, event)) {
         const side_bar = document.getElementById('panel_home');
         if (side_bar.classList.contains('closed')) {
-            toggleSHSB();
+            toggleSHSB(); // Toggle sidebar if it's closed
         }
-        // Focus on searchInputSB
-        searchInputSB.focus();
+        
+        switchTab("panel_home");
+        searchInputSB.focus(); // Focus on the search input
+        isCustomShortcut = true; // Mark that a custom shortcut was triggered
     }
 
-    // Per la combinazione Alt + Z
-    if (event.altKey && (event.key.toLowerCase() === "z" || event.keyCode === 90)) {
-        toggleSHSB();
+    // Check if the pressed keys match the shortcut for action2 (Alt + Z by default)
+    if (isShortcutMatch(shortcuts.action2, event)) {
+        toggleSHSB(); // Toggle the sidebar
+        isCustomShortcut = true; // Mark that a custom shortcut was triggered
     }
-    if (event.altKey && (event.key.toLowerCase() === "g" || event.keyCode === 71)) {
-        showSettings();
+
+    // Check if the pressed keys match the shortcut for action3 (Alt + G by default)
+    if (isShortcutMatch(shortcuts.action3, event)) {
+        showSettings(); // Open settings panel
+        isCustomShortcut = true; // Mark that a custom shortcut was triggered
+    }
+
+    // Only prevent the default action if a custom shortcut was triggered
+    if (isCustomShortcut) {
+        event.preventDefault();
     }
-   
 }
 
 
-
-
-
 // Custom Node View
 async function processViews(viewsData, settingsData) {
     const sb = document.getElementById('sidebar');

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-n-sidebar"
 description = "A simple sidebar for ComfyUI."
-version = "1.5.2"
+version = "1.5.5"
 license = { file = "LICENSE" }
 
 [project.urls]