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

update doc + minify js + update version to 0.4

Browse Source
This commit is contained in:
a-Sansara 2015-12-13 04:20:16 +01:00
parent ee72140d94
commit 25a7ed9648
4 changed files with 57 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -58,6 +58,16 @@ manage communication between browser tabs
$bt.send({ name : $bt.CMD_CUSTOM, customKey : 'customValue' }); $bt.send({ name : $bt.CMD_CUSTOM, customKey : 'customValue' });
### Bonus
// alias localStorage : clear|rem|get|set
$l;
// alias json : str|obj
$j
// minimal vanilla jquery style : ready|on|html|append|attr|val|foreach
$v
### Demo ### Demo
on chromium/chrome browser make sure to test on a web server (not directly file://) on chromium/chrome browser make sure to test on a web server (not directly file://)

8
demo.html
View File

@ -1,7 +1,7 @@
<!doctype> <!doctype>
<html> <html>
<head> <head>
<title>pluie.org bt demo</title> <title>pluie.org bt demo - v0.4</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; } body { background-color:#888; color:white; font-family:arial; font-size:1.3rem; }
@ -11,13 +11,13 @@
button { padding:5px 15px; } button { padding:5px 15px; }
h3 { margin:35px 0 10px 0; } h3 { margin:35px 0 10px 0; }
h2 { margin:5px 0 0 0; } h2 { margin:5px 0 0 0; }
textarea { padding:8px 5px; border-radius:10px; border-style:solid; width:100%; height:120px; } 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; } #test { margin:20px; background-color:white; padding:20px; border: 1px dashed #aaa; }
</style> </style>
</head> </head>
<body> <body>
<h2>pluie.org bt demo : </h2> <h2>pluie.org bt demo : </h2>
<span>author : a-sansara</span> <span>author : a-sansara - version : 0.4</span>
<div> <div>
<p> <p>
this js lib can perform several actions on browser tabs. this js lib can perform several actions on browser tabs.
@ -41,7 +41,7 @@ enter txt or html : <br/>
<h3>Target output</h3> <h3>Target output</h3>
<div id="test"></div> <div id="test"></div>
</div> </div>
<script type="text/javascript" src="src/bt.js"></script> <script type="text/javascript" src="src/bt-min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// define a new custom cmd // define a new custom cmd
$bt.CMD_CUSTOM = "customCmd"; $bt.CMD_CUSTOM = "customCmd";

6
src/bt-min.js vendored Normal file
View File

