Add haptic feedback

master
Skylar Ittner 3 years ago
parent f71dfb82bc
commit f5bf847dda

8
package-lock.json generated

@ -1,6 +1,6 @@
{
"name": "com.netsyms.helenaexpress.app",
"version": "1.3.0",
"version": "1.3.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -649,6 +649,12 @@
"resolved": "https://registry.npmjs.org/cordova-plugin-theme-detection/-/cordova-plugin-theme-detection-1.3.0.tgz",
"integrity": "sha512-q7jcFTwRZmbGmb/WgRn+5EyPHLLECrFegXgUQuqpnon1gZtWuyCzVTi+6P0GACIwfMVIcinS9fEJjG5sv+3FDA=="
},
"cordova-plugin-velda-devicefeedback": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/cordova-plugin-velda-devicefeedback/-/cordova-plugin-velda-devicefeedback-0.0.2.tgz",
"integrity": "sha1-ZCnduHXMrCIEpAqA6juzLAovXRo=",
"dev": true
},
"cordova-plugin-whitelist": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/cordova-plugin-whitelist/-/cordova-plugin-whitelist-1.3.4.tgz",

@ -34,7 +34,8 @@
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-x-socialsharing": {}
"cordova-plugin-x-socialsharing": {},
"cordova-plugin-velda-devicefeedback": {}
},
"platforms": [
"browser",
@ -59,6 +60,7 @@
"cordova-plugin-camera": "^5.0.1",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-splashscreen": "^6.0.0",
"cordova-plugin-velda-devicefeedback": "0.0.2",
"cordova-plugin-x-socialsharing": "^6.0.3",
"es6-promise-plugin": "^4.2.2"
}

