jfinn
/
jsyncdb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
							<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/html">
  <head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />


<!-- <script class="win_keys2 win_keys_glob_attrs" src="/ign/j9/dbg/glob_attrs.js?c=00x"></script> -->


<script src="/shared_libs/jquery-3.5.1.min.js"></script>

<!-- <script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script> -->
<!-- 
<script class="rld" src="jsync_dep.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>
<script class="rld" src="jsync_ord.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>
<script class="rld" src="jsync_ws.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>
<script class="rld" src="jsync_sto.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>
<script class="rld" src="jsync_init.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>
<script class="rld" src="jsync_test.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>
<script class="rld" src="jsync_demo.js"></script>
 -->


<!-- 
<script class="rld" src="/ign/indx/jsyncdb/jsync_dep.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_ord.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_ws.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_sto.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_init.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_test.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
<script class="rld" src="/ign/indx/jsyncdb/jsync_demo.js"></script>
<script class="win_keys" src="/ign/j9/dbg/win_keys.js?c=00x"></script>                             
 -->


<!-- <script class="rld" type="module" src="/ign/indx/jsyncdb/jsync_lib.js"></script> -->
<script class="rld" src="/jsync_lib.js"></script>
<!-- 
<script class="rld" src="/jsync_demo.js"></script>
<script class="rld" src="/jsync_2nd_db.js"></script>
<script class="rld" src="/jsync_test2.js"></script>
<script class="rld" src="/ev_inc.js"></script>
 -->


<style type="text/css">


</style>
 <link  class="rld" rel="stylesheet" href="/jsync_demo.css">
  <link  class="rld" rel="stylesheet" href="/ev_inc.css">

<!-- 
<script type="text/javascript">
  function hide_demo(argument) {
    // clog("hide_demo")
    $(".show_demo").removeClass("show_demo").addClass("hide_demo")

  }
  function show_demo(argument) {
    // clog("show_demo")
    // body...
    $(".hide_demo").removeClass("hide_demo").addClass("show_demo")
  }

function evl_btn_h(event,node){
  _evl_btn_h(...arguments)

}
function eval_h(event,node){
  _eval_h(...arguments)
}


</script>
 -->


</head>

<body>

<div id="root_div">
  <span class="iblock_2"></span>
  <span class="iblock_1"></span>
</div>
<div class="json_container show_demo">
  <button class="demo_hide_btn" onclick="hide_demo()">hide demo</button>
  <button class="demo_show_btn" onclick="show_demo()">show demo</button><br>
  <span class="color_legend">
    
  <span class="wperm2">green: </span>you have write access<br>
  <span class="wperm">orange: </span>you don't have write access<br>
  <span >black: </span>everyone has write access<br>
  </span>
  <!-- <div class="db_disp"></div> -->
  <code class="db_disp"></code>
&#8595; eval m.a={} {enter} &#8595;
<!-- <br>  <textarea class="eval_txt" onkeypress="eval_h(event,this)"></textarea> -->
<span class="evl_cnt">
  
<br>  <textarea class="eval_txt" onkeyup="evl_btn_h(event,this)" data-ev_type="keyup"></textarea> 
<span class="btn_cnt">
  
<button class="evl_btn evl_btn1" data-ev_type="b" data-btn-type="b" onclick="evl_btn_h(event,this)"><</button>
<button class="evl_btn evl_btn2" data-ev_type="f" data-btn-type="f" onclick="evl_btn_h(event,this)">></button>
<button class="evl_btn evl_btn3" data-ev_type="e" data-btn-type="e" onclick="evl_btn_h(event,this)">eval</button>
</span>
</span>
<br>
<code class="eval_result"></code>

</div>
<div id="oops_i_lied"><div class="code_container">
  in this demo the global variable msto_prx is the root of the database.
we will use the global variable msto because it is a little nicer (has shortcuts to the parts you have exclusive write permissions to).

<b>open devtools on two pages connected to the same database to begin</b>
to get a copy of the datastructure without the Proxies:
<code>jc(msto)</code><div class="hidden-boundary"></div>

 set values<code>

msto.key = "value"<div class="hidden-boundary"></div>

  msto.example = {
    str:"these are supported data types",
    number:12.7,
    bool:true,
    arr:["val0",1,{z:1},["a","b"]],
    obj:{d:"there is a max depth of 15"},
    str2:"null isn't fully supported yet and can break things",
  }
</code>
  you can paste this shorter statement to avoid newlines in your devtools history :)

<code>msto.example={str:"str_val",bool:true,number:12.7,arr:["val0",1,{z:2},["a","b"]],obj:{d:"depth 2?"},str2:"another string"}</code><div class="hidden-boundary"></div>
get values
  <code>
msto.example.arr[0]<div class="hidden-boundary"></div>
// "val0"

msto.example.arr[2]<div class="hidden-boundary"></div>
// {z:2}</code>
the datastructure should have syncronized msto & msto_prx on both webpages 
<span class="db_desc">
values can be strings, numbers, booleans, objects or arrays
null and undefined are not supported yet
local changes are immediate
and deletes are local only (for now)
after a value is set is pushed to everyone else who is connected

msto.ws_channels and msto.participants are write protected 
msto.my_data links to the path you have write access to as does msto.my_channel
participants and channels write only data are automatically deleted after they leave
the data is not persistent it exists in the webpages of those connected
if everyone leaves a room the datastructure is destroyed


</span></div></div>

</body>
</html>