1

I'm independently developing keyboard support for openerp (an open source erp solution) and so far the job is done. But there's one last part that I can't solve no matter, no how. The challenge is to create navigation through arrows and highlight the object you're currently in. Here's the structure of the xml for better understanding, I want to make sure the user knows which product the focus is on. 

<t t-name="ScaleScreenWidget">
     "<div class="scale-screen screen">
 >           <header><h2>Product Weighting</h2></header>
        <div class="display">
            <span class="weight">
                <p>
                    <t t-esc="widget.get_product_weight().toFixed(3)" />
                    Kg
                </p>
            </span>
            <span class="product-name" >
                <t t-esc="widget.get_product_name()" />
            </span>
            <div class="product-picture">
                <span class="product-price">
                    <t t-esc="widget.format_currency(widget.get_product_price()) + '/Kg'" />
                </span> 
                <t t-if="widget.get_product()">
                    <img t-att-src="widget.get_product().get_image_url()" />
                </t>
            </div>
        </div>
    </div>
</t>

I'm not a lazy person and tried with all my heart to find a solution to this question, but I couldn't so I would really appreciate some help as this will help lots of people that want a good point of sale but can't afford touchscreen hardware. Thanks in advance.

Xyz
  • 5,955
  • 5
  • 40
  • 58
matt_zarro
  • 147
  • 6
  • Is the fiddle in the answer to this question similar to what you are looking for? http://stackoverflow.com/questions/8902787/navigate-through-list-using-arrow-keys-javascript-jq?rq=1 – gotohales Mar 28 '13 at 13:36
  • ps. heres the link for the point of sale in action, click in pos in the upper part of the site. [link](https://www.openerp.com/) – matt_zarro Mar 28 '13 at 13:38
  • Yes mookamafoob, i've had seen this answer before but i couldnt managed to get it to work in this particular case. Ive added an html break in the xml file as an adaptation but still the code for openerp is very complex. Thanks for your support! – matt_zarro Mar 28 '13 at 15:03
  • In the beggining of the xml theres this javascript to enable the rest of the hotkeys ` $(document).keypress(function(e) { e.stopImmediatePropagation(); // not sure if you will need this but it should stop horizontal scrolling if(e.keyCode === 120) { $(".paypad-button:first").trigger('click'); } else if(e.keyCode === 46) { $(".delete-payment-line").click(); } ´ – matt_zarro Mar 28 '13 at 15:07
  • UPDATE! Refer to this question, thats the current challenge.. http://stackoverflow.com/questions/15688725/how-do-you-make-the-this-selector-focus-on-current-element – matt_zarro Mar 28 '13 at 17:50
  • Just making them links () and letting the user tab through them is not OK? – Ruan Mendes Mar 28 '13 at 19:37
  • There's already a link to them, but if you use trigger click or focus on them it doesn't do nothing.. the structure is like this `
  • `
    • – matt_zarro Mar 28 '13 at 20:09
  • If there's anyone still trying to do this, theres a great jsfiddle that move through elements with any arrows. Here you go http://jsfiddle.net/gd6Ep/5/ The `liSelected.trigger('focus');` is the one the make it capable of perfoming action on the current element and the `if(e.which === 40)` (or whatever arrow keycode) is the part that 'listens' to the key you are pressing. Thanks @Juan – matt_zarro Mar 28 '13 at 20:23