mirror of https://github.com/xwiki-labs/cryptpad
Completed adding of customization system and bottom infobar
This commit is contained in:
parent
84164123b6
commit
51544db9a2
|
@ -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>
|
|
@ -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
|
||||
};
|
||||
});
|
||||
|
|
Before Width: | Height: | Size: 545 B After Width: | Height: | Size: 545 B |
Binary file not shown.
Before Width: | Height: | Size: 545 B |
|
@ -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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 4.8 KiB |
|
@ -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'));
|
||||
});
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
require([
|
||||
'/customize/DecorateToolbar.js',
|
||||
'/bower_components/jquery/dist/jquery.min.js'
|
||||
], function (Dt) {
|
||||
Dt.main(window.$('#bottom-bar'));
|
||||
});
|
|
@ -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) {
|
||||
|
|
|
@ -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 + '">⇐ 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'));
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
|
|
|
@ -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; }
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue