implement import and export in /pad/

www/common/toolbar.js

@@ -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>',
+        var swap = function (str, dict) {
-            '.' + TOOLBAR_CLS + ' {',
+            return str.replace(/\{\{(.*?)\}\}/g, function (all, block) {
-            '    color: #666;',
+                //console.log(block);
-            '    font-weight: bold;',
+                return dict[block] || block;
-//            '    background-color: #f0f0ee;',
+            });
-//            '    border-bottom: 1px solid #DDD;',
+        };
-//            '    border-top: 3px solid #CCC;',
+
-//            '    border-right: 2px solid #CCC;',
+        var css = swap(function(){/*
-//            '    border-left: 2px solid #CCC;',
+<style>
-            '    height: 26px;',
+.{{TOOLBAR_CLS}} {
-            '    margin-bottom: -3px;',
+    color: #666;
-            '    display: inline-block;',
+    font-weight: bold;
-            '    width: 100%;',
+    height: 26px;
-            '}',
+    margin-bottom: -3px;
-            '.' + TOOLBAR_CLS + ' a {',
+    display: inline-block;
-            '    float: right;',
+    width: 100%;
-            '}',
+}
-            '.' + TOOLBAR_CLS + ' div {',
+.{{TOOLBAR_CLS}} a {
-            '    padding: 0 10px;',
+    float: right;
-            '    height: 1.5em;',
+}
-//            '    background: #f0f0ee;',
+.{{TOOLBAR_CLS}} div {
-            '    line-height: 25px;',
+    padding: 0 10px;
-            '    height: 22px;',
+    height: 1.5em;
-            '}',
+    line-height: 25px;
-            '.' + TOOLBAR_CLS + ' div.rtwysiwyg-back {',
+    height: 22px;
-            '    padding: 0;',
+}
-            '    font-weight: bold;',
+.{{TOOLBAR_CLS}} div.rtwysiwyg-back {
-            '    cursor: pointer;',
+    padding: 0;
-            '    color: #000;',
+    font-weight: bold;
-            '}',
+    cursor: pointer;
-            '.' + USERNAME_BUTTON_GROUP + ' {',
+    color: #000;
-            '    float: left;',
+}
-            '}',
+.{{USERNAME_BUTTON_GROUP}} {
-            '.' + USERNAME_BUTTON_GROUP + ' button {',
+    float: left;
-            '    padding: 0;',
+    cursor: pointer;
-            '    margin-right: 5px;',
+}
-            '}',
+.{{USERNAME_BUTTON_GROUP}} button {
-            '.rtwysiwyg-toolbar-leftside div {',
+    padding: 0;
-            '    float: left;',
+    margin-right: 5px;
-            '}',
+}
-            '.rtwysiwyg-toolbar-leftside {',
+.rtwysiwyg-toolbar-leftside div {
-            '    float: left;',
+    float: left;
-            '}',
+}
-            '.rtwysiwyg-toolbar-rightside {',
+.rtwysiwyg-toolbar-leftside {
-            '    float: right;',
+    float: left;
-            '}',
+}
-            '.rtwysiwyg-lag {',
+.rtwysiwyg-toolbar-rightside {
-            '    float: right;',
+    float: right;
-            '}',
+}
-            '.rtwysiwyg-spinner {',
+.rtwysiwyg-lag {
-            '    float: left;',
+    float: right;
-            '}',
+}
-            '.gwt-TabBar {',
+.rtwysiwyg-spinner {
-            '    display:none;',
+    float: left;
-            '}',
+}
-            '.' + DEBUG_LINK_CLS + ':link { color:transparent; }',
+.gwt-TabBar {
-            '.' + DEBUG_LINK_CLS + ':link:hover { color:blue; }',
+    display:none;
-            '.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;}',
+.{{DEBUG_LINK_CLS}}:link {
-            '.' + TOOLBAR_CLS + ' ' + SAVE_ELEMENT_CLS + '{ float: right; margin-right: 5px;                        }',
+    color:transparent;
-
+}
-            '</style>'
+.{{DEBUG_LINK_CLS}}:link:hover {
-         ].join('\n'));
+    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) {

www/pad/main.js

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