feat(#471): count answers with slots

deckgo · Nov 18, 2019 · 95f36a3 · 95f36a3
1 parent 131e2bb
commit 95f36a3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/webcomponents/slides/poll/src/components.d.ts b/webcomponents/slides/poll/src/components.d.ts
@@ -14,7 +14,6 @@ export namespace Components {
     'afterSwipe': () => Promise<void>;
     'beforeSwipe': (_enter: boolean, _reveal: boolean) => Promise<boolean>;
     'connectPollServer': boolean;
-    'countAnswers': number;
     'customActions': boolean;
     'customBackground': boolean;
     'hideContent': () => Promise<void>;
@@ -44,7 +43,6 @@ declare global {
 declare namespace LocalJSX {
   interface DeckgoSlidePoll {
     'connectPollServer'?: boolean;
-    'countAnswers'?: number;
     'customActions'?: boolean;
     'customBackground'?: boolean;
     'imgAlt'?: string;

diff --git a/webcomponents/slides/poll/src/components/slide/deckdeckgo-slide-poll.tsx b/webcomponents/slides/poll/src/components/slide/deckdeckgo-slide-poll.tsx
@@ -34,7 +34,8 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
   @Prop({reflectToAttr: true}) imgSrc: string;
   @Prop({reflectToAttr: true}) imgAlt: string;
 
-  @Prop() countAnswers: number = 5;
+  @State()
+  private countAnswers: number = 5;
 
   private answerSlots: number[];
 
@@ -62,7 +63,9 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
   private subscription: Subscription;
   private updateChartSubscription: Subscription;
 
-  componentWillLoad() {
+  async componentWillLoad() {
+    this.countAnswers = await this.initCountAnswers();
+
     this.answerSlots = Array.from({length: this.countAnswers}, (_v, i) => i);
 
     this.communicationService.watchPollKey().pipe(filter((key: string) => key !== undefined), take(1)).subscribe(async (key: string) => {
@@ -84,6 +87,23 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
     });
   }
 
+  private initCountAnswers(): Promise<number> {
+    return new Promise<number>((resolve) => {
+      const slots: NodeListOf<HTMLElement> = this.el.querySelectorAll(':scope > [slot]');
+
+      if (!slots || slots.length <= 0) {
+        resolve(0);
+        return;
+      }
+
+      const filterAnswers: HTMLElement[] = Array.from(slots).filter((slot: HTMLElement) => {
+          return slot.getAttribute('slot').indexOf('answer') > -1
+      });
+
+      resolve(filterAnswers ? filterAnswers.length : 0);
+    });
+  }
+
   async componentDidLoad() {
     await hideLazyLoadImages(this.el);
 

diff --git a/webcomponents/slides/poll/src/components/slide/readme.md b/webcomponents/slides/poll/src/components/slide/readme.md
@@ -10,7 +10,6 @@
 | Property            | Attribute             | Description | Type      | Default     |
 | ------------------- | --------------------- | ----------- | --------- | ----------- |
 | `connectPollServer` | `connect-poll-server` |             | `boolean` | `true`      |
-| `countAnswers`      | `count-answers`       |             | `number`  | `5`         |
 | `customActions`     | `custom-actions`      |             | `boolean` | `false`     |
 | `customBackground`  | `custom-background`   |             | `boolean` | `false`     |
 | `imgAlt`            | `img-alt`             |             | `string`  | `undefined` |