Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added swipe-up gesture on footer

Browse Source
This commit is contained in:
Nicola Carminati
2018-05-03 12:57:27 +02:00
parent 88e58d7693
commit 3e08d05a05
3 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/src/_base/gestures.js
+3 -4
View File
@@ -39,10 +39,10 @@ function swipedetect(el, callback, onmovecallback, onstart, onstop) {
distX = touchobj.pageX - lastXswipe;
distY = touchobj.pageY - lastYswipe;
if (Math.abs(distY) >= threshold && Math.abs(distX) < restraint) {
if (Math.abs(distY) >= threshold && Math.abs(distX) < restraint && swipedir != 'left' && swipedir != 'right' ) {
swipedir = (distY < 0) ? 'up' : 'down'
}
if (Math.abs(distX) >= threshold && Math.abs(distY) < restraint) {
if (Math.abs(distX) >= threshold && Math.abs(distY) < restraint && swipedir != 'up' && swipedir != 'down' ) {
swipedir = (distX < 0) ? 'left' : 'right'
}
@@ -55,8 +55,7 @@ function swipedetect(el, callback, onmovecallback, onstart, onstop) {
}, false)
touchsurface.addEventListener('touchend', function(e) {
var touchobj = e.changedTouches[0]
var touchobj = e.changedTouches[0];
if (onstop) onstop(e);
handleswipe(swipedir)
Step/wwwroot/src/modules/app-footer.ts
+5
View File
@@ -22,6 +22,11 @@ export default class AppFooter extends Vue {
appModelActions.MainViewToggle(this.$store);
}
OpenMainView(direction) {
if (direction && direction == "up" && !this.$store.isMainViewLiftedUp)
appModelActions.MainViewLiftUp(this.$store);
}
openProgram(path: string) {
this.$router.push(path);
appModelActions.MainViewLiftDown(this.$store);
Step/wwwroot/src/modules/app-footer.vue
+18 -16
View File
@@ -1,22 +1,24 @@
<template>
<footer>
<div class="container">
<button @click="openProgram('/production')" :title="'footer_tooltip_production' | localize('Production')"
:disabled="!isAreaEnabled('production')" v-if="isAreaVisible('production')" class="oval main-production" :class="{ big:isInPath('production') && !state.isMainViewLiftedUp}"> </button>
<button @click="openProgram('/tooling')" :title="'footer_tooltip_tooling' | localize('Tooling')"
:disabled="!isAreaEnabled('tooling')" v-if="isAreaVisible('tooling')" class="oval tools-manager" :class="{ big:isInPath('tooling') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/report')" :title="'footer_tooltip_report' | localize('Report')"
:disabled="!isAreaEnabled('report')" v-if="isAreaVisible('report')" class="oval report-manager" :class="{ big:isInPath('report') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/alarms')" :title="'footer_tooltip_alarms' | localize('Alarms')"
:disabled="!isAreaEnabled('alarms')" v-if="isAreaVisible('alarms')" class="oval alarms-manager" :class="{ big:isInPath('alarms') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/maintenance')" :title="'footer_tooltip_maintenance' | localize('Maintenance')"
:disabled="!isAreaEnabled('maintenance')" v-if="isAreaVisible('maintenance')" class="oval maintenance-manager" :class="{ big:isInPath('maintenance') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/utilities')" :title="'footer_tooltip_utilities' | localize('Utilities')"
:disabled="!isAreaEnabled('utilities')" v-if="isAreaVisible('utilities')" class="oval utilities" :class="{ big:isInPath('utilities') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/test/header')" :title="'footer_tooltip_scada' | localize('Scada')"
:disabled="!isAreaEnabled('scada')" v-if="isAreaVisible('scada')" class="oval scada" :class="{ big:isInPath('/test/header') && !state.isMainViewLiftedUp}"></button>
</div>
<vue-gesture :type="'swipeup'" :call="OpenMainView">
<div class="container">
<button @click="openProgram('/production')" :title="'footer_tooltip_production' | localize('Production')"
:disabled="!isAreaEnabled('production')" v-if="isAreaVisible('production')" class="oval main-production" :class="{ big:isInPath('production') && !state.isMainViewLiftedUp}"> </button>
<button @click="openProgram('/tooling')" :title="'footer_tooltip_tooling' | localize('Tooling')"
:disabled="!isAreaEnabled('tooling')" v-if="isAreaVisible('tooling')" class="oval tools-manager" :class="{ big:isInPath('tooling') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/report')" :title="'footer_tooltip_report' | localize('Report')"
:disabled="!isAreaEnabled('report')" v-if="isAreaVisible('report')" class="oval report-manager" :class="{ big:isInPath('report') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/alarms')" :title="'footer_tooltip_alarms' | localize('Alarms')"
:disabled="!isAreaEnabled('alarms')" v-if="isAreaVisible('alarms')" class="oval alarms-manager" :class="{ big:isInPath('alarms') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/maintenance')" :title="'footer_tooltip_maintenance' | localize('Maintenance')"
:disabled="!isAreaEnabled('maintenance')" v-if="isAreaVisible('maintenance')" class="oval maintenance-manager" :class="{ big:isInPath('maintenance') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/utilities')" :title="'footer_tooltip_utilities' | localize('Utilities')"
:disabled="!isAreaEnabled('utilities')" v-if="isAreaVisible('utilities')" class="oval utilities" :class="{ big:isInPath('utilities') && !state.isMainViewLiftedUp}"></button>
<button @click="openProgram('/test/header')" :title="'footer_tooltip_scada' | localize('Scada')"
:disabled="!isAreaEnabled('scada')" v-if="isAreaVisible('scada')" class="oval scada" :class="{ big:isInPath('/test/header') && !state.isMainViewLiftedUp}"></button>
</div>
</vue-gesture>
<div class="machine-area">
<button class="under" @mouseup="toggleMainView()" :class="{'pressed':state.isMainViewLiftedUp}" :title="'footer_tooltip_under_hood' | localize('Open/Close Under-the-hood area')">
<img src="assets/icons/png/siemens-logo.png" v-if="isSiemens()">