diff --git a/index.html b/index.html index d02b41a..753ec18 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@ } window.webxdc.setUpdateListener(receiveUpdate); + window.webxdc.getAllUpdates().forEach(receiveUpdate); diff --git a/webxdc.js b/webxdc.js index 2b90865..26860b0 100644 --- a/webxdc.js +++ b/webxdc.js @@ -1,5 +1,53 @@ // debug friend: document.writeln(JSON.stringify(value)); -// maybe helpful: window.sessionStorage, https://www.w3schools.com/html/html5_webstorage.asp +window.xdcStorage = (() => { + var updatesKey = "__xdcUpdatesKey__"; + var fakeStorage = { + _data: {}, + + setItem: function (id, val) { + return this._data[id] = String(val); + }, + + getItem: function (id) { + return this._data.hasOwnProperty(id) ? this._data[id] : undefined; + }, + + removeItem: function (id) { + return delete this._data[id]; + }, + + clear: function () { + return this._data = {}; + } + }; + var localStorageSupported = () => { + var testKey = "__xdcTestKey__"; + try { + var storage = window.localStorage; + storage.setItem(testKey, "1"); + storage.removeItem(testKey); + return true; + } catch (error) { + return false; + } + }; + var storage = localStorageSupported() ? window.localStorage : fakeStorage; + + return { + getUpdates: () => { + var updatesJSON = storage.getItem(updatesKey); + return updatesJSON ? JSON.parse(updatesJSON) : []; + }, + saveUpdate: (update) => { + var updates = window.xdcStorage.getUpdates(); + updates.push(update); + storage.setItem(updatesKey, JSON.stringify(updates)); + }, + clear: () => { + storage.clear(); + } + }; +})(); window.webxdc = (() => { var updateListener = () => {}; @@ -8,18 +56,15 @@ window.webxdc = (() => { selfAddr: () => window.xdcSelfAddr || "device0@local.host", selfName: () => window.xdcSelfName || "device0", setUpdateListener: (cb) => (window.xdcUpdateListener = cb), - getAllUpdates: () => { - return JSON.parse( - '[]' - //'[{"action":"configure", "question":"your favorite colorxx", "answers":["red","green","blue","yellow","purple1"]},{"action":"vote", "sender":"foo2@bar.de", "vote":0},{"action":"vote", "sender":"foo@bar.de", "vote":0}]' - ); - }, + getAllUpdates: () => {return getXdcRoot().xdcStorage.getUpdates();}, sendUpdate: (description, payload) => { // alert(description+"\n\n"+JSON.stringify(payload)); + var update = {payload: payload}; + getXdcRoot().xdcStorage.saveUpdate(update); var all = getAllXdcWindows(); all.forEach((w) => { //alert(w.xdcUpdateListener); - w.xdcUpdateListener({payload: payload}); + w.xdcUpdateListener(update); }); }, }; @@ -28,7 +73,7 @@ window.webxdc = (() => { window.allXdcWindows = [window]; window.xdcUpdateListener = 12; -var styleControlPanel = 'position: fixed; bottom:1em; left:1em; background-color: #000; opacity:0.8; padding:.5em; font-family: sans-serif; width: 50%;'; +var styleControlPanel = 'position: fixed; bottom:1em; left:1em; background-color: #000; opacity:0.8; padding:.5em; font-family: sans-serif; width: 50%;color:#fff;'; var styleMenuLink = 'color:#fff; text-decoration: none;'; function getXdcRoot() { @@ -44,7 +89,7 @@ function getAllXdcWindows() { return xdcRoot.allXdcWindows; } -function addPeer() { +function addXdcPeer() { var xdcChild = window.open(window.location); var xdcRoot = getXdcRoot(); xdcChild.xdcRoot = xdcRoot; @@ -53,7 +98,12 @@ function addPeer() { xdcRoot.allXdcWindows.push(xdcChild); } -function alterApp() { +function clearXdcStorage() { + getXdcRoot().xdcStorage.clear(); + alert("Done."); +} + +function alterXdcApp() { var title = document.getElementsByTagName('title')[0]; if (typeof title == 'undefined') { title = document.createElement('title'); @@ -64,11 +114,12 @@ function alterApp() { if (getXdcRoot() === window) { var div = document.createElement('div'); div.innerHTML = - '
' + - 'Add Peer' + - '
'; + '
' + + 'Add Peer | ' + + 'Clear Storage' + + '
'; document.getElementsByTagName('body')[0].append(div.firstChild); } } -window.addEventListener("load", alterApp); +window.addEventListener("load", alterXdcApp);