dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

test client-side templates in whiteboard app

This commit is contained in:
ansuz 2017-06-22 16:01:33 +02:00
parent 852c028822
commit 35bfa1dce4
4 changed files with 84 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
customize.dist/pages.js
View File

@ -365,5 +365,62 @@ define([
])];
};
var appToolbar = function () {
return h('div#toolbar.toolbar-container');
};
Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () {
return [
appToolbar(),
h('div#canvas-area', h('canvas#canvas', {
width: 600,
height: 600
})),
h('div#controls', {
style: {
display: 'block',
}
}, [
h('button#clear', Msg.canvas_clear), ' ',
h('button#toggleDraw', Msg.canvas_disable),
h('button#delete', {
style: {
display: 'none',
}
}),
h('input#width', {
type: 'range',
value: "5",
min: "1",
max: "100"
}),
h('label', {
'for': 'width'
}, Msg.canvas_width),
h('input#opacity', {
type: 'range',
value: "1",
min: "0.1",
max: "1",
step: "0.1"
}),
h('label', {
'for': 'width',
}),
h('span.selected')
]),
setHTML(h('div#colors'), ' '),
loadingScreen(),
h('div#cursors', {
style: {
display: 'none',
background: 'white',
'text-align': 'center',
}
}),
h('div#pickers'),
];
};
return Pages;
});

23
customize.dist/template.js
View File

@ -6,11 +6,13 @@ define([
'css!/customize/main.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
], function ($, h, Cryptpad, Pages) {
$(function () {
var Messages = Cryptpad.Messages;
var $body = $('body');
var isMainApp = function () {
return /^\/(pad|code|slide|poll|whiteboard)\//.test(location.pathname);
};
var rightLink = function (ref, loc, txt) {
return h('span.link.right', [
@ -113,11 +115,24 @@ $(function () {
]));
var pathname = location.pathname;
if (/^\/(pad|code|slide|poll|whiteboard)\//.test(pathname)) {
// TODO load apps
return;
if (isMainApp()) {
if (typeof(Pages[pathname]) === 'function') {
var $body = $('body').html(h('body', Pages[pathname]()).innerHTML);
setTimeout(function () {
require(['/whiteboard/main.js'], function () {
$body.removeClass('noscroll');
});
});
return;
}
}
require([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
], function () {});
$body.append($topbar).append($main).append($footer);
if (/^\/settings\//.test(pathname)) {

35
www/whiteboard/index.html
View File

@ -3,43 +3,14 @@
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
<script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
<link rel="icon" type="image/png"
href="/customize/main-favicon.png"
data-main-favicon="/customize/main-favicon.png"
data-alt-favicon="/customize/alt-favicon.png"
id="favicon" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/customize/main.css" />
<link rel="stylesheet" href="whiteboard.css" />
<style> .noscroll { overflow-y: hidden; } </style>
</head>
<body>
<div id="toolbar" class="toolbar-container"></div>
<body class='noscroll'>
<div id="canvas-area">
<canvas id="canvas" width="600" height="600" ></canvas>
</div>
<div id="controls">
<button id="clear" data-localization="canvas_clear">Clear</button>
<button id="toggleDraw" data-localization="canvas_disable"></button>
<button id="delete" style="display: none;" data-localization="canvas_delete"></button>
<input id="width" data-localization-title="canvas_width" type="range" value="5" min="1" max="100"></input><label for="width">5</label>
<input id="opacity" data-localization-title="canvas_opacity" type="range" value="1" min="0.1" max="1" step="0.1"></input><label for="opacity">1</label>
<span class="selected"></span>
</div>
<div id="colors">&nbsp;</div>
<div id="loading">
<div class="loadingContainer">
<img class="cryptofist" src="/customize/cryptofist_small.png" />
<div class="spinnerContainer">
<span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
</div>
<p data-localization="loading"></p>
</div>
</div>
<div id="cursors" style="display: none; background: white; text-align: center;"></div>
<div id="pickers"></div>
</body>
</html>

6
www/whiteboard/main.js
View File

@ -13,6 +13,10 @@ define([
'/customize/application_config.js',
'/bower_components/secure-fabric.js/dist/fabric.min.js',
'/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'css!/customize/main.css',
'less!/whiteboard/whiteboard.less',
], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig) {
var saveAs = window.saveAs;
var Messages = Cryptpad.Messages;
@ -417,7 +421,7 @@ window.canvas = canvas;
else {
var hjson = JSON.parse(userDoc);
if (typeof(hjson) !== 'object' || Array.isArray(hjson) ||
(typeof(hjson.type) !== 'undefined' && hjson.type !== whiteboard)) {
(typeof(hjson.type) !== 'undefined' && hjson.type !== 'whiteboard')) {
Cryptpad.errorLoadingScreen(Messages.typeError);
throw new Error(Messages.typeError);
}