loleaflet/src/control/Control.PartsPreview.js | 83 ++++++++++++++++++++++++--
loleaflet/src/control/Parts.js | 2
2 files changed, 79 insertions(+), 6 deletions(-)
New commits:
commit 1580639831c064cb4de418f31c21cbe1efd2d848
Author: Marco Cecchetti <marco.cecche...@collabora.com>
Date: Fri Jun 22 10:30:20 2018 +0200
On-demand loading of the page previews in the Online Draw/Impress
Change-Id: I56b1febd7f57324e878f06d417d2f58754e850fc
Reviewed-on: https://gerrit.libreoffice.org/56275
Reviewed-by: Marco Cecchetti <mrcek...@gmail.com>
Tested-by: Marco Cecchetti <mrcek...@gmail.com>
diff --git a/loleaflet/src/control/Control.PartsPreview.js
b/loleaflet/src/control/Control.PartsPreview.js
index 055f1053d..467bf6fc8 100644
--- a/loleaflet/src/control/Control.PartsPreview.js
+++ b/loleaflet/src/control/Control.PartsPreview.js
@@ -12,6 +12,7 @@ L.Control.PartsPreview = L.Control.extend({
this._previewInitialized = false;
this._previewTiles = [];
this._partsPreviewCont = L.DomUtil.get('slide-sorter');
+ this._scrollY = 0;
map.on('updateparts', this._updateDisabled, this);
map.on('updatepart', this._updatePart, this);
@@ -38,8 +39,11 @@ L.Control.PartsPreview = L.Control.extend({
this._map.invalidateSize();
$('.scroll-container').mCustomScrollbar('update');
}, this), 500);
+ var previewContBB =
this._partsPreviewCont.getBoundingClientRect();
+ this._previewContTop = previewContBB.top;
+ var bottomBound = previewContBB.bottom +
previewContBB.height / 2;
for (var i = 0; i < parts; i++) {
-
this._previewTiles.push(this._createPreview(i, e.partNames[i]));
+
this._previewTiles.push(this._createPreview(i, e.partNames[i], bottomBound));
}
L.DomUtil.addClass(this._previewTiles[selectedPart], 'preview-img-selected');
this._previewInitialized = true;
@@ -59,19 +63,54 @@ L.Control.PartsPreview = L.Control.extend({
}
},
- _createPreview: function (i, hashCode) {
+ _createPreview: function (i, hashCode, bottomBound) {
var frame = L.DomUtil.create('div', 'preview-frame',
this._partsPreviewCont);
L.DomUtil.create('span', 'preview-helper', frame);
+
var imgClassName = 'preview-img';
var img = L.DomUtil.create('img', imgClassName, frame);
img.hash = hashCode;
img.src = L.Icon.Default.imagePath + '/preview_placeholder.png';
+ img.fetched = false;
L.DomEvent
.on(img, 'click', L.DomEvent.stopPropagation)
.on(img, 'click', L.DomEvent.stop)
.on(img, 'click', this._setPart, this)
.on(img, 'click', this._refocusOnMap, this);
- this._map.getPreview(i, i, 180, 180, {autoUpdate:
this.options.autoUpdate});
+
+ var topBound = this._previewContTop;
+ var previewFrameTop = 0;
+ var previewFrameBottom = 0;
+ if (i > 0) {
+ if (!bottomBound) {
+ var previewContBB =
this._partsPreviewCont.getBoundingClientRect();
+ bottomBound = this._previewContTop +
previewContBB.height + previewContBB.height / 2;
+ }
+ previewFrameTop = this._previewContTop +
this._previewFrameMargin + i * (this._previewFrameHeight +
this._previewFrameMargin);
+ previewFrameTop -= this._scrollY;
+ previewFrameBottom = previewFrameTop +
this._previewFrameHeight;
+ L.DomUtil.setStyle(img, 'height',
this._previewImgHeight + 'px');
+ }
+
+ var imgSize;
+ if (i === 0 || (previewFrameTop >= topBound && previewFrameTop
<= bottomBound)
+ || (previewFrameBottom >= topBound &&
previewFrameBottom <= bottomBound)) {
+ imgSize = this._map.getPreview(i, i, 180, 180,
{autoUpdate: this.options.autoUpdate});
+ img.fetched = true;
+ L.DomUtil.setStyle(img, 'height', '');
+ }
+
+ if (i === 0) {
+ var previewImgBorder =
Math.round(parseFloat(L.DomUtil.getStyle(img, 'border-top-width')));
+ var previewImgMinWidth =
Math.round(parseFloat(L.DomUtil.getStyle(img, 'min-width')));
+ var imgHeight = imgSize.height;
+ if (imgSize.width < previewImgMinWidth)
+ imgHeight = Math.round(imgHeight *
previewImgMinWidth / imgSize.width);
+ var previewFrameBB = frame.getBoundingClientRect();
+ this._previewFrameMargin = previewFrameBB.top -
this._previewContTop;
+ this._previewImgHeight = imgHeight;
+ this._previewFrameHeight = imgHeight + 2 *
previewImgBorder;
+ }
return img;
},
@@ -130,8 +169,9 @@ L.Control.PartsPreview = L.Control.extend({
for (it = 0; it < e.partNames.length; it++) {
this._previewTiles[it].hash =
e.partNames[it];
this._previewTiles[it].src =
L.Icon.Default.imagePath + '/preview_placeholder.png';
- this._map.getPreview(it, it, 180, 180,
{autoUpdate: this.options.autoUpdate});
+ this._previewTiles[it].fetched = false;
}
+ this._onScrollEnd();
}
}
else {
@@ -148,14 +188,20 @@ L.Control.PartsPreview = L.Control.extend({
if (this._map.getDocType() === 'presentation' ||
this._map.getDocType() === 'drawing') {
// the scrollbar has to be re-initialized here else it
doesn't work
// probably a bug from the scrollbar
+ var control = this;
this._previewTiles[e.id].onload = function () {
$('#slide-sorter').mCustomScrollbar({
axis: 'y',
theme: 'dark-thick',
scrollInertia: 0,
- alwaysShowScrollbar: 1});
+ alwaysShowScrollbar: 1,
+ callbacks:{
+ whileScrolling: function() {
+ control._onScroll(this);
+ }
+ }
+ });
};
-
this._previewTiles[e.id].src = e.tile;
}
},
@@ -189,6 +235,31 @@ L.Control.PartsPreview = L.Control.extend({
this._previewTiles.splice(e.selectedPart, 1);
this._updatePreviewIds();
}
+ },
+
+ _onScroll: function (e) {
+ var scrollOffset = 0;
+ if (e) {
+ var prevScrollY = this._scrollY;
+ this._scrollY = -e.mcs.top;
+ scrollOffset = this._scrollY - prevScrollY;
+ }
+
+ var previewContBB =
this._partsPreviewCont.getBoundingClientRect();
+ var extra = previewContBB.height;
+ var topBound = this._previewContTop - (scrollOffset < 0 ? extra
: previewContBB.height / 2);
+ var bottomBound = this._previewContTop + previewContBB.height +
(scrollOffset > 0 ? extra : previewContBB.height / 2);
+ for (var i = 0; i < this._previewTiles.length; ++i) {
+ var img = this._previewTiles[i];
+ if (img && img.parentNode && !img.fetched) {
+ var previewFrameBB =
img.parentNode.getBoundingClientRect();
+ if ((previewFrameBB.top >= topBound &&
previewFrameBB.top <= bottomBound)
+ || (previewFrameBB.bottom >= topBound &&
previewFrameBB.bottom <= bottomBound)) {
+ this._map.getPreview(i, i, 180, 180,
{autoUpdate: this.options.autoUpdate});
+ img.fetched = true;
+ }
+ }
+ }
}
});
diff --git a/loleaflet/src/control/Parts.js b/loleaflet/src/control/Parts.js
index 07d1afc97..c4340979f 100644
--- a/loleaflet/src/control/Parts.js
+++ b/loleaflet/src/control/Parts.js
@@ -91,6 +91,8 @@ L.Map.include({
'tileheight=' +
tileHeight + ' ' +
'id=' + id + ' ' +
'broadcast=' +
(forAllClients ? 'yes' : 'no'));
+
+ return {width: maxWidth, height: maxHeight};
},
getCustomPreview: function (id, part, width, height, tilePosX,
tilePosY, tileWidth, tileHeight, options) {
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
