From 54e1c69a6eb89f45d226e866692bb534626acd20 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Sat, 8 May 2021 18:03:24 -0600
Subject: [PATCH] Improve haptic feedback

---
 www/assets/js/list.js                  | 12 ++++++------
 www/assets/js/main.js                  |  2 +-
 www/assets/js/map_leaflet.js           |  2 +-
 www/assets/js/map_mapbox.js            |  2 +-
 www/pages/add.html                     |  6 +++---
 www/pages/home.html                    |  4 ++--
 www/pages/settings.html                | 16 ++++------------
 www/pages/toolbox.html                 |  4 ++--
 www/pages/toolbox/scanner.html         |  4 ++--
 www/pages/toolbox/scanner/scanner.html | 16 ++++++++--------
 www/pages/toolbox/track.html           |  2 +-
 www/pages/toolbox/weather.html         |  2 +-
 12 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/www/assets/js/list.js b/www/assets/js/list.js
index 4eb2117..e61ad3e 100644
--- a/www/assets/js/list.js
+++ b/www/assets/js/list.js
@@ -145,9 +145,9 @@ function loadPackageList(sortType) {
             + '</div>'
             + '<div class="accordion-item-content">'
             + '  <div class="row padding-horizontal">'
-            + '    <a href="#" class="col deliver-btn button button-outline color-green" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
-            + '    <a href="{{geolink}}" class="col geolink directions-btn button button-outline"><i class="fas fa-directions"></i> Directions</a>'
-            + '    <a href="#" class="col delete-btn color-red button button-outline"><i class="fas fa-trash"></i> Delete</a>'
+            + '    <a href="#" class="col deliver-btn button button-outline color-green hapticbtn" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
+            + '    <a href="{{geolink}}" class="col geolink directions-btn button button-outline hapticbtn"><i class="fas fa-directions"></i> Directions</a>'
+            + '    <a href="#" class="col delete-btn color-red button button-outline hapticbtn"><i class="fas fa-trash"></i> Delete</a>'
             + '  </div>'
             + '  </div>'
             + '</div>'
@@ -168,11 +168,11 @@ function loadPackageList(sortType) {
             + '  </div>'
             + '</div>'
             + '<div class="swipeout-actions-left">'
-            + '  <a href="#" class="color-green deliver-btn" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> &nbsp; Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
-            + '  <a href="{{geolink}}" class="color-blue directions-btn"><i class="material-icons">directions</i></a>'
+            + '  <a href="#" class="color-green deliver-btn hapticbtn" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> &nbsp; Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
+            + '  <a href="{{geolink}}" class="color-blue directions-btn hapticbtn"><i class="material-icons">directions</i></a>'
             + '</div>'
             + '<div class="swipeout-actions-right">'
-            + '  <a href="#" class="color-red delete-btn"><i class="material-icons">delete</i>&nbsp; Delete</a>'
+            + '  <a href="#" class="color-red delete-btn hapticbtn"><i class="material-icons">delete</i>&nbsp; Delete</a>'
             + '</div>'
             + '</li>';
 
diff --git a/www/assets/js/main.js b/www/assets/js/main.js
index 37a13dc..10d8900 100644
--- a/www/assets/js/main.js
+++ b/www/assets/js/main.js
@@ -87,7 +87,7 @@ $(document).keyup(function (e) {
     }
 });
 
-$(document).on("mousedown", ".hapticbtn,.input-clear-button,.button,.link", function () {
+$(document).on("mousedown", ".hapticbtn,.input-clear-button,.button,.link,.fab", function () {
     doHapticFeedback();
 });
 
diff --git a/www/assets/js/map_leaflet.js b/www/assets/js/map_leaflet.js
index dd37b27..d33c36f 100644
--- a/www/assets/js/map_leaflet.js
+++ b/www/assets/js/map_leaflet.js
@@ -79,7 +79,7 @@ function leafletMap() {
                 var iconName = getMapIconForItems(datai.items);
                 //console.log(iconName);
 
-                var classes = "package-marker package-marker-leaflet";
+                var classes = "package-marker package-marker-leaflet hapticbtn";
 
                 // Prevent selection highlight from going away after map refresh
                 if (map.openedPanelIconID != null && map.openedPanelIconID == datai.id) {
diff --git a/www/assets/js/map_mapbox.js b/www/assets/js/map_mapbox.js
index e5c7c1b..95c92b7 100644
--- a/www/assets/js/map_mapbox.js
+++ b/www/assets/js/map_mapbox.js
@@ -105,7 +105,7 @@ function mapboxMap() {
 
                 var el = document.createElement("div");
 
-                el.className = "package-marker package-marker-mapbox";
+                el.className = "package-marker package-marker-mapbox hapticbtn";
                 // Prevent selection highlight from going away after map refresh
                 if (map.openedPanelIconID != null && map.openedPanelIconID == datai.id) {
                     el.className += " selected";
diff --git a/www/pages/add.html b/www/pages/add.html
index b624b2b..0f5ac3a 100644
--- a/www/pages/add.html
+++ b/www/pages/add.html
@@ -138,12 +138,12 @@
                     </div>
                 </div>
 
-                <div class="fab fab-right-bottom no-tablet">
+                <div class="fab fab-right-bottom no-tablet hapticbtn">
                     <a class="addpackagebtn">
                         <i class="icon material-icons">add</i>
                     </a>
                 </div>
-                <div class="fab fab-extended fab-right-bottom only-tablet">
+                <div class="fab fab-extended fab-right-bottom only-tablet hapticbtn">
                     <a class="addpackagebtn">
                         <i class="icon material-icons">add</i>
                         <div class="fab-text">Add Item</div>
@@ -162,7 +162,7 @@
                     <img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/history-dashed.svg" class="margin-vertical" />
                     <div class="margin-top">No recently added items!  <span id="history-empty-swipe-prompt">Swipe <i class="fas fa-arrow-left"></i> to add some.</span></div>
                 </div>
-                <ul class="list no-hairlines tablet-inset no-margin-top" id="historylist">
+                <ul class="list no-hairlines tablet-inset no-margin-top hapticbtn" id="historylist">
                     <!-- Packages go here -->
                 </ul>
                 <div class="block text-align-center display-none noselect" id="tap-to-remove-history-prompt">
diff --git a/www/pages/home.html b/www/pages/home.html
index 9001bdc..c0922c8 100644
--- a/www/pages/home.html
+++ b/www/pages/home.html
@@ -34,7 +34,7 @@
                     <ul>
                         {{#each pages}}
                         <li>
-                            <a href="{{href}}" class="item-link item-content">
+                            <a href="{{href}}" class="item-link item-content hapticbtn">
                                 <div class="item-media"><i class="icon {{icon}}"></i></div>
                                 <div class="item-inner">
                                     <div class="item-title">{{title}}</div>
@@ -52,7 +52,7 @@
                 <div class="row">
                     {{#each pages}}
                     <div class="col-50 small-33 large-15">
-                        <div class="card" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
+                        <div class="card hapticbtn" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
                             <div class="card-content text-align-center padding-vertical">
                                 <h1 class="no-margin"><i class="{{icon}}"></i></h1>
                                 <br />
diff --git a/www/pages/settings.html b/www/pages/settings.html
index badd291..41ccccc 100644
--- a/www/pages/settings.html
+++ b/www/pages/settings.html
@@ -25,7 +25,7 @@
                         {{#each settings}}
                         <li>
                             {{#if link}}
-                            <div class="item-content item-link" data-setting="{{setting}}" onclick="{{onclick}}">
+                            <div class="item-content item-link hapticbtn" data-setting="{{setting}}" onclick="{{onclick}}">
                                 <div class="item-inner">
                                     <div class="item-title-row">
                                         <div class="item-title">{{title}}</div>
@@ -41,14 +41,10 @@
                                         <div class="item-title">
                                             {{title}}
                                         </div>
-                                        <div class="item-after" onclick="{
-                                                    {
-                                                        onclick
-                                                    }
-                                                }">
+                                        <div class="item-after hapticbtn" onclick="{{onclick}}">
                                             <label class="toggle toggle-init">
                                                 <input type="checkbox" {{#if checked}}checked{{/if}}>
-                                                       <span class="toggle-icon"></span>
+                                                <span class="toggle-icon"></span>
                                             </label>
                                         </div>
                                     </div>
@@ -84,11 +80,7 @@
                                 </div>
                             </a>
                             {{else}}
-                            <div class="item-content" data-setting="{{setting}}" onclick="{
-                                        {
-                                            onclick
-                                        }
-                                    }">
+                            <div class="item-content hapticbtn" data-setting="{{setting}}" onclick="{{onclick}}">
                                 <div class="item-inner">
                                     <div class="item-title-row">
                                         <div class="item-title">{{title}}</div>
diff --git a/www/pages/toolbox.html b/www/pages/toolbox.html
index f1d8a01..ceb8476 100644
--- a/www/pages/toolbox.html
+++ b/www/pages/toolbox.html
@@ -24,7 +24,7 @@
                     <ul>
                         {{#each pages}}
                         <li>
-                            <a href="{{href}}" class="item-link item-content">
+                            <a href="{{href}}" class="item-link item-content hapticbtn">
                                 <div class="item-media"><i class="icon {{icon}}"></i></div>
                                 <div class="item-inner">
                                     <div class="item-title">{{title}}</div>
@@ -42,7 +42,7 @@
                 <div class="row">
                     {{#each pages}}
                     <div class="col-50 small-33 large-15">
-                        <div class="card" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
+                        <div class="card hapticbtn" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
                             <div class="card-content text-align-center padding-vertical">
                                 <h1 class="no-margin"><i class="{{icon}}"></i></h1>
                                 <br />
diff --git a/www/pages/toolbox/scanner.html b/www/pages/toolbox/scanner.html
index ce3ddd3..c58661d 100644
--- a/www/pages/toolbox/scanner.html
+++ b/www/pages/toolbox/scanner.html
@@ -22,7 +22,7 @@
                 <div class="list no-hairlines tablet-inset" style="margin-top: 0;">
                     <ul>
                         <li>
-                            <a href="/toolbox/scanner/scanner" class="item-link item-content">
+                            <a href="/toolbox/scanner/scanner" class="item-link item-content hapticbtn">
                                 <div class="item-media">1</div>
                                 <div class="item-inner">
                                     <div class="item-title">Scan Barcode</div>
@@ -30,7 +30,7 @@
                             </a>
                         </li>
                         <li>
-                            <a href="/toolbox/scanner/entries" class="item-link item-content">
+                            <a href="/toolbox/scanner/entries" class="item-link item-content hapticbtn">
                                 <div class="item-media">2</div>
                                 <div class="item-inner">
                                     <div class="item-title">Review Entries</div>
diff --git a/www/pages/toolbox/scanner/scanner.html b/www/pages/toolbox/scanner/scanner.html
index 3882606..919bb86 100644
--- a/www/pages/toolbox/scanner/scanner.html
+++ b/www/pages/toolbox/scanner/scanner.html
@@ -20,7 +20,7 @@
                             <div class="searchbar-input-wrap">
                                 <input type="text" id="brokenscannerinput" placeholder="Enter Code" autocomplete="off" autocorrect="off" autocapitalize="off" style="padding-left: 1em; padding-right: 1em;" />
                             </div>
-                            <a id="brokenscannercodeadd" onclick="brokenScannerAddTextEntry()" style="padding-right: 0.5em; padding-top: 0.3em;">
+                            <a id="brokenscannercodeadd" onclick="brokenScannerAddTextEntry()" style="padding-right: 0.5em; padding-top: 0.3em;" class="hapticbtn">
                                 <i class="material-icons">keyboard_return</i>
                             </a>
                         </div>
@@ -30,19 +30,19 @@
         </div>
     </div>
 
-    <div class="fab fab-extended fab-left-bottom">
+    <div class="fab fab-extended fab-left-bottom hapticbtn">
         <a href="#" onclick="brokenScannerEsc()">
             <div class="fab-text">ESC</div>
         </a>
     </div>
 
-    <div class="fab fab-extended fab-center-bottom">
+    <div class="fab fab-extended fab-center-bottom hapticbtn">
         <a href="#" onclick="brokenScannerScan()">
             <div class="fab-text">Scan</div>
         </a>
     </div>
 
-    <div class="fab fab-extended fab-right-bottom">
+    <div class="fab fab-extended fab-right-bottom hapticbtn">
         <a href="#" onclick="chooseScanEvent()">
             <div class="fab-text">Enter</div>
         </a>
@@ -58,13 +58,13 @@
 
         <div class="block no-margin-top padding-bottom" style="height: calc(100% - var(--f7-navbar-height)); overflow-y: auto;">
             <div class="list tablet-inset no-hairlines no-margin-top">
-                <ul class="eventlist">
+                <ul class="eventlist hapticbtn">
 
                 </ul>
             </div>
         </div>
 
-        <div class="fab fab-extended fab-left-bottom">
+        <div class="fab fab-extended fab-left-bottom hapticbtn">
             <a href="#" onclick="app.popup.close('#scanEventPopup');">
                 <div class="fab-text">ESC</div>
             </a>
@@ -81,13 +81,13 @@
 
         <div class="block no-margin-top padding-bottom" style="height: calc(100% - var(--f7-navbar-height)); overflow-y: auto;">
             <div class="list tablet-inset no-hairlines no-margin-top">
-                <ul class="eventlist">
+                <ul class="eventlist hapticbtn">
 
                 </ul>
             </div>
         </div>
 
-        <div class="fab fab-extended fab-left-bottom">
+        <div class="fab fab-extended fab-left-bottom hapticbtn">
             <a href="#" onclick="app.popup.close('#scanEventTypePopup');">
                 <div class="fab-text">ESC</div>
             </a>
diff --git a/www/pages/toolbox/track.html b/www/pages/toolbox/track.html
index a99ba09..3b4f2fb 100644
--- a/www/pages/toolbox/track.html
+++ b/www/pages/toolbox/track.html
@@ -58,7 +58,7 @@
                         </li>
                         {{#each trackingcodehistory}}
                         <li>
-                            <div class="item-link item-content" onclick="openTrackingHistory('{{this}}')">
+                            <div class="item-link item-content hapticbtn" onclick="openTrackingHistory('{{this}}')">
                                 <div class="item-inner">
                                     <div class="item-title">{{this}}</div>
                                 </div>
diff --git a/www/pages/toolbox/weather.html b/www/pages/toolbox/weather.html
index 144a14f..d69d33b 100644
--- a/www/pages/toolbox/weather.html
+++ b/www/pages/toolbox/weather.html
@@ -54,7 +54,7 @@
                                 <br />
                                 <span id="summary-forecast-info"></span>
                                 <br />
-                                <a id="summary-forecast-creditlink" href="" onclick=""></a>
+                                <a id="summary-forecast-creditlink" href="" onclick="" class="hapticbtn"></a>
                             </div>
                         </div>
                     </div>