Set up hotkey for collapse a panel without using widgetVar

Question

I'm trying to figure out how to invoke, by focusing with Tab key the plus sign on the panel and then pressing Space on keyboard, the toggle() method. Assuming that I've got more than one panel and can't use the widgetVar attribute.

<ui:composition
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui">

   <p:panel
        header="panel-1"
        id="panel-1"
        toggleable="true"
        collapsed="true">
   </p:panel>

  <p:panel
        header="panel-2"
        id="panel-2"
        toggleable="true"
        collapsed="true">
   </p:panel>

</ui:composition>

Wow... 4 upvotes in 4 hours... Cool... ;-) – Kukeltje Sep 05 '16 at 14:16 — Kukeltje, Sep 05 '16 at 14:16

score 2 · Accepted Answer · edited May 23 '17 at 11:45

The 'buttons' in the panel already have the ability to being focussed. It is just that the PrimeFaces theme most likely prevents the outline of being shown. This happens because it adds

a {
    outline: 0;
}

As can be seen by inspecting the page/css in the browser developer tool. This is a generic html (so not jsf related) way of removing 'outlines' when components are focussed. To revert this, set the width to 1px again and doing this for the panel titlebar icons only with a more specific css selector like.

a.ui-panel-titlebar-icon:focus {
    outline-width: 1px;
}

The default 'hotkey' is btw already present on them, it is the enter key. If you want to add a space, add a simple jquery eventhandler on the right component (css selector the same as in the css above), check for the spacebar being pressed and add a 'click' to it and do not forget to prevent the event to bubble up and fire the default avent. Then you'll end up with:

$('a.ui-panel-titlebar-icon').on('keydown', function(event) {
    if (event.keyCode == 32) {
        event.target.click();
        event.preventDefault()
    }
})

Since the - changes into a + and the focus stays the same, you'll automagically get a 'toggle'.

I tested this in online in the PrimeFaces showcase and it works! In the end it is all just css, html and javascript (with the help of jquery).

See also:

Restore Webkit's CSS outline on input field

in my case the outline was set correctly. thx for helping me, it works :) — ryoga86, Sep 06 '16 at 09:11

Set up hotkey for collapse a panel without using widgetVar

1 Answers1