Skip to content

C
cribjs-editor
Commit 710afd9b authored by Cédric Le Ninivin's avatar Cédric Le Ninivin
Browse files
Options

Export/Import: Improve and fix 

* Fix import Torrent to get a readable blob
* Add meaningful placeholders
* Add meaningful labels
* Add In-page notification
* Fix Import Path processing
parent 3acafb15
Show whitespace changes
Inline Side-by-side
Showing with 130 additions and 52 deletions
gadget/gadget_cribjs_page_save_load.html
View file @ 710afd9b
...@@ -19,12 +19,15 @@ ...@@ -19,12 +19,15 @@
</head> </head>
<body> <body>
<div class="nav_content save_load container"> <div class="nav_content save_load container">
<h3>Storage</h3>
<form class="crib-save-to-zip form-inline"> <form class="crib-save-to-zip form-inline">
<h3>Export to Zip</h3> <h3>Download Zip</h3>
<div class="info crib-save-to-zip-status" style="display:none; background-color: #dff0d8;"></div>
<div class="form-group"> <div class="form-group">
<label>Export to zip: <label>Path to Export:
<input class="save-zip-path form-control" name="save-zip-path" type="text" size="30" value=""></label> <input class="save-zip-path form-control"
name="save-zip-path"
type="text" size="30" value=""
placeholder="Leave Empty to Export everything"></label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label> to: <label> to:
...@@ -32,24 +35,33 @@ ...@@ -32,24 +35,33 @@
</div> </div>
<button name="save-zip-contents" type="submit" class="btn btn-default">Export to Zip</button> <button name="save-zip-contents" type="submit" class="btn btn-default">Export to Zip</button>
</form> </form>
<div><span class="info crib-save-to-zip-status"></span></div>
<form class="crib-load-from-zip form-inline"> <form class="crib-load-from-zip form-inline">
<h3>Import from zip</h3> <h3>Import from Zip</h3>
<div class="info crib-load-from-zip-status" style="display:none; background-color: #dff0d8;"></div>
<div class="form-group"> <div class="form-group">
<label>Import from zip: <label>Zip File:
<input name="load-zip-file" class="load-zip-file form-control" type="file" size="30"></label> <input name="load-zip-file" class="load-zip-file form-control" type="file" size="30"></label>
</div> </div>
<div class="form-group"> <div class="form-group">
<label> to path: <label> Path to import to:
<input name="load-zip-path" class="load-zip-path form-control" type="text" size="30" value="cribeditor/v1.1"> <input name="load-zip-path"
class="load-zip-path form-control"
type="text" size="30"
placeholder="Leave Empty to Replace Existing Content">
</label> </label>
</div> </div>
<button name="load-zip-contents" class="load-zip-contents btn btn-default" type="submit">Import from zip</button> <button name="load-zip-contents" class="load-zip-contents btn btn-default" type="submit">Import from zip</button>
</form> </form>
<div><span class="crib-load-from-zip-status"></span></div>
<h3>Share as Torrent</h3> <h3>Share as Torrent</h3>
<div class="crib-export-to-zip-torrent-status"
style="display:none; background-color: #dff0d8;"></div>
<form class="crib-export-torrent form-inline"> <form class="crib-export-torrent form-inline">
<div class="form-group"> <div class="form-group">
<label>Path to Export:
<input class="torrent-save-zip-path form-control"
name="torrent-save-zip-path"
type="text" size="30" value=""
placeholder="Leave Empty to Export everything"></label>
<button name="submit-crib-export-torrent" class="export-torrent btn btn-default" type="submit">Export Torrent</button> <button name="submit-crib-export-torrent" class="export-torrent btn btn-default" type="submit">Export Torrent</button>
</div> </div>
</form> </form>
...@@ -60,12 +72,20 @@ ...@@ -60,12 +72,20 @@
<textarea name="load-zip-path" class="magnet-link form-control" readonly value="cribeditor/v1.1">Data</textarea> <textarea name="load-zip-path" class="magnet-link form-control" readonly value="cribeditor/v1.1">Data</textarea>
</div> </div>
<form class="crib-import-torrent form-inline"> <form class="crib-import-torrent form-inline">
<h3>Import from zip Torrent</h3> <h3>Import from Torrent</h3>
<div class="log" style="display:none;"> <div class="crib-load-from-zip-torrent-status"
</div> style="display:none; background-color: #dff0d8;"></div>
<div class="form-group"> <div class="form-group">
<label>Magnet: <label>Magnet:
<input name="zip-magnet" class="zip-magnet form-control" type="text" size="40"></label> <input name="zip-magnet" class="zip-magnet form-control" type="text" size="50"></label>
</div>
<div class="form-group">
<label> Path to import to:
<input name="torrent-load-zip-path"
class="torrent-load-zip-path form-control"
type="text" size="30"
placeholder="Leave Empty to Replace Existing Content">
</label>
</div> </div>
<button name="load-zip-magnet" class="load-zip-magnet btn btn-default" type="submit">Import from Torrent</button> <button name="load-zip-magnet" class="load-zip-magnet btn btn-default" type="submit">Import from Torrent</button>
</form> </form>
......
gadget/gadget_cribjs_page_save_load.js
View file @ 710afd9b
...@@ -12,10 +12,10 @@ ...@@ -12,10 +12,10 @@
return "." + extension; return "." + extension;
} }
function log(gadget, str) { function log(gadget, str, klass) {
var p = document.createElement('p'), var p = document.createElement('p'),
old_p_element = gadget.props.element.querySelector('.log p'), old_p_element = gadget.props.element.querySelector(klass + ' p'),
log_element = gadget.props.element.querySelector('.log'); log_element = gadget.props.element.querySelector(klass);
if (old_p_element) { if (old_p_element) {
old_p_element.remove(); old_p_element.remove();
} }
...@@ -24,26 +24,48 @@ ...@@ -24,26 +24,48 @@
log_element.appendChild(p); log_element.appendChild(p);
} }
function logExportZipFile(gadget, str) {
return log(gadget, str, ".crib-save-to-zip-status");
}
function logImportZipFile(gadget, str) {
return log(gadget, str, ".crib-load-from-zip-status");
}
function logExportZipTorrent(gadget, str) {
return log(gadget, str, ".crib-export-to-zip-torrent-status");
}
function logImportZipTorrent(gadget, str) {
return log(gadget, str, ".crib-load-from-zip-torrent-status");
}
function downloadTorrent(gadget, torrentId) { function downloadTorrent(gadget, torrentId) {
logImportZipTorrent(gadget, "Preparing");
return RSVP.Promise(function (resolve, reject) { return RSVP.Promise(function (resolve, reject) {
var client = new WebTorrent(); var client = new WebTorrent();
client.on('error', function (err) { client.on('error', function (err) {
reject(err.message); reject(err.message);
}); });
client.add(torrentId, function (torrent) { client.add(torrentId, function (torrent) {
log(gadget, 'Got torrent metadata!'); logImportZipTorrent(gadget, 'Got torrent metadata!');
log(gadget, logImportZipTorrent(gadget,
'Torrent info hash: ' + torrent.infoHash + ' ' + 'Torrent info hash: ' + torrent.infoHash + ' ' +
'<a href="' + torrent.magnetURI + '" target="_blank">[Magnet URI]</a> ' + '<a href="' + torrent.magnetURI + '" target="_blank">[Magnet URI]</a> ' +
'<a href="' + torrent.torrentFileBlobURL + '" target="_blank" download="' + torrent.name + '.torrent">[Download .torrent]</a>' '<a href="' + torrent.torrentFileBlobURL + '" target="_blank" download="' + torrent.name + '.torrent">[Download .torrent]</a>'
); );
// Torrents can contain many files. Here we suppose there is only one zip // Torrents can contain many files. Here we suppose there is only one zip
var interval = setInterval(function () { var interval = setInterval(function () {
log(gadget, 'Progress: ' + (torrent.progress * 100).toFixed(1) + '%'); logImportZipTorrent(gadget, 'Progress: ' + (torrent.progress * 100).toFixed(1) + '%');
}, 5000); }, 5000);
torrent.files[0].getBlob(function (error, result) {
if (error) {
reject(error);
}
resolve(result);
});
torrent.on('done', function () { torrent.on('done', function () {
log(gadget, "Done"); logImportZipTorrent(gadget, "100%");
resolve(torrent.files);
clearInterval(interval); clearInterval(interval);
}); });
...@@ -53,8 +75,8 @@ ...@@ -53,8 +75,8 @@
} }
// Zip Methods // Zip Methods
function prepareZip(gadget, event, options) { function prepareZip(gadget, event, options, path_to_save, logFunction) {
var path_to_save, path_to_save_length, crib_sw_gadget, var path_to_save_length, crib_sw_gadget,
jio_gadget, url_list = [], final_url_list = [], saved_number = 0, zip; jio_gadget, url_list = [], final_url_list = [], saved_number = 0, zip;
if (options === undefined) { if (options === undefined) {
options = {}; options = {};
...@@ -62,8 +84,8 @@ ...@@ -62,8 +84,8 @@
if (options.type === undefined) { if (options.type === undefined) {
options.type = "blob"; options.type = "blob";
} }
path_to_save = gadget.props.element.querySelector('form.crib-save-to-zip .save-zip-path').value;
path_to_save_length = path_to_save.length; path_to_save_length = path_to_save.length;
logFunction(gadget, "Preparing");
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .push(function () {
return RSVP.all([ return RSVP.all([
...@@ -95,6 +117,7 @@ ...@@ -95,6 +117,7 @@
final_url_list.push(url); final_url_list.push(url);
} }
} }
logFunction(gadget, "Retrieving " + saved_number + " Files");
return RSVP.all(promise_list); return RSVP.all(promise_list);
}) })
.push(function (response_list) { .push(function (response_list) {
...@@ -118,27 +141,47 @@ ...@@ -118,27 +141,47 @@
} }
zip.file(url, response); zip.file(url, response);
} }
logFunction(gadget, "Preparing Zip");
return zip.generateAsync({type: options.type}); return zip.generateAsync({type: options.type});
}); });
} }
function formatSizeUnits(bytes) {
if (bytes >= 1073741824) { bytes = (bytes / 1073741824).toFixed(2) + " GB"; }
else if (bytes >= 1048576) { bytes = (bytes / 1048576).toFixed(2) + " MB"; }
else if (bytes >= 1024) { bytes = (bytes / 1024).toFixed(2) + " KB"; }
else if (bytes > 1) { bytes = bytes + " bytes"; }
else if (bytes == 1) { bytes = bytes + " byte"; }
else { bytes = "0 bytes"; }
return bytes;
}
function saveContentToZIP(gadget, event) { function saveContentToZIP(gadget, event) {
return prepareZip(gadget, event) var path_to_save = gadget.props.element
.querySelector('form.crib-save-to-zip .save-zip-path').value;
return prepareZip(gadget, event, {}, path_to_save, logExportZipFile)
.push(function (content) { .push(function (content) {
var application_id = gadget.props.element var application_id = gadget.props.element
.querySelector('form.crib-save-to-zip .save-zip-id').value; .querySelector('form.crib-save-to-zip .save-zip-id').value;
logExportZipFile(
gadget,
"Saved a " + formatSizeUnits(content.size) + " zip file at " + Date()
);
return saveAs(content, application_id); return saveAs(content, application_id);
}) })
.push(function () {
gadget.props.element.querySelector(".crib-save-to-zip-status")
.textContent = "Saved " + "X" + " files at " + Date();
})
.push(console.log, console.log); .push(console.log, console.log);
} }
function seedZip(gadget, event) { function seedZip(gadget, event) {
return prepareZip(gadget, event) var path_to_save = gadget.props.element
.querySelector('form.crib-export-torrent .torrent-save-zip-path')
.value;
return prepareZip(gadget, event, {}, path_to_save, logExportZipTorrent)
.push(function (result) { .push(function (result) {
logExportZipTorrent(
gadget,
"Sharing a " + formatSizeUnits(result.size) + " zip file at " + Date()
);
gadget.client = new WebTorrent(); gadget.client = new WebTorrent();
gadget.client.seed(new File([result], "data.zip"), function (torrent) { gadget.client.seed(new File([result], "data.zip"), function (torrent) {
gadget.props.element.querySelector("div.magnet-link").style.display = ""; gadget.props.element.querySelector("div.magnet-link").style.display = "";
...@@ -146,41 +189,51 @@ ...@@ -146,41 +189,51 @@
.querySelector("textarea.magnet-link").textContent = torrent.magnetURI; .querySelector("textarea.magnet-link").textContent = torrent.magnetURI;
console.log('Client is seeding ' + torrent.magnetURI); console.log('Client is seeding ' + torrent.magnetURI);
}); });
}) });
.push(console.log, console.log);
} }
function loadContentFromZIPFile(gadget, event) { function loadContentFromZIPFile(gadget, event) {
var file_list, file; var file_list, file, path_to_load;
file_list = gadget.props.element.querySelector('form.crib-load-from-zip .load-zip-file').files; file_list = gadget.props.element.querySelector('form.crib-load-from-zip .load-zip-file').files;
path_to_load = gadget.props.element
.querySelector('form.crib-load-from-zip .load-zip-path').value;
if (file_list.length === 0) { if (file_list.length === 0) {
gadget.props.element.querySelector(".crib-load-from-zip-status") logImportZipFile(gadget, "Please put a Zip at " + Date());
.textContent = "Please put a Zip at " + Date();
return; return;
} }
file = file_list[0]; file = file_list[0];
return loadContentFromZIP(gadget, event, file); return loadContentFromZIP(
gadget, event, file, path_to_load, logImportZipFile
);
} }
function loadContentFromZIPMagnet(gadget, event) { function loadContentFromZIPMagnet(gadget, event) {
var magnet; var magnet, path_to_load;
magnet = gadget.props.element.querySelector('form.crib-import-torrent .zip-magnet').value; magnet = gadget.props.element.querySelector('form.crib-import-torrent .zip-magnet').value;
path_to_load = gadget.props.element
.querySelector('form.crib-import-torrent .torrent-load-zip-path').value;
return RSVP.Queue() return RSVP.Queue()
.push(function () { .push(function () {
return downloadTorrent(gadget, magnet); return downloadTorrent(gadget, magnet);
}) })
.push(function (files) { .push(function (result) {
return loadContentFromZIP(gadget, event, files[0]); return loadContentFromZIP(
}); gadget, event, result, path_to_load, logImportZipTorrent
);
})
.push(console.log, console.log);
} }
function loadContentFromZIP(gadget, event, zip_data) { function loadContentFromZIP(gadget, event, zip_data,
var path_to_load, path_to_load_length, file_list, crib_sw_gadget, path_to_load, logFunction) {
var path_to_load_length, file_list, crib_sw_gadget,
jio_gadget, url_list = [], file, url_number = 0; jio_gadget, url_list = [], file, url_number = 0;
path_to_load = gadget.props.element.querySelector('form.crib-load-from-zip .load-zip-path').value;
path_to_load_length = path_to_load.length; path_to_load_length = path_to_load.length;
return new RSVP.Queue() return new RSVP.Queue()
.push(function () {
return logFunction(gadget, "Loading Zip");
})
.push(function () { .push(function () {
return JSZip.loadAsync(zip_data); return JSZip.loadAsync(zip_data);
}) })
...@@ -188,17 +241,19 @@ ...@@ -188,17 +241,19 @@
var promise_list = []; var promise_list = [];
zip.forEach(function (relativePath, zipEntry) { zip.forEach(function (relativePath, zipEntry) {
var end_url; var end_url;
url_number += 1;
if (zipEntry.dir) { if (zipEntry.dir) {
return; return;
} }
if (!relativePath.startsWith("/") && !path_to_load.endsWith("/")) { if (path_to_load && !relativePath.startsWith("/") &&
!path_to_load.endsWith("/")) {
end_url = path_to_load + "/" + relativePath; end_url = path_to_load + "/" + relativePath;
} else if (relativePath.startsWith("/") && path_to_load.endsWith("/")) { } else if (relativePath.startsWith("/") &&
(path_to_load.endsWith("/") || path_to_load === "")) {
end_url = path_to_load + relativePath.substring(1); end_url = path_to_load + relativePath.substring(1);
} else { } else {
end_url = path_to_load + relativePath; end_url = path_to_load + relativePath;
} }
url_number += 1;
promise_list.push( promise_list.push(
new RSVP.Queue() new RSVP.Queue()
.push(function () { .push(function () {
...@@ -219,14 +274,17 @@ ...@@ -219,14 +274,17 @@
}) })
); );
}); });
logFunction(
gadget,
"Pushing " + url_number + " files in Crib at " + Date()
);
return RSVP.all(promise_list); return RSVP.all(promise_list);
}) })
.push(function () { .push(function () {
gadget.props.element.querySelector(".crib-load-from-zip-status") logFunction(gadget, "Loaded " + url_number + " files at " + Date());
.textContent = "Loaded " + url_number + " files at " + Date(); });
})
.push(console.log, console.log);
} }
rJS(window) rJS(window)
.ready(function (g) { .ready(function (g) {
g.props = {}; g.props = {};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7