feat(#96): limit deck.title length to 45 characters

Author: peterpeterparker

studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx

@@ -5,6 +5,8 @@ import {debounceTime} from 'rxjs/operators';
 
 import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 
+import {Resources} from '../../../../utils/core/resources';
+
 @Component({
     tag: 'app-feed-card',
     styleUrl: 'app-feed-card.scss',
@@ -110,12 +112,30 @@ export class AppFeedCard {
             return;
         }
 
-        const title: string = ($event as InputUIEvent).target.textContent;
+        let title: string = ($event as InputUIEvent).target.textContent;
         if (title && title !== undefined && title !== '') {
+
+            if (title.length >= Resources.Constants.DECK.TITLE_MAX_LENGTH) {
+                title = title.substr(0, Resources.Constants.DECK.TITLE_MAX_LENGTH);
+            }
+
             this.captionSubject.next(title);
         }
     }
 
+    private onCaptionKeydown($event: KeyboardEvent) {
+        if ($event && $event.target &&
+            ($event.target as HTMLElement).textContent &&
+            ($event.target as HTMLElement).textContent.length > Resources.Constants.DECK.TITLE_MAX_LENGTH &&
+            $event.key !== 'Delete' &&
+            $event.key !== 'Backspace' &&
+            $event.key !== 'ArrowLeft' &&
+            $event.key !== 'ArrowRight' &&
+            !($event.key === 'a' && ($event.metaKey || $event.ctrlKey))) {
+            $event.preventDefault();
+        }
+    }
+
     render() {
         return <ion-card class={this.editable ? "ion-no-margin" : undefined}>
             {this.renderCardContent()}
@@ -127,7 +147,9 @@ export class AppFeedCard {
             {this.renderMiniature()}
 
             <ion-card-header>
-                <ion-card-title class="ion-text-uppercase" contentEditable={this.editable} onInput={(e: UIEvent) => this.onCaptionInput(e)}>{this.caption}</ion-card-title>
+                <ion-card-title class="ion-text-uppercase" contentEditable={this.editable}
+                                onInput={(e: UIEvent) => this.onCaptionInput(e)}
+                                onKeyDown={(e: KeyboardEvent) => this.onCaptionKeydown(e)}>{this.caption}</ion-card-title>
 
                 <ion-card-subtitle class="ion-text-lowercase">
                     {this.renderTags()}

studio/src/app/handlers/editor/deck-events/deck-events.handler.tsx

@@ -6,6 +6,7 @@ import {User} from '../../../models/user';
 import {Deck, DeckAttributes} from '../../../models/deck';
 
 import {Utils} from '../../../utils/core/utils';
+import {Resources} from '../../../utils/core/resources';
 
 import {SlideService} from '../../../services/slide/slide.service';
 import {DeckService} from '../../../services/deck/deck.service';
@@ -288,6 +289,10 @@ export class DeckEventsHandler {
 
                     // TODO: Add a check, we should not update the title from the slide in case it would have been set in the publication
 
+                    if (title.length >= Resources.Constants.DECK.TITLE_MAX_LENGTH) {
+                        title = title.substr(0, Resources.Constants.DECK.TITLE_MAX_LENGTH);
+                    }
+
                     currentDeck.name = title;
 
                     const updatedDeck: Deck = await this.deckService.put(currentDeck);

studio/src/app/utils/core/resources.tsx

@@ -0,0 +1,9 @@
+export class Resources {
+    static get Constants(): any {
+        return {
+            DECK: {
+                TITLE_MAX_LENGTH: 45
+            }
+        }
+    }
+}

studio/src/components.d.ts

@@ -8,9 +8,9 @@
 import '@stencil/core';
 
 import '@ionic/core';
-import 'ionicons';
 import 'deckdeckgo';
 import 'deckdeckgo-inline-editor';
+import 'ionicons';
 import {
   EventEmitter,
 } from '@stencil/core';