feat: reorder slides (gui)

Author: peterpeterparker

studio/src/app/modals/editor/app-slide-navigate/app-slide-navigate.tsx

@@ -1,4 +1,5 @@
-import {Component, Listen, Element, State, h} from '@stencil/core';
+import {Component, Listen, Element, State, h, EventEmitter, Event} from '@stencil/core';
+import {ItemReorderEventDetail} from '@ionic/core';
 
 @Component({
     tag: 'app-slide-navigate',
@@ -11,6 +12,8 @@ export class AppSlideNavigate {
     @State()
     slides: string[];
 
+    @Event() private reorder: EventEmitter<ItemReorderEventDetail>;
+
     async componentDidLoad() {
         history.pushState({modal: true}, null);
 
@@ -26,7 +29,7 @@ export class AppSlideNavigate {
         await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss();
     }
 
-    private async jumpToSlide(index: number) {
+    async jumpToSlide(index: number) {
         await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss(index);
     }
 
@@ -71,6 +74,19 @@ export class AppSlideNavigate {
         });
     }
 
+    private onReorder($event: CustomEvent<ItemReorderEventDetail>): Promise<void> {
+        return new Promise<void>((resolve) => {
+            if (!$event) {
+                resolve();
+                return;
+            }
+
+            this.reorder.emit($event.detail);
+
+            resolve();
+        });
+    }
+
     render() {
         return [
             <ion-header>
@@ -84,9 +100,9 @@ export class AppSlideNavigate {
                 </ion-toolbar>
             </ion-header>,
             <ion-content class="ion-padding">
-                <ion-list>
+                <ion-reorder-group onIonItemReorder={($event: CustomEvent<ItemReorderEventDetail>) => this.onReorder($event)} disabled={!this.slides || this.slides.length <= 1}>
                     {this.renderSlides()}
-                </ion-list>
+                </ion-reorder-group>
             </ion-content>
         ];
     }
@@ -100,6 +116,7 @@ export class AppSlideNavigate {
 
                     return <ion-item ion-item button onClick={() => this.jumpToSlide(i)}>
                         <ion-label>{text}</ion-label>
+                        <ion-reorder slot="end"></ion-reorder>
                     </ion-item>
                 })
             );

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -25,6 +25,7 @@ import {AnonymousService} from '../../../services/editor/anonymous/anonymous.ser
 import {NavDirection, NavService} from '../../../services/core/nav/nav.service';
 import {DeckEditorService} from '../../../services/editor/deck/deck-editor.service';
 import {BusyService} from '../../../services/editor/busy/busy.service';
+import {ItemReorderEventDetail} from '@ionic/core';
 
 @Component({
     tag: 'app-editor',
@@ -87,7 +88,7 @@ export class AppEditor {
         this.busyService = BusyService.getInstance();
     }
 
-    @Listen('ionRouteDidChange', { target: 'window' })
+    @Listen('ionRouteDidChange', {target: 'window'})
     async onRouteDidChange($event: CustomEvent) {
         if (!$event || !$event.detail) {
             return;
@@ -479,6 +480,37 @@ export class AppEditor {
         this.hideNavigation = $event ? DeckDeckGoUtils.isIOS() && $event.detail : false;
     }
 
+    @Listen('reorder', {target: 'document'})
+    async onReorderSlides($event: CustomEvent<ItemReorderEventDetail>) {
+        if (!$event || !$event.detail) {
+            return;
+        }
+
+        await this.reorderSlides($event.detail);
+    }
+
+    private reorderSlides(detail: ItemReorderEventDetail): Promise<void> {
+        return new Promise<void>((resolve) => {
+            if (!detail) {
+                resolve();
+                return;
+            }
+
+            if (detail.from < 0 || detail.to < 0 || !this.slides || detail.to >= this.slides.length || detail.from === detail.to) {
+                resolve();
+                return;
+            }
+
+            this.slides.splice(detail.to, 0, ...this.slides.splice(detail.from, 1));
+            this.slides = [...this.slides];
+
+            // Finish the reorder and position the item in the DOM based on where the gesture ended. This method can also be called directly by the reorder group
+            detail.complete();
+
+            resolve();
+        });
+    }
+
     render() {
         return [
             <app-navigation publish={true} class={this.hideNavigation ? 'hidden' : undefined}></app-navigation>,
@@ -502,7 +534,8 @@ export class AppEditor {
                 <app-editor-toolbar></app-editor-toolbar>
             </ion-content>,
             <ion-footer class={this.presenting ? 'idle' : undefined}>
-                <app-editor-actions hideFooterActions={this.hideFooterActions} fullscreen={this.fullscreen} slides={this.slides}
+                <app-editor-actions hideFooterActions={this.hideFooterActions} fullscreen={this.fullscreen}
+                                    slides={this.slides}
                                     onSignIn={() => this.signIn()}
                                     onAddSlide={($event: CustomEvent<any>) => this.addSlide($event)}
                                     onAnimatePrevNextSlide={($event: CustomEvent<boolean>) => this.animatePrevNextSlide($event)}

studio/src/components.d.ts

@@ -15,6 +15,9 @@ import {
 import {
   MoreAction,
 } from './app/utils/editor/more-action';
+import {
+  ItemReorderEventDetail,
+} from '@ionic/core';
 
 export namespace Components {
   interface AppAbout {}
@@ -637,7 +640,9 @@ declare namespace LocalJSX {
     'redirect'?: string;
     'redirectId'?: string;
   }
-  interface AppSlideNavigate extends JSXBase.HTMLAttributes<HTMLAppSlideNavigateElement> {}
+  interface AppSlideNavigate extends JSXBase.HTMLAttributes<HTMLAppSlideNavigateElement> {
+    'onReorder'?: (event: CustomEvent<ItemReorderEventDetail>) => void;
+  }
   interface AppSlotType extends JSXBase.HTMLAttributes<HTMLAppSlotTypeElement> {
     'selectedElement'?: HTMLElement;
   }