web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Completed adding of customization system and bottom infobar

Browse Source
This commit is contained in:
Caleb James DeLisle 2015-02-02 16:01:33 +01:00
parent 84164123b6
commit 51544db9a2
16 changed files with 189 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
customize.dist/BottomBar.html Normal file
View File

@ -0,0 +1,78 @@
<!-- This is an HTML fragment which is included into the bottom toolbar -->
<div>
<style>
.bottom-bar {
position:fixed;
bottom:0px;
right:0px;
height:4%;
display: inline-block;
width: 100%;
background: rgb(23, 35, 34);
}
.bottom-bar a {
color: rgb(39, 176, 0);
text-decoration: none;
}
.bottom-bar p {
margin: -1px;
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
font-size: 20px;
display:block;
float:left;
padding-top:3px;
}
.bottom-bar-left {
display:block;
float:left;
padding-left:10px;
}
.bottom-bar-right {
display:block;
float:right;
padding-right:20px
}
.bottom-bar-center {
margin-left: auto;
margin-right: auto;
width: 20%
}
.bottom-bar img {
margin-right: 4px;
position: relative;
}
.bottom-bar-heart {
top: 2px;
}
.bottom-bar-xwiki {
top: 3px;
}
</style>
<div class="bottom-bar">
<div class="bottom-bar-left">
<p>
<a href="http://www.xwiki.com/lang/en/Company/Research">
Made with
<img class="bottom-bar-heart" src="/customize/heart.png" />
in
<img class="bottom-bar-fr" src="/customize/fr.png" />
</a>
</p>
</div>
<div class="bottom-bar-center">
<p><a href="https://github.com/xwiki-labs/cryptpad">Fork me on GitHub</a></p>
</div>
<div class="bottom-bar-right">
<p>
<a href="http://www.xwiki.com/" title="XWiki: The best way to organize your information">
Hosted by
<img src="/customize/logo-xwiki2.png"
alt="XWiki SAS"
class="bottom-bar-xwiki"
/>
</a>
</p>
</div>
</div>
</div>

18
customize.dist/DecorateToolbar.js
View File

@ -1,7 +1,17 @@
define([ define([
'/bower_components/jquery/dist/jquery.min.js' '/bower_components/jquery/dist/jquery.min.js'
], function ($) { ], function () {
var main = function ($toolbar) { var $ = window.jQuery;
$toolbar.append('<p>Made With <img src="/customize/"> in Paris</p>') var main = function () {
Dt.main($('.rtwysiwyg-toolbar-rightside')); $.ajax({
url: '/customize/BottomBar.html',
success: function (ret) {
$('iframe').height('96%');
$('body').append(ret);
}
});
};
return {
main: main
};
}); });

0
customize.dist/fr.png Executable file → Normal file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 545 B

After

Width:  |  Height:  |  Size: 545 B

BIN
customize.dist/france.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 545 B

21
customize.dist/index.html
View File

@ -20,8 +20,8 @@
margin-right: 5px; margin-right: 5px;
margin-left: 5px; margin-left: 5px;
} }
.buttons { .buttons h5 {
margin-top: 10px; margin-bottom: 10px;
} }
.button { .button {
padding: 2px 6px 2px 6px; padding: 2px 6px 2px 6px;
@ -31,6 +31,7 @@
border-left: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC;
} }
</style> </style>
<script src="/bower_components/requirejs/require.js"></script>
</head> </head>
<body> <body>
<a href="https://github.com/xwiki-labs/cryptpad"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"></a> <a href="https://github.com/xwiki-labs/cryptpad"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"></a>
@ -56,10 +57,18 @@
the NSA mad enough for them to use an active attack against you, Great Success Highfive, now take the NSA mad enough for them to use an active attack against you, Great Success Highfive, now take
the battery out of your computer before it spawns Agent Smith.</p> the battery out of your computer before it spawns Agent Smith.</p>
<center> <center>
<h5>Try it out!</h5> <noscript><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</noscript>
<div class="buttons"> <script>
<a class="button create" href="pad">CREATE PAD</a> require(['/common/crypto.js'], function (Crypto) {
<a class="button create" href="sheet">CREATE SPREADSHEET</a> document.getElementById('buttons').setAttribute('style', '');
document.getElementById('create-pad').setAttribute('href', '/pad/#' + Crypto.genKey());
document.getElementById('create-sheet').setAttribute('href', '/sheet/#' + Crypto.genKey());
});
</script>
<div id="buttons" class="buttons" style="display:none;">
<h5>Try it out!</h5>
<a id="create-pad" class="button create" href="pad">CREATE PAD</a>
<a id="create-sheet" class="button create" href="sheet">CREATE SPREADSHEET</a>
</div> </div>
</center> </center>
</div> </div>

BIN
customize.dist/logo-xwiki2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

4
customize.dist/pad.js
View File

