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

Completed adding of customization system and bottom infobar

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([
'/bower_components/jquery/dist/jquery.min.js'
], function ($) {
var main = function ($toolbar) {
$toolbar.append('<p>Made With <img src="/customize/"> in Paris</p>')
Dt.main($('.rtwysiwyg-toolbar-rightside'));
], function () {
var $ = window.jQuery;
var main = function () {
$.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

19
customize.dist/index.html
View File

@ -20,8 +20,8 @@
margin-right: 5px;
margin-left: 5px;
}
.buttons {
margin-top: 10px;
.buttons h5 {
margin-bottom: 10px;
}
.button {
padding: 2px 6px 2px 6px;
@ -31,6 +31,7 @@
border-left: 1px solid #CCCCCC;
}
</style>
<script src="/bower_components/requirejs/require.js"></script>
</head>
<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>
@ -56,10 +57,18 @@
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>
<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>
<div class="buttons">
<a class="button create" href="pad">CREATE PAD</a>
<a class="button create" href="sheet">CREATE SPREADSHEET</a>
<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>
</center>
</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([
'/customize/DecorateToolbar.js',
'/bower_components/jquery/dist/jquery.min.js'
], function (Dt, $) {
Dt.main($('.rtwysiwyg-toolbar-rightside'));
], function (Dt) {
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");
}
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;
if (config.privKeyAndCertFiles) {

25
www/common/toolbar.js
View File

@ -48,6 +48,9 @@ define([
' display: inline-block;',
' width: 100%;',
'}',
'.' + TOOLBAR_CLS + ' a {',
' float: right;',
'}',
'.' + TOOLBAR_CLS + ' div {',
' padding: 0 10px;',
' height: 1.5em;',
@ -55,6 +58,15 @@ define([
' line-height: 25px;',
' 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 {',
' float: left;',
'}',
@ -79,6 +91,16 @@ define([
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 id = uid();
$container.append('<div class="rtwysiwyg-spinner" id="'+id+'"></div>');
@ -97,7 +119,7 @@ define([
var createUserList = function ($container) {
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];
};
@ -137,6 +159,7 @@ define([
var create = function ($container, myUserName, realtime) {
var toolbar = createRealtimeToolbar($container);
createEscape(toolbar.find('.rtwysiwyg-toolbar-leftside'));
var userListElement = createUserList(toolbar.find('.rtwysiwyg-toolbar-leftside'));
var spinner = createSpinner(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>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<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>
<body>
<textarea style="display:none" cols="80" id="editor1" name="editor1" rows="10"></textarea>
<iframe id="pad-iframe" src="inner.html"></iframe>
</body>
</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/crypto.js',
'/bower_components/jquery/dist/jquery.min.js',
'/bower_components/ckeditor/ckeditor.js',
'/customize/pad.js'
], function (Config, RTWysiwyg, Messages, Crypto) {
var Ckeditor = window.CKEDITOR;
var $ = window.jQuery;
var ifrw = $('#pad-iframe')[0].contentWindow;
var Ckeditor = ifrw.CKEDITOR;
$(function () {
$(window).on('hashchange', function() {
@ -20,17 +21,19 @@ define([
var key = Crypto.parseKey(window.location.hash.substring(1));
var editor = Ckeditor.replace('editor1', {
removeButtons: 'Source,Maximize',
// This plugin inserts html crap into the document which is not part of the document
// itself and causes problems when it's sent across the wire and reflected back.
removePlugins: 'magicline'
// magicline plugin inserts html crap into the document which is not part of the
// document itself and causes problems when it's sent across the wire and reflected back
removePlugins: 'magicline,resize'
});
editor.on('instanceReady', function () {
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 =
RTWysiwyg.start(Config.websocketURL,
RTWysiwyg.start(ifrw,
Config.websocketURL,
Crypto.rand64(8),
key.channel,
key.cryptKey);

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

@ -247,10 +247,11 @@ window.ErrorBox = ErrorBox;
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 wysiwygDiv = document.getElementById('cke_1_contents');
var wysiwygDiv = window.document.getElementById('cke_1_contents');
var ifr = wysiwygDiv.getElementsByTagName('iframe')[0];
var doc = ifr.contentWindow.document;
var socket = makeWebsocket(websocketUrl);
@ -303,7 +304,7 @@ console.log(new Error().stack);
{ transformFunction: Otaml.transform });
var toolbar = realtime.toolbar =
Toolbar.create($('#cke_1_toolbox'), userName, realtime);
Toolbar.create(window.$('#cke_1_toolbox'), userName, realtime);
onEvent = function () {
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"/>
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
<style>
iframe {
#sheet-iframe {
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
height:96%;
border:none;
margin:0;
padding:0;
overflow:hidden;
}
textarea {
#sheet-json {
display:none;
}
</style>
</head>
<body>
<iframe src="inner.html"></iframe>
<textarea id="sheet-json"></textarea>
<iframe id="sheet-iframe" src="inner.html"></iframe>
</body>
</html>

3
www/sheet/main.js
View File

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