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

Completed adding of customization system and bottom infobar

Browse Source
pull/1/head
Caleb James DeLisle 10 years ago
parent 84164123b6
commit 51544db9a2
16 changed files with 189 additions and 31 deletions
Show Stats Download Patch File Download Diff File

78
customize.dist/BottomBar.html
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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

19
customize.dist/index.html
Unescape Escape 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>
<noscript><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</noscript>
<script>
require(['/common/crypto.js'], function (Crypto) {
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> <h5>Try it out!</h5>
<div class="buttons"> <a id="create-pad" class="button create" href="pad">CREATE PAD</a>
<a class="button create" href="pad">CREATE PAD</a> <a id="create-sheet" class="button create" href="sheet">CREATE SPREADSHEET</a>
<a class="button create" href="sheet">CREATE SPREADSHEET</a>
</div> </div>
</center> </center>
</div> </div>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

4
customize.dist/pad.js
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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;

Write Preview
Loading…
Cancel
Save