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

Add thumbnails to framework apps

Browse Source
This commit is contained in:
yflory 2017-10-26 12:31:16 +02:00
parent bf817f20ee
commit 6f020b67ca
9 changed files with 116 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
customize.dist/src/less2/include/icon-colors.less
View File

@ -13,5 +13,18 @@
.cp-icon-color-profile { color: @colortheme_settings-bg; } .cp-icon-color-profile { color: @colortheme_settings-bg; }
.cp-icon-color-default { color: @colortheme_default-bg; } .cp-icon-color-default { color: @colortheme_default-bg; }
.cp-icon-color-todo { color:@colortheme_todo-bg; } .cp-icon-color-todo { color:@colortheme_todo-bg; }
.cp-border-color-pad { border-color: @colortheme_pad-bg !important; }
.cp-border-color-code { border-color: @colortheme_code-bg !important; }
.cp-border-color-slide { border-color: @colortheme_slide-bg !important; }
.cp-border-color-poll { border-color: @colortheme_poll-bg !important; }
.cp-border-color-file { border-color: @colortheme_file-bg !important; }
.cp-border-color-contacts { border-color: @colortheme_friends-bg !important; }
.cp-border-color-whiteboard { border-color: @colortheme_whiteboard-bg !important; }
.cp-border-color-drive { border-color: @colortheme_drive-bg !important; }
.cp-border-color-settings { border-color: @colortheme_settings-bg !important; }
.cp-border-color-profile { border-color: @colortheme_settings-bg !important; }
.cp-border-color-default { border-color: @colortheme_default-bg !important; }
.cp-border-color-todo { border-color:@colortheme_todo-bg !important; }
} }

13
www/code/inner.js
View File

