mirror of https://github.com/xwiki-labs/cryptpad
implement import and export in /pad/
This commit is contained in:
ansuz
parent
34bb85799e
commit
242c9a99e3
|
|
@ -15,6 +15,7 @@ define([
|
|||
var LAG_ELEM_CLS = 'rtwysiwyg-lag';
|
||||
|
||||
var SAVE_ELEMENT_CLS = 'cryptpad-saveContent';
|
||||
var LOAD_ELEMENT_CLS = 'cryptpad-loadContent';
|
||||
|
||||
/** The toolbar class which contains the user list, debug link and lag. */
|
||||
var TOOLBAR_CLS = 'rtwysiwyg-toolbar';
|
||||
|
|
@ -38,70 +39,106 @@ define([
|
|||
'</div>'
|
||||
);
|
||||
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>'
|
||||
].join('\n'));
|
||||
var swap = function (str, dict) {
|
||||
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;
|
||||
};
|
||||
|
||||
|
|
@ -182,7 +219,12 @@ define([
|
|||
};
|
||||
|
||||
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];
|
||||
};
|
||||
|
||||
|
|
@ -212,8 +254,10 @@ define([
|
|||
var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside'));
|
||||
var userData = config.userData;
|
||||
var changeNameID = config.changeNameID;
|
||||
var saveContentID = config.saveContentID;
|
||||
var saveContentID = config.saveContentID || config.exportContentID;
|
||||
var loadContentID = config.loadContentID || config.importContentID;
|
||||
var saveElement;
|
||||
var loadElement;
|
||||
|
||||
// Check if the user is allowed to change his name
|
||||
if(changeNameID) {
|
||||
|
|
@ -225,6 +269,10 @@ define([
|
|||
saveElement = createSaveElement(saveContentID, toolbar.find('.rtwysiwyg-toolbar-rightside'));
|
||||
}
|
||||
|
||||
if (loadContentID) {
|
||||
loadElement = createLoadElement(loadContentID, toolbar.find('.rtwysiwyg-toolbar-rightside'));
|
||||
}
|
||||
|
||||
var connected = false;
|
||||
|
||||
userList.onChange = function(newUserData) {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ define([
|
|||
'json.sortify',
|
||||
'/bower_components/textpatcher/TextPatcher.amd.js',
|
||||
'/common/cryptpad-common.js',
|
||||
'/bower_components/file-saver/FileSaver.min.js',
|
||||
'/bower_components/diff-dom/diffDOM.js',
|
||||
'/bower_components/jquery/dist/jquery.min.js',
|
||||
'/customize/pad.js'
|
||||
|
|
@ -19,6 +20,7 @@ define([
|
|||
Toolbar, Cursor, JsonOT, TypingTest, JSONSortify, TextPatcher, Cryptpad) {
|
||||
|
||||
var $ = window.jQuery;
|
||||
var saveAs = window.saveAs;
|
||||
var ifrw = $('#pad-iframe')[0].contentWindow;
|
||||
var Ckeditor; // to be initialized later...
|
||||
var DiffDom = window.diffDOM;
|
||||
|
|
@ -98,6 +100,13 @@ define([
|
|||
|
||||
var diffOptions = {
|
||||
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
|
||||
in practice this will make it impossible to use it
|
||||
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 $bar = $('#pad-iframe')[0].contentWindow.$('#cke_1_toolbox');
|
||||
toolbarList = info.userList;
|
||||
var config = {
|
||||
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);
|
||||
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
|
||||
window.location.hash = info.channel + secret.key;
|
||||
Cryptpad.rememberPad();
|
||||
|
|
|
|||
Loading…
Reference in New Issue