Making persistent and smooth visual timer

Kiina

So one problem with my module is that the pairing code for the oauth only has a 10 minute lifetime. I kinda wanna give the user a visual feedback on how long it’s still active, kinda like you see with 2fa applications.

My first thought was: lets just make a circle with css animations that fills in 10 minutes. Easy, few lines of code. But since the dom refreshes it just starts from scratch everytime. My second approach was to think lets just use javascript, with something like progressbar.js. Just add the timer when the socket notification is received. But it seems like the javascript process is also terminating? Is there any other way than to run the timer in the node_helper and to pass the current value everytime? Especially since I have to use getDom to change the dom it’s all a bit fiddly since I also have to make sure the element stays persistent.

sdetweil

@kiina u don’t HAVE to start from scratch every time. if u have content created then save a pointer to it and return that…

why is it trying to update?

timer u have running

just change the part that changed

Kiina

@sdetweil Yeah I just realized I had the setInterval to update the DOM in there and never questioned why I put it there and had kinda forgotten about it. Maybe I should refactor so it only updates the dom when it really gets new information, it has been 4 years since I wrote that part of the module…

Another small issue

getScripts: function() {
		return [ "node_modules/progressbar.js/dist/progressbar.min.js"];
	},

doesn’t seem to load. The file exists, I have it in my package.json. When i do like a cp node_modules/progressbar.js/dist/progressbar.min.js ./

and

getScripts: function() {
		return [ "progressbar.min.js"];
	},

it works fine, but not when it’s in the node_modules folder? It tries to load the upper node_modules folder I think so

getScripts: function() {
		return ["modules/moduleName/node_modules/progressbar.js/dist/progressbar.min.js"];
	},

works fine but is probably not the best solution in case the module name changes.

Plus it doesn’t seem like the domUpdate has a callback when it finished. Would be nice so I can load the progressbar when the dom container exists, instead of relying on setTimeout and praying for the best.

sdetweil

@kiina this.file(node-modules…/filename) will give you the total path

Would be nice so I can load the progressbar when the dom container exists, instead of relying on setTimeout and praying for the best.

please explain a little better,… load the progressbar when the dom container exists

u can use
document.getElementByClassName(className)
or
document.getElementById(id)

so u can know if it exists…

it won’t til you pass thru getdom once probably

sdetweil

@kiina said in Making persistent and smooth visual timer:

pairing code for the oauth only has a 10 minute lifetim

and, why couldn’t you refresh under the cover for them???

I do that for some apps that have refresh tokens… timer for time_to_live -5 or 10 seconds

refresh
restart timer

Kiina

@sdetweil said in Making persistent and smooth visual timer:

u can use
document.getElementByClassName(className)
or
document.getElementById(id)

so u can know it it exists…

it won’t til you pass thru getdom once probably

That’s what im doing. The issue is that without a callback from the getDOM you would probably have to loop that part.

Following flow: The node_helper sends the socketnotification with the code for authentification. The dom updates to show this auth code and adds the div for the timer. When I call

this.updateDom();
initializeTimer();

I will get that the current element with the id doesn’t exist since the initializeTimer executes before the dom is ready. So I would need to loop that until the dom is ready to add the timer onto it. Which is obviously a terrible idea. So having a callback or a promise would make that a lot easier. Because currently I would need to do something like that:

this.updateDom();
setTimeout(function() {
initializeTimer();
}, 1000);

And pray that the dom changes already happened.

sdetweil

@kiina create the timer in getDom() when u create the div, after updateDom() says content is available… u can save the div element in global and then have access to it from other places too…

when the global is not null… then u know it was created