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

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'));

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>

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);

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; }

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>

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;