Test webworker app
yflory
7 years ago
parent
c6b8bbea59
commit
fc027ba00b
@ -0,0 +1,40 @@
|
|||||||
|
@import (once) "../../customize/src/less2/include/browser.less";
|
||||||
|
@import (once) "../../customize/src/less2/include/toolbar.less";
|
||||||
|
@import (once) "../../customize/src/less2/include/markdown.less";
|
||||||
|
@import (once) '../../customize/src/less2/include/fileupload.less';
|
||||||
|
@import (once) '../../customize/src/less2/include/alertify.less';
|
||||||
|
//@import (once) '../../customize/src/less/mixins.less';
|
||||||
|
//@import (once) '../../customize/src/less/variables.less";
|
||||||
|
|
||||||
|
@import (once) '../../customize/src/less2/include/avatar.less';
|
||||||
|
|
||||||
|
|
||||||
|
.toolbar_main();
|
||||||
|
.fileupload_main();
|
||||||
|
.alertify_main();
|
||||||
|
|
||||||
|
// body
|
||||||
|
&.cp-app-worker {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
|
||||||
|
#cp-toolbar {
|
||||||
|
display: flex; // We need this to remove a 3px border at the bottom of the toolbar
|
||||||
|
}
|
||||||
|
|
||||||
|
.cp-cryptpad-toolbar {
|
||||||
|
padding: 0px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cp-app-worker-container {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-flow: column;
|
||||||
|
padding: 20px;
|
||||||
|
align-items: center;
|
||||||
|
background-color: lighten(@colortheme_todo-bg, 15%);
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CryptPad</title>
|
||||||
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="referrer" content="no-referrer" />
|
||||||
|
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
#sbox-iframe {
|
||||||
|
position:fixed;
|
||||||
|
top:0px;
|
||||||
|
left:0px;
|
||||||
|
bottom:0px;
|
||||||
|
right:0px;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
border:none;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
#sbox-filePicker-iframe {
|
||||||
|
position: fixed;
|
||||||
|
top:0; left:0;
|
||||||
|
bottom:0; right:0;
|
||||||
|
width:100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<iframe id="sbox-iframe">
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="cp-app-noscroll">
|
||||||
|
<head>
|
||||||
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<script async data-bootload="/worker/inner.js" data-main="/common/sframe-boot.js?ver=1.4" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
|
<style>
|
||||||
|
.loading-hidden { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="cp-app-worker">
|
||||||
|
<div id="cp-toolbar" class="cp-toolbar-container"></div>
|
||||||
|
<div id="cp-app-worker-container">
|
||||||
|
Hello world!
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
define([
|
||||||
|
'jquery',
|
||||||
|
'/common/toolbar3.js',
|
||||||
|
'/common/cryptpad-common.js',
|
||||||
|
'/bower_components/nthen/index.js',
|
||||||
|
'/common/sframe-common.js',
|
||||||
|
|
||||||
|
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||||
|
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||||
|
'less!/customize/src/less2/main.less',
|
||||||
|
], function (
|
||||||
|
$,
|
||||||
|
Toolbar,
|
||||||
|
Cryptpad,
|
||||||
|
nThen,
|
||||||
|
SFCommon,
|
||||||
|
)
|
||||||
|
{
|
||||||
|
var Messages = Cryptpad.Messages;
|
||||||
|
var APP = window.APP = {};
|
||||||
|
|
||||||
|
var common;
|
||||||
|
var sFrameChan;
|
||||||
|
nThen(function (waitFor) {
|
||||||
|
$(waitFor(Cryptpad.addLoadingScreen));
|
||||||
|
SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
|
||||||
|
}).nThen(function (waitFor) {
|
||||||
|
sFrameChan = common.getSframeChannel();
|
||||||
|
sFrameChan.onReady(waitFor());
|
||||||
|
}).nThen(function (/*waitFor*/) {
|
||||||
|
var $body = $('body');
|
||||||
|
var $container = $('#cp-app-worker-container');
|
||||||
|
var $bar = $('.cp-toolbar-container');
|
||||||
|
|
||||||
|
var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
|
||||||
|
var configTb = {
|
||||||
|
displayed: displayed,
|
||||||
|
common: Cryptpad,
|
||||||
|
sfCommon: common,
|
||||||
|
$container: $bar,
|
||||||
|
pageTitle: 'Test WebWorkers',
|
||||||
|
metadataMgr: common.getMetadataMgr(),
|
||||||
|
};
|
||||||
|
APP.toolbar = Toolbar.create(configTb);
|
||||||
|
APP.toolbar.$rightside.hide();
|
||||||
|
|
||||||
|
Cryptpad.removeLoadingScreen();
|
||||||
|
if (!window.Worker) {
|
||||||
|
return void $container.text("WebWorkers not supported by your browser");
|
||||||
|
}
|
||||||
|
console.log('ready');
|
||||||
|
var myWorker = new SharedWorker('/worker/worker.js');
|
||||||
|
console.log(myWorker);
|
||||||
|
console.log(myWorker.port);
|
||||||
|
myWorker.onerror = function (e) { console.error(e); };
|
||||||
|
myWorker.port.onmessage = function (e) {
|
||||||
|
var data = e.data;
|
||||||
|
if (data && data.state === "READY") {
|
||||||
|
$container.append('<hr>worker.js ready');
|
||||||
|
myWorker.port.postMessage(["Hello worker"]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$container.append('<br>');
|
||||||
|
$container.append(e.data);
|
||||||
|
};
|
||||||
|
$container.append('<hr>inner.js ready');
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
// Load #1, load as little as possible because we are in a race to get the loading screen up.
|
||||||
|
define([
|
||||||
|
'/bower_components/nthen/index.js',
|
||||||
|
'/api/config',
|
||||||
|
'jquery',
|
||||||
|
'/common/requireconfig.js',
|
||||||
|
'/common/sframe-common-outer.js'
|
||||||
|
], function (nThen, ApiConfig, $, RequireConfig, SFCommonO) {
|
||||||
|
var requireConfig = RequireConfig();
|
||||||
|
|
||||||
|
// Loaded in load #2
|
||||||
|
nThen(function (waitFor) {
|
||||||
|
$(waitFor());
|
||||||
|
}).nThen(function (waitFor) {
|
||||||
|
var req = {
|
||||||
|
cfg: requireConfig,
|
||||||
|
req: [ '/common/loading.js' ],
|
||||||
|
pfx: window.location.origin
|
||||||
|
};
|
||||||
|
window.rc = requireConfig;
|
||||||
|
window.apiconf = ApiConfig;
|
||||||
|
$('#sbox-iframe').attr('src',
|
||||||
|
ApiConfig.httpSafeOrigin + '/worker/inner.html?' + requireConfig.urlArgs +
|
||||||
|
'#' + encodeURIComponent(JSON.stringify(req)));
|
||||||
|
|
||||||
|
// This is a cheap trick to avoid loading sframe-channel in parallel with the
|
||||||
|
// loading screen setup.
|
||||||
|
var done = waitFor();
|
||||||
|
var onMsg = function (msg) {
|
||||||
|
var data = JSON.parse(msg.data);
|
||||||
|
if (data.q !== 'READY') { return; }
|
||||||
|
window.removeEventListener('message', onMsg);
|
||||||
|
var _done = done;
|
||||||
|
done = function () { };
|
||||||
|
_done();
|
||||||
|
};
|
||||||
|
window.addEventListener('message', onMsg);
|
||||||
|
}).nThen(function (/*waitFor*/) {
|
||||||
|
SFCommonO.start({
|
||||||
|
noRealtime: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
define(function () {
|
||||||
|
var out = {};
|
||||||
|
|
||||||
|
out.test = "Key from /worker/messages.js";
|
||||||
|
|
||||||
|
return out;
|
||||||
|
});
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
define([
|
||||||
|
|
||||||
|
], function () {
|
||||||
|
var Todo = {};
|
||||||
|
|
||||||
|
/* data model
|
||||||
|
{
|
||||||
|
"order": [
|
||||||
|
"123456789abcdef0",
|
||||||
|
"23456789abcdef01",
|
||||||
|
"0123456789abcedf"
|
||||||
|
],
|
||||||
|
"data": {
|
||||||
|
"0123456789abcedf": {
|
||||||
|
"state": 0, // used to sort completed elements
|
||||||
|
"task": "pewpewpew",
|
||||||
|
"ctime": +new Date(), // used to display chronologically
|
||||||
|
"mtime": +new Date(), // used to display recent actions
|
||||||
|
// "deadline": +new Date() + 1000 * 60 * 60 * 24 * 7
|
||||||
|
},
|
||||||
|
"123456789abcdef0": {},
|
||||||
|
"23456789abcdef01": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
var val = function (proxy, id, k, v) {
|
||||||
|
var el = proxy.data[id];
|
||||||
|
if (!el) {
|
||||||
|
throw new Error('expected an element');
|
||||||
|
}
|
||||||
|
if (typeof(v) === 'function') { el[k] = v(el[k]); }
|
||||||
|
else { el[k] = v; }
|
||||||
|
return el[k];
|
||||||
|
};
|
||||||
|
|
||||||
|
var initialize = function (proxy) {
|
||||||
|
// run migration
|
||||||
|
if (typeof(proxy.data) !== 'object') { proxy.data = {}; }
|
||||||
|
if (!Array.isArray(proxy.order)) { proxy.order = []; }
|
||||||
|
if (typeof(proxy.type) !== 'string') { proxy.type = 'todo'; }
|
||||||
|
};
|
||||||
|
|
||||||
|
/* add (id, obj) push id to order, add object to data */
|
||||||
|
var add = function (proxy, id, obj) {
|
||||||
|
if (!Array.isArray(proxy.order)) {
|
||||||
|
throw new Error('expected an array');
|
||||||
|
}
|
||||||
|
proxy.order.unshift(id);
|
||||||
|
proxy.data[id] = obj;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* delete (id) remove id from order, delete id from data */
|
||||||
|
var remove = function (proxy, id) {
|
||||||
|
if (Array.isArray(proxy.order)) {
|
||||||
|
var i = proxy.order.indexOf(id);
|
||||||
|
proxy.order.splice(i, 1);
|
||||||
|
}
|
||||||
|
if (proxy.data[id]) { delete proxy.data[id]; }
|
||||||
|
};
|
||||||
|
|
||||||
|
Todo.init = function (proxy) {
|
||||||
|
var api = {};
|
||||||
|
initialize(proxy);
|
||||||
|
|
||||||
|
api.val = function (id, k, v) {
|
||||||
|
return val(proxy, id, k, v);
|
||||||
|
};
|
||||||
|
api.add = function (id, obj) {
|
||||||
|
return add(proxy, id, obj);
|
||||||
|
};
|
||||||
|
api.remove = function (id) {
|
||||||
|
return remove(proxy, id);
|
||||||
|
};
|
||||||
|
|
||||||
|
return api;
|
||||||
|
};
|
||||||
|
|
||||||
|
return Todo;
|
||||||
|
});
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
var window = self;
|
||||||
|
var localStorage = {
|
||||||
|
setItem: function (k, v) { localStorage[k] = v; },
|
||||||
|
getItem: function (k) { return localStorage[k]; }
|
||||||
|
};
|
||||||
|
|
||||||
|
importScripts('/bower_components/requirejs/require.js');
|
||||||
|
|
||||||
|
require.config({
|
||||||
|
// fix up locations so that relative urls work.
|
||||||
|
baseUrl: '/',
|
||||||
|
paths: {
|
||||||
|
// jquery declares itself as literally "jquery" so it cannot be pulled by path :(
|
||||||
|
"jquery": "/bower_components/jquery/dist/jquery.min",
|
||||||
|
// json.sortify same
|
||||||
|
"json.sortify": "/bower_components/json.sortify/dist/JSON.sortify",
|
||||||
|
//"pdfjs-dist/build/pdf": "/bower_components/pdfjs-dist/build/pdf",
|
||||||
|
//"pdfjs-dist/build/pdf.worker": "/bower_components/pdfjs-dist/build/pdf.worker"
|
||||||
|
cm: '/bower_components/codemirror'
|
||||||
|
},
|
||||||
|
map: {
|
||||||
|
'*': {
|
||||||
|
'css': '/bower_components/require-css/css.js',
|
||||||
|
'less': '/common/RequireLess.js',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var i = 0;
|
||||||
|
|
||||||
|
onconnect = function(e) {
|
||||||
|
console.log(e);
|
||||||
|
var port = e.ports[0];
|
||||||
|
console.log('here');
|
||||||
|
require([
|
||||||
|
'/customize/messages.js',
|
||||||
|
], function (Messages) {
|
||||||
|
console.log(Messages);
|
||||||
|
var n = i;
|
||||||
|
port.postMessage({state: 'READY'});
|
||||||
|
port.onmessage = function (e) {
|
||||||
|
console.log('worker received');
|
||||||
|
console.log(e.data);
|
||||||
|
port.postMessage('hello CryptPad'+n+', ' + Messages.test);
|
||||||
|
};
|
||||||
|
i++;
|
||||||
|
});
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue