From a357353e5eefc98edfa5396739da151d1ba89b71 Mon Sep 17 00:00:00 2001
From: Matthew Petroff <matthew@mpetroff.net>
Date: Sat, 13 Feb 2021 11:32:08 -0500
Subject: [PATCH] Show interaction key based on platform.

---
 src/css/pannellum.css | 6 ++++++
 src/js/pannellum.js   | 5 +++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/css/pannellum.css b/src/css/pannellum.css
index 6198335..82109a5 100644
--- a/src/css/pannellum.css
+++ b/src/css/pannellum.css
@@ -331,6 +331,12 @@
     left: 0;
 }
 
+.pnlm-outline {
+    border: 1px solid #fff;
+    border-radius: 3px;
+    padding: 0 2px;
+}
+
 .pnlm-about-msg {
     font-size: 11px;
     line-height: 11px;
diff --git a/src/js/pannellum.js b/src/js/pannellum.js
index 92da510..4289276 100644
--- a/src/js/pannellum.js
+++ b/src/js/pannellum.js
@@ -141,7 +141,7 @@ defaultConfig.strings = {
     twoTouchActivate: 'Use two fingers to pan the panorama.',
     twoTouchXActivate: 'Use two fingers together to pan the panorama horizontally.',
     twoTouchYActivate: 'Use two fingers together to pan the panorama vertically.',
-    ctrlZoomActivate: 'Use ctrl + scroll to zoom the panorama.',
+    ctrlZoomActivate: 'Use %s + scroll to zoom the panorama.',  // One substitution: key name
 };
 
 // Initialize container
@@ -1131,7 +1131,8 @@ function onDocumentMouseWheel(event) {
 
     // Ctrl for zoom
     if (!fullscreenActive && config.mouseZoom == 'ctrl' && !event.ctrlKey) {
-        showInteractionMessage(config.strings.ctrlZoomActivate);
+        var keyname = navigator.platform.indexOf('Mac') != -1 ? 'control' : 'ctrl';
+        showInteractionMessage(config.strings.ctrlZoomActivate.replace('%s', '<kbd class="pnlm-outline">' + keyname + '</kbd>'));
         return;
     }
     clearInteractionMessage();