Omnimaga

General Discussion => Technology and Development => Web Programming and Design => Topic started by: Sorunome on October 31, 2013, 06:43:17 pm

Title: Multiple Tabs
Post by: Sorunome on October 31, 2013, 06:43:17 pm

So, I'm standing before a little web-dev issue that I can't figure out right now (yes, it is for OmnomIRC).
I need to write a function (JS) that returns true if:
 - This is the oirc instant of the currently open tab
 - If there is no oirc instant on the current tab if it is the instant of the last oirc visited
And false otherwise.

So basically I need to somehow detect stuff cross-tab x.x

Any ideas on how to do so?
I thought about somehow the tabs registering themselves in local storage etc but idk, there is probably some better way....

Title: Re: Multiple Tabs
Post by: Deep Toaster on October 31, 2013, 07:07:56 pm

There are several ways to keep track of whether the current tab is active (http://stackoverflow.com/questions/1760250/how-to-tell-if-browser-tab-is-active).

To keep track of the last active relevant tab, I'd suggest using a cookie rather than local storage. It's more reliable/simpler/more cross-browser. Just have each oIRC instance generate a unique ID string on load, and when one becomes active, set the value of a certain cookie to that ID. Then to determine if the current oIRC instance is the last one visited you just need to check the current ID against the one in the cookie.

Title: Re: Multiple Tabs
Post by: Sorunome on November 01, 2013, 04:08:39 am

What if the 1 to over 9000 chance happens and two tabs have the same id? :trollface:
Ok, i think that chance is small enough to ignore - luckily I already have focus handlers making the whole thing easier! Thanks!
EDIT: ok, i have the following code now (and it works!)

Code: [Select]

tabId = '';
function getRandomTabId(){
tabId = Math.random().toString(36);
setCookie('OmnomBrowserTab',tabId,1);
}
function isCurrent(){
if(getCookie('OmnomBrowserTab')==tabId){
return true;
}
return false;
}
function registerFocusHandler(){
focusHandlerRegistered = true;
window.self.addEventListener('blur',function(){
bIsBlurred = true;
},false);
window.self.addEventListener('focus',function(){
setCookie('OmnomBrowserTab',tabId,1);
bIsBlurred = false;
},false);
}
to check if it is the current i just have to do isCurrent() now! :D

Title: Re: Multiple Tabs
Post by: shmibs on November 01, 2013, 11:19:40 am

Quote from: Sorunome on November 01, 2013, 04:08:39 am

Ok, i think that chance is small enough to ignore

never! :P
you can just check the others and see if it's already in use before assigning it.

Title: Re: Multiple Tabs
Post by: Sorunome on November 01, 2013, 11:21:13 am

the problem is that i don't know the other ids and i have no way of knowing except have like a cookie grow indefenetley with all keys, i'll do what jim said, i'll add in adition to that random string the current timestamp in milliseconds, the chance is now far smaller for the same id!

Title: Re: Multiple Tabs
Post by: shmibs on November 01, 2013, 11:30:02 am

Code: [Select]

date -u +"%j%H%M%S%N"
:P

Title: Re: Multiple Tabs
Post by: Sorunome on November 01, 2013, 11:30:30 am

I just did
tabId = Math.random().toString(36)+(new Date()).getTime().toString();
:P

Title: Re: Multiple Tabs
Post by: Sorunome on February 18, 2014, 12:22:21 pm

I made now some even better code, it also works that if you close the current instant.

Code: [Select]

instant = {
id:'',
update:function(){
var self = this;
ls.set('OmnomBrowserTab',self.id);
ls.set('OmnomNewInstant','false');
},
init:function(){
var self = this;
self.id = Math.random().toString(36)+(new Date()).getTime().toString();
ls.set('OmnomBrowserTab',self.id);
$(window)
.focus(function(){
self.update();
})
.unload(function(){
ls.set('OmnomNewInstant','true');
});
},
current:function(){
var self = this;
if(ls.get('OmnomNewInstant')=='true'){
self.update();
}
return self.id == ls.get('OmnomBrowserTab');
}
}you have to run instant.init() to initilize, and then to toest if it is the current instant to instant.current()

EDIT: oh yeah, you'll also need those local storage handlers:

Code: [Select]

ls = {
getCookie:function(c_name){
var i,x,y,ARRcookies=document.cookie.split(";");
for(i=0;i<ARRcookies.length;i++){
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if(x==c_name){
return unescape(y);
}
}
},
setCookie:function(c_name,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
},
support:function(){
try{
return 'localStorage' in window && window['localStorage'] !== null;
}catch(e){
return false;
}
},
get:function(name){
if(this.support()){
return localStorage.getItem(name);
}
return this.getCookie(name);
},
set:function(name,value){
if(this.support()){
localStorage.setItem(name,value);
}else{
this.setCookie(name,value,30);
}
}
}EDIT2: it also uses jQuery, for this one only for binding the events