feat RDM-1 (RDM-35): Workstep / improve scrolling ( get momentum scro…

…lling back ) on mobile devices, gets broken by perfect-scrollbar.
MPDL · Oct 10, 2020 · 8a5a77b · 8a5a77b
1 parent 7eff462
commit 8a5a77b
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 29 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -57,7 +57,7 @@ export default {
             this.updateDevice()
         },
         updateDevice() {
-            new DeviceHandler(this.$store, globals.SWITCH_WIDTH_MOBILE_PIX).updateDevice()
+            new DeviceHandler(this.$store).updateDevice()
         },
         updateAppHeight(height) {
             const yOffset = this.$store.state.isMobile ? 100 : 150

diff --git a/src/components/Content.vue b/src/components/Content.vue
@@ -7,7 +7,17 @@
         </div>
         <div class="layers" :class="[$store.state.deviceClasses]">
             <div class="bg" :class="[$store.state.colorWorld]"></div>
+            <div v-if="useNativeMomentumScroll" ref="scrollarea" class="scroll-area">
+                <div
+                    class="text"
+                    :class="{ fadeIn: showContent, fadeOut: !showContent }"
+                    :contenteditable="cmsEnabled"
+                    :id="i18nKey"
+                    v-html="translation"
+                ></div>
+            </div>
             <vue-custom-scrollbar
+                v-else
                 ref="scrollarea"
                 class="scroll-area"
                 :settings="scrConfig"
@@ -88,6 +98,9 @@ export default {
         }
     },
     computed: {
+        useNativeMomentumScroll() {
+            return this.$store.state.os === 'ios' || this.$store.state.os === 'adr'
+        },
         cmsEnabled() {
             const uKey = this.uKey
             return globals.cmsEnabled
@@ -177,6 +190,7 @@ export default {
             overflow-y: auto;
             overflow-x: hidden;
             scrollbar-width: none;
+        // -webkit-overflow-scrolling: touch; // sets momentum scroll on IOS, set only beyond IOS 13 !!!
             .text {
                 margin-right: 45px;
                 &.fadeIn {
@@ -188,31 +202,31 @@ export default {
                     @include transition(opacity 0.01s);
                 }
             }
-            ::v-deep {
-                &::-webkit-scrollbar {
-                    display: none;
-                }
-                .ps__thumb-x,
-                .ps__thumb-y {
-                    background-color: #afcfaf;
-                }
-                .ps__rail-x:hover > .ps__thumb-x,
-                .ps__rail-x:focus > .ps__thumb-x,
-                .ps__rail-x.ps--clicking .ps__thumb-x {
-                    background-color: #8fc28f;
-                    height: 6px;
-                }
-                .ps__rail-y:hover > .ps__thumb-y,
-                .ps__rail-y:focus > .ps__thumb-y,
-                .ps__rail-y.ps--clicking .ps__thumb-y {
-                    background-color: #8fc28f;
-                    width: 6px;
-                }
-                .ps__rail-x,
-                .ps__rail-y {
-                    background-color: #fff0;
-                }
-            }
+            // ::v-deep {
+            //     &::-webkit-scrollbar {
+            //         display: none;
+            //     }
+            //     .ps__thumb-x,
+            //     .ps__thumb-y {
+            //         background-color: #afcfaf;
+            //     }
+            //     .ps__rail-x:hover > .ps__thumb-x,
+            //     .ps__rail-x:focus > .ps__thumb-x,
+            //     .ps__rail-x.ps--clicking .ps__thumb-x {
+            //         background-color: #8fc28f;
+            //         height: 6px;
+            //     }
+            //     .ps__rail-y:hover > .ps__thumb-y,
+            //     .ps__rail-y:focus > .ps__thumb-y,
+            //     .ps__rail-y.ps--clicking .ps__thumb-y {
+            //         background-color: #8fc28f;
+            //         width: 6px;
+            //     }
+            //     .ps__rail-x,
+            //     .ps__rail-y {
+            //         background-color: #fff0;
+            //     }
+            // }
         }
         .bg {
             width: calc(100% + 12px);

diff --git a/src/components/MobileNavigator.vue b/src/components/MobileNavigator.vue
@@ -1,6 +1,44 @@
 <template>
     <div class="mobile-navigator">
+        <div
+            v-if="useNativeMomentumScroll"
+            ref="scrollarea"
+            class="scroll-area"
+            :class="[$store.state.mediaTag, $store.state.deviceClasses]"
+        >
+            <div class="box-container color-worlds background">
+                <div class="world-box" v-for="(item, key) in items" :class="key" :key="key">
+                    <div class="bg" :class="key" @click="onClickItem({ mainKey: null })"></div>
+                    <div class="gravity" :class="key">
+                        <NavItem
+                            :key="key"
+                            class="bubble"
+                            :class="{
+                                [item.key]: true,
+                                suspend: false
+                            }"
+                            @clicked="onClickItem({ mainKey: key, subKey: null })"
+                            :config="item"
+                            parent="mobile-navigator"
+                            :cmsActive="isCmsActive"
+                        ></NavItem>
+                    </div>
+                    <div class="sub-items">
+                        <NavItem
+                            v-for="subitem in items[key].sub"
+                            :key="subitem.key"
+                            class="box"
+                            @clicked="onClickItem({ mainKey: key, subKey: subitem.key })"
+                            :config="subitem"
+                            parent="mobile-navigator"
+                            :cmsActive="isCmsActive"
+                        ></NavItem>
+                    </div>
+                </div>
+            </div>
+        </div>
         <vue-custom-scrollbar
+            v-else
             ref="scrollarea"
             class="scroll-area"
             :class="[$store.state.mediaTag, $store.state.deviceClasses]"
@@ -118,6 +156,9 @@ export default {
         }
     },
     computed: {
+        useNativeMomentumScroll() {
+            return this.$store.state.os === 'ios' || this.$store.state.os === 'adr'
+        },
         sub() {
             if (this.selectedMain) {
                 return this.items[this.selectedMain].sub
@@ -284,6 +325,7 @@ export default {
         overflow-y: auto;
         overflow-x: hidden;
         scrollbar-width: none;
+        // -webkit-overflow-scrolling: touch; // sets momentum scroll on IOS, set only beyond IOS 13 !!!
     }
 
     .box-container {

diff --git a/src/js/DeviceHandler.js b/src/js/DeviceHandler.js
@@ -1,6 +1,7 @@
 import BaseDetector from 'device-detector-js'
 
-function DeviceHandler(store = null, SWITCH_WIDTH_MOBILE_PIX = 600) {
+// TODO move the 768 to a singkle source of truth, before globals!!!
+function DeviceHandler(store = null, SWITCH_WIDTH_MOBILE_PIX = 768) {
     const bd = new BaseDetector()
     let ua = navigator.userAgent
     const base = bd.parse(ua)
@@ -29,6 +30,8 @@ function DeviceHandler(store = null, SWITCH_WIDTH_MOBILE_PIX = 600) {
                 return 'adr'
             case 'windows':
                 return 'win'
+            case 'ios': // before IOS 13
+                return 'ios'
             case 'mac':
                 // get infos from:
                 // https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
@@ -116,11 +119,15 @@ function DeviceHandler(store = null, SWITCH_WIDTH_MOBILE_PIX = 600) {
     const mProps = generateMobileProperties()
     device.states = {
         classes: generateCssClasses(),
+        os: getOS(),
+        // os: 'ios', // TEST
         mediaTag: mProps.mediaWidth ? `media-width-${mProps.mediaWidth}` : '',
         isMobile: mProps.isMobile,
         innerHeight: vp.innerHeight
     }
     // use it with vue store or with classic get-setup
+    console.log('DH: device = ', device)
+    console.log('DH: device.states = ', device.states)
     this.getDevice = () => device
     this.updateDevice = () => {
         store ? store.dispatch('updateDevice', device.states) : null

diff --git a/src/js/Globals.js b/src/js/Globals.js
@@ -1,9 +1,9 @@
 import Vue from 'vue'
+import DeviceHandler from '@/js/DeviceHandler'
 
 function Globals() {
     const DEV_MODE = window.BASE_CONFIG && window.BASE_CONFIG.devMode === true
     this.DEV_MODE = DEV_MODE
-    this.SWITCH_WIDTH_MOBILE_PIX = 768
     console.log('GLBL: DEV_MODE = ', DEV_MODE)
     //
     // vue-router
@@ -221,7 +221,7 @@ function Globals() {
 
     const showDeviceInfo = () => {
         document.removeEventListener('mouseup', showDeviceInfo)
-        const device = this.getStore().state.device
+        const device = new DeviceHandler(store).getDevice()
         window.alert(JSON.stringify(device))
     }
     this.showDeviceInfoDelayed = () => {

diff --git a/src/js/store.js b/src/js/store.js
@@ -10,6 +10,7 @@ const store = new Vuex.Store({
         colorWorld: 'initial',
         deviceClasses: '',
         mediaTag: '', 
+        os: '', 
         isMobile: false,
         innerHeight: 0,
         rKey: 0
@@ -26,6 +27,7 @@ const store = new Vuex.Store({
         },
         updateDevice(context, deviceStates) {
             this.state.deviceClasses = deviceStates.classes
+            this.state.os = deviceStates.os
             this.state.mediaTag = deviceStates.mediaTag
             this.state.isMobile = deviceStates.isMobile
             this.state.innerHeight = deviceStates.innerHeight