Fixes #987 (#988)

* Fixes #987
1) make control and key zooming work with or without shift.
2) added mouse wheel scrolling
3) made a minimum and maximum for setting zoom level

* Fixes couple of issues where document may already be loaded before registering zooming shortcut handlers

app/browser/tools/shortcuts.js

@@ -27,18 +27,32 @@ class Shortcuts {
 
 const KEY_MAPS = {
 	'CTRL_+': () => zoom.increaseZoomLevel(),
+	'CTRL_=': () => zoom.increaseZoomLevel(),
 	'CTRL_-': () => zoom.decreaseZoomLevel(),
+	'CTRL__': () => zoom.decreaseZoomLevel(),
 	'CTRL_0': () => zoom.resetZoomLevel(),
 	'ALT_ArrowLeft': () => window.history.back(),
 	'ALT_ArrowRight': () => window.history.forward()
 };
 
 function initInternal() {
-	document.addEventListener('DOMContentLoaded', async () => {
-		window.addEventListener('keydown', keyDownEventHandler, false);
-		whenIframeReady((iframe) => {
-			iframe.contentDocument.addEventListener('keydown', keyDownEventHandler, false);
-		});
+	whenWindowReady(addEventListeners);
+}
+
+function whenWindowReady(callback) {
+	if (window) {
+		callback();
+	} else {
+		setTimeout(() => whenWindowReady(callback), 1000);
+	}
+}
+
+function addEventListeners() {
+	window.addEventListener('keydown', keyDownEventHandler, false);
+	window.addEventListener('wheel', wheelEventHandler, {passive: false});
+	whenIframeReady((iframe) => {
+		iframe.contentDocument.addEventListener('keydown', keyDownEventHandler, false);
+		iframe.contentDocument.addEventListener('wheel', wheelEventHandler, {passive: false});
 	});
 }
 
@@ -50,7 +64,7 @@ function whenIframeReady(callback) {
 	if (iframe) {
 		callback(iframe);
 	} else {
-		setTimeout(() => whenIframeReady(callback), 4000);
+		setTimeout(() => whenIframeReady(callback), 1000);
 	}
 }
 
@@ -60,18 +74,30 @@ function keyDownEventHandler(event) {
 		return;
 	}
 
-	fireEvent(getKeyName(event, keyName));
+	fireEvent(event, keyName);
+}
+
+function wheelEventHandler(event) {
+	if (event.ctrlKey) {
+		event.preventDefault();
+		if (event.deltaY > 0) {
+			zoom.decreaseZoomLevel();
+		} else if (event.deltaY < 0) {
+			zoom.increaseZoomLevel();
+		}
+	}
 }
 
 function getKeyName(event, keyName) {
 	return `${event.ctrlKey ? 'CTRL_' : ''}${event.altKey ? 'ALT_' : ''}${keyName}`;
 }
 
-function fireEvent(key) {
-	const event = KEY_MAPS[key];
-	if (typeof (event) === 'function') {
-		event();
+function fireEvent(event, keyName) {
+	const handler = KEY_MAPS[getKeyName(event, keyName)];
+	if (typeof (handler) === 'function') {
+		event.preventDefault();
+		handler();
 	}
 }
 
-module.exports = new Shortcuts();
+module.exports = new Shortcuts();

app/browser/tools/zoom.js

@@ -4,9 +4,13 @@ const logger = new LucidLog({
 	levels: ['debug']
 });
 
-const zoomLevels = {
-	'+': 0.25,
-	'-': -0.25,
+//zoomFactor can be configurable
+const zoomFactor = 0.25;
+const zoomMin = -7.5; //-7.5 * 20% = -150% or 50% of original
+const zoomMax = 7.5; // 7.5 * 20% = +200% or 300% of original
+const zoomOffsets = {
+	'+': 1,
+	'-': -1,
 	'0': 0
 };
 
@@ -24,7 +28,6 @@ class Zoom {
 		_Zoom_config.set(this, config);
 		_Zoom_initialized.set(this, true);
 		this.restoreZoomLevel();
-		require('@electron/remote').getCurrentWindow().webContents.on('zoom-changed', setZoomChangedHandler(config));
 	}
 
 	get config() {
@@ -52,32 +55,27 @@ class Zoom {
 	}
 }
 
-function setZoomChangedHandler(config) {
-	return (event, zoomDirection) => {
-		setNextZoomLevel(zoomDirection == 'in' ? '+' : '-', config);
-	};
-}
-
 function restoreZoomLevelInternal(config) {
 	ipcRenderer.invoke('getZoomLevel', config.partition).then(zoomLevel => {
 		webFrame.setZoomLevel(zoomLevel);
 	});
 }
 
 function setNextZoomLevel(keyName, config) {
-	const zoomFactor = zoomLevels[keyName];
-	var zoomLevel = webFrame.getZoomLevel();
+	const zoomOffset = zoomOffsets[keyName];
+	let zoomLevel = webFrame.getZoomLevel();
 	logger.debug(`Current zoom level: ${zoomLevel}`);
-	if (typeof (zoomFactor) !== 'number') {
+	if (typeof (zoomOffset) !== 'number') {
 		return;
 	}
 
-	zoomLevel = zoomFactor == 0 ? 0 : zoomLevel + zoomFactor;
+	zoomLevel = zoomOffset === 0 ? 0 : zoomLevel + zoomOffset * zoomFactor;
+	if (zoomLevel < zoomMin || zoomLevel > zoomMax) return;
 	webFrame.setZoomLevel(zoomLevel);
 	ipcRenderer.invoke('saveZoomLevel', {
 		partition: config.partition,
 		zoomLevel: webFrame.getZoomLevel()
 	});
 }
 
-exports = module.exports = new Zoom();
+exports = module.exports = new Zoom();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "teams-for-linux",
-  "version": "1.3.21",
+  "version": "1.3.22",
   "main": "app/index.js",
   "description": "Unofficial client for Microsoft Teams for Linux",
   "homepage": "https://github.com/IsmaelMartinez/teams-for-linux",