Keyboard Shortcuts?

[ghost]

How is everyone implementing global keyboard shortcuts? I Have tried the basic approach of setting a keypress handler on the document object, and preventing default behavior (as I want to set a handler for the '/' key), but while the handler gets fired, it swallows every single keyboard event. For instance you can't type into form elements etc, even when they have focus. In JavaScript you have more granular control over event propagation and default behavior, as inside handlers you can specify if the event should prevent default behavior or stop propagating under specific circumstances, or keep going. Unless I have missed something CLOG only lets us specify whether default behavior should be allowed when the event is fired as a whole.

[ghost]

I'm looking into using client-side JavaScript libraries to handle keyboard events. ctrl-keys looks like a good option. The inherent difficulty here is that the core of the event handler lives lisp-side, whereas the event is triggered js-side. So, if we wanted to call a specific handler and prevent default behavior only when the '/' key is pressed, that would require halting execution, initiating the handler on the lisp side, and waiting for the handler to return with some value that could be used to call stopPropagation() or preventDefault() under certain circumstances. This is not going to be a nice solution, since it makes handling key events a synchronous process.

I really just want to fire off a message from the js-side that says "Hey CLOG, this is View speaking, call [function] please." I don't really need lisp-side to know what keys were pressed, just what function/closure to call. This can probably be achieved by setting up key event handlers using ctrl-keys, calling ws.send with the information needed to call a function lisp-side, and finally calling either stopPropagation or preventDefault in the event handler. Initially I'm going to have to write some JavaScript, but eventually I'll wrap up the calls to js-execute in a lispy syntax for specifying hotkeys.

[ghost]

Here is my attempt at implementing hotkeys:

(defmacro set-on-hotkeys (clog-obj &body hotkey-clauses)
  (if (plusp (length hotkey-clauses))
      `(let ((bindings '()))
         ,@(loop for clause in hotkey-clauses
                 for condition = (first clause)
                 for bindings = (rest clause)
                 collect `(when ,condition
                            ,@(loop for binding in bindings collect `(push (list :event-id ,(generate-id) ,@binding) bindings))))
         (loop for binding in bindings
               for event-name = (format nil "~D" (getf binding :event-id))
               for handler = (getf binding :handler)
               do (set-on-event ,clog-obj event-name nil)
                  (set-on-event ,clog-obj event-name handler :cancel-event t))

         (jquery-execute ,clog-obj "off('keydown.hotkeys');")
         (jquery-execute
          ,clog-obj
          (format nil "on('keydown.hotkeys', function (event, data) { ~{~A~%~} });"
                  (loop for binding in bindings
                        for event-name = (format nil "'~D'" (getf binding :event-id))
                        for key = (format nil "'~A'" (getf binding :key))
                        for prevent-default = (if (getf binding :prevent-default) "event.preventDefault();" "")
                        collect (format nil "if (event.key === ~A) { ~A ~A.trigger(~A) };"
                                        key prevent-default (jquery ,clog-obj) event-name)))))
      nil))

I didn't end up using ctrl-keys as I found basic JavaScript/JQuery was all I needed to use. Also, CLOG already has a mechanism for defining custom event handlers, so I just used that to trigger functions from the view/client.

Here is an example:

(defparameter *switches* (make-hash-table*))

(defun switch (body)
  (setf (title (html-document body)) "Switch")
  (setf (display body) "flex")
  (setf (flex-direction body) "horizontal")
  (setf (column-gap body) "2em")
  (labels
      ((update-switch (clog-obj)
         (setf (background-color clog-obj)
               (if (gethash clog-obj *switches*)
                   "orange" "lightgray")))

       (create-switch (clog-obj)
         (let ((switch (create-div clog-obj)))
           (setf (width switch) "5em")
           (setf (height switch) "5em")
           (setf (display switch) "inline-block")
           (update-switch switch)
           switch)))

    (let ((switch1 (create-switch body))
          (switch2 (create-switch body)))
      (flet
          ((toggle-switch1 (&optional event data)
             (declare (ignorable event data))
             (let ((value (gethash switch1 *switches*)))
               (setf (gethash switch1 *switches*) (not value)))
             (update-switch switch1))

           (toggle-switch2 (&optional event data)
             (declare (ignorable event data))
             (let ((value (gethash switch2 *switches*)))
               (setf (gethash switch2 *switches*) (not value)))
             (update-switch switch2))

           (toggle-both (&optional event data)
             (declare (ignorable event data))
             (let ((value1 (gethash switch1 *switches*))
                   (value2 (gethash switch2 *switches*)))
               (setf (gethash switch1 *switches*) (not value1))
               (setf (gethash switch2 *switches*) (not value2)))
             (update-switch switch1)
             (update-switch switch2))

           (turn-off-both (&optional event data)
             (declare (ignorable event data))
             (setf (gethash switch1 *switches*) nil)
             (setf (gethash switch2 *switches*) nil)
             (update-switch switch1)
             (update-switch switch2))

           (turn-on-both (&optional event data)
             (declare (ignorable event data))
             (setf (gethash switch1 *switches*) t)
             (setf (gethash switch2 *switches*) t)
             (update-switch switch1)
             (update-switch switch2)))

        (set-on-hotkeys body
          (t (:key "1" :handler #'toggle-switch1)
             (:key "2" :handler #'toggle-switch2)
             (:key "t" :handler #'toggle-both)
             (:key "/" :handler #'turn-on-both :prevent-default t)
             (:key "Escape" :handler #'turn-off-both)))))))

You can specify conditions for each set of hotkey definitions. In the above example the condition is T as in the hotkeys will be always be attached to body. Currently it only supports single key triggers but it probably won't be too challenging to support key combos or sequences.

I have not tested this very much beyond cleaning up the few bugs that presented themselves as I wrote it. I don't currently know if this will leave lots of objects lying around uncollected when the DOM changes. (orphan hotkey handlers, etc.).

[aykaramba]

This is very awesome. Thanks for posting, I will use this to learn on my next project. Greatly appreciate the code samples.

[ghost]

I made a small CLOG plugin that expands a little on my previous attempt: clog-tinykeys. It uses tinykeys this time, so now it supports key combinations and sequences.

[aykaramba]

Even more awesomeness! I will now add this on my next project. Thanks for sharing!