Cordova events in Enyo 2.7

Hello all,

I am trying to build an Enyo app across to android using Cordova. I need to get an event when a hardware volume button is pressed. Cordova provides a very easy to use interface for listening to volume button events:

document.addEventListener("volumedownbutton", onVolumeKeyDown);
function onVolumeKeyDown() {
alert('something')
}


The issue is that when I try to add this code to my Enyo app or listen through the dispatcher, I can't see the event. Can anyone help me with listening to system events?

Comments

  • If you've used dispatcher, the events will be forwarded by Signals because they targeting document or window. Here's an example of that.

    https://jsfiddle.net/jgpucpuL/

    If you don't want to use dispatcher, you should be able to use code like you have above to receive the event. Here's an example in that vein using a handler bound to an enyo component instance.

    https://jsfiddle.net/Lhsk9a93/
  • edited February 16
    Thanks for your response, this helped me to find my issue.

    For anyone else that is trying to do something similar: my issue was that this particular event listener (as with many cordova specific events) has to be registered after the body is ready. In order to make this happen I put some custom javascript into my index.html that registers an event listener at the proper time, and emits a custom event when my event listener sees the volume button event is called. then in enyo I can listen for that custom event. my index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>[DEVELOPMENT] eventTestEnyo</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <link rel="stylesheet" href="enyo.css">
    <link rel="stylesheet" href="eventTestEnyo.css">
    <script type="text/javascript" charset="utf-8">
    function onLoad() {
    document.addEventListener("volumedownbutton", onVolumeKeyDown);
    document.addEventListener("volumeupbutton", onVolumeKeyDown);
    }
    function onVolumeKeyDown(e) {
    var ev = new CustomEvent('volumechange', {
    detail: {
    value: Date.now()
    }
    });
    document.dispatchEvent(ev);
    }

    </script>
    <script src="enyo.js"></script>
    <script src="eventTestEnyo.js"></script>
    </head>
    <body onload="onLoad()" class="enyo-unselectable"></body>
    </html>


    Then in my main view I pretty much just copied and pasted your code:

    var kind = require('enyo/kind');
    var Control = require('enyo/Control');
    var Signals = require('enyo/Signals');

    module.exports = kind({
    kind: Control,
    components: [
    {name: 'log', kind: Control}
    ],
    rendered: kind.inherit(function (sup) {
    return function () {
    sup.apply(this, arguments);
    this.handleVolumeChange = this.handleVolumeChange.bind(this);
    document.addEventListener('volumechange', this.handleVolumeChange);
    };
    }),

    destroy: kind.inherit(function (sup) {
    return function () {
    sup.apply(this, arguments);
    document.removeEventListener('volumechange', this.handleVolumeChange);
    };
    }),

    handleVolumeChange: function (ev) {
    this.$.log.set('content', ev.detail.value);
    }
    });
  • You could also use enyo/ready to defer attaching the event handlers until DOMContentLoaded which would allow you to minimize customizing the index.html:
    var ready = require('enyo/ready');

    function onVolumeKeyDown(e) {
    var ev = new CustomEvent('volumechange', {
    detail: {
    value: Date.now()
    }
    });
    document.dispatchEvent(ev);
    }

    ready(function () {
    document.addEventListener("volumedownbutton", onVolumeKeyDown);
    document.addEventListener("volumeupbutton", onVolumeKeyDown);
    });
Sign In or Register to comment.