Ticket #173, #51: Fixed touch events for schedule wizzard.

frodeheg · May 1, 2023 · 98efb01 · 98efb01
1 parent eb9c2f3
commit 98efb01
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 31 deletions.
diff --git a/settings/subpages/schedule.html b/settings/subpages/schedule.html
@@ -4,25 +4,27 @@
     <meta charset="UTF-8" />
     <script type="text/javascript">
       let module = {}; // Just to get around that some of the included files are used both by node.js and in the browser
+      let wizExplainSchedule = [];
+
+      function onWizLoaded() {
+        wizExplainSchedule = [
+          { action: UI_FORCE_NEXT, hint: 'Welcome to the schedule wizzard! <br>We will now go through the process of creating a schedule and configure it to your needs.<br>You can move this window around however you want and exit the wizzard at any time.'},
+          { action: UI_FORCE_CLICK, id: 'newButton', hint: 'First click the "New" button to create a new schedule.' },
+          { action: UI_FORCE_NEXT, id: 'timerOpName', hint: 'Select an appropriate name of the schedule and click next to continue.' },
+          { action: UI_FORCE_CLICK, id: 'si0', hint: 'As you can see, your new schedule contains one timer lasting the whole day. Click to configure it.' },
+          { action: UI_FORCE_NEXT, id: 'timerOpOnOff', require: 3, hint: 'For this timeslot we want the devices to stay on, but still turn off when needed in order to meet any limitations you may have configured.<br>For this to function, select the option Preferred On and click Next to continue.' },
+          { action: UI_FORCE_NEXT, id: 'timerOpTemp', require: 1, hint: 'As a first step we want to start with a constant temperature. Select Constant temperature and click Next to continue.' },
+          { action: UI_FORCE_NEXT, id: 'timerACMode', require: 2, hint: 'Select heating and press next to continue.' },
+          { action: UI_FORCE_NEXT, id: 'myThermostat', require: [5,15], hint: 'Now you can select one temperature for heating and one temperature that emulates turning the device off. Select 15 degrees for on and 5 degrees for off and then click Next to continue.' },
+          { action: UI_FORCE_EXIT, hint: 'This is as far as the wizzard goes. However, it\'s under development and will be expanded.' },
+        ];
+      };
     </script>
     <script type="text/javascript" src="../constants.js"></script>
     <script type="text/javascript" src="../tools.js"></script>
     <script type="text/javascript" src="./wizzard.js"></script>
     <link href="../style.css" rel="stylesheet" type="text/css">
     <link href="../trashcan.css" rel="stylesheet" type="text/css">
-    <script type="text/javascript">
-      const wizExplainSchedule = [
-        { action: UI_FORCE_NEXT, hint: 'Welcome to the schedule wizzard! <br>We will now go through the process of creating a schedule and configure it to your needs.<br>You can move this window around however you want and exit the wizzard at any time.'},
-        { action: UI_FORCE_CLICK, id: 'newButton', hint: 'First click the "New" button to create a new schedule.' },
-        { action: UI_FORCE_NEXT, id: 'timerOpName', hint: 'Select an appropriate name of the schedule and click next to continue.' },
-        { action: UI_FORCE_CLICK, id: 'si0', hint: 'As you can see, your new schedule contains one timer lasting the whole day. Click to configure it.' },
-        { action: UI_FORCE_NEXT, id: 'timerOpOnOff', require: 3, hint: 'For this timeslot we want the devices to stay on, but still turn off when needed in order to meet any limitations you may have configured.<br>For this to function, select the option Preferred On and click Next to continue.' },
-        { action: UI_FORCE_NEXT, id: 'timerOpTemp', require: 1, hint: 'As a first step we want to start with a constant temperature. Select Constant temperature and click Next to continue.' },
-        { action: UI_FORCE_NEXT, id: 'timerACMode', require: 2, hint: 'Select heating and press next to continue.' },
-        { action: UI_FORCE_NEXT, id: 'myThermostat', require: [5,15], hint: 'Now you can select one temperature for heating and one temperature that emulates turning the device off. Select 15 degrees for on and 5 degrees for off and then click Next to continue.' },
-        { action: UI_FORCE_EXIT, hint: 'This is as far as the wizzard goes. However, it\'s under development and will be expanded.' },
-      ];
-    </script>
     <style>
 .maxWidth {
   max-width: calc(100vh / 10 * 9);
@@ -362,11 +364,11 @@ <h3>Time Schedule Preview</h3>
               <option value="5" data-i18n="settings.ACMode.fan">Fan</option>
             </select><br>
             <div id="thermoTab" class="maxWidth">
-              <div class="hintButton" style="position: absolute; top: 5px; left: 5px;" onclick="helpOn('myThermoHint')">i</div>
-              <div id="closeThermo" class="closeButton" style="position: absolute; top: 5px; right: 5px; min-width: 20px;" onclick="if (thermoIsBig) unZoomThermo(); else zoomThermo()">&#8703;</div>
               <canvas id="myThermostat" class="thermo" width="400" height="400" onpointermove="draggingThermo(this, event);" onpointerdown="startDragThermo(this, event);" onpointerup="stopDragThermo(this, event);" onpointerleave="stopDragThermo(this, event);">
                 Your browser does not support the HTML5 canvas tag.
               </canvas>
+              <div class="hintButton" style="position: absolute; top: 5px; left: 5px;" onclick="helpOn('myThermoHint')">i</div>
+              <div id="closeThermo" class="closeButton" style="position: absolute; top: 5px; right: 5px; min-width: 20px;" onclick="if (thermoIsBig) unZoomThermo(); else zoomThermo()">&#8703;</div>
               <p id="thermoGuide" class="centerText"></p>
             </div>
             <div id="noneSelected" style="color:red; font-weight: bold;" data-i18n="settings.schedule.noneSelected">&larr; Please select an interval to edit.</div>
@@ -1246,7 +1248,6 @@ <h3>Time Schedule Preview</h3>
         document.getElementById('thermoGuide').innerHTML = guideText;
         canvas.value = value;
         if (canvas.onchange) {
-          console.log('onchange');
           canvas.onchange(value);
         }
       } catch (err) {

diff --git a/settings/subpages/wizzard.js b/settings/subpages/wizzard.js
@@ -300,6 +300,7 @@ function initializeWizzard() {
   border: 1px solid #d3d3d3;
   box-shadow: 10px 10px 10px #000A;
   border-radius: 7px;
+  touch-action: none;
 }
 
 .wizPopupHeader {
@@ -309,6 +310,9 @@ function initializeWizzard() {
   background-color: #2AFD;
   color: #fff;
   border-radius: 7px 7px 0 0;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
 }
 
 .wizPopupText {
@@ -353,23 +357,24 @@ function wizExitClick() {
 
 function dragElement(elmnt) {
   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-  if (document.getElementById(elmnt.id + "Header")) {
-    /* if present, the header is where you move the DIV from:*/
-    document.getElementById(elmnt.id + "Header").onmousedown = dragMouseDown;
+  if (document.getElementById(`${elmnt.id}Header`)) {
+    // if present, the header is where you move the DIV from:
+    document.getElementById(`${elmnt.id}Header`).onpointerdown = (e) => dragPointerDown(e);
   } else {
-    /* otherwise, move the DIV from anywhere inside the DIV:*/
-    elmnt.onmousedown = dragMouseDown;
+    // otherwise, move the DIV from anywhere inside the DIV:
+    elmnt.onpointerdown = (e) => dragPointerDown(e);
   }
 
-  function dragMouseDown(e) {
+  function dragPointerDown(e) {
     e = e || window.event;
     e.preventDefault();
-    // get the mouse cursor position at startup:
+    // get the pointer position at startup:
     pos3 = e.clientX;
     pos4 = e.clientY;
-    document.onmouseup = closeDragElement;
+    document.onpointerup = (e) => closeDragElement(e);
+    //document.onpointerleave = () => closeDragElement(); // Doesn't function very well on the phone
     // call a function whenever the cursor moves:
-    document.onmousemove = elementDrag;
+    document.onpointermove = (e) => elementDrag(e);
   }
 
   function elementDrag(e) {
@@ -381,18 +386,20 @@ function dragElement(elmnt) {
     pos3 = e.clientX;
     pos4 = e.clientY;
     // set the element's new position:
-    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
-    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+    elmnt.style.top = `${elmnt.offsetTop - pos2}px`;
+    elmnt.style.left = `${elmnt.offsetLeft - pos1}px`;
   }
 
-  function closeDragElement() {
-    /* stop moving when mouse button is released:*/
-    document.onmouseup = null;
-    document.onmousemove = null;
+  function closeDragElement(e) {
+    // stop moving when pointer is released:
+    document.onpointerup = null;
+    document.onpointermove = null;
+    document.onpointerleave = null;
   }
 }
 
 initializeWizzard();
+onWizLoaded(); // From including document
 
 module.exports = {
   wizGotoLimiters,