Global hotkeys

[jochenkrattenmacher]

Hello,
I am trying to build a presentation framework with Stipple (i.e. an alternative to powerpoint).

I thus would like to listen for global keyboard events, most importantly such that I can switch between slides when arrow buttons are pressed

I was hoping that adding "@on("keyup.right", "current_slide_id++")" to the page element would do the trick, but it doesn't trigger*. How can I implement global hotkeys?

*FYI, in the example below it does actually trigger, but only at the same time as the @on which I added to the input element (which I added just to see what works). Thus, in the example below, pressing the right arrow button while the focus is on the input element causes a switch to slide 3 (because current_slide_id is incremented twice). Otherwise, pressing the right arrow does nothing.

using Genie.Router
using Stipple, StippleUI

@reactive! mutable struct Presentation <: ReactiveModel
    current_slide_id::R{Int8} = 1
end

function init_presentation()
    presentation = Stipple.init(Presentation)
    on(presentation.isready) do ready
        ready || return
        push!(presentation)        
    end
    presentation
end

function ui(presentation)
    page(presentation, "", @on("keyup.right", "current_slide_id++"),
    [
        cell(
            [
                h3("slide 1"), 
                input("", @on("keyup.right", "current_slide_id++"))
            ], @iif(:(current_id == 1))),
        h3("slide 2", @iif(:(current_slide_id == 2))),
        h3("slide 3", @iif(:(current_slide_id == 3))),
    ]
    )
end

route("/") do
  init_presentation() |> ui |> html
end

up(8080, open_browser = true)

[essenciary]

Maybe create a plugin using https://www.jsdelivr.com/package/npm/vue-shortkey -- @hhaensel what do you think?

[AbhimanyuAryan]

Sorry just curious any specific reason for not using the vue2 default: https://v2.vuejs.org/v2/guide/events?redirect=true#Key-Codes

v-on:keyup.right = "action"? But pagination is going to be a little tricky

[jochenkrattenmacher]

This post might be useful:
https://shubhamjain.co/til/vue-shortcuts/

It seems rather straightforward but I still wouldn't know how to implement that with Genie/Stipple

[jochenkrattenmacher]

So I decided to tackle this now, and to try use vue-shortkey

well, all I accomplished so far is to add a minified vue-shortkey.js file to "public/js" and loading it by adding append = script(src = "js/vue-shortkey.js") to Stipple.page() (which is probably the wrong way to go about it, however, the js file is loaded, and I guess that is what counts for now).

Also, I added the following HTML element:

input("test", """v-shortkey="['s']" @shortkey="current_id1++" """)

Unfortunately, nothing happens when I press s. I get in the following message in the browser console (upon loading the page):

[Vue warn]: Failed to resolve directive: shortkey

(found in <Anonymous>)

From the instructions, I gather that the following is missing (I am not sure whether that's it though, and whether that is all):

Vue.use(require('vue-shortkey'))

However, I am not sure where I would place that code. An entry point would be great here!

Perhaps it is worth noting that I tried understanding this guide about adding frontend assets. Perhaps most significantly, I could not find "application.js" (I did use fullstack = true). There doesn't seem to be an app/assets/ folder in my project folder. But in any case the guide doesn't seem to explain how to install vue plugins

cheers

[essenciary]

@AbhimanyuAryan in my understanding, this is more about adding app/page level shortcuts. The v-on:keyup it's on a component level (only works when the focus os in the component).

@jochenkrattenmacher We should start with the architecture
a) it would be nice to have this as an optional plugin, at it should only require Stipple/Vue so it can be a Stipple plugin.
b) but how can the users configure it? The plugin should have a configuration object that would allow the user to pass the list of shortcuts.
c) as far as assets go, that tutorial is very old - you can see that is has been removed from the current docs at geniebuilder.com. We have a different system now to bundle the assets with the plugins and automatically inject them into the page. So the plugin approach would also solve this.
d) we don't have support for Vue.use but we do have for components, which seems to achieve the same thing (see https://stackoverflow.com/questions/61753412/what-is-the-purpose-of-vue-use-while-importing-a-plugin-if-we-have-already-us ). The plugin approach would also solve this.

[jochenkrattenmacher]

this comes a bit late, but thanks! (just picked this up again)

I guess it would be nice to implement such a plugin, and I attempted to do something in this direction (see second part of this comment), but my web development powers are not there yet ;P. However, I for one am happy with what I did now:

Hotkeys without plugin

I figured out how to implement global hotkeys according to this already-mentioned tutorial: https://shubhamjain.co/2019/06/09/vue-shortcuts/ and the official Vue doc: https://v2.vuejs.org/v2/guide/custom-directive.html#ad
I basically just made a few modifications to https://github.com/GenieFramework/StippleDemos/tree/master/AdvancedExamples/DraggableTree. Here's the MWE:

assets/js/hotkey.js:

Vue.directive('hotkey', {
    // When the bound element is inserted into the DOM...
    inserted: function (el, binding) {
      this._keyListener = function(e) {
          if (e.key === "ArrowRight") {
              alert("Right, arg = " + binding.expression);
          }
      };
  
      document.addEventListener('keydown', this._keyListener.bind(this));
  },
  })

the julia script (add_fileroute is from the DraggableTree demo):

using Stipple, StippleUI

# Genie.Secrets.secret_token!()

# from https://github.com/GenieFramework/StippleDemos/blob/master/AdvancedExamples/DraggableTree/DraggableTree.jl 
function add_fileroute(assets_config::Genie.Assets.AssetsConfig, filename::AbstractString; 
    basedir = @__DIR__, content_type::Union{Nothing, Symbol} = nothing, type::Union{Nothing, String} = nothing, ext::Union{Nothing, String} = nothing, kwargs...)

    file, ex = splitext(filename)
    ext = isnothing(ext) ? ex : ext
    type = isnothing(type) ? ex[2:end] : type
    
    content_type = isnothing(content_type) ? if type == "js"
        :javascript
    elseif type == "css"
        :css
    elseif type in ["jpg", "jpeg", "svg", "mov", "avi", "png", "gif", "tif", "tiff"]
        imagetype = replace(type, Dict("jpg" => "jpeg", "mpg" => "mpeg", "tif" => "tiff")...)
        Symbol("image/$imagetype")
    else
        Symbol("*.*")
    end : content_type

    Genie.Router.route(Genie.Assets.asset_path(assets_config, type; file, ext, kwargs...)) do
        Genie.Renderer.WebRenderable(
            Genie.Assets.embedded(Genie.Assets.asset_file(cwd=basedir; type, file)),
        content_type) |> Genie.Renderer.respond
    end
end

add_fileroute(StippleUI.assets_config, "hotkey.js")

hotkey_deps() = [
    script(src = "/stippleui.jl/master/assets/js/hotkey.js")
]

Stipple.DEPS[:hotkey] = hotkey_deps

@reactive! struct Demo <: ReactiveModel
end

Genie.Router.delete!(:Demo)
Stipple.js_mounted(::Demo) = ""

function handlers(model)
    on(model.isready) do isready
        isready || return
        push!(model)
    end

    return model
end

function ui(model)
    page(
        model,
        title = "hotkey test",
        [
            h3("Press right arrow"),
            """<input v-hotkey="1"/>"""
        ]
    )
end

route("/") do
    model = init(Demo)
    model |> handlers |> ui |> html
end

up()

Hotkeys with Vue-shortkey ?

In respect to your point d): Not sure whether this is interesting/new to you (not meaning to argue!), but I discovered a thread which suggests to me that Vue.component may not allow to do the same as Vue.use can do:
https://stackoverflow.com/questions/61162325/vue-use-vs-vue-component-on-root-vue-component

Vue.use is used to invoke a plugin. Effectively a plugin is just a JavaScript function and it can do whatever it wants. That function might register components (using Vue.component) but many plugins do other things, such as registering directives or adding global mixins.

Since Vue-shortkey registers a directive, I tried to simply copy its code (https://github.com/iFgR/vue-shortkey/blob/master/src/index.js) and place it into the hotkey.js file (see above), deleting lines 46 and 47 (plus corresponding closing brackets). However, that doesn't work - an immediate obstacle is that there are two import statements, and the browser console tells me that import statements are only allowed at the top of modules. So that's how far I came, then I decided to give the other approach a go. Probably all this is not very insightful, but I thought I'll mention it anyway :P