feat: RTL support and print improvements

Author: peterpeterparker

package.json

@@ -37,11 +37,11 @@
   "dependencies": {
     "@ionic/core": "4.0.0-rc.0",
     "@webcomponents/custom-elements": "^1.2.1",
-    "deckdeckgo": "^1.0.0-beta.22-1",
-    "deckdeckgo-charts": "^1.0.0-alpha.3",
-    "deckdeckgo-highlight-code": "^1.0.0-alpha.1",
-    "deckdeckgo-qrcode": "^1.0.0-alpha.3",
-    "deckdeckgo-remote": "^1.0.0-alpha.4",
+    "deckdeckgo": "^1.0.0-beta.25",
+    "deckdeckgo-charts": "^1.0.0-alpha.4",
+    "deckdeckgo-highlight-code": "^1.0.0-alpha.10",
+    "deckdeckgo-qrcode": "^1.0.0-alpha.4",
+    "deckdeckgo-remote": "^1.0.0-alpha.5",
     "ionicons": "^4.5.1"
   },
   "keywords": [

src/css/deck.css

@@ -4,7 +4,6 @@ deckgo-deck {
     --pager-text-color: var(--ion-color-primary-shade);
 
     --pager-margin-bottom: 18px;
-    --pager-margin-start: calc(10px + var(--ion-safe-area-right, 0px) + 5px);
 
     --pager-size: 40px;
-}
+}

src/css/theme.css

@@ -11,3 +11,7 @@ ion-content {
 ion-fab {
     direction: ltr;
 }
+
+ion-fab ion-fab-button.hide-on-mobile {
+    display: var(--deckgo-hide-on-mobile);
+}

src/index.html

@@ -211,16 +211,17 @@ <h2 slot="title">Get started now 🔥</h2>
             <ion-icon name="apps"></ion-icon>
         </ion-fab-button>
         <ion-fab-list side="start">
-            <ion-fab-button color="primary" onclick="toggleFullScreen()"><ion-icon name="expand"></ion-icon></ion-fab-button>
-            <ion-fab-button color="primary" onclick="presentSlidePicker()"><ion-icon name="skip-forward"></ion-icon></ion-fab-button>
+            <ion-fab-button class="hide-on-mobile" color="primary" onclick="toggleFullScreen()"><ion-icon name="expand"></ion-icon></ion-fab-button>
+            <ion-fab-button color="primary" onclick="presentSlidePicker()"><ion-icon name="bookmark"></ion-icon></ion-fab-button>
             <ion-fab-button color="primary" onclick="nextSlide()"><ion-icon name="arrow-forward"></ion-icon></ion-fab-button>
             <ion-fab-button color="primary" onclick="previousSlide()"><ion-icon name="arrow-back"></ion-icon></ion-fab-button>
         </ion-fab-list>
         <ion-fab-list side="top">
             <ion-fab-button color="primary" onclick="presentAlert()"><ion-icon name="help"></ion-icon></ion-fab-button>
-            <ion-fab-button color="primary" onclick="doPrint()"><ion-icon name="print"></ion-icon></ion-fab-button>
+            <ion-fab-button id="buttonSlideNotes" color="primary" onclick="displaySlideNotes()"><ion-icon name="clipboard"></ion-icon></ion-fab-button>
+            <ion-fab-button class="hide-on-mobile" color="primary" onclick="doPrint()"><ion-icon name="print"></ion-icon></ion-fab-button>
             <ion-fab-button color="primary" onclick="reconnectRemoteControl()"><ion-icon name="link"></ion-icon></ion-fab-button>
-            <ion-fab-button color="primary" onclick="window.open('https://github.com/deckgo/deckdeckgo', '_blank');"><ion-icon name="logo-github"></ion-icon></ion-fab-button>
+            <ion-fab-button color="primary" onclick="window.open('https://github.com/fluster/deckdeckgo', '_blank');"><ion-icon name="logo-github"></ion-icon></ion-fab-button>
         </ion-fab-list>
     </ion-fab>
 

src/index.js

@@ -14,9 +14,9 @@ import './scripts/loading.js';
 import './scripts/slider.js';
 import './scripts/sliderJumpTo.js';
 import './scripts/modal.js';
-import './scripts/notesModal.js';
 import './scripts/alert.js';
 import './scripts/remoteControl.js';
+import './scripts/actions.js';
 
 import { defineCustomElements as ionicElements } from '@ionic/core/loader';
 ionicElements(window);
@@ -37,6 +37,7 @@ deckDeckGoElements(window).then(async () => {
     await deckDeckGoHighlightCodeElements(window);
 
     await postLoading();
+    await initActions();
 
     deckDeckGoRemoteElements(window).then(async () => {
         await initRemote();

src/scripts/actions.js

@@ -0,0 +1,39 @@
+initActions = () => {
+    return new Promise(async (resolve) => {
+        const slider = document.getElementById('slider');
+
+        if (slider) {
+            slider.addEventListener('slidesDidLoad', async (_slides) => {
+                await initActionButtons(slider)
+            });
+        }
+
+        resolve();
+    });
+};
+
+function initActionButtons(slider) {
+    return new Promise(async (resolve) => {
+        const ionFab = document.querySelector('ion-fab');
+
+        if (ionFab) {
+            const mobile = await slider.isMobile();
+
+            if (mobile) {
+                ionFab.style.setProperty('--deckgo-hide-on-mobile', 'none');
+            }
+
+            // Workaround: https://github.com/deckgo/deckdeckgo-starter/issues/31
+            if (document.dir === 'rtl') {
+                const ionFabList = ionFab.querySelector('ion-fab-list[side="start"]');
+                if (ionFabList) {
+                    ionFabList.setAttribute('side', 'end');
+                }
+
+                ionFab.setAttribute('horizontal', 'start');
+            }
+        }
+
+        resolve();
+    });
+}