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

implement import and export in /pad/

Browse Source
This commit is contained in:
ansuz 2016-06-22 17:00:07 +02:00
parent 34bb85799e
commit 242c9a99e3
2 changed files with 169 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
www/common/toolbar.js
View File

@ -15,6 +15,7 @@ define([
var LAG_ELEM_CLS = 'rtwysiwyg-lag'; var LAG_ELEM_CLS = 'rtwysiwyg-lag';
var SAVE_ELEMENT_CLS = 'cryptpad-saveContent'; var SAVE_ELEMENT_CLS = 'cryptpad-saveContent';
var LOAD_ELEMENT_CLS = 'cryptpad-loadContent';
/** The toolbar class which contains the user list, debug link and lag. */ /** The toolbar class which contains the user list, debug link and lag. */
var TOOLBAR_CLS = 'rtwysiwyg-toolbar'; var TOOLBAR_CLS = 'rtwysiwyg-toolbar';
@ -38,70 +39,106 @@ define([
'</div>' '</div>'
); );
var toolbar = $container.find('#'+id); var toolbar = $container.find('#'+id);
toolbar.append([
'<style>',
'.' + TOOLBAR_CLS + ' {',
' color: #666;',
' font-weight: bold;',
// ' background-color: #f0f0ee;',
// ' border-bottom: 1px solid #DDD;',
// ' border-top: 3px solid #CCC;',
// ' border-right: 2px solid #CCC;',
// ' border-left: 2px solid #CCC;',
' height: 26px;',
' margin-bottom: -3px;',
' display: inline-block;',
' width: 100%;',
'}',
'.' + TOOLBAR_CLS + ' a {',
' float: right;',
'}',
'.' + TOOLBAR_CLS + ' div {',
' padding: 0 10px;',
' height: 1.5em;',
// ' background: #f0f0ee;',
' line-height: 25px;',
' height: 22px;',
'}',
'.' + TOOLBAR_CLS + ' div.rtwysiwyg-back {',
' padding: 0;',
' font-weight: bold;',
' cursor: pointer;',
' color: #000;',
'}',
'.' + USERNAME_BUTTON_GROUP + ' {',
' float: left;',
'}',
'.' + USERNAME_BUTTON_GROUP + ' button {',
' padding: 0;',
' margin-right: 5px;',
'}',
'.rtwysiwyg-toolbar-leftside div {',
' float: left;',
'}',
'.rtwysiwyg-toolbar-leftside {',
' float: left;',
'}',
'.rtwysiwyg-toolbar-rightside {',
' float: right;',
'}',
'.rtwysiwyg-lag {',
' float: right;',
'}',
'.rtwysiwyg-spinner {',
' float: left;',
'}',
'.gwt-TabBar {',
' display:none;',
'}',
'.' + DEBUG_LINK_CLS + ':link { color:transparent; }',
'.' + DEBUG_LINK_CLS + ':link:hover { color:blue; }',
'.gwt-TabPanelBottom { border-top: 0 none; }',
'.' + TOOLBAR_CLS + ' button { box-sizing: border-box; height: 101%; background-color: inherit; border: 1px solid #A6A6A6; border-radius: 5px; margin-right: 5px;}',
'.' + TOOLBAR_CLS + ' ' + SAVE_ELEMENT_CLS + '{ float: right; margin-right: 5px; }',
'</style>' var swap = function (str, dict) {
].join('\n')); return str.replace(/\{\{(.*?)\}\}/g, function (all, block) {
//console.log(block);
return dict[block] || block;
});
};
var css = swap(function(){/*
<style>
.{{TOOLBAR_CLS}} {
color: #666;
font-weight: bold;
height: 26px;
margin-bottom: -3px;
display: inline-block;
width: 100%;
}
.{{TOOLBAR_CLS}} a {
float: right;
}
.{{TOOLBAR_CLS}} div {
padding: 0 10px;
height: 1.5em;
line-height: 25px;
height: 22px;
}
.{{TOOLBAR_CLS}} div.rtwysiwyg-back {
padding: 0;
font-weight: bold;
cursor: pointer;
color: #000;
}
.{{USERNAME_BUTTON_GROUP}} {
float: left;
cursor: pointer;
}
.{{USERNAME_BUTTON_GROUP}} button {
padding: 0;
margin-right: 5px;
}
.rtwysiwyg-toolbar-leftside div {
float: left;
}
.rtwysiwyg-toolbar-leftside {
float: left;
}
.rtwysiwyg-toolbar-rightside {
float: right;
}
.rtwysiwyg-lag {
float: right;
}
.rtwysiwyg-spinner {
float: left;
}
.gwt-TabBar {
display:none;
}
.{{DEBUG_LINK_CLS}}:link {
color:transparent;
}
.{{DEBUG_LINK_CLS}}:link:hover {
color:blue;
}
.gwt-TabPanelBottom {
border-top: 0 none;
}
.{{TOOLBAR_CLS}} button {
box-sizing: border-box;
height: 101%;
background-color: inherit;
border: 1px solid #A6A6A6;
border-radius: 5px;
margin-right: 5px;
padding-right: 5px;
padding-left: 5px;
}
.{{TOOLBAR_CLS}} .{{SAVE_ELEMENT_CLS}}, .{{TOOLBAR_CLS}} .{{LOAD_ELEMENT_CLS}} {
float: right;
margin-right: 5px;
cursor: pointer;
}
.{{TOOLBAR_CLS}} .{{SAVE_ELEMENT_CLS}}:after {
content: 'EXPORT';
}
.{{TOOLBAR_CLS}} .{{LOAD_ELEMENT_CLS}}:after {
content: 'IMPORT';
}
</style>
*/}.toString().slice(14,-3), {
TOOLBAR_CLS: TOOLBAR_CLS,
SAVE_ELEMENT_CLS: SAVE_ELEMENT_CLS,
LOAD_ELEMENT_CLS: LOAD_ELEMENT_CLS,
USERNAME_BUTTON_GROUP: USERNAME_BUTTON_GROUP,
DEBUG_LINK_CLS: DEBUG_LINK_CLS,
}).trim();
toolbar.append(css);
return toolbar; return toolbar;
}; };
@ -182,7 +219,12 @@ define([
}; };
var createSaveElement = function (id, $container) { var createSaveElement = function (id, $container) {
$container.append('<button class="'+ SAVE_ELEMENT_CLS + '" id="' + id + '">SAVE</button>'); $container.append('<button class="'+ SAVE_ELEMENT_CLS + '" id="' + id + '"></button>');
return $container.find('#'+id)[0];
};
var createLoadElement = function (id, $container) {
$container.append('<button class="'+ LOAD_ELEMENT_CLS + '" id="' + id + '"></button>');
return $container.find('#'+id)[0]; return $container.find('#'+id)[0];
}; };
@ -212,8 +254,10 @@ define([
var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside')); var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside'));
var userData = config.userData; var userData = config.userData;
var changeNameID = config.changeNameID; var changeNameID = config.changeNameID;
var saveContentID = config.saveContentID; var saveContentID = config.saveContentID || config.exportContentID;
var loadContentID = config.loadContentID || config.importContentID;
var saveElement; var saveElement;
var loadElement;
// Check if the user is allowed to change his name // Check if the user is allowed to change his name
if(changeNameID) { if(changeNameID) {
@ -225,6 +269,10 @@ define([
saveElement = createSaveElement(saveContentID, toolbar.find('.rtwysiwyg-toolbar-rightside')); saveElement = createSaveElement(saveContentID, toolbar.find('.rtwysiwyg-toolbar-rightside'));
} }
if (loadContentID) {
loadElement = createLoadElement(loadContentID, toolbar.find('.rtwysiwyg-toolbar-rightside'));
}
var connected = false; var connected = false;
userList.onChange = function(newUserData) { userList.onChange = function(newUserData) {

57
www/pad/main.js
View File

@ -12,6 +12,7 @@ define([
'json.sortify', 'json.sortify',
'/bower_components/textpatcher/TextPatcher.amd.js', '/bower_components/textpatcher/TextPatcher.amd.js',
'/common/cryptpad-common.js', '/common/cryptpad-common.js',
'/bower_components/file-saver/FileSaver.min.js',
'/bower_components/diff-dom/diffDOM.js', '/bower_components/diff-dom/diffDOM.js',
'/bower_components/jquery/dist/jquery.min.js', '/bower_components/jquery/dist/jquery.min.js',
'/customize/pad.js' '/customize/pad.js'
@ -19,6 +20,7 @@ define([
Toolbar, Cursor, JsonOT, TypingTest, JSONSortify, TextPatcher, Cryptpad) { Toolbar, Cursor, JsonOT, TypingTest, JSONSortify, TextPatcher, Cryptpad) {
var $ = window.jQuery; var $ = window.jQuery;
var saveAs = window.saveAs;
var ifrw = $('#pad-iframe')[0].contentWindow; var ifrw = $('#pad-iframe')[0].contentWindow;
var Ckeditor; // to be initialized later... var Ckeditor; // to be initialized later...
var DiffDom = window.diffDOM; var DiffDom = window.diffDOM;
@ -98,6 +100,13 @@ define([
var diffOptions = { var diffOptions = {
preDiffApply: function (info) { preDiffApply: function (info) {
if (info.node && info.node.tagName === 'BODY') {
if (info.diff.action === 'removeAttribute' &&
['class', 'spellcheck'].indexOf(info.diff.name) !== -1) {
return true;
}
}
/* DiffDOM will filter out magicline plugin elements /* DiffDOM will filter out magicline plugin elements
in practice this will make it impossible to use it in practice this will make it impossible to use it
while someone else is typing, which could be annoying. while someone else is typing, which could be annoying.
@ -312,16 +321,62 @@ define([
} }
}; };
var getHTML = function (Dom) {
var data = inner.innerHTML;
Dom = Dom || (new DOMParser()).parseFromString(data,"text/html");
return ('<!DOCTYPE html>\n' +
'<html>\n' +
Dom.head.outerHTML + '\n' +
Dom.body.outerHTML);
};
var domFromHTML = function (html) {
return new DOMParser().parseFromString(html, 'text/html');
};
var exportFile = function () {
var html = getHTML();
console.log(html === getHTML(domFromHTML(html)));
console.log(html);
var filename = window.prompt('What would you like to name your file?', "MyPad.html");
if (filename) {
var blob = new Blob([html], {type: "text/html;charset=utf-8"});
saveAs(blob, filename);
}
};
var onInit = realtimeOptions.onInit = function (info) { var onInit = realtimeOptions.onInit = function (info) {
var $bar = $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox'); var $bar = $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox');
toolbarList = info.userList; toolbarList = info.userList;
var config = { var config = {
userData: userList, userData: userList,
changeNameID: 'cryptpad-changeName' changeNameID: 'cryptpad-changeName',
exportContentID: 'cryptpad-saveContent',
importContentID: 'cryptpad-loadContent',
}; };
toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config); toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
createChangeName('cryptpad-changeName', $bar); createChangeName('cryptpad-changeName', $bar);
var $saver = $bar.find('#cryptpad-saveContent').click(exportFile);
var $loader = $bar.find('#cryptpad-loadContent').click(function () {
var $files = $('<input type="file">').click()
$files.on('change', function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var result = e.target.result;
console.log(result);
var shjson = stringify(Hyperjson.fromDOM(domFromHTML(result).body));
applyHjson(shjson);
onLocal();
};
reader.readAsText(file, 'text/plain');
});
});
// set the hash // set the hash
window.location.hash = info.channel + secret.key; window.location.hash = info.channel + secret.key;
Cryptpad.rememberPad(); Cryptpad.rememberPad();