move list/map functionality into wrapper file
ansuz
9 years ago
parent
8885658431
commit
c1bca09cce
@ -0,0 +1,184 @@
|
|||||||
|
require.config({ paths: { 'json.sortify': '/bower_components/json.sortify/dist/JSON.sortify' } });
|
||||||
|
define([
|
||||||
|
'/api/config?cb=' + Math.random().toString(16).substring(2),
|
||||||
|
'/common/crypto.js',
|
||||||
|
'/common/realtime-input.js',
|
||||||
|
'/json/listmap.js',
|
||||||
|
'/common/json-ot.js',
|
||||||
|
'json.sortify',
|
||||||
|
'/bower_components/textpatcher/TextPatcher.amd.js',
|
||||||
|
'/bower_components/jquery/dist/jquery.min.js',
|
||||||
|
], function (Config, Crypto, Realtime, ListMap, JsonOT, Sortify, TextPatcher) {
|
||||||
|
var api = {};
|
||||||
|
|
||||||
|
api.ListMap = ListMap;
|
||||||
|
|
||||||
|
var key;
|
||||||
|
var channel = '';
|
||||||
|
var hash = false;
|
||||||
|
if (!/#/.test(window.location.href)) {
|
||||||
|
key = Crypto.genKey();
|
||||||
|
} else {
|
||||||
|
hash = window.location.hash.slice(1);
|
||||||
|
channel = hash.slice(0,32);
|
||||||
|
key = hash.slice(32);
|
||||||
|
}
|
||||||
|
|
||||||
|
var module = window.APP = {
|
||||||
|
TextPatcher: TextPatcher,
|
||||||
|
Sortify: Sortify,
|
||||||
|
};
|
||||||
|
|
||||||
|
var $repl = $('[name="repl"]');
|
||||||
|
|
||||||
|
var Map = module.Map = {};
|
||||||
|
|
||||||
|
var initializing = true;
|
||||||
|
|
||||||
|
var config = module.config = {
|
||||||
|
initialState: Sortify(Map) || '{}',
|
||||||
|
websocketURL: Config.websocketURL,
|
||||||
|
userName: Crypto.rand64(8),
|
||||||
|
channel: channel,
|
||||||
|
cryptKey: key,
|
||||||
|
crypto: Crypto,
|
||||||
|
transformFunction: JsonOT.validate
|
||||||
|
};
|
||||||
|
|
||||||
|
var setEditable = module.setEditable = function (bool) {
|
||||||
|
/* (dis)allow editing */
|
||||||
|
[$repl].forEach(function ($el) {
|
||||||
|
$el.attr('disabled', !bool);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
setEditable(false);
|
||||||
|
|
||||||
|
var onInit = config.onInit = function (info) {
|
||||||
|
var realtime = module.realtime = info.realtime;
|
||||||
|
window.location.hash = info.channel + key;
|
||||||
|
|
||||||
|
// create your patcher
|
||||||
|
module.patchText = TextPatcher.create({
|
||||||
|
realtime: realtime,
|
||||||
|
logging: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/* we still need to pass in the function that bumps to ListMap.
|
||||||
|
this is no good. FIXME */
|
||||||
|
var onLocal = config.onLocal = ListMap.onLocal = module.bump = function () {
|
||||||
|
if (initializing) { return; }
|
||||||
|
|
||||||
|
var strung = Sortify(Map);
|
||||||
|
|
||||||
|
console.log(strung);
|
||||||
|
|
||||||
|
/* serialize local changes */
|
||||||
|
module.patchText(strung);
|
||||||
|
|
||||||
|
if (module.realtime.getUserDoc !== strung) {
|
||||||
|
module.patchText(strung);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var onRemote = config.onRemote = function (info) {
|
||||||
|
if (initializing) { return; }
|
||||||
|
/* integrate remote changes */
|
||||||
|
|
||||||
|
var proxy = module.proxy;
|
||||||
|
|
||||||
|
var userDoc = module.realtime.getUserDoc();
|
||||||
|
var parsed = JSON.parse(userDoc);
|
||||||
|
|
||||||
|
ListMap.update(proxy, parsed);
|
||||||
|
};
|
||||||
|
|
||||||
|
var onReady = config.onReady = function (info) {
|
||||||
|
console.log("READY");
|
||||||
|
|
||||||
|
var userDoc = module.realtime.getUserDoc();
|
||||||
|
var parsed = JSON.parse(userDoc);
|
||||||
|
|
||||||
|
Object.keys(parsed).forEach(function (key) {
|
||||||
|
module.proxy[key] = ListMap.recursiveProxies(parsed[key]);
|
||||||
|
});
|
||||||
|
|
||||||
|
setEditable(true);
|
||||||
|
initializing = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
var onAbort = config.onAbort = function (info) {
|
||||||
|
window.alert("Network Connection Lost");
|
||||||
|
};
|
||||||
|
|
||||||
|
var rt = Realtime.start(config);
|
||||||
|
|
||||||
|
var proxy = module.proxy = ListMap.makeProxy(Map);
|
||||||
|
|
||||||
|
$repl.on('keyup', function (e) {
|
||||||
|
if (e.which === 13) {
|
||||||
|
var value = $repl.val();
|
||||||
|
|
||||||
|
if (!value.trim()) { return; }
|
||||||
|
|
||||||
|
console.log("evaluating `%s`", value);
|
||||||
|
|
||||||
|
var x = proxy;
|
||||||
|
console.log('> ', eval(value)); // jshint ignore:line
|
||||||
|
console.log();
|
||||||
|
$repl.val('');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var create = api.create = function (config) {
|
||||||
|
/* validate your inputs before proceeding */
|
||||||
|
|
||||||
|
if (['object', 'array'].indexOf(ListMap.type(config.data))) {
|
||||||
|
throw new Error('unsupported datatype');
|
||||||
|
}
|
||||||
|
|
||||||
|
var Config = {
|
||||||
|
initialState: Sortify(config.data),
|
||||||
|
transformFunction: JsonOT.validate,
|
||||||
|
userName: userName,
|
||||||
|
channel: channel,
|
||||||
|
cryptKey: cryptKey,
|
||||||
|
crypto: crypto,
|
||||||
|
};
|
||||||
|
|
||||||
|
var rt;
|
||||||
|
|
||||||
|
var onInit = Config.onInit = function (info) {
|
||||||
|
// onInit
|
||||||
|
config.onInit(info);
|
||||||
|
};
|
||||||
|
|
||||||
|
var onReady = Config.onReady = function (info) {
|
||||||
|
// onReady
|
||||||
|
config.onReady(info);
|
||||||
|
};
|
||||||
|
|
||||||
|
var onLocal = Config.onLocal = function () {
|
||||||
|
// onLocal
|
||||||
|
config.onLocal();
|
||||||
|
};
|
||||||
|
|
||||||
|
var onRemote = Config.onRemote = function (info) {
|
||||||
|
// onRemote
|
||||||
|
config.onRemote(info);
|
||||||
|
};
|
||||||
|
|
||||||
|
var onAbort = Config.onAbort = function (info) {
|
||||||
|
// onAbort
|
||||||
|
config.onAbort(info);
|
||||||
|
};
|
||||||
|
|
||||||
|
rt =Realtime.start(Config);
|
||||||
|
var proxy = rt.proxy = ListMap.makeProxy(data);
|
||||||
|
|
||||||
|
return rt;
|
||||||
|
};
|
||||||
|
|
||||||
|
return api;
|
||||||
|
});
|
||||||
@ -1,204 +1,12 @@
|
|||||||
require.config({ paths: { 'json.sortify': '/bower_components/json.sortify/dist/JSON.sortify' } });
|
|
||||||
define([
|
define([
|
||||||
'/api/config?cb=' + Math.random().toString(16).substring(2),
|
'/json/api.js',
|
||||||
'/common/realtime-input.js',
|
//'/customize/pad.js'
|
||||||
'/common/crypto.js',
|
], function (RtListMap) {
|
||||||
'/bower_components/textpatcher/TextPatcher.amd.js',
|
|
||||||
'json.sortify',
|
|
||||||
'/common/json-ot.js',
|
|
||||||
'/json/compare.js',
|
|
||||||
'/bower_components/proxy-polyfill/proxy.min.js', // https://github.com/GoogleChrome/proxy-polyfill
|
|
||||||
'/bower_components/jquery/dist/jquery.min.js',
|
|
||||||
'/customize/pad.js'
|
|
||||||
], function (Config, Realtime, Crypto, TextPatcher, Sortify, JsonOT, Compare) {
|
|
||||||
// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Proxy#A_complete_traps_list_example
|
|
||||||
// https://github.com/xwiki-labs/RealtimeJSON
|
|
||||||
// https://github.com/xwiki-labs/ChainJSON
|
|
||||||
var $ = window.jQuery;
|
var $ = window.jQuery;
|
||||||
var Proxy = window.Proxy;
|
|
||||||
|
|
||||||
var key;
|
var config = {
|
||||||
var channel = '';
|
|
||||||
var hash = false;
|
|
||||||
if (!/#/.test(window.location.href)) {
|
|
||||||
key = Crypto.genKey();
|
|
||||||
} else {
|
|
||||||
hash = window.location.hash.slice(1);
|
|
||||||
channel = hash.slice(0,32);
|
|
||||||
key = hash.slice(32);
|
|
||||||
}
|
|
||||||
|
|
||||||
var module = window.APP = {
|
|
||||||
TextPatcher: TextPatcher,
|
|
||||||
Sortify: Sortify,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var $repl = $('[name="repl"]');
|
// RtListMap.create(config);
|
||||||
|
|
||||||
var Map = module.Map = {};
|
|
||||||
|
|
||||||
var initializing = true;
|
|
||||||
|
|
||||||
var config = module.config = {
|
|
||||||
initialState: Sortify(Map) || '{}',
|
|
||||||
websocketURL: Config.websocketURL,
|
|
||||||
userName: Crypto.rand64(8),
|
|
||||||
channel: channel,
|
|
||||||
cryptKey: key,
|
|
||||||
crypto: Crypto,
|
|
||||||
transformFunction: JsonOT.validate
|
|
||||||
};
|
|
||||||
|
|
||||||
var setEditable = module.setEditable = function (bool) {
|
|
||||||
/* (dis)allow editing */
|
|
||||||
[$repl].forEach(function ($el) {
|
|
||||||
$el.attr('disabled', !bool);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
setEditable(false);
|
|
||||||
|
|
||||||
var onInit = config.onInit = function (info) {
|
|
||||||
var realtime = module.realtime = info.realtime;
|
|
||||||
window.location.hash = info.channel + key;
|
|
||||||
|
|
||||||
// create your patcher
|
|
||||||
module.patchText = TextPatcher.create({
|
|
||||||
realtime: realtime,
|
|
||||||
logging: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var onLocal = config.onLocal = module.bump = function () {
|
|
||||||
if (initializing) { return; }
|
|
||||||
|
|
||||||
var strung = Sortify(Map);
|
|
||||||
|
|
||||||
console.log(strung);
|
|
||||||
|
|
||||||
/* serialize local changes */
|
|
||||||
module.patchText(strung);
|
|
||||||
|
|
||||||
if (module.realtime.getUserDoc !== strung) {
|
|
||||||
module.patchText(strung);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var onRemote = config.onRemote = function (info) {
|
|
||||||
if (initializing) { return; }
|
|
||||||
/* integrate remote changes */
|
|
||||||
|
|
||||||
var proxy = module.proxy;
|
|
||||||
|
|
||||||
var userDoc = module.realtime.getUserDoc();
|
|
||||||
var parsed = JSON.parse(userDoc);
|
|
||||||
|
|
||||||
if (Compare.isArray(parsed)) {
|
|
||||||
// what's different about arrays?
|
|
||||||
} else if (Compare.type(parsed) === 'object') { /*
|
|
||||||
don't use native typeof because 'null' is an object, but you can't
|
|
||||||
proxy it, so you need to distinguish */
|
|
||||||
Compare.objects(Map, parsed, function (obj) {
|
|
||||||
console.log("constructing new proxy for type [%s]", Compare.type(obj));
|
|
||||||
return module.makeProxy(obj);
|
|
||||||
}, []);
|
|
||||||
} else {
|
|
||||||
throw new Error("unsupported realtime datatype");
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
var onReady = config.onReady = function (info) {
|
|
||||||
console.log("READY");
|
|
||||||
|
|
||||||
var userDoc = module.realtime.getUserDoc();
|
|
||||||
var parsed = JSON.parse(userDoc);
|
|
||||||
|
|
||||||
//Compare.objects(module.proxy, parsed, module.makeProxy, []);
|
|
||||||
Object.keys(parsed).forEach(function (key) {
|
|
||||||
Map[key] = module.recursiveProxies(parsed[key]);
|
|
||||||
});
|
|
||||||
|
|
||||||
setEditable(true);
|
|
||||||
initializing = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
var onAbort = config.onAbort = function (info) {
|
|
||||||
window.alert("Network Connection Lost");
|
|
||||||
};
|
|
||||||
|
|
||||||
var rt = Realtime.start(config);
|
|
||||||
|
|
||||||
var handler = {
|
|
||||||
get: function (obj, prop) {
|
|
||||||
// FIXME magic?
|
|
||||||
if (prop === 'length' && typeof(obj.length) === 'number') {
|
|
||||||
return obj.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
//console.log("Getting [%s]", prop);
|
|
||||||
return obj[prop];
|
|
||||||
},
|
|
||||||
set: function (obj, prop, value) {
|
|
||||||
if (prop === 'on') {
|
|
||||||
throw new Error("'on' is a reserved attribute name for realtime lists and maps");
|
|
||||||
}
|
|
||||||
if (obj[prop] === value) { return value; }
|
|
||||||
|
|
||||||
var t_value = Compare.type(value);
|
|
||||||
if (['array', 'object'].indexOf(t_value) !== -1) {
|
|
||||||
console.log("Constructing new proxy for value with type [%s]", t_value);
|
|
||||||
var proxy = obj[prop] = module.makeProxy(value);
|
|
||||||
//onLocal();
|
|
||||||
//return proxy;
|
|
||||||
} else {
|
|
||||||
console.log("Setting [%s] to [%s]", prop, value);
|
|
||||||
obj[prop] = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
onLocal();
|
|
||||||
return obj[prop];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var makeProxy = module.makeProxy = function (obj) {
|
|
||||||
return new Proxy(obj, handler);
|
|
||||||
};
|
|
||||||
|
|
||||||
var recursiveProxies = module.recursiveProxies = function (obj) {
|
|
||||||
var t_obj = Compare.type(obj);
|
|
||||||
|
|
||||||
var proxy;
|
|
||||||
|
|
||||||
switch (t_obj) {
|
|
||||||
case 'object':
|
|
||||||
proxy = makeProxy({});
|
|
||||||
Compare.objects(proxy, obj, makeProxy, []);
|
|
||||||
return proxy;
|
|
||||||
case 'array':
|
|
||||||
proxy = makeProxy([]);
|
|
||||||
Compare.arrays(proxy, obj, makeProxy, []);
|
|
||||||
return proxy;
|
|
||||||
default:
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var proxy = module.proxy = makeProxy(Map);
|
|
||||||
|
|
||||||
$repl.on('keyup', function (e) {
|
|
||||||
if (e.which === 13) {
|
|
||||||
var value = $repl.val();
|
|
||||||
|
|
||||||
if (!value.trim()) { return; }
|
|
||||||
|
|
||||||
console.log("evaluating `%s`", value);
|
|
||||||
|
|
||||||
var x = proxy;
|
|
||||||
console.log('> ', eval(value)); // jshint ignore:line
|
|
||||||
//console.log(Sortify(proxy));
|
|
||||||
console.log();
|
|
||||||
$repl.val('');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue