Context: I have a use case where in the components used is firebase realtime database in Polymer 2.x. I have a function that does transformations on certain user activity with the firebase realtime object. I used polymerfire webcomponent.
What I want is: on user closes tab or window, save the data into firebase realtime database and then close the window.
Result: I used on beforeunload of window in the script of the polymer element. But not able to fire a method inside polymer element that triggers storage of the data in realtime db.
What I am looking for: 1. A way to initiate the element public function from script of an element. Or 2. a better way to implement on window/tab close save the data
Thanks.
Code:
<!DOCTYPE html>
<dom-module id="t-page">
<template is="dom-bind">
....
</template>
<script>
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' :
'beforeunload'; /// make IE7, IE8 compitable
myEvent(chkevent, async function (e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = 'Are you sure to leave the page?'; // a space
(e || window.event).returnValue = confirmationMessage;
setTimeout(async () => {
document.getElementById('trello-page').onCloseWindow();
}, 2500);
return confirmationMessage;
});
/**
* @polymer
* @extends HTMLElement
*/
class TPage extends Polymer.Element {
static get is() {
return 't-page';
}
... some properties ....{ colUpdateArr{...}}
async onCloseWindow() {
for (var i = 0; i < this.colUpdateArr.length; i += 2) {
var toCol = this.colUpdateArr[i];
var fromCol = this.colUpdateArr[i + 1];
await this.$.query.ref.child(toCol.$key).child('tasks').set(toCol.tasks);
await this.$.query.ref.child(fromCol.$key).child('tasks').set(fromCol.tasks);
}
}
} //end Polymer.Element
window.customElements.define(TPage.is, TPage);
</script>
</dom-module>
