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

Thumbnails for the code app

Browse Source
This commit is contained in:
yflory 2017-10-24 18:49:58 +02:00
parent bac10472f3
commit f4adbd980e
7 changed files with 94 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
www/code/inner.html
View File

@ -6,6 +6,7 @@
<style> <style>
.loading-hidden { display: none; } .loading-hidden { display: none; }
#editor1 { display: none; } #editor1 { display: none; }
.html2canvas-container { width: 3000px !important; height: 3000px !important; }
</style> </style>
</head> </head>
<body class="cp-app-code"> <body class="cp-app-code">

23
www/code/inner.js
View File

@ -7,6 +7,7 @@ define([
'/common/sframe-common.js', '/common/sframe-common.js',
'/common/sframe-app-framework.js', '/common/sframe-app-framework.js',
'/common/common-util.js', '/common/common-util.js',
'/common/common-thumbnail.js',
'/common/modes.js', '/common/modes.js',
'cm/lib/codemirror', 'cm/lib/codemirror',
@ -45,6 +46,7 @@ define([
SFCommon, SFCommon,
Framework, Framework,
Util, Util,
Thumb,
Modes, Modes,
CMeditor) CMeditor)
{ {
@ -145,6 +147,10 @@ define([
$codeMirror.addClass('cp-app-code-fullpage'); $codeMirror.addClass('cp-app-code-fullpage');
}; };
var isVisible = function () {
return $previewContainer.is(':visible');
};
framework.onReady(function () { framework.onReady(function () {
// add the splitter // add the splitter
var splitter = $('<div>', { var splitter = $('<div>', {
@ -184,7 +190,8 @@ define([
return { return {
forceDraw: forceDrawPreview, forceDraw: forceDrawPreview,
draw: drawPreview, draw: drawPreview,
modeChange: modeChange modeChange: modeChange,
isVisible: isVisible
}; };
}; };
@ -317,6 +324,17 @@ define([
framework.start(); framework.start();
}; };
var getThumbnailContainer = function () {
var $preview = $('#cp-app-code-preview-content');
var $codeMirror = $('.CodeMirror');
if ($preview.length && $preview.is(':visible')) {
return $preview[0];
}
if ($codeMirror.length) {
return $codeMirror[0];
}
};
var main = function () { var main = function () {
var CodeMirror; var CodeMirror;
var editor; var editor;
@ -327,7 +345,8 @@ define([
Framework.create({ Framework.create({
toolbarContainer: '#cme_toolbox', toolbarContainer: '#cme_toolbox',
contentContainer: '#cp-app-code-editor' contentContainer: '#cp-app-code-editor',
getThumbnailContainer: getThumbnailContainer
}, waitFor(function (fw) { framework = fw; })); }, waitFor(function (fw) { framework = fw; }));
nThen(function (waitFor) { nThen(function (waitFor) {

15
www/common/common-file.js
View File

@ -296,18 +296,11 @@ define([
if (!Thumb.isSupportedType(file.type)) { return finish(); } if (!Thumb.isSupportedType(file.type)) { return finish(); }
// make a resized thumbnail from the image.. // make a resized thumbnail from the image..
Thumb.fromBlob(file, function (e, thumb_blob) { Thumb.fromBlob(file, function (e, thumb64) {
if (e) { console.error(e); } if (e) { console.error(e); }
if (!thumb_blob) { return finish(); } if (!thumb64) { return finish(); }
thumb = thumb64;
blobToArrayBuffer(thumb_blob, function (e, buffer) { finish();
if (e) {
console.error(e);
return finish();
}
thumb = arrayBufferToString(buffer);
finish();
});
}); });
}); });
}; };

41
www/common/common-thumbnail.js
View File

@ -48,7 +48,14 @@ define([
var dim = Thumb.dimension; var dim = Thumb.dimension;
// if the image is too small, don't bother making a thumbnail // if the image is too small, don't bother making a thumbnail
if (h <= dim && w <= dim) { return null; } if (h <= dim && w <= dim) {
return {
x: Math.floor((dim - w) / 2),
w: w,
y: Math.floor((dim - h) / 2),
h : h
};
}
// the image is taller than it is wide, so scale to that. // the image is taller than it is wide, so scale to that.
var r = dim / (h > w? h: w); // ratio var r = dim / (h > w? h: w); // ratio
@ -77,18 +84,16 @@ define([
// assumes that your canvas is square // assumes that your canvas is square
// nodeback returning blob // nodeback returning blob
Thumb.fromCanvas = Thumb.fromImage = function (canvas, D, cb) { Thumb.fromCanvas = function (canvas, D, cb) {
var c2 = document.createElement('canvas'); var c2 = document.createElement('canvas');
if (!D) { return void cb('TOO_SMALL'); } if (!D) { return void cb('ERROR'); }
c2.width = Thumb.dimension; c2.width = Thumb.dimension;
c2.height = Thumb.dimension; c2.height = Thumb.dimension;
var ctx = c2.getContext('2d'); var ctx = c2.getContext('2d');
ctx.drawImage(canvas, D.x, D.y, D.w, D.h); ctx.drawImage(canvas, D.x, D.y, D.w, D.h);
c2.toBlob(function (blob) { cb(void 0, c2.toDataURL());
cb(void 0, blob);
});
}; };
Thumb.fromImageBlob = function (blob, cb) { Thumb.fromImageBlob = function (blob, cb) {
@ -97,10 +102,7 @@ define([
img.onload = function () { img.onload = function () {
var D = getResizedDimensions(img, 'image'); var D = getResizedDimensions(img, 'image');
Thumb.fromImage(img, D, function (err, t) { Thumb.fromCanvas(img, D, cb);
if (err === 'TOO_SMALL') { return void cb(void 0, blob); }
cb(err, t);
});
}; };
img.onerror = function () { img.onerror = function () {
cb('ERROR'); cb('ERROR');
@ -145,9 +147,7 @@ define([
PDFJS.getDocument(url).promise PDFJS.getDocument(url).promise
.then(function (doc) { .then(function (doc) {
return doc.getPage(1).then(makeThumb).then(function (canvas) { return doc.getPage(1).then(makeThumb).then(function (canvas) {
canvas.toBlob(function (blob) { cb(void 0, canvas.toDataURL());
cb(void 0, blob);
});
}); });
}).catch(function () { }).catch(function () {
cb('ERROR'); cb('ERROR');
@ -164,8 +164,19 @@ define([
Thumb.fromImageBlob(blob, cb); Thumb.fromImageBlob(blob, cb);
}; };
Thumb.fromVideo = function (video, cb) { window.html2canvas = undefined;
cb = cb; // WIP Thumb.fromDOM = function (element, cb) {
var todo = function () {
html2canvas(element, {
allowTaint: true,
onrendered: function (canvas) {
var D = getResizedDimensions(canvas, 'image');
Thumb.fromCanvas(canvas, D, cb);
}
});
};
if (html2canvas) { return void todo(); }
require(['/bower_components/html2canvas/build/html2canvas.min.js'], todo);
}; };
return Thumb; return Thumb;

27
www/common/sframe-app-framework.js
View File

@ -8,8 +8,10 @@ define([
'/common/cryptpad-common.js', '/common/cryptpad-common.js',
'/bower_components/nthen/index.js', '/bower_components/nthen/index.js',
'/common/sframe-common.js', '/common/sframe-common.js',
'/common/sframe-common-interface.js',
'/customize/messages.js', '/customize/messages.js',
'/common/common-util.js', '/common/common-util.js',
'/common/common-thumbnail.js',
'/customize/application_config.js', '/customize/application_config.js',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
@ -25,8 +27,10 @@ define([
Cryptpad, Cryptpad,
nThen, nThen,
SFCommon, SFCommon,
SFUI,
Messages, Messages,
Util, Util,
Thumb,
AppConfig) AppConfig)
{ {
var SaveAs = window.saveAs; var SaveAs = window.saveAs;
@ -264,6 +268,29 @@ define([
Cryptpad.removeLoadingScreen(emitResize); Cryptpad.removeLoadingScreen(emitResize);
if (options.getThumbnailContainer) {
var oldThumbnailState;
var privateDat = cpNfInner.metadataMgr.getPrivateData();
var hash = privateDat.availableHashes.editHash || privateDat.availableHashes.viewHash;
var href = privateDat.pathname + '#' + hash;
var mkThumbnail = function () {
if (!hash) { return; }
if (state !== STATE.READY) { return; }
if (!cpNfInner.chainpad) { return; }
var content = cpNfInner.chainpad.getUserDoc();
if (content === oldThumbnailState) { return; }
var el = options.getThumbnailContainer();
if (!el) { return; }
$(el).parents().css('overflow', 'visible');
Thumb.fromDOM(el, function (err, b64) {
oldThumbnailState = content;
$(el).parents().css('overflow', '');
SFUI.setPadThumbnail(href, b64)
});
};
window.setInterval(mkThumbnail, 5000);
}
if (newPad) { if (newPad) {
common.openTemplatePicker(); common.openTemplatePicker();
} }

15
www/common/sframe-common-file.js
View File

@ -247,18 +247,11 @@ define([
if (!Thumb.isSupportedType(file.type)) { return finish(); } if (!Thumb.isSupportedType(file.type)) { return finish(); }
// make a resized thumbnail from the image.. // make a resized thumbnail from the image..
Thumb.fromBlob(file, function (e, thumb_blob) { Thumb.fromBlob(file, function (e, thumb64) {
if (e) { console.error(e); } if (e) { console.error(e); }
if (!thumb_blob) { return finish(); } if (!thumb64) { return finish(); }
thumb = thumb64;
blobToArrayBuffer(thumb_blob, function (e, buffer) { finish();
if (e) {
console.error(e);
return finish();
}
thumb = arrayBufferToString(buffer);
finish();
});
}); });
}); });
}; };

14
www/common/sframe-common-interface.js
View File

@ -35,15 +35,20 @@ define([
var addThumbnail = function (err, thumb, $span, cb) { var addThumbnail = function (err, thumb, $span, cb) {
var img = new Image(); var img = new Image();
img.src = 'data:;base64,'+thumb; img.src = thumb.slice(0,5) === 'data:' ? thumb : 'data:;base64,'+thumb;
$span.find('.cp-icon').hide(); $span.find('.cp-icon').hide();
$span.prepend(img); $span.prepend(img);
cb($(img)); cb($(img));
}; };
UI.setPadThumbnail = function (href, b64, cb) {
cb = cb || $.noop;
var k ='thumbnail-' + href;
localForage.setItem(k, b64, cb);
};
localForage.removeItem('thumbnail-/1/edit/lqg6RRnynI76LV0sR8F0YA/Nh1SNXxB5U2UjaADvODfvI5l/');
UI.displayThumbnail = function (href, $container, cb) { UI.displayThumbnail = function (href, $container, cb) {
cb = cb || $.noop; cb = cb || $.noop;
var parsed = Hash.parsePadUrl(href); var parsed = Hash.parsePadUrl(href);
if (parsed.type !== 'file') { return; }
var k ='thumbnail-' + href; var k ='thumbnail-' + href;
var whenNewThumb = function () { var whenNewThumb = function () {
var secret = Hash.getSecrets('file', parsed.hash); var secret = Hash.getSecrets('file', parsed.hash);
@ -61,7 +66,10 @@ define([
}); });
}; };
localForage.getItem(k, function (err, v) { localForage.getItem(k, function (err, v) {
if (!v) { return void whenNewThumb(); } if (!v && parsed.type === 'file') {
// We can only create thumbnails for files here since we can't easily decrypt pads
return void whenNewThumb();
}
if (v === 'EMPTY') { return; } if (v === 'EMPTY') { return; }
addThumbnail(err, v, $container, cb); addThumbnail(err, v, $container, cb);
}); });