@ -0,0 +1,6 @@
/* by a-sansara - https://github.com/pluie-org/bt */var $bt={TRACE:true&&typeof console!="undefined",LS_TABS:'bt.tabs',LS_CURTAB:'bt.ctab',LS_CMD:'bt.cmd',CMD_SYNC:'bt.sync',CMD_APPEND:'dom.append',CMD_HTML:'dom.html',CMD_RELOAD:'bt.reload',init:function(fn){this._init(fn);},on:function(cmd){this.log(cmd);},log:function(data){if(this.TRACE)console.log(data);},send:function(cmd){cmd.uid=this.id+Math.random();cmd.from=this.id;if(typeof cmd.to=="undefined")cmd.to="*";$l.set(this.LS_CMD,$j.str(cmd));$l.rem(this.LS_CMD);},append:function(selector,data,btid){this._dom(this.CMD_APPEND,selector,data,btid);},html:function(selector,data,btid){this._dom(this.CMD_HTML,selector,data,btid);},sync:function(selector,btid){this._dom(this.CMD_HTML,selector,$v(selector).html(),btid);},reload:function(url,btid){$bt.send({name:$bt.CMD_RELOAD,url:url,to:!btid?'*':btid});},_refresh:function(){$bt.list=$j.obj($l.get($bt.LS_TABS));},_broadcast:function(){$bt.send({name:$bt.CMD_SYNC});},_remove:function(id){if(!id)id=$bt.id;var i=$bt.list.indexOf(id);if(i>-1)$bt.list.splice(i,1);},_init:function(fn){$v(window).on('beforeunload',$bt._unload);$v(window).on('storage',$bt._cmd);$v(window).on('focus',$bt._focus);$bt.id=(new Date).getTime();var t=$l.get($bt.LS_TABS);$bt.list=t==null?[]:$j.obj(t);$bt.list.push($bt.id);$l.set($bt.LS_TABS,$j.str($bt.list));$bt._broadcast();$bt.log($bt.list);if(typeof fn=="function")fn();},_dom:function(n,s,d,id){$bt.send({name:n,selector:s,data:d,to:!id?'*':id});},_unload:function(e){$bt._refresh();$bt._remove();$l.set($bt.LS_TABS,$j.str($bt.list));$bt._broadcast();return null;},_focus:function(e){$l.set($bt.LS_CURTAB,$bt.id);},_cmd:function(e){if(e.key!=$bt.LS_CMD)return;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){case $bt.CMD_SYNC:$bt._refresh();$bt.log($bt.list);break;case $bt.CMD_APPEND:$v(cmd.selector).append(cmd.data);break;case $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:if(typeof $bt.on=="function")$bt.on(cmd);}}}}
var $v=function(p){var s=typeof p=="string";var c=s?document.querySelectorAll(p):null;var a=s?[].slice.call(c):[p];delete(s);if(p==localStorage){return{clear:function(){return p.clear();},get:function(k){return p.getItem(k);},rem:function(k){return p.removeItem(k);},set:function(k,v){return p.setItem(k,v);}};}
else if(p==JSON){return{str:function(o){return p.stringify(o);},obj:function(s){return p.parse(s);}};}
else{this.foreach=function(f){[].forEach.call(c,f);};this.html=function(d){if(arguments.length==0)return a[0].innerHTML;else a[0].innerHTML=d;};this.append=function(d){this.foreach(function(n){n.innerHTML+=d;});};this.on=function(t,f,u){if(c!=null){this.foreach(function(n){n.addEventListener(t,f,u===true);});}
else a[0].addEventListener(t,f,u===true);};this.val=function(d){if(arguments.length==0)return a[0].value;else a[0].value=d;};this.attr=function(k,v){if(arguments.length==1)return a[0].getAttribute(k);else a[0].setAttribute(k,v);};this.ready=function(f){document.addEventListener('DOMContentLoaded',f);};return this;}}
var $l=$v(localStorage);var $j=$v(JSON);

45
src/bt.js
View File

@ -3,26 +3,47 @@
* @contributors : * @contributors :
* @copyright : pluie.org * @copyright : pluie.org
* @date : 2015-12-10 22:22:34 * @date : 2015-12-10 22:22:34
* @version : 0.2 * @version : 0.4
* @license : MIT * @license : MIT
* @require : html5 localStorage * @require : html5 localStorage
* @desc : * @desc :
* *
* BrowserTab USAGE : * USAGE :
* *
* *
* Initialize * Initialize
* *
* $(document).ready(function() { * $v(document).ready(function() {
* $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
* *
@ -41,6 +62,15 @@
* // send a custom command to other browser tabs * // send a custom command to other browser tabs
* $bt.send({ name : $bt.CMD_CUSTOM, customKey : 'customValue' }); * $bt.send({ name : $bt.CMD_CUSTOM, customKey : 'customValue' });
* *
* Bonus
*
* // alias localStorage : clear|rem|get|set
* $l;
* // alias json : str|obj
* $j
* // minimal vanilla jquery style : ready|on|html|append|attr|val|foreach
* $v
*
* enjoy ! * enjoy !
*/ */
var $bt = { var $bt = {
@ -224,7 +254,6 @@ var $bt = {
// vanilla minimal jquery style // vanilla minimal jquery style
var $v = function(p) { var $v = function(p) {
var s = typeof p == "string"; var s = typeof p == "string";
var z = "cool";
var c = s ? document.querySelectorAll(p) : null; var c = s ? document.querySelectorAll(p) : null;
var a = s ? [].slice.call(c) : [p]; var a = s ? [].slice.call(c) : [p];
delete(s); delete(s);
@ -284,7 +313,7 @@ var $v = function(p) {
return this; return this;
} }
} }
// alias localStorage // alias localStorage : clear|rem|get|set
var $l = $v(localStorage); var $l = $v(localStorage);
// alias json // alias json : str|obj
var $j = $v(JSON); var $j = $v(JSON);