2015-12-11 11:54:06 +00:00
<!doctype>
< html >
< head >
2015-12-24 23:34:11 +00:00
< title > pluie.org bt demo - v0.7< / title >
2015-12-11 11:54:06 +00:00
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< style >
2015-12-28 17:45:07 +00:00
body { background-color:#888; color:white; font-family:arial; font-size:1.3rem; }
#test { border: 1px dashed #ccc; }
body > div { border-radius:20px; margin:40px; padding:20px; background-color: #ccc; color:black; }
body > span { font-size:0.8rem; }
button { padding:5px 15px; }
h3 { margin:35px 0 10px 0; }
h2 { margin:5px 0 0 0; }
textarea { padding:8px 5px; border-radius:10px; border-style:solid; width:100%; height:120px; font-size:1.2rem; }
#test { margin:20px; background-color:white; padding:20px; border: 1px dashed #aaa; }
.syncAttrName { color:#990000; }
2015-12-11 11:54:06 +00:00
< / style >
< / head >
< body >
2015-12-13 02:53:48 +00:00
< h2 > pluie.org bt demo : < / h2 >
2015-12-24 23:34:11 +00:00
< span > author : a-sansara - version : 0.7< / span >
2015-12-13 02:53:48 +00:00
< div >
2015-12-16 23:32:36 +00:00
< p > Manage commnunication between browser tabs.< / p >
< p > this js lib can perform several actions on browser tabs like :< br / >
2015-12-28 17:45:07 +00:00
< ul > < li > append/rewrite/synchro node content on all (other) tabs or a specific tab (and possibly on specific frame context) eventually with callback.< / li >
2015-12-16 23:32:36 +00:00
< li > reload all tabs or a specific tab with specified url or tab 's current url< / li >
< li > perform your custom actions on all tabs or specific tab< / li >
2015-12-24 23:34:11 +00:00
< li > kill zombies tabs onload< / li >
2015-12-28 17:45:07 +00:00
< li > define custom before and after command functions< / li >
< li > (*new) sync node attributes< / li >
< li > (*new) prepend node content< / li >
< li > (*new) varset - set a stringifiable object on tabs< / li >
< li > (*new) varsync - synchro a object previously set with varset on an other tab< / li >
2015-12-16 23:32:36 +00:00
< / ul >
2015-12-13 02:53:48 +00:00
< / p >
< h3 > Static actions< / h3 >
2015-12-28 17:45:07 +00:00
< button class = "cmd-sta-prepend" title = "$bt.prepend('#test', '<b>it\'s cool to prepend</b><br/>');" > static dom prepend< / button >
2015-12-13 02:53:48 +00:00
< button class = "cmd-sta-append" title = "$bt.append('#test', '<b>it\'s cool to append</b><br/>');" > static dom append< / button >
< button class = "cmd-sta-html" title = "$bt.html('#test', '<b>it\'s cool to rewrite</b><br/>')" > static dom html< / button >
2015-12-24 03:26:39 +00:00
< button class = "cmd-zombkill" title = "" > cmd zombkill< / button >
2015-12-28 17:45:07 +00:00
< button class = "cmd-varset" > cmd varset< / button >
< button class = "cmd-varget" > varget< / button >
< button class = "cmd-varsync" > varsync< / button >
2015-12-13 02:53:48 +00:00
< h3 > Dynamic actions< / h3 >
enter txt or html : < br / >
< textarea id = "data" > < / textarea >
< br / > select your action< br / >
< button class = "cmd-append" > dom append< / button >
2015-12-24 23:34:11 +00:00
< button class = "cmd-append-cb" > dom append with callback< / button >
2015-12-13 02:53:48 +00:00
< button class = "cmd-html" > dom html< / button >
2015-12-24 23:34:11 +00:00
< button class = "cmd-html" > dom html with before< / button >
2015-12-13 02:53:48 +00:00
< button class = "cmd-sync" > dom sync< / button >
2015-12-28 17:45:07 +00:00
< button class = "cmd-attr" > dom attr sync< / button >
2015-12-13 02:53:48 +00:00
< button class = "cmd-tarsync" > target dom sync< / button >
< button class = "cmd-reload" > tab reload< / button >
< button class = "cmd-custom" > custom cmd< / button >
< br / > then check other tabs
< h3 > Target output< / h3 >
2015-12-11 11:54:06 +00:00
< div id = "test" > < / div >
2015-12-13 02:53:48 +00:00
< / div >
2015-12-16 23:32:36 +00:00
< script type = "text/javascript" src = "src/svan-min.js" > < / script >
2015-12-24 03:26:39 +00:00
< script type = "text/javascript" src = "src/bt.js" > < / script >
2015-12-11 11:54:06 +00:00
< script type = "text/javascript" >
// define a new custom cmd
$bt.CMD_CUSTOM = "customCmd";
// treat custom command to other browser tabs
$bt.on = function(cmd) {
switch (cmd.name) {
case $bt.CMD_CUSTOM :
// do stuff
$bt.log('custom command `'+cmd.name+'` with value `'+cmd.customKey+'`');
2015-12-13 02:53:48 +00:00
alert('FROM TAB '+$bt.id+' : \ncustom command `'+cmd.name+'` with value `'+cmd.customKey+'`');
2015-12-11 11:54:06 +00:00
break;
}
}
2015-12-28 17:45:07 +00:00
$bt.vars['myVar'] = "start";
2015-12-11 11:54:06 +00:00
//
2015-12-16 23:32:36 +00:00
$(document).ready(function() {
2015-12-24 23:34:11 +00:00
$bt.init(function() {
$bt.setCallback('mycallback', function(cmd) {
alert("i'm the callback of cmd "+cmd.name);
});
$bt.before = function(cmd) {
console.log('before cmd '+cmd.name);
}
$bt.after = function(cmd) {
console.log('after cmd '+cmd.name);
}
});
2015-12-11 11:54:06 +00:00
var bind = function(call) {
2015-12-16 23:32:36 +00:00
var html = $('#data').val();
2015-12-11 11:54:06 +00:00
if (html.length > 0) call(html)
2015-12-16 23:32:36 +00:00
else $('#data').attr('placeholder', 'insert data first !');
2015-12-11 11:54:06 +00:00
}
2015-12-16 23:32:36 +00:00
$('.cmd-append').on('click', function(){
2015-12-11 11:54:06 +00:00
bind(function(data) {
$bt.append('#test', data);
});
});
2015-12-24 23:34:11 +00:00
$('.cmd-append-cb').on('click', function(){
bind(function(data) {
$bt.append('#test', data, null, 'mycallback');
});
});
2015-12-16 23:32:36 +00:00
$('.cmd-html').on('click', function(){
2015-12-11 11:54:06 +00:00
bind(function(data) {
$bt.html('#test', data);
});
});
2015-12-16 23:32:36 +00:00
$('.cmd-custom').on('click', function(){
2015-12-11 11:54:06 +00:00
bind(function(data) {
$bt.send({ name : $bt.CMD_CUSTOM, customKey : data });
});
});
2015-12-16 23:32:36 +00:00
$('.cmd-sync').on('click', function(){
2015-12-16 23:32:51 +00:00
$('h2').html('pluie.org bt demo (sync on '+(new Date).getTime()+') :');
2015-12-13 02:53:48 +00:00
$bt.sync('h2');
});
2015-12-16 23:32:36 +00:00
$('.cmd-reload').on('click', function(){
2015-12-13 02:53:48 +00:00
$bt.reload(window.location.pathname+"?reload="+(new Date).getTime());
});
2015-12-16 23:32:36 +00:00
$('.cmd-tarsync').on('click', function(){
2015-12-13 02:53:48 +00:00
$bt.sync('#test');
});
2015-12-28 17:45:07 +00:00
$('.cmd-attr').on('click', function(){
$(this).toggle('syncAttrName');
$(this).attr('title', 'i have '+($(this).hasClass('syncAttrName') ? '' : 'not ')+' the class syncAttrName');
$bt.attr('.cmd-attr', ['class', 'title']);
});
2015-12-16 23:32:36 +00:00
$('.cmd-sta-append').on('click', function(){
2015-12-13 02:53:48 +00:00
eval(this.title);
});
2015-12-28 17:45:07 +00:00
$('.cmd-sta-prepend').on('click', function(){
eval(this.title);
});
$('.cmd-varset').on('click', function(){
var obj = {
toto : {
titi : {
tutu : 'cool',
tata : ['one', 2, 'three']
}
}
}
console.log(obj);
$('#test').html("varset : myVar< br / > json value : < br / > "+$j.str(obj));
$bt.varset('myVar', obj);
});
$('.cmd-varget').on('click', function(){
if (!$.isNone($bt.vars['myVar'])) {
$('#test').html("varget : myVar< br / > json value : < br / > "+$j.str($bt.vars['myVar']));
}
else {
$('#test').html("varget : myVar< br / > undefined");
$('#test').html("clic on varsync to sync myVar");
}
});
$('.cmd-varsync').on('click', function(){
if ($bt.list.length > 1) {
$bt.varsync('myVar', null, $bt.list[0] == $bt.id ? $bt.list[1] : $bt.list[0]);
if (!$.isNone($bt.vars['myVar'])) {
$('#test').html("varget : myVar< br / > json value : < br / > "+$j.str($bt.vars['myVar']));
}
else {
$('#test').html("varget : myVar< br / > undefined");
}
}
else {
$('#test').html("need one more tab to perform a bt varsync");
}
});
2015-12-16 23:32:36 +00:00
$('.cmd-sta-html').on('click', function(){
2015-12-13 02:53:48 +00:00
eval(this.title);
});
2015-12-24 03:26:39 +00:00
$('.cmd-zombkill').on('click', function(){
$bt.list = $j.obj($l.get($bt.LS_TABS));
for (var i=4; i > 0; i--) {
var zombi = (new Date).getTime()+i;
$bt.list.push(zombi);
}
$l.set($bt.LS_TABS, $j.str($bt.list));
$bt._broadcast();
$bt.log($bt.list);
var l = $bt.list.length;
alert('zombies tabs created, so, check for zombies');
$bt.zombkill(function(){
alert('killing '+(l-$bt.list.length)+' zombies');
});
});
2015-12-11 11:54:06 +00:00
});
< / script >
< / body >
< / html >
