issue with activation events

[mkostersitz]

In my clockface index.js I am registering this event

// Register for activation event

document.addEventListener("activate", (evt) => {

  loadCurrentState("app activate");

});

The event registers once when the clockface loads initially but not when the clockface re-loads when coming back from another app like the exercise or weather app.

The same is true for the onUnload event which I have setup like this

appbit.onunload = saveCurrentState("app unload");

This happens both on Simulator and on the device

Is there some other event I need to hook up to trigger loading the state?

[cph015]

First thing that comes to mind is this: Is the event listener on the highest level possible (same level as your imports)?

For example:

import clock from "clock";
import document from "document";
.
.
.
// Functions and whatnot
.
.
.


// Register for activation event
document.addEventListener("activate", (evt) => {
  loadCurrentState("app activate");
});

[mkostersitz]

it is right after the imports in my code. 

[cph015]

@mkostersitz Alright, would you mind sharing from the beginning of your imports to the end of the event listener in question then?

I have a suspicion as to what the problem is, but seeing the code up til that part would confirm

[mkostersitz]

Sorry for the delay here it is

import * as document from "document";
import clock from "clock";
import * as userActivity from "user-activity";
import * as powerUtil from "./battery.js";
import * as heartMonitor from "./hrm.js";
import { me as appbit } from "appbit";
import * as weather from "./weather.js";
import * as fs from "fs";
import { launchApp as launchApp} from "system";
import * as logger from "../common/logger.js";
import * as cache from "./cacheManager.js";
import * as global from "../common/globals.js";
import * as timeDate from "./timeDate.js";
import { units as units } from "user-settings";
import * as messaging from "messaging";
import * as util from "../common/utils";
import { memory as memory } from "system";
import { vibration as vibration} from "haptics";

// Register for the unload event
appbit.onunload = saveCurrentState("app unload");

// Register for activation event
document.addEventListener("activate", (evt) => {
  loadCurrentState("app activate");
});

// version
let appVersionLabel = document.getElementById("app-version");
if(global.settings.isDebug) {appVersionLabel.text = global.settings.appVersion;}

[Gondwana]

appbit.onunload = saveCurrentState("app unload")

This causes saveCurrentState to be executed immediately, and whatever it returns is then assigned to onunload. Presumably saveCurrentState returns nothing (ie, undefined), so that's what gets assigned to onunload. This means that no handler (listener) is being set.

You probably want something like

appbit.onunload = saveCurrentState

which will assign the function to onunload, rather than what the function returns.

f() causes f to be executed; f without () is a reference or link to the function which can be executed subsequently.

[cph015 · Accepted solution]

@mkostersitzI think I see your problem.

document.addEventListener("activate", (evt) => {
  loadCurrentState("app activate");
});

I've never seen EventListeners used for `document`. Normally for HTML elements that you pull in like you did here

let appVersionLabel = document.getElementById("app-version");

From your original post, you said you want it to run everytime the clock loads (i.e. returning from another app)? If I'm not mistaken, you could do:

import * as document from "document";
import clock from "clock";
import * as userActivity from "user-activity";
import * as powerUtil from "./battery.js";
import * as heartMonitor from "./hrm.js";
import { me as appbit } from "appbit";
import * as weather from "./weather.js";
import * as fs from "fs";
import { launchApp as launchApp} from "system";
import * as logger from "../common/logger.js";
import * as cache from "./cacheManager.js";
import * as global from "../common/globals.js";
import * as timeDate from "./timeDate.js";
import { units as units } from "user-settings";
import * as messaging from "messaging";
import * as util from "../common/utils";
import { memory as memory } from "system";
import { vibration as vibration} from "haptics";

// Register for the unload event
appbit.onunload = saveCurrentState("app unload");

// Register for activation event
loadCurrentState("app activate");


// version
let appVersionLabel = document.getElementById("app-version");
if(global.settings.isDebug) {appVersionLabel.text = global.settings.appVersion;}

I believe this should give you what you are wanting.

[mkostersitz]

Thanks @cph015 and @Gondwana great hints. I modified my code based on your suggestion and this works now as expected.

I would love to mark both answers as the best answer but only one is accepted 🙂

[Gondwana]

No worries; I'm glad we got there. 🙂

[cph015]

Glad to help! Happy coding!