meta-tech/bt
meta-tech/bt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

amend sync + add reload + enhance demo

Browse Source
This commit is contained in:
a-Sansara 2015-12-13 03:53:48 +01:00
parent 77460cf01c
commit ee72140d94
3 changed files with 94 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -12,12 +12,33 @@ manage communication between browser tabs
$bt.init(); $bt.init();
} }
### Internal Commands ### Internal Commands
// append data on node to other browser tabs // append data on node to other browser tabs
$bt.append('#test', '<b>it's cool to append</b>'); $bt.append('#test', "<b>it's cool to append</b>");
// rewrite content on node to other browser tabs // rewrite content on node to other browser tabs
$bt.html('#test', '<b>it's cool to rewrite</b>'); $bt.html('#test', "<b>it's cool to rewrite</b>");
// rewrite content to specific browser tabs
$bt.html('#test', "<b>it's cool to rewrite</b>", '1449974562012');
// perform a node synchro to other browser tabs
$bt.sync('#test');
// reload other browser tabs
$bt.reload();
// reload other browser tabs to specific url
$bt.reload(window.location.path+"?reloaded=1");
// get browser tab list
$bt.list;
// current browser tab id
$bt.id;
### Custom Commands ### Custom Commands

54
demo.html
View File

@ -4,16 +4,43 @@
<title>pluie.org bt demo</title> <title>pluie.org bt demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style> <style>
body { background-color:#888; color:white; font-family:arial; font-size:1.3rem; }
#test { border: 1px dashed #ccc; } #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; }
#test { margin:20px; background-color:white; padding:20px; border: 1px dashed #aaa; }
</style> </style>
</head> </head>
<body> <body>
<input type="text" value="" id="data"/><br/> <h2>pluie.org bt demo : </h2>
<button class="cmd-append">dom append</button><br/> <span>author : a-sansara</span>
<button class="cmd-html">dom html</button><br/> <div>
<button class="cmd-custom">custom</button><br/> <p>
<h2>demo bt : </h2> this js lib can perform several actions on browser tabs.
</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>
<div id="test"></div> <div id="test"></div>
</div>
<script type="text/javascript" src="src/bt.js"></script> <script type="text/javascript" src="src/bt.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// define a new custom cmd // define a new custom cmd
@ -24,6 +51,7 @@ $bt.on = function(cmd) {
case $bt.CMD_CUSTOM : case $bt.CMD_CUSTOM :
// do stuff // do stuff
$bt.log('custom command `'+cmd.name+'` with value `'+cmd.customKey+'`'); $bt.log('custom command `'+cmd.name+'` with value `'+cmd.customKey+'`');
alert('FROM TAB '+$bt.id+' : \ncustom command `'+cmd.name+'` with value `'+cmd.customKey+'`');
break; break;
} }
} }
@ -50,6 +78,22 @@ $v(document).ready(function() {
$bt.send({ name : $bt.CMD_CUSTOM, customKey : data }); $bt.send({ name : $bt.CMD_CUSTOM, customKey : data });
}); });
}); });
$v('.cmd-sync').on('click', function(){
$v('h2').html('pluie.org bt demo (sync on '+(new Date).getTime()+') :');
$bt.sync('h2');
});
$v('.cmd-reload').on('click', function(){
$bt.reload(window.location.pathname+"?reload="+(new Date).getTime());
});
$v('.cmd-tarsync').on('click', function(){
$bt.sync('#test');
});
$v('.cmd-sta-append').on('click', function(){
eval(this.title);
});
$v('.cmd-sta-html').on('click', function(){
eval(this.title);
});
}); });
</script> </script>
</body> </body>

24
src/bt.js
View File

@ -57,6 +57,8 @@ var $bt = {
CMD_APPEND : 'dom.append', CMD_APPEND : 'dom.append',
/*! @constant CMD_HTML internal command to perform a dom html */ /*! @constant CMD_HTML internal command to perform a dom html */
CMD_HTML : 'dom.html', CMD_HTML : 'dom.html',
/*! @constant CMD_RELOAD internal command to perform a browser tab reload */
CMD_RELOAD : 'bt.reload',
/*! /*!
* @desc initialize on dom ready * @desc initialize on dom ready
* @public * @public
@ -104,6 +106,7 @@ var $bt = {
* @method append * @method append
* @param string selector the selector wich target the node(s) * @param string selector the selector wich target the node(s)
* @param string data the data to append * @param string data the data to append
* @param int btid target browser tab id (if not defined all target all tabs)
*/ */
append : function(selector, data, btid) { append : function(selector, data, btid) {
this._dom(this.CMD_APPEND, selector, data, btid); this._dom(this.CMD_APPEND, selector, data, btid);
@ -114,6 +117,7 @@ var $bt = {
* @method append * @method append
* @param string selector the selector wich target the node(s) * @param string selector the selector wich target the node(s)
* @param string data the data to append * @param string data the data to append
* @param int btid target browser tab id (if not defined all target all tabs)
*/ */
html : function(selector, data, btid) { html : function(selector, data, btid) {
this._dom(this.CMD_HTML, selector, data, btid); this._dom(this.CMD_HTML, selector, data, btid);
@ -123,9 +127,20 @@ var $bt = {
* @public * @public
* @method sync * @method sync
* @param string selector the selector wich target the node(s) to synchro * @param string selector the selector wich target the node(s) to synchro
* @param int btid target browser tab id (if not defined all target all tabs)
*/ */
sync : function(selector, btid) { sync : function(selector, btid) {
this._dom(this.CMD_HTML, selector, $q(selector).html(), btid); this._dom(this.CMD_HTML, selector, $v(selector).html(), btid);
},
/*!
* @desc perform an reload command on other tabs with specified url
* @public
* @method reload
* @param string url the url to load (if not defined load current page)
* @param int btid target browser tab id (if not defined all target all tabs)
*/
reload : function(url, btid) {
$bt.send({ name : $bt.CMD_RELOAD, url : url, to : !btid ? '*' : btid });
}, },
/*! @private */ /*! @private */
_refresh : function() { _refresh : function() {
@ -178,6 +193,7 @@ var $bt = {
var cmd = $j.obj(e.newValue); var cmd = $j.obj(e.newValue);
if (!cmd) return; if (!cmd) return;
if (cmd.to == "*" || cmd.to == $bt.id) { if (cmd.to == "*" || cmd.to == $bt.id) {
$bt.log("do "+cmd.name);
$bt.log(cmd); $bt.log(cmd);
switch(cmd.name) { switch(cmd.name) {
@ -187,15 +203,17 @@ var $bt = {
break; break;
case $bt.CMD_APPEND : case $bt.CMD_APPEND :
$bt.log("do "+$bt.CMD_APPEND);
$v(cmd.selector).append(cmd.data); $v(cmd.selector).append(cmd.data);
break; break;
case $bt.CMD_HTML : case $bt.CMD_HTML :
$bt.log("do "+$bt.CMD_HTML);
$v(cmd.selector).html(cmd.data); $v(cmd.selector).html(cmd.data);
break; break;
case $bt.CMD_RELOAD :
window.location = typeof cmd.url != "undefined" ? cmd.url : window.location;
break;
default : default :
// do your stuff here // do your stuff here
if (typeof $bt.on == "function") $bt.on(cmd); if (typeof $bt.on == "function") $bt.on(cmd);