amend sync + add reload + enhance demo
This commit is contained in:
parent
77460cf01c
commit
ee72140d94
25
README.md
25
README.md
|
@ -12,12 +12,33 @@ manage communication between browser tabs
|
|||
$bt.init();
|
||||
}
|
||||
|
||||
|
||||
### Internal Commands
|
||||
|
||||
// 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
|
||||
$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
|
||||
|
||||
|
|
56
demo.html
56
demo.html
|
@ -4,16 +4,43 @@
|
|||
<title>pluie.org bt demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<style>
|
||||
#test { border: 1px dashed #ccc; }
|
||||
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; }
|
||||
#test { margin:20px; background-color:white; padding:20px; border: 1px dashed #aaa; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input type="text" value="" id="data"/><br/>
|
||||
<button class="cmd-append">dom append</button><br/>
|
||||
<button class="cmd-html">dom html</button><br/>
|
||||
<button class="cmd-custom">custom</button><br/>
|
||||
<h2>demo bt : </h2>
|
||||
<h2>pluie.org bt demo : </h2>
|
||||
<span>author : a-sansara</span>
|
||||
<div>
|
||||
<p>
|
||||
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>
|
||||
<script type="text/javascript" src="src/bt.js"></script>
|
||||
<script type="text/javascript">
|
||||
// define a new custom cmd
|
||||
|
@ -24,6 +51,7 @@ $bt.on = function(cmd) {
|
|||
case $bt.CMD_CUSTOM :
|
||||
// do stuff
|
||||
$bt.log('custom command `'+cmd.name+'` with value `'+cmd.customKey+'`');
|
||||
alert('FROM TAB '+$bt.id+' : \ncustom command `'+cmd.name+'` with value `'+cmd.customKey+'`');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
@ -50,6 +78,22 @@ $v(document).ready(function() {
|
|||
$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>
|
||||
</body>
|
||||
|
|
24
src/bt.js
24
src/bt.js
|
@ -57,6 +57,8 @@ var $bt = {
|
|||
CMD_APPEND : 'dom.append',
|
||||
/*! @constant CMD_HTML internal command to perform a 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
|
||||
* @public
|
||||
|
@ -104,6 +106,7 @@ var $bt = {
|
|||
* @method append
|
||||
* @param string selector the selector wich target the node(s)
|
||||
* @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) {
|
||||
this._dom(this.CMD_APPEND, selector, data, btid);
|
||||
|
@ -114,6 +117,7 @@ var $bt = {
|
|||
* @method append
|
||||
* @param string selector the selector wich target the node(s)
|
||||
* @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) {
|
||||
this._dom(this.CMD_HTML, selector, data, btid);
|
||||
|
@ -123,9 +127,20 @@ var $bt = {
|
|||
* @public
|
||||
* @method sync
|
||||
* @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) {
|
||||
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 */
|
||||
_refresh : function() {
|
||||
|
@ -178,6 +193,7 @@ var $bt = {
|
|||
var cmd = $j.obj(e.newValue);
|
||||
if (!cmd) return;
|
||||
if (cmd.to == "*" || cmd.to == $bt.id) {
|
||||
$bt.log("do "+cmd.name);
|
||||
$bt.log(cmd);
|
||||
switch(cmd.name) {
|
||||
|
||||
|
@ -187,15 +203,17 @@ var $bt = {
|
|||
break;
|
||||
|
||||
case $bt.CMD_APPEND :
|
||||
$bt.log("do "+$bt.CMD_APPEND);
|
||||
$v(cmd.selector).append(cmd.data);
|
||||
break;
|
||||
|
||||
case $bt.CMD_HTML :
|
||||
$bt.log("do "+$bt.CMD_HTML);
|
||||
$v(cmd.selector).html(cmd.data);
|
||||
break;
|
||||
|
||||
case $bt.CMD_RELOAD :
|
||||
window.location = typeof cmd.url != "undefined" ? cmd.url : window.location;
|
||||
break;
|
||||
|
||||
default :
|
||||
// do your stuff here
|
||||
if (typeof $bt.on == "function") $bt.on(cmd);
|
||||
|
|
Loading…
Reference in New Issue
Block a user