From ca0dd740ba0d5ebdabd577e598156ac3502b8e88 Mon Sep 17 00:00:00 2001
From: Jeff Zohrab <jzohrab@gmail.com>
Date: Fri, 17 May 2024 09:47:15 -0700
Subject: [PATCH] Issue 419: let users specify screen interaction type if
 needed.

---
 lute/static/css/styles.css            | 81 ++++++++++++++-------------
 lute/static/js/lute.js                | 19 ++++++-
 lute/templates/read/reading_menu.html | 28 ++++++++-
 3 files changed, 83 insertions(+), 45 deletions(-)

diff --git a/lute/static/css/styles.css b/lute/static/css/styles.css
index c5c11586..9f72986a 100644
--- a/lute/static/css/styles.css
+++ b/lute/static/css/styles.css
@@ -429,18 +429,6 @@ span.hamburger {
     text-decoration: none;
 }
 
-#page-operations-title {
-    display: block;
-    position: relative;
-    width: 100%;
-}
-
-#page-operations-title::after {
-    content: "▶";
-    position: absolute;
-    right: 0;
-}
-
 .close-btn:hover,
 #reading_menu .reading-menu-item:hover,
 .text-options-button:hover {
@@ -449,34 +437,6 @@ span.hamburger {
     /* color: var(--background-color); */
 }
 
-#page-operations-menu .reading-menu-item:hover {
-    background-color: #e4f2fe;
-}
-
-#page-operations-menu {
-    display: none;
-    position: absolute;
-
-    left: 100%;
-    width: 100%;
-    background-color: #d5e9fa;
-    top: 0;
-    border-right: 4px solid #a9cfef;
-    border-left: none;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
-
-#page-operations-li {
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-#page-operations-li:hover #page-operations-menu {
-    display: block;
-}
-
 .close-btn {
   background-image: url("/static/icn/close.svg");
   background-position: center;
@@ -579,6 +539,47 @@ span.hamburger {
     margin: 0 auto;
 }
 
+.reading-menu-top-level {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+.reading-menu-top-level::after {
+    content: "\232A";  /* right angle bracket code. */
+    position: absolute;
+    right: 0;
+}
+
+.reading-menu-top-level-li {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.reading-menu-sublist {
+    display: none;
+    position: absolute;
+
+    left: 100%;
+    width: 100%;
+    background-color: #d5e9fa;
+    top: 0;
+    border-right: 4px solid #a9cfef;
+    border-left: none;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+#page-operations-li:hover #page-operations-menu, #screen-interactions-li:hover #screen-interactions-menu {
+    display: block;
+}
+
+#page-operations-menu .reading-menu-item:hover, #screen-interactions-menu .reading-menu-item:hover {
+    background-color: #e4f2fe;
+}
+
+
 /* End reader slide-in hamburger menu. *********************/
 
 .read_page_nav {
diff --git a/lute/static/js/lute.js b/lute/static/js/lute.js
index d5e22153..bf6b6ea6 100644
--- a/lute/static/js/lute.js
+++ b/lute/static/js/lute.js
@@ -48,16 +48,32 @@ function start_hover_mode(should_clear_frames = true) {
 /** Interactions. */
 
 
+/* User can explicitly set the screen type from the reading_menu. (templates/read/reading_menu) */
+function set_screen_type(screen_type) {
+  localStorage.setItem("screen_interactions_type", screen_type);
+  window.location.reload();
+}
+
 /**
  * Find if on mobile.
+ *
  * This appears to still be a big hassle.  Various posts
  * say to not use the userAgent sniffing, and use feature tests
  * instead.
  * ref: https://stackoverflow.com/questions/72502079/
  *   how-can-i-check-if-the-device-which-is-using-my-website-is-a-mobile-user-or-no
  * From the above, using answer from marc_s: https://stackoverflow.com/a/76055222/1695066
+ *
+ * The various answers posted are still incorrect in certain cases,
+ * so Lute users can set the screen_interactions_type for the session.
  */
 const _isUserUsingMobile = () => {
+  const s = localStorage.getItem('screen_interactions_type');
+  if (s == 'desktop')
+    return false;
+  if (s == 'mobile')
+    return true;
+
   // User agent string method
   let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
@@ -67,8 +83,7 @@ const _isUserUsingMobile = () => {
   // The original method in the SO post had width, height < 768,
   // but that broke playwright tests which opens a smaller browser window.
   if (!isMobile) {
-    const s = window.screen
-    isMobile = (s.width < 980);
+    isMobile = (window.screen < 980);
   }
 
   // Disabling this check - see https://stackoverflow.com/a/4819886/1695066
diff --git a/lute/templates/read/reading_menu.html b/lute/templates/read/reading_menu.html
index 1ea598fa..6ad5ee7e 100644
--- a/lute/templates/read/reading_menu.html
+++ b/lute/templates/read/reading_menu.html
@@ -42,9 +42,9 @@
     </a>
   </li>
   {% endif %}
-  <li id="page-operations-li" class="reading-menu-item">
-    <span id="page-operations-title">Edit</span>
-    <div id="page-operations-menu">
+  <li id="page-operations-li" class="reading-menu-item reading-menu-top-level-li">
+    <span id="page-operations-title" class="reading-menu-top-level">Edit</span>
+    <div id="page-operations-menu" class="reading-menu-sublist">
       <ul>
         <li>
           <a id="editText" class="reading-menu-item" href="" onclick="edit_current_page(); return false;" title="Edit current page content">
@@ -97,4 +97,26 @@
       Keyboard shortcuts
     </a>
   </li>
+  <li id="screen-interactions-li" class="reading-menu-item reading-menu-top-level-li">
+    <span id="screen-interactions-title" class="reading-menu-top-level">Screen interactions</span>
+    <div id="screen-interactions-menu" class="reading-menu-sublist">
+      <ul>
+        <li>
+          <a id="screen-mobile" class="reading-menu-item" href="" onclick="set_screen_type('mobile'); return false;">
+            Mobile
+          </a>
+        </li>
+        <li>
+          <a id="screen-desktop" class="reading-menu-item" href="" onclick="set_screen_type('desktop'); return false;">
+            Desktop
+          </a>
+        </li>
+        <li>
+          <a id="screen-auto" class="reading-menu-item" href="" onclick="set_screen_type('auto'); return false;">
+            Auto
+          </a>
+        </li>
+      </ul>
+    </div>
+  </li>
 </ul>