Shortcut reduce/expands as user types/backspaces

app/Models/Pro.php

@@ -71,7 +71,7 @@ class Pro extends Model
     }
 
     public function shortcuts() {
-        return $this->hasMany(ProTextShortcut::class, 'pro_id');
+        return $this->hasMany(ProTextShortcut::class, 'pro_id')->where('is_removed', false);
     }
 
     public function noteTemplates() {

public/js/shortcut.js

@@ -3,6 +3,7 @@
 (function() {
     let input = null, menu = null, options = [], index = -1;
     let backtrackAfterApplying = false;
+    let strPart = '';
     function getCaretPos(win) {
         win = win || window;
         let doc = win.document;
@@ -38,11 +39,17 @@
         }
         return { x: x, y: y };
     }
-    function show(_input) {
+    function show(_initial = false) {
         let pos = getCaretPos();
+        // strPart = '';
         if(pos) {
             index = -1;
             options = window.userShortcuts;
+            if(strPart.length > 1) {
+                options = window.userShortcuts.filter(function(_x) {
+                    return _x.name.toLowerCase().indexOf(strPart.substr(1).toLowerCase()) !== -1;
+                });
+            }
             menu.empty();
             for(let i = 0; i < options.length; i++) {
                 menu.append(
@@ -52,13 +59,17 @@
                         .attr('title', options[i].value)
                 );
             }
-            menu
-                .css({
-                    left: pos[0] + 'px',
-                    top: (pos[1] + $(window).scrollTop()) + 'px',
-                })
-                .show();
-
+            console.log(strPart)
+            if(_initial) {
+                menu
+                    .css({
+                        left: pos[0] + 'px',
+                        top: (pos[1] + $(window).scrollTop()) + 'px',
+                    })
+                    .show();
+                document.execCommand("insertText", true, '@');
+                document.execCommand("delete", true, null);
+            }
         }
     }
     function discard() {
@@ -77,7 +88,9 @@
         if(input && options && options.length && index >= 0 && index < options.length) {
             // $(input).focus();
             if(backtrackAfterApplying) {
-                document.execCommand("delete", true, null);
+                for (let i = 0; i < strPart.length; i++) {
+                    document.execCommand("delete", true, null);
+                }
             }
             document.execCommand("insertText", true, options[index].value);
             discard();
@@ -96,6 +109,8 @@
             .addClass('stag-shortcuts')
             .appendTo('body');
 
+        let refreshOptions = false;
+
         $(document)
             .off('mousedown.outside-shortcuts')
             .on('mousedown.outside-shortcuts', function(_e) {
@@ -105,24 +120,29 @@
         $(document)
             .off('keypress.shortcuts', '[with-shortcuts]')
             .on('keypress.shortcuts', '[with-shortcuts]', function(_e) {
-                // console.log('KP: ', _e.which);
                 input = this;
                 switch(_e.which) {
                     case 64:
                         backtrackAfterApplying = true;
-                        show(this);
+                        strPart = '@';
+                        show(true);
                         break;
                     default:
-                        if(isVisible()) return false;
+                        if(!isVisible()) return;
+                        let char = String.fromCharCode(_e.which);
+                        if(_e.ctrlKey || _e.metaKey || !char.match(/[a-z0-9 ]/i)) {
+                            return false;
+                        }
                         break;
                 }
             })
             .off('keydown.shortcuts', '[with-shortcuts]')
             .on('keydown.shortcuts', '[with-shortcuts]', function(_e) {
-                // console.log('KD: ', _e.which);
                 input = this;
                 let consumed = false;
+                refreshOptions = false;
                 switch(_e.which) {
+                    /*
                     case 32:
                         if(_e.ctrlKey && !isVisible()) {
                             backtrackAfterApplying = false;
@@ -136,6 +156,7 @@
                             consumed = true;
                         }
                         break;
+                     */
                     case 27:
                         if(!isVisible()) return;
                         consumed = !discard();
@@ -157,11 +178,47 @@
                         apply();
                         consumed = true;
                         break;
+                    case 8:
+                        if(!isVisible()) break;
+                        if(strPart.length === 1) {
+                            strPart = '';
+                            discard();
+                        }
+                        else {
+                            strPart = strPart.substr(0, strPart.length - 1);
+                            refreshOptions = true;
+                        }
+                        consumed = false;
+                        break;
                     default:
-                        consumed = isVisible();
+                        if(!isVisible()) break;
+                        let char = String.fromCharCode(_e.which);
+                        if(!_e.ctrlKey && !_e.metaKey && char.match(/[a-z0-9 ]/i)) {
+                            strPart += char;
+                            refreshOptions = true;
+                            consumed = false;
+                        }
+                        else {
+                            consumed = true;
+                        }
                         break;
                 }
-                if(consumed) return false;
+                if(consumed) {
+                    _e.stopImmediatePropagation();
+                    _e.preventDefault();
+                    return false;
+                }
+            })
+            .off('keyup.shortcuts', '[with-shortcuts]')
+            .on('keyup.shortcuts', '[with-shortcuts]', function(_e) {
+                console.log('Reached keyup!', strPart);
+                if(isVisible() && refreshOptions) {
+                    show();
+                }
+            })
+            .off('paste.shortcuts', '[with-shortcuts]')
+            .on('paste.shortcuts', '[with-shortcuts]', function(_e) {
+                if(isVisible()) return false;
             });
         $(document)
             .off('mousedown.apply-shortcuts', '.stag-shortcuts>.sc')

resources/views/app/practice-management/my-text-shortcuts.blade.php

@@ -69,7 +69,7 @@
                                         </div>
                                     </form>
                                 </div>
-                                <div moe wide class="mr-2">
+                                <div moe relative wide class="mr-2">
                                     <a start show class="text-danger">
                                         <i class="fa fa-trash-alt"></i>
                                     </a>