@ -81,6 +81,10 @@ function handleBackButton() {
}
}
$(document).on("touchdown", ".hapticbtn,.input-clear-button,.button,.link", function () {
doHapticFeedback();
});
$(document).keyup(function (e) {
if (e.key === "Escape" || e.keyCode == 27) {
handleBackButton();

@ -30,6 +30,10 @@ var scanBarcode = function (success, error) {
app.dialog.alert("You can't scan barcodes with this device.", "Sorry!");
}
var doHapticFeedback = function () {
console.log("Haptics not enabled.");
}
var appTheme = "light";
var scanningBarcode = false;
@ -140,6 +144,12 @@ function initCordova() {
// Make sure the status bar color is set properly
applyColorTheme();
if (typeof device != "undefined" && device.platform == "android") {
doHapticFeedback = function () {
window.plugins.deviceFeedback.haptic(window.plugins.deviceFeedback.VIRTUAL_KEY);
}
}
if (typeof device != "undefined" && device.platform != "browser") {
setupCordovaBarcodeScanner();
} else {

@ -8,7 +8,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back" href="#">
<a class="link back hapticbtn" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
@ -42,7 +42,7 @@
</ul>
</div>
<div class="card-content-padding">
<div class="button" onclick="getAddressQRCode()"><i class="far fa-qrcode"></i> Show Code</div>
<div class="button hapticbtn" onclick="getAddressQRCode()"><i class="far fa-qrcode"></i> Show Code</div>
</div>
</div>
</div>
@ -54,7 +54,7 @@
<div class="block text-align-center">
<img id="addresscode-barcode" style="max-width: 90%;" />
<p>Present this code to the Helena Express agent.</p>
<p><a class="button popup-close" href="#">Close</a></p>
<p><a class="button popup-close hapticbtn" href="#">Close</a></p>
</div>
</div>

@ -8,7 +8,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back" href="#">
<a class="link back hapticbtn" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>

@ -7,7 +7,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only back">
<a href="#" class="link icon-only back hapticbtn">
<i class="icon icon-back"></i>
</a>
</div>

@ -9,7 +9,7 @@
<div class="navbar-inner">
<div class="title">{{js "SETTINGS.branding.apptitle"}}</div>
<div class="right">
<a href="/settings" class="link icon-only">
<a href="/settings" class="link icon-only hapticbtn">
<i class="fal fa-cog"></i>
</a>
</div>
@ -22,7 +22,7 @@
<div class="row justify-content-center">
{{#each pages}}
<div class="col-100 small-50 large-33 no-margin-vertical">
<div class="card" onclick="router.navigate('{{href}}');">
<div class="card hapticbtn" onclick="router.navigate('{{href}}');">
<div class="card-content text-align-center padding">
<h1 class="no-margin"><i class="{{icon}}"></i></h1>
<br />

@ -8,7 +8,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back" href="#">
<a class="link back hapticbtn" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
@ -110,7 +110,7 @@
</ul>
</div>
<div class="card-content-padding">
<div class="button" onclick="savePhoneNumber()"><i class="far fa-phone-plus"></i> Save Number</div>
<div class="button hapticbtn" onclick="savePhoneNumber()"><i class="far fa-phone-plus"></i> Save Number</div>
</div>
{{/if}}
</div>

@ -8,7 +8,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back" href="#">
<a class="link back hapticbtn" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
@ -86,11 +86,11 @@
<div class="row" style="min-height: 100px;">
<div class="col-50">
<div class="button button-outline margin" onclick="takeDocPhoto('front')"><i class="fas fa-camera"></i> Front</div>
<div class="button button-outline margin hapticbtn" onclick="takeDocPhoto('front')"><i class="fas fa-camera"></i> Front</div>
<img src="assets/images/3849_front.png" id="noticefrontimg" style="max-width: 100%; max-height: 50vh;" />
</div>
<div class="col-50">
<div class="button button-outline margin" onclick="takeDocPhoto('back')"><i class="fas fa-camera"></i> Back</div>
<div class="button button-outline margin hapticbtn" onclick="takeDocPhoto('back')"><i class="fas fa-camera"></i> Back</div>
<img src="assets/images/3849_back.png" id="noticebackimg" style="max-width: 100%; max-height: 50vh;" />
</div>
</div>
@ -118,7 +118,7 @@
</ul>
</div>
<div class="card-content-padding">
<div class="button" onclick="noticeSlipPayAndFinish()"><i class="far fa-arrow-right"></i> Finish</div>
<div class="button hapticbtn" onclick="noticeSlipPayAndFinish()"><i class="far fa-arrow-right"></i> Finish</div>
</div>
</div>
</div>
@ -136,8 +136,8 @@
<div id="noticeslip-card-errors" style="text-color-red"></div>
<br />
<br />
<div class="button" onclick="submitNoticeSlip()"><i class="far fa-arrow-right"></i> Pay and Submit</div>
<p><a class="button popup-close" href="#">Cancel</a></p>
<div class="button hapticbtn" onclick="submitNoticeSlip()"><i class="far fa-arrow-right"></i> Pay and Submit</div>
<p><a class="button popup-close hapticbtn" href="#">Cancel</a></p>
</div>
</div>

@ -8,7 +8,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link" onclick="router.navigate('/home')">
<a class="link hapticbtn" onclick="router.navigate('/home')">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
@ -26,7 +26,7 @@
<br />
<h2>Request received!</h2>
<p>Your item will be delivered within one business day.</p>
<div class="button" onclick="router.navigate('/home')">Close</div>
<div class="button hapticbtn" onclick="router.navigate('/home')">Close</div>
</div>
</div>
</div>

@ -8,7 +8,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back" href="#">
<a class="link back hapticbtn" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>

@ -8,7 +8,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back" href="#">
<a class="link back hapticbtn" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
@ -161,7 +161,7 @@
</ul>
</div>
<div class="card-content-padding">
<div class="button" onclick="getRates()"><i class="far fa-calculator"></i> Get Rates</div>
<div class="button hapticbtn" onclick="getRates()"><i class="far fa-calculator"></i> Get Rates</div>
</div>
</div>
</div>

@ -8,7 +8,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only" onclick="router.back({force: true, ignoreCache: true})">
<a href="#" class="link icon-only hapticbtn" onclick="router.back({force: true, ignoreCache: true})">
<i class="icon icon-back"></i>
</a>
</div>
@ -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>

Loading…
Cancel
Save