dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add thumbnails to framework apps

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-default { color: @colortheme_default-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({
toolbarContainer: '#cme_toolbox',
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; }));
nThen(function (waitFor) {

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

@ -4,6 +4,7 @@ define([
var Nacl = window.nacl;
var Thumb = {
dimension: 100,
padDimension: 200
};
var supportedTypes = [
@ -46,25 +47,28 @@ define([
var h = type === 'video' ? img.videoHeight : img.height;
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 (h <= dim && w <= dim) {
/*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.
var r = dim / (h > w? h: w); // ratio
if (h <= dim && w <= dim) { r = 1; }
var d;
if (h > w) {
var newW = Math.floor(w*r);
d = Math.floor((dim - newW) / 2);
return {
dim: dim,
x: d,
w: newW,
y: 0,
@ -74,6 +78,7 @@ define([
var newH = Math.floor(h*r);
d = Math.floor((dim - newH) / 2);
return {
dim: dim,
x: 0,
w: dim,
y: d,
@ -88,8 +93,8 @@ define([
var c2 = document.createElement('canvas');
if (!D) { return void cb('ERROR'); }
c2.width = Thumb.dimension;
c2.height = Thumb.dimension;
c2.width = D.dim;
c2.height = D.dim;
var ctx = c2.getContext('2d');
ctx.drawImage(canvas, D.x, D.y, D.w, D.h);
@ -147,7 +152,8 @@ define([
PDFJS.getDocument(url).promise
.then(function (doc) {
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 () {
cb('ERROR');
@ -165,17 +171,20 @@ define([
};
window.html2canvas = undefined;
Thumb.fromDOM = function (element, cb) {
Thumb.fromDOM = function (opts, cb) {
var element = opts.getContainer();
var todo = function () {
html2canvas(element, {
if (opts.filter) { opts.filter(element, true); }
window.html2canvas(element, {
allowTaint: true,
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);
}
});
};
if (html2canvas) { return void todo(); }
if (window.html2canvas) { return void 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);
if (options.getThumbnailContainer) {
if (options.thumbnail) {
var oldThumbnailState;
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 mkThumbnail = function () {
if (!hash) { return; }
@ -279,13 +280,9 @@ define([
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) {
Thumb.fromDOM(options.thumbnail, function (err, b64) {
oldThumbnailState = content;
$(el).parents().css('overflow', '');
SFUI.setPadThumbnail(href, b64)
SFUI.setPadThumbnail(href, b64);
});
};
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
return void whenNewThumb();
}
if (!v) { return; }
if (v === 'EMPTY') { return; }
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 {
width: 100%;
height: 48px;
margin: 8px 0;
height: 24px;
margin: 0;
display: inline-block;
font-size: 14px;
//align-items: center;
//justify-content: center;
overflow: hidden;
//text-overflow: ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: break-word;
}
.cp-app-drive-element-truncated {
@ -83,8 +85,8 @@ min-height: auto;
.fa {
display: block;
margin: auto;
font-size: 48px;
margin: 8px 0;
font-size: 64px;
margin: 18px 0;
text-align: center;
&.listonly {
display: none;
@ -518,10 +520,15 @@ span {
}
}
.cp-app-drive-element-thumbnail {
max-width: 64px;
max-height: 64px;
max-width: 100px;
max-height: 100px;
& ~ .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); }
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'});
if (hrefData.hashData && hrefData.hashData.mode === 'view') {
var $ro = $readonlyIcon.clone().appendTo($state);
@ -1161,6 +1165,7 @@ define([
var $name = $('<span>', {'class': 'cp-app-drive-element-name'}).text(name);
$span.append($name);
$span.append($state);
$span.attr('title', name);
var type = Messages.type[hrefData.type] || hrefData.type;
common.displayThumbnail(data.href, $span, function ($thumb) {
@ -1199,6 +1204,7 @@ define([
var $files = $('<span>', {
'class': 'cp-app-drive-element-files cp-app-drive-element-list'
}).text(files);
$span.attr('title', key);
$span.append($name).append($state).append($subfolders).append($files);
};
@ -2197,7 +2203,7 @@ define([
}
$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) {
var $name = $(el).find('.cp-app-drive-element-name');
if ($name.length === 0) { return; }
@ -2206,7 +2212,7 @@ define([
$tr.attr('title', $name.text());
$(el).append($tr);
}
});
});*/
$content.scrollTop(s);
appStatus.ready(true);

20
www/pad/inner.js
View File

@ -552,7 +552,25 @@ define([
nThen(function (waitFor) {
Framework.create({
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; }));
nThen(function (waitFor) {

26
www/slide/inner.js
View File

@ -467,6 +467,17 @@ define([
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 CodeMirror;
var editor;
@ -474,10 +485,21 @@ define([
var framework;
nThen(function (waitFor) {
Framework.create({
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; }));
nThen(function (waitFor) {