feat: consider tablets as not mobile devices regarding direction and animation (#1298)

Author: peterpeterparker

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Web Components
 
+- core: v8.3.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md))
 - highlight-code: v3.3.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
 
 ### Others

remote/package-lock.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@deckdeckgo/charts": "^2.1.0",
-    "@deckdeckgo/core": "^8.2.1",
+    "@deckdeckgo/core": "^8.3.0",
     "@deckdeckgo/deck-utils": "^4.0.2",
     "@deckdeckgo/demo": "^2.1.0",
     "@deckdeckgo/drag-resize-rotate": "^2.2.0",

remote/package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@deckdeckgo/charts": "^2.1.0",
     "@deckdeckgo/color": "^4.1.0",
-    "@deckdeckgo/core": "^8.2.1",
+    "@deckdeckgo/core": "^8.3.0",
     "@deckdeckgo/deck-utils": "^4.1.0",
     "@deckdeckgo/demo": "^2.1.0",
     "@deckdeckgo/drag-resize-rotate": "^2.2.0",

studio/package-lock.json

@@ -1,3 +1,9 @@
+# 8.3.0 (2021-08-19)
+
+### Features
+
+- consider mobile as small devices, not tablets 
+
 # 8.2.1 (2021-05-29)
 
 ### Fix

studio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/core",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Add a presentation to your web application using HTML and Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

webcomponents/core/CHANGELOG.md

@@ -1,6 +1,6 @@
 import {Component, Element, Listen, Method, Prop, State, Event, EventEmitter, h, Watch, Host} from '@stencil/core';
 
-import {isIOS, unifyEvent, isMobile, isFullscreen, debounce} from '@deckdeckgo/utils';
+import {isIOS, unifyEvent, isMobile, isFullscreen, debounce, isAndroidTablet, isIPad} from '@deckdeckgo/utils';
 import {getSlideDefinition, getAttributesDefinition} from '@deckdeckgo/deck-utils';
 
 import {DeckdeckgoDeckDefinition, DeckdeckgoSlideDefinition, DeckdeckgoAttributeDefinition} from '@deckdeckgo/types';
@@ -96,6 +96,9 @@ export class DeckdeckgoDeck {
   private slideLoopInterval: number;
   private idleSlideLoopTimer: number;
 
+  // We do not consider iPad and Tablet as "mobile" devices. With mobile we mean smaller devices, phones.
+  private mobile: boolean = isMobile() && !(isIPad() || isAndroidTablet());
+
   async componentWillLoad() {
     await this.initRtl();
     await this.initDirection();
@@ -234,7 +237,7 @@ export class DeckdeckgoDeck {
   private async initFontSize(slider: HTMLElement, {height, width}: {height: number; width: number}) {
     // 576px height = font-size 16px or 1em (relative to the font-size of its direct or nearest parent)
     const fontSize: number = height / 576;
-    const ratioFontSize: number = width / 16 * 9 / 576;
+    const ratioFontSize: number = ((width / 16) * 9) / 576;
 
     slider.style.setProperty('--slide-auto-font-size', `${fontSize}em`);
     slider.style.setProperty('--slide-auto-ratio-font-size', `${ratioFontSize}em`);
@@ -337,7 +340,7 @@ export class DeckdeckgoDeck {
   }
 
   private async initDirection() {
-    this.dir = isMobile() ? this.directionMobile : this.direction;
+    this.dir = this.mobile ? this.directionMobile : this.direction;
   }
 
   /* BEGIN: Handle swipe */
@@ -681,7 +684,7 @@ export class DeckdeckgoDeck {
       // In standard case, we want to be able to reveal elements or not, as we wish but if we set reveal to false, we want to display everything straight at the begin.
       // Or we display also all reveal elements on mobile devices as there is no keyboard on mobile device to reveal elements
       // Also, no reveal for papyrus as we can scroll
-      if (!this.reveal || (!this.revealOnMobile && isMobile()) || this.dir === 'papyrus') {
+      if (!this.reveal || (!this.revealOnMobile && this.mobile) || this.dir === 'papyrus') {
         promises.push(this.revealAllContent());
       }