@ -346,7 +346,18 @@ define([
Framework.create({ Framework.create({
toolbarContainer: '#cme_toolbox', toolbarContainer: '#cme_toolbox',
contentContainer: '#cp-app-code-editor', contentContainer: '#cp-app-code-editor',
getThumbnailContainer: getThumbnailContainer thumbnail: {
getContainer: getThumbnailContainer,
filter: function (el, before) {
if (before) {
$(el).parents().css('overflow', 'visible');
$(el).css('max-height', Math.max(600, $(el).width()) + 'px');
return;
}
$(el).parents().css('overflow', '');
$(el).css('max-height', '');
}
}
}, waitFor(function (fw) { framework = fw; })); }, waitFor(function (fw) { framework = fw; }));
nThen(function (waitFor) { nThen(function (waitFor) {

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

@ -4,6 +4,7 @@ define([
var Nacl = window.nacl; var Nacl = window.nacl;
var Thumb = { var Thumb = {
dimension: 100, dimension: 100,
padDimension: 200
}; };
var supportedTypes = [ var supportedTypes = [
@ -46,25 +47,28 @@ define([
var h = type === 'video' ? img.videoHeight : img.height; var h = type === 'video' ? img.videoHeight : img.height;
var w = type === 'video' ? img.videoWidth : img.width; var w = type === 'video' ? img.videoWidth : img.width;
var dim = Thumb.dimension; var dim = type === 'pad' ? Thumb.padDimension : 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) { /*if (h <= dim && w <= dim) {
return { return {
x: Math.floor((dim - w) / 2), x: Math.floor((dim - w) / 2),
w: w, w: w,
y: Math.floor((dim - h) / 2), y: Math.floor((dim - h) / 2),
h : h 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
if (h <= dim && w <= dim) { r = 1; }
var d; var d;
if (h > w) { if (h > w) {
var newW = Math.floor(w*r); var newW = Math.floor(w*r);
d = Math.floor((dim - newW) / 2); d = Math.floor((dim - newW) / 2);
return { return {
dim: dim,
x: d, x: d,
w: newW, w: newW,
y: 0, y: 0,
@ -74,6 +78,7 @@ define([
var newH = Math.floor(h*r); var newH = Math.floor(h*r);
d = Math.floor((dim - newH) / 2); d = Math.floor((dim - newH) / 2);
return { return {
dim: dim,
x: 0, x: 0,
w: dim, w: dim,
y: d, y: d,
@ -88,8 +93,8 @@ define([
var c2 = document.createElement('canvas'); var c2 = document.createElement('canvas');
if (!D) { return void cb('ERROR'); } if (!D) { return void cb('ERROR'); }
c2.width = Thumb.dimension; c2.width = D.dim;
c2.height = Thumb.dimension; c2.height = D.dim;
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);
@ -147,7 +152,8 @@ 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) {
cb(void 0, canvas.toDataURL()); var D = getResizedDimensions(canvas, 'pdf');
Thumb.fromCanvas(canvas, D, cb);
}); });
}).catch(function () { }).catch(function () {
cb('ERROR'); cb('ERROR');
@ -165,17 +171,20 @@ define([
}; };
window.html2canvas = undefined; window.html2canvas = undefined;
Thumb.fromDOM = function (element, cb) { Thumb.fromDOM = function (opts, cb) {
var element = opts.getContainer();
var todo = function () { var todo = function () {
html2canvas(element, { if (opts.filter) { opts.filter(element, true); }
window.html2canvas(element, {
allowTaint: true, allowTaint: true,
onrendered: function (canvas) { onrendered: function (canvas) {
var D = getResizedDimensions(canvas, 'image'); if (opts.filter) { opts.filter(element, false); }
var D = getResizedDimensions(canvas, 'pad');
Thumb.fromCanvas(canvas, D, cb); Thumb.fromCanvas(canvas, D, cb);
} }
}); });
}; };
if (html2canvas) { return void todo(); } if (window.html2canvas) { return void todo(); }
require(['/bower_components/html2canvas/build/html2canvas.min.js'], todo); require(['/bower_components/html2canvas/build/html2canvas.min.js'], todo);
}; };

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

@ -268,10 +268,11 @@ define([
Cryptpad.removeLoadingScreen(emitResize); Cryptpad.removeLoadingScreen(emitResize);
if (options.getThumbnailContainer) { if (options.thumbnail) {
var oldThumbnailState; var oldThumbnailState;
var privateDat = cpNfInner.metadataMgr.getPrivateData(); var privateDat = cpNfInner.metadataMgr.getPrivateData();
var hash = privateDat.availableHashes.editHash || privateDat.availableHashes.viewHash; var hash = privateDat.availableHashes.editHash ||
privateDat.availableHashes.viewHash;
var href = privateDat.pathname + '#' + hash; var href = privateDat.pathname + '#' + hash;
var mkThumbnail = function () { var mkThumbnail = function () {
if (!hash) { return; } if (!hash) { return; }
@ -279,13 +280,9 @@ define([
if (!cpNfInner.chainpad) { return; } if (!cpNfInner.chainpad) { return; }
var content = cpNfInner.chainpad.getUserDoc(); var content = cpNfInner.chainpad.getUserDoc();
if (content === oldThumbnailState) { return; } if (content === oldThumbnailState) { return; }
var el = options.getThumbnailContainer(); Thumb.fromDOM(options.thumbnail, function (err, b64) {
if (!el) { return; }
$(el).parents().css('overflow', 'visible');
Thumb.fromDOM(el, function (err, b64) {
oldThumbnailState = content; oldThumbnailState = content;
$(el).parents().css('overflow', ''); SFUI.setPadThumbnail(href, b64);
SFUI.setPadThumbnail(href, b64)
}); });
}; };
window.setInterval(mkThumbnail, 5000); window.setInterval(mkThumbnail, 5000);

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

@ -70,6 +70,7 @@ define([
// We can only create thumbnails for files here since we can't easily decrypt pads // We can only create thumbnails for files here since we can't easily decrypt pads
return void whenNewThumb(); return void whenNewThumb();
} }
if (!v) { return; }
if (v === 'EMPTY') { return; } if (v === 'EMPTY') { return; }
addThumbnail(err, v, $container, cb); addThumbnail(err, v, $container, cb);
}); });

23
www/drive/app-drive.less
View File

@ -58,13 +58,15 @@ min-height: auto;
} }
.cp-app-drive-element-name { .cp-app-drive-element-name {
width: 100%; width: 100%;
height: 48px; height: 24px;
margin: 8px 0; margin: 0;
display: inline-block; display: inline-block;
font-size: 14px;
//align-items: center; //align-items: center;
//justify-content: center; //justify-content: center;
overflow: hidden; overflow: hidden;
//text-overflow: ellipsis; white-space: nowrap;
text-overflow: ellipsis;
word-wrap: break-word; word-wrap: break-word;
} }
.cp-app-drive-element-truncated { .cp-app-drive-element-truncated {
@ -83,8 +85,8 @@ min-height: auto;
.fa { .fa {
display: block; display: block;
margin: auto; margin: auto;
font-size: 48px; font-size: 64px;
margin: 8px 0; margin: 18px 0;
text-align: center; text-align: center;
&.listonly { &.listonly {
display: none; display: none;
@ -518,10 +520,15 @@ span {
} }
} }
.cp-app-drive-element-thumbnail { .cp-app-drive-element-thumbnail {
max-width: 64px; max-width: 100px;
max-height: 64px; max-height: 100px;
& ~ .fa { & ~ .fa {
display: none; display: inline;
font-size: 17px;
position: absolute;
top: 3px;
left: 3px;
margin: 0;
} }
} }
} }

10
www/drive/inner.js
View File

@ -1145,6 +1145,10 @@ define([
if (!data) { return void logError("No data for the file", element); } if (!data) { return void logError("No data for the file", element); }
var hrefData = Cryptpad.parsePadUrl(data.href); var hrefData = Cryptpad.parsePadUrl(data.href);
if (hrefData.type) {
$span.addClass('cp-border-color-'+hrefData.type);
}
var $state = $('<span>', {'class': 'cp-app-drive-element-state'}); var $state = $('<span>', {'class': 'cp-app-drive-element-state'});
if (hrefData.hashData && hrefData.hashData.mode === 'view') { if (hrefData.hashData && hrefData.hashData.mode === 'view') {
var $ro = $readonlyIcon.clone().appendTo($state); var $ro = $readonlyIcon.clone().appendTo($state);
@ -1161,6 +1165,7 @@ define([
var $name = $('<span>', {'class': 'cp-app-drive-element-name'}).text(name); var $name = $('<span>', {'class': 'cp-app-drive-element-name'}).text(name);
$span.append($name); $span.append($name);
$span.append($state); $span.append($state);
$span.attr('title', name);
var type = Messages.type[hrefData.type] || hrefData.type; var type = Messages.type[hrefData.type] || hrefData.type;
common.displayThumbnail(data.href, $span, function ($thumb) { common.displayThumbnail(data.href, $span, function ($thumb) {
@ -1199,6 +1204,7 @@ define([
var $files = $('<span>', { var $files = $('<span>', {
'class': 'cp-app-drive-element-files cp-app-drive-element-list' 'class': 'cp-app-drive-element-files cp-app-drive-element-list'
}).text(files); }).text(files);
$span.attr('title', key);
$span.append($name).append($state).append($subfolders).append($files); $span.append($name).append($state).append($subfolders).append($files);
}; };
@ -2197,7 +2203,7 @@ define([
} }
$content.append($info).append($dirContent); $content.append($info).append($dirContent);
var $truncated = $('<span>', {'class': 'cp-app-drive-element-truncated'}).text('...'); /*var $truncated = $('<span>', {'class': 'cp-app-drive-element-truncated'}).text('...');
$content.find('.cp-app-drive-element').each(function (idx, el) { $content.find('.cp-app-drive-element').each(function (idx, el) {
var $name = $(el).find('.cp-app-drive-element-name'); var $name = $(el).find('.cp-app-drive-element-name');
if ($name.length === 0) { return; } if ($name.length === 0) { return; }
@ -2206,7 +2212,7 @@ define([
$tr.attr('title', $name.text()); $tr.attr('title', $name.text());
$(el).append($tr); $(el).append($tr);
} }
}); });*/
$content.scrollTop(s); $content.scrollTop(s);
appStatus.ready(true); appStatus.ready(true);

20
www/pad/inner.js
View File

@ -552,7 +552,25 @@ define([
nThen(function (waitFor) { nThen(function (waitFor) {
Framework.create({ Framework.create({
toolbarContainer: '#cke_1_toolbox', toolbarContainer: '#cke_1_toolbox',
contentContainer: '#cke_1_contents' contentContainer: '#cke_1_contents',
thumbnail: {
getContainer: function () { return $('iframe').contents().find('html')[0]; },
filter: function (el, before) {
if (before) {
$(el).parents().css('overflow', 'visible');
$(el).css('max-width', '1200px');
$(el).css('max-height', Math.max(600, $(el).width()) + 'px');
$(el).css('overflow', 'hidden');
$(el).find('body').css('background-color', 'transparent');
return;
}
$(el).parents().css('overflow', '');
$(el).css('max-width', '');
$(el).css('max-height', '');
$(el).css('overflow', '');
$(el).find('body').css('background-color', '#fff');
}
}
}, waitFor(function (fw) { window.APP.framework = framework = fw; })); }, waitFor(function (fw) { window.APP.framework = framework = fw; }));
nThen(function (waitFor) { nThen(function (waitFor) {

26
www/slide/inner.js
View File

@ -467,6 +467,17 @@ define([
framework.start(); framework.start();
}; };
var getThumbnailContainer = function () {
var $codeMirror = $('.CodeMirror');
var $c = $('#cp-app-slide-editor');
if ($c.hasClass('cp-app-slide-preview')) {
return $('.cp-app-slide-frame').first()[0];
}
if ($codeMirror.length) {
return $codeMirror[0];
}
};
var main = function () { var main = function () {
var CodeMirror; var CodeMirror;
var editor; var editor;
@ -474,10 +485,21 @@ define([
var framework; var framework;
nThen(function (waitFor) { nThen(function (waitFor) {
Framework.create({ Framework.create({
toolbarContainer: '#cme_toolbox', toolbarContainer: '#cme_toolbox',
contentContainer: '#cp-app-slide-editor' contentContainer: '#cp-app-slide-editor',
thumbnail: {
getContainer: getThumbnailContainer,
filter: function (el, before) {
var metadataMgr = framework._.cpNfInner.metadataMgr;
var metadata = metadataMgr.getMetadata();
if (before) {
$(el).css('background-color', metadata.backColor || '#000');
return;
}
$(el).css('background-color', '');
}
}
}, waitFor(function (fw) { framework = fw; })); }, waitFor(function (fw) { framework = fw; }));
nThen(function (waitFor) { nThen(function (waitFor) {