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);<br />function onVolumeKeyDown() {<br /> alert('something')<br /> }

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

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

    var kind = require('enyo/kind');<br />var Control = require('enyo/Control');<br />var Signals = require('enyo/Signals');<br /><br />module.exports = kind({<br /> kind: Control,<br /> components: [<br /> {name: 'log', kind: Control}<br /> ],<br /> rendered: kind.inherit(function (sup) {<br /> return function () {<br /> sup.apply(this, arguments);<br /> this.handleVolumeChange = this.handleVolumeChange.bind(this);<br /> document.addEventListener('volumechange', this.handleVolumeChange);<br /> };<br /> }),<br /> <br /> destroy: kind.inherit(function (sup) {<br /> return function () {<br /> sup.apply(this, arguments);<br /> document.removeEventListener('volumechange', this.handleVolumeChange);<br /> };<br /> }),<br /> <br /> handleVolumeChange: function (ev) {<br /> this.$.log.set('content', ev.detail.value);<br /> }<br />});<br />
  • 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');<br /><br />function onVolumeKeyDown(e) {<br />    var ev = new CustomEvent('volumechange', {<br />    detail: {<br />      value: Date.now()<br />    }<br />  });<br />  document.dispatchEvent(ev);<br />}<br /><br />ready(function () {<br />  document.addEventListener("volumedownbutton", onVolumeKeyDown);<br />  document.addEventListener("volumeupbutton", onVolumeKeyDown);<br />});
Sign In or Register to comment.