infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Add toolbar to the whiteboard app

Browse Source
pull/1/head
yflory 8 years ago
parent 973aeba0da
commit c2cb24c072
2 changed files with 304 additions and 89 deletions
Show Stats Download Patch File Download Diff File

6
www/whiteboard/index.html
Unescape Escape View File

@ -4,6 +4,7 @@
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <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="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
<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="/customize/main.css" />
<style> <style>
html, body{ html, body{
@ -12,6 +13,10 @@
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
body {
display: flex;
flex-flow: column;
}
textarea{ textarea{
width: 100%; width: 100%;
height: 100vh; height: 100vh;
@ -59,6 +64,7 @@
</style> </style>
</head> </head>
<body> <body>
<div id="toolbar" class="toolbar-container"></div>
<canvas id="canvas" width="600" height="600" ></canvas> <canvas id="canvas" width="600" height="600" ></canvas>

219
www/whiteboard/main.js
Unescape Escape View File

@ -6,6 +6,7 @@ define([
'/api/config?cb=' + Math.random().toString(16).substring(2), '/api/config?cb=' + Math.random().toString(16).substring(2),
'/bower_components/chainpad-netflux/chainpad-netflux.js', '/bower_components/chainpad-netflux/chainpad-netflux.js',
'/bower_components/chainpad-crypto/crypto.js', '/bower_components/chainpad-crypto/crypto.js',
'/common/toolbar.js',
'/bower_components/textpatcher/TextPatcher.amd.js', '/bower_components/textpatcher/TextPatcher.amd.js',
'json.sortify', 'json.sortify',
'/bower_components/chainpad-json-validator/json-ot.js', '/bower_components/chainpad-json-validator/json-ot.js',
@ -13,7 +14,7 @@ define([
'/bower_components/secure-fabric.js/dist/fabric.min.js', '/bower_components/secure-fabric.js/dist/fabric.min.js',
'/bower_components/jquery/dist/jquery.min.js', '/bower_components/jquery/dist/jquery.min.js',
'/bower_components/file-saver/FileSaver.min.js', '/bower_components/file-saver/FileSaver.min.js',
], function (Config, Realtime, Crypto, TextPatcher, JSONSortify, JsonOT, Cryptpad) { ], function (Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad) {
var saveAs = window.saveAs; var saveAs = window.saveAs;
var Messages = Cryptpad.Messages; var Messages = Cryptpad.Messages;
@ -21,8 +22,17 @@ define([
var $ = module.$ = window.jQuery; var $ = module.$ = window.jQuery;
var Fabric = module.Fabric = window.fabric; var Fabric = module.Fabric = window.fabric;
$(function () {
Cryptpad.addLoadingScreen();
var toolbar;
var secret = Cryptpad.getSecrets(); var secret = Cryptpad.getSecrets();
var readOnly = secret.keys && !secret.keys.editKeyStr;
if (!secret.keys) {
secret.keys = secret.key;
}
var andThen = function () {
/* Initialize Fabric */ /* Initialize Fabric */
var canvas = module.canvas = new Fabric.Canvas('canvas'); var canvas = module.canvas = new Fabric.Canvas('canvas');
var $canvas = $('canvas'); var $canvas = $('canvas');
@ -50,7 +60,15 @@ define([
}); });
var setEditable = function (bool) { var setEditable = function (bool) {
if (readOnly && bool) { return; }
canvas.isDrawingMode = bool; canvas.isDrawingMode = bool;
if (!bool) {
canvas.deactivateAll();
canvas.renderAll();
}
canvas.forEachObject(function (object) {
object.selectable = bool;
});
$canvas.css('border-color', bool? 'black': 'red'); $canvas.css('border-color', bool? 'black': 'red');
}; };
@ -66,20 +84,77 @@ define([
var initializing = true; var initializing = true;
var $bar = $('#toolbar');
var parsedHash = Cryptpad.parsePadUrl(window.location.href);
var defaultName = Cryptpad.getDefaultName(parsedHash);
var userData = module.userData = {}; // List of pretty name of all users (mapped with their server ID)
var userList; // List of users still connected to the channel (server IDs)
var addToUserData = function(data) {
var users = module.users;
for (var attrname in data) { userData[attrname] = data[attrname]; }
if (users && users.length) {
for (var userKey in userData) {
if (users.indexOf(userKey) === -1) {
delete userData[userKey];
}
}
}
if(userList && typeof userList.onChange === "function") {
userList.onChange(userData);
}
};
var myData = {};
var myUserName = ''; // My "pretty name"
var myID; // My server ID
var setMyID = function(info) {
myID = info.myID || null;
myUserName = myID;
};
var config = module.config = { var config = module.config = {
initialState: '{}', initialState: '{}',
websocketURL: Cryptpad.getWebsocketURL(), websocketURL: Cryptpad.getWebsocketURL(),
validateKey: secret.keys.validateKey, validateKey: secret.keys.validateKey,
readOnly: false, // TODO, support read-only readOnly: readOnly,
channel: secret.channel, channel: secret.channel,
crypto: Crypto.createEncryptor(secret.keys), crypto: Crypto.createEncryptor(secret.keys),
setMyID: setMyID,
transformFunction: JsonOT.transform, transformFunction: JsonOT.transform,
}; };
var editHash; var editHash;
var onInit = config.onInit = function (info) { var onInit = config.onInit = function (info) {
userList = info.userList;
var config = {
displayed: ['useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad'],
userData: userData,
readOnly: readOnly,
share: {
secret: secret,
channel: info.channel
},
ifrw: window,
title: {
onRename: renameCb,
defaultName: defaultName,
suggestName: suggestName
},
common: Cryptpad
};
if (readOnly) {delete config.changeNameID; }
toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, userList, config);
var editHash;
var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
if (!readOnly) {
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys); editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
Cryptpad.replaceHash(editHash); }
if (!readOnly) { Cryptpad.replaceHash(editHash); }
}; };
// used for debugging, feel free to remove // used for debugging, feel free to remove
@ -93,20 +168,126 @@ define([
}; };
}; };
var suggestName = function (fallback) {
if (document.title === defaultName) {
return fallback || "";
} else {
return document.title || defaultName;
}
};
var renameCb = function (err, title) {
if (err) { return; }
document.title = title;
onLocal();
};
var updateTitle = function (newTitle) {
if (newTitle === document.title) { return; }
// Change the title now, and set it back to the old value if there is an error
var oldTitle = document.title;
document.title = newTitle;
Cryptpad.renamePad(newTitle, function (err, data) {
if (err) {
console.log("Couldn't set pad title");
console.error(err);
document.title = oldTitle;
return;
}
document.title = data;
$bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
$bar.find('.' + Toolbar.constants.title).find('input').val(data);
});
};
var updateDefaultTitle = function (defaultTitle) {
defaultName = defaultTitle;
$bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);
};
var updateMetadata = function(shjson) {
// Extract the user list (metadata) from the hyperjson
var json = (shjson === "") ? "" : JSON.parse(shjson);
var titleUpdated = false;
if (json && json.metadata) {
if (json.metadata.users) {
var userData = json.metadata.users;
// Update the local user data
addToUserData(userData);
}
if (json.metadata.defaultTitle) {
updateDefaultTitle(json.metadata.defaultTitle);
}
if (typeof json.metadata.title !== "undefined") {
updateTitle(json.metadata.title || defaultName);
titleUpdated = true;
}
}
if (!titleUpdated) {
updateTitle(defaultName);
}
};
var onRemote = config.onRemote = Catch(function () { var onRemote = config.onRemote = Catch(function () {
if (initializing) { return; } if (initializing) { return; }
var userDoc = module.realtime.getUserDoc(); var userDoc = module.realtime.getUserDoc();
canvas.loadFromJSON(userDoc); updateMetadata(userDoc);
var json = JSON.parse(userDoc);
var remoteDoc = json.content;
canvas.loadFromJSON(remoteDoc);
canvas.renderAll(); canvas.renderAll();
}); });
var stringifyInner = function (textValue) {
var obj = {
content: textValue,
metadata: {
users: userData,
defaultTitle: defaultName
}
};
if (!initializing) {
obj.metadata.title = document.title;
}
// stringify the json and send it into chainpad
return JSONSortify(obj);
};
var onLocal = config.onLocal = Catch(function () { var onLocal = config.onLocal = Catch(function () {
if (initializing) { return; } if (initializing) { return; }
var content = JSONSortify(canvas.toDatalessJSON()); if (readOnly) { return; }
var content = stringifyInner(canvas.toDatalessJSON());
module.patchText(content); module.patchText(content);
}); });
var setName = module.setName = function (newName) {
if (typeof(newName) !== 'string') { return; }
var myUserNameTemp = newName.trim();
if(newName.trim().length > 32) {
myUserNameTemp = myUserNameTemp.substr(0, 32);
}
myUserName = myUserNameTemp;
myData[myID] = {
name: myUserName,
uid: Cryptpad.getUid(),
};
addToUserData(myData);
Cryptpad.setAttribute('username', myUserName, function (err, data) {
if (err) {
console.log("Couldn't set username");
console.error(err);
return;
}
onLocal();
});
};
var onReady = config.onReady = function (info) { var onReady = config.onReady = function (info) {
var realtime = module.realtime = info.realtime; var realtime = module.realtime = info.realtime;
module.patchText = TextPatcher.create({ module.patchText = TextPatcher.create({
@ -116,6 +297,27 @@ define([
setEditable(true); setEditable(true);
initializing = false; initializing = false;
onRemote(); onRemote();
Cryptpad.getLastName(function (err, lastName) {
if (err) {
console.log("Could not get previous name");
console.error(err);
return;
}
// Update the toolbar list:
// Add the current user in the metadata if he has edit rights
if (readOnly) { return; }
if (typeof(lastName) === 'string') {
setName(lastName);
} else {
myData[myID] = {
name: "",
uid: Cryptpad.getUid(),
};
addToUserData(myData);
onLocal();
module.$userNameButton.click();
}
});
}; };
var onAbort = config.onAbort = function (info) { var onAbort = config.onAbort = function (info) {
@ -138,4 +340,11 @@ define([
$('#save').on('click', function () { $('#save').on('click', function () {
saveImage(); saveImage();
}); });
};
Cryptpad.ready(function (err, env) {
andThen();
});
});
}); });

Write Preview
Loading…
Cancel
Save