[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-4' - loleaflet/src

[Libreoffice Gerrit user]

 loleaflet/src/control/Control.PartsPreview.js |   51 +++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

New commits:
commit f3ea0a6ffe03425c557297c53768cb927727b4af
Author:     merttumer <mert.tumer at collabora.com>
AuthorDate: Fri Mar 1 18:11:59 2019 +0300
Commit:     Mert Tümer <mert.tumer at collabora.com>
CommitDate: Fri Mar 8 17:36:41 2019 +0100

    Ability to switch slides by arrow up/down keys in edit mode
    
    Change-Id: Ic465636df8a1960364074149a41ea7d0209dbdab
    Signed-off-by: merttumer <mert.tumer at collabora.com>
    Reviewed-on: https://gerrit.libreoffice.org/68585
    Reviewed-by: Aron Budea <aron.budea at collabora.com>
    Tested-by: Aron Budea <aron.budea at collabora.com>

diff --git a/loleaflet/src/control/Control.PartsPreview.js b/loleaflet/src/control/Control.PartsPreview.js
index d5a7a65bf..eae8149d3 100644
--- a/loleaflet/src/control/Control.PartsPreview.js
+++ b/loleaflet/src/control/Control.PartsPreview.js
@@ -8,6 +8,7 @@ L.Control.PartsPreview = L.Control.extend({
 	options: {
 		autoUpdate: true
 	},
+	partsFocused: false,
 
 	onAdd: function (map) {
 		this._previewInitialized = false;
@@ -60,6 +61,24 @@ L.Control.PartsPreview = L.Control.extend({
 						}
 					}
 				});
+
+				this._map.on('click', function() {
+					this.partsFocused = false;
+				}, this);
+				
+				this._map.on('keydown', function(e) {
+					if (this.partsFocused === true) {
+						switch (e.originalEvent.keyCode) {
+						case 38:
+							this._setPart('prev');
+							break;
+						case 40:
+							this._setPart('next');
+							break;
+						}
+					}
+				}, this);
+
 				this._scrollContainer = $('#slide-sorter .mCSB_container').get(0);
 
 				// Create the preview parts
@@ -97,7 +116,10 @@ L.Control.PartsPreview = L.Control.extend({
 			.on(img, 'click', L.DomEvent.stopPropagation)
 			.on(img, 'click', L.DomEvent.stop)
 			.on(img, 'click', this._setPart, this)
-			.on(img, 'click', this._map.focus, this._map);
+			.on(img, 'click', this._map.focus, this._map)
+			.on(img, 'click', function() {
+				this.partsFocused = true;
+			}, this);
 
 		var topBound = this._previewContTop;
 		var previewFrameTop = 0;
@@ -137,6 +159,33 @@ L.Control.PartsPreview = L.Control.extend({
 	},
 
 	_setPart: function (e) {
+		//helper function to check if the view is in the scrollview visible area
+		function isVisible(el) {
+			var elemRect = el.getBoundingClientRect();
+			var elemTop = elemRect.top;
+			var elemBottom = elemRect.bottom;
+			var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
+			return isVisible;
+		}
+		if (e === 'prev' || e === 'next') {
+			this._map.setPart(e);
+			var node = $('#slide-sorter .mCSB_container .preview-frame')[this._map.getCurrentPartNumber()];
+			if (!isVisible(node)) {
+				if (e === 'prev') {
+					setTimeout(function () {
+						$('#slide-sorter').mCustomScrollbar('scrollTo', node);
+					}, 50);
+				} else {
+					var nodeHeight = $(node).height();
+					var sliderHeight= $('#slide-sorter').height();
+					var nodePos = $(node).position().top;
+					setTimeout(function () {
+						$('#slide-sorter').mCustomScrollbar('scrollTo', nodePos-(sliderHeight-nodeHeight-nodeHeight/2));
+					}, 50);
+				}
+			} 
+			return;
+		}
 		var part = $('#slide-sorter .mCSB_container .preview-frame').index(e.target.parentNode);
 		if (part !== null) {
 			this._map.setPart(parseInt(part));