2015-12-11 11:54:06 +00:00
|
|
|
<!doctype>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2015-12-13 03:20:16 +00:00
|
|
|
<title>pluie.org bt demo - v0.4</title>
|
2015-12-11 11:54:06 +00:00
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
|
<style>
|
2015-12-13 02:53:48 +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; }
|
2015-12-13 03:20:16 +00:00
|
|
|
textarea { padding:8px 5px; border-radius:10px; border-style:solid; width:100%; height:120px; font-size:1.2rem; }
|
2015-12-13 02:53:48 +00:00
|
|
|
#test { margin:20px; background-color:white; padding:20px; border: 1px dashed #aaa; }
|
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-13 03:20:16 +00:00
|
|
|
<span>author : a-sansara - version : 0.4</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/>
|
|
|
|
|
<ul><li>append/rewrite/synchro node on all (other) tabs or a specific tab (and possibly on specific frame context) eventually with callback.</li>
|
|
|
|
|
<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>
|
|
|
|
|
</ul>
|
2015-12-13 02:53:48 +00:00
|
|
|
</p>
|
|
|
|
|
<h3>Static actions</h3>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<button class="cmd-html">dom html</button>
|
|
|
|
|
<button class="cmd-sync">dom sync</button>
|
|
|
|
|
<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-13 03:20:16 +00:00
|
|
|
<script type="text/javascript" src="src/bt-min.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-16 23:32:36 +00:00
|
|
|
$(document).ready(function() {
|
2015-12-11 11:54:06 +00:00
|
|
|
$bt.init();
|
|
|
|
|
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-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-13 02:53:48 +00:00
|
|
|
$v('h2').html('pluie.org bt demo (sync on '+(new Date).getTime()+') :');
|
|
|
|
|
$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-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-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-11 11:54:06 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