@ -1,6 +1,6 @@
require([ require([
'/customize/DecorateToolbar.js', '/customize/DecorateToolbar.js',
'/bower_components/jquery/dist/jquery.min.js' '/bower_components/jquery/dist/jquery.min.js'
], function (Dt, $) { ], function (Dt) {
Dt.main($('.rtwysiwyg-toolbar-rightside')); Dt.main(window.$('#bottom-bar'));
}); });

6
customize.dist/sheet.js Normal file
View File

@ -0,0 +1,6 @@
require([
'/customize/DecorateToolbar.js',
'/bower_components/jquery/dist/jquery.min.js'
], function (Dt) {
Dt.main(window.$('#bottom-bar'));
});

2
server.js
View File

@ -24,7 +24,7 @@ if (!Fs.existsSync(__dirname + "/customize")) {
console.log("Cryptpad is customizable, see customize.dist/readme.md for details"); console.log("Cryptpad is customizable, see customize.dist/readme.md for details");
} }
app.use("/customize/", Express.static(__dirname + customize)); app.use("/customize/", Express.static(__dirname + customize));
app.get("/", function(req, res) { res.sendfile(__dirname + customize + '/index.html'); }); app.get("/", function(req, res) { res.sendFile(__dirname + customize + '/index.html'); });
var httpsOpts; var httpsOpts;
if (config.privKeyAndCertFiles) { if (config.privKeyAndCertFiles) {

25
www/common/toolbar.js
View File

@ -48,6 +48,9 @@ define([
' display: inline-block;', ' display: inline-block;',
' width: 100%;', ' width: 100%;',
'}', '}',
'.' + TOOLBAR_CLS + ' a {',
' float: right;',
'}',
'.' + TOOLBAR_CLS + ' div {', '.' + TOOLBAR_CLS + ' div {',
' padding: 0 10px;', ' padding: 0 10px;',
' height: 1.5em;', ' height: 1.5em;',
@ -55,6 +58,15 @@ define([
' line-height: 25px;', ' line-height: 25px;',
' height: 22px;', ' height: 22px;',
'}', '}',
'.' + TOOLBAR_CLS + ' div.rtwysiwyg-back {',
' padding: 0;',
' font-weight: bold;',
' cursor: pointer;',
' color: #000;',
'}',
'.rtwysiwyg-toolbar-leftside div {',
' float: left;',
'}',
'.rtwysiwyg-toolbar-leftside {', '.rtwysiwyg-toolbar-leftside {',
' float: left;', ' float: left;',
'}', '}',
@ -79,6 +91,16 @@ define([
return toolbar; return toolbar;
}; };
var createEscape = function ($container) {
var id = uid();
$container.append('<div class="rtwysiwyg-back" id="' + id + '">&#8656; Back</div>');
var $ret = $container.find('#'+id);
$ret.on('click', function () {
window.location.href = '/';
});
return $ret[0];
};
var createSpinner = function ($container) { var createSpinner = function ($container) {
var id = uid(); var id = uid();
$container.append('<div class="rtwysiwyg-spinner" id="'+id+'"></div>'); $container.append('<div class="rtwysiwyg-spinner" id="'+id+'"></div>');
@ -97,7 +119,7 @@ define([
var createUserList = function ($container) { var createUserList = function ($container) {
var id = uid(); var id = uid();
$container.prepend('<div class="' + USER_LIST_CLS + '" id="'+id+'"></div>'); $container.append('<div class="' + USER_LIST_CLS + '" id="'+id+'"></div>');
return $container.find('#'+id)[0]; return $container.find('#'+id)[0];
}; };
@ -137,6 +159,7 @@ define([
var create = function ($container, myUserName, realtime) { var create = function ($container, myUserName, realtime) {
var toolbar = createRealtimeToolbar($container); var toolbar = createRealtimeToolbar($container);
createEscape(toolbar.find('.rtwysiwyg-toolbar-leftside'));
var userListElement = createUserList(toolbar.find('.rtwysiwyg-toolbar-leftside')); var userListElement = createUserList(toolbar.find('.rtwysiwyg-toolbar-leftside'));
var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside')); var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside'));
var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside')); var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside'));

17
www/pad/index.html
View File

@ -3,9 +3,24 @@
<head> <head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<script data-main="main" src="/bower_components/requirejs/require.js"></script> <script data-main="main" src="/bower_components/requirejs/require.js"></script>
<style>
#pad-iframe {
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
}
</style>
</head> </head>
<body> <body>
<textarea style="display:none" cols="80" id="editor1" name="editor1" rows="10"></textarea> <iframe id="pad-iframe" src="inner.html"></iframe>
</body> </body>
</html> </html>

12
www/pad/inner.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea style="display:none" id="editor1" name="editor1"></textarea>
</body>
</html>

19
www/pad/main.js
View File

@ -4,10 +4,11 @@ define([
'/common/messages.js', '/common/messages.js',
'/common/crypto.js', '/common/crypto.js',
'/bower_components/jquery/dist/jquery.min.js', '/bower_components/jquery/dist/jquery.min.js',
'/bower_components/ckeditor/ckeditor.js', '/customize/pad.js'
], function (Config, RTWysiwyg, Messages, Crypto) { ], function (Config, RTWysiwyg, Messages, Crypto) {
var Ckeditor = window.CKEDITOR;
var $ = window.jQuery; var $ = window.jQuery;
var ifrw = $('#pad-iframe')[0].contentWindow;
var Ckeditor = ifrw.CKEDITOR;
$(function () { $(function () {
$(window).on('hashchange', function() { $(window).on('hashchange', function() {
@ -20,17 +21,19 @@ define([
var key = Crypto.parseKey(window.location.hash.substring(1)); var key = Crypto.parseKey(window.location.hash.substring(1));
var editor = Ckeditor.replace('editor1', { var editor = Ckeditor.replace('editor1', {
removeButtons: 'Source,Maximize', removeButtons: 'Source,Maximize',
// This plugin inserts html crap into the document which is not part of the document // magicline plugin inserts html crap into the document which is not part of the
// itself and causes problems when it's sent across the wire and reflected back. // document itself and causes problems when it's sent across the wire and reflected back
removePlugins: 'magicline' removePlugins: 'magicline,resize'
}); });
editor.on('instanceReady', function () { editor.on('instanceReady', function () {
editor.execCommand('maximize'); editor.execCommand('maximize');
var ifr = window.ifr = $('iframe')[0];
ifr.contentDocument.body.innerHTML = Messages.initialState; // (contenteditable) iframe in an iframe
ifrw.$('iframe')[0].contentDocument.body.innerHTML = Messages.initialState;
var rtw = var rtw =
RTWysiwyg.start(Config.websocketURL, RTWysiwyg.start(ifrw,
Config.websocketURL,
Crypto.rand64(8), Crypto.rand64(8),
key.channel, key.channel,
key.cryptKey); key.cryptKey);

7
www/pad/realtime-wysiwyg.js
View File

@ -247,10 +247,11 @@ window.ErrorBox = ErrorBox;
return out; return out;
}; };
var start = module.exports.start = function (websocketUrl, userName, channel, cryptKey) var start = module.exports.start =
function (window, websocketUrl, userName, channel, cryptKey)
{ {
var passwd = 'y'; var passwd = 'y';
var wysiwygDiv = document.getElementById('cke_1_contents'); var wysiwygDiv = window.document.getElementById('cke_1_contents');
var ifr = wysiwygDiv.getElementsByTagName('iframe')[0]; var ifr = wysiwygDiv.getElementsByTagName('iframe')[0];
var doc = ifr.contentWindow.document; var doc = ifr.contentWindow.document;
var socket = makeWebsocket(websocketUrl); var socket = makeWebsocket(websocketUrl);
@ -303,7 +304,7 @@ console.log(new Error().stack);
{ transformFunction: Otaml.transform }); { transformFunction: Otaml.transform });
var toolbar = realtime.toolbar = var toolbar = realtime.toolbar =
Toolbar.create($('#cke_1_toolbox'), userName, realtime); Toolbar.create(window.$('#cke_1_toolbox'), userName, realtime);
onEvent = function () { onEvent = function () {
if (isErrorState) { return; } if (isErrorState) { return; }

8
www/sheet/index.html
View File

@ -4,26 +4,26 @@
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<script data-main="main" src="/bower_components/requirejs/require.js"></script> <script data-main="main" src="/bower_components/requirejs/require.js"></script>
<style> <style>
iframe { #sheet-iframe {
position:fixed; position:fixed;
top:0px; top:0px;
left:0px; left:0px;
bottom:0px; bottom:0px;
right:0px; right:0px;
width:100%; width:100%;
height:100%; height:96%;
border:none; border:none;
margin:0; margin:0;
padding:0; padding:0;
overflow:hidden; overflow:hidden;
} }
textarea { #sheet-json {
display:none; display:none;
} }
</style> </style>
</head> </head>
<body> <body>
<iframe src="inner.html"></iframe>
<textarea id="sheet-json"></textarea> <textarea id="sheet-json"></textarea>
<iframe id="sheet-iframe" src="inner.html"></iframe>
</body> </body>
</html> </html>

3
www/sheet/main.js
View File

@ -5,7 +5,8 @@ define([
'/common/toolbar.js', '/common/toolbar.js',
'/common/chainpad.js', '/common/chainpad.js',
'/bower_components/jquery/dist/jquery.min.js', '/bower_components/jquery/dist/jquery.min.js',
'/common/otaml.js' '/common/otaml.js',
'/customize/sheet.js'
], function (Config, Messages, Crypto, Toolbar) { ], function (Config, Messages, Crypto, Toolbar) {
var $ = jQuery; var $ = jQuery;
var ChainPad = window.ChainPad; var ChainPad = window.ChainPad;