feat(#471): add slide Poll to list of selectable slide of studio

deckgo · Nov 18, 2019 · 0e6abf1 · 0e6abf1
1 parent a161cda
commit 0e6abf1
Show file tree

Hide file tree

Showing 11 changed files with 1,243 additions and 134 deletions.
diff --git a/studio/package-lock.json b/studio/package-lock.json
diff --git a/studio/package.json b/studio/package.json
@@ -14,7 +14,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/charts": "^1.0.0-rc.3-1",
+    "@deckdeckgo/charts": "file:../webcomponents/charts",
     "@deckdeckgo/color": "^1.0.0-rc.2-3",
     "@deckdeckgo/core": "^1.0.0-rc.2",
     "@deckdeckgo/deck-utils": "^1.0.0-rc.1-2",
@@ -27,6 +27,7 @@
     "@deckdeckgo/slide-chart": "^1.0.0-rc.2",
     "@deckdeckgo/slide-content": "^1.0.0-rc.1",
     "@deckdeckgo/slide-gif": "^1.0.0-rc.1-1",
+    "@deckdeckgo/slide-poll": "file:../webcomponents/slides/poll",
     "@deckdeckgo/slide-qrcode": "^1.0.0-rc.2-1",
     "@deckdeckgo/slide-split": "^1.0.0-rc.1",
     "@deckdeckgo/slide-title": "^1.0.0-rc.1",

diff --git a/studio/src/app/models/data/slide.tsx b/studio/src/app/models/data/slide.tsx
@@ -6,7 +6,8 @@ export enum SlideTemplate {
     AUTHOR = 'author',
     YOUTUBE = 'youtube',
     QRCODE = 'qrcode',
-    CHART = 'chart'
+    CHART = 'chart',
+    POLL = 'poll'
 }
 
 export enum SlideChartType {

diff --git a/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss b/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss
@@ -102,15 +102,15 @@ app-create-slide {
       --slide-padding-start: 0;
     }
 
-    deckgo-slide-gif, deckgo-slide-author {
+    deckgo-slide-gif, deckgo-slide-author, deckgo-slide-poll {
       --slide-width: 216px;
     }
 
-    deckgo-slide-gif, deckgo-slide-author {
+    deckgo-slide-gif {
       --slide-gif-height: 110px;
     }
 
-    deckgo-slide-author {
+    deckgo-slide-author, deckgo-slide-poll {
       --slide-height: 110px;
     }
 
@@ -146,6 +146,32 @@ app-create-slide {
       }
     }
 
+    deckgo-slide-poll {
+      --slide-padding-top: 4px;
+      --slide-padding-start: 2px;
+      --slide-padding-end: 6px;
+      --slide-padding-bottom: 2px;
+
+      --slide-poll-grid-column-gap: 0;
+
+      --deckgo-chart-fill-color-answer-1: var(--ion-color-primary);
+      --deckgo-chart-fill-color-answer-2: var(--ion-color-secondary);
+      --deckgo-chart-fill-color-answer-3: var(--ion-color-tertiary);
+
+      --slide-chart-margin-end: 0;
+      --slide-chart-margin-start: 4px;
+      --slide-chart-margin-top: 6px;
+      --slide-chart-margin-bottom: 8px;
+
+      --deckgo-chart-text-display: none;
+
+      p[slot="awaiting_votes"] {
+        text-align: center;
+        width: 75%;
+        border: 0;
+      }
+    }
+
     p {
       width: 100%;
       border-radius: 4px;

diff --git a/studio/src/app/popovers/editor/app-create-slide/app-create-slide.tsx b/studio/src/app/popovers/editor/app-create-slide/app-create-slide.tsx
@@ -74,8 +74,9 @@ export class AppCreateSlide {
             const slideAuthor: HTMLElement = this.el.querySelector('deckgo-slide-author.showcase');
             const slideQRCode: HTMLElement = this.el.querySelector('deckgo-slide-qrcode.showcase');
             const slidesChart: HTMLElement[] = Array.from(this.el.querySelectorAll('deckgo-slide-chart.showcase'));
+            const slidesPoll: HTMLElement = this.el.querySelector('deckgo-slide-poll.showcase');
 
-            const slides: HTMLElement[] = [slideGif, slideAuthor, slideQRCode, ...slidesChart];
+            const slides: HTMLElement[] = [slideGif, slideAuthor, slideQRCode, ...slidesChart, slidesPoll];
 
             if (!slides || slides.length <= 0) {
                 resolve();
@@ -238,6 +239,7 @@ export class AppCreateSlide {
                         </p>
                     </deckgo-slide-content>
                 </div>
+
                 <div class="item" custom-tappable onClick={() => this.selectUnselectCharts()}>
                     <deckgo-slide-chart class="showcase" type="line" y-axis-domain="extent" date-pattern="dd.MM.yyyy"
                                         marginTop={0} marginBottom={0} marginLeft={0} marginRight={0}
@@ -268,6 +270,16 @@ export class AppCreateSlide {
                         <p slot="social-link">Web</p>
                     </deckgo-slide-author>
                 </div>
+
+                <div class="item" custom-tappable onClick={() => this.closePopover(SlideTemplate.POLL)}>
+                    <deckgo-slide-poll class="showcase" poll-link="https://deckdeckgo.com" poll-server="http://localhost:3003" count-answers={3} connectPollServer={false}>
+                        <p slot="question">Poll to engage your audience</p>
+                        <p slot="answer-1">Yes</p>
+                        <p slot="answer-2">No</p>
+                        <p slot="answer-3">Don't know</p>
+                        <p slot="awaiting_votes">Live votes with mobile devices</p>
+                    </deckgo-slide-poll>
+                </div>
             </div>
         ];
     }

diff --git a/studio/src/global/app-dev.ts b/studio/src/global/app-dev.ts
@@ -23,6 +23,7 @@ import '@deckdeckgo/slide-youtube';
 import '@deckdeckgo/slide-author';
 import '@deckdeckgo/slide-qrcode';
 import '@deckdeckgo/slide-chart';
+import '@deckdeckgo/slide-poll';
 
 import {setupConfig as setupDeckGoConfig} from '../app/services/core/environment/environment-config';
 

diff --git a/studio/src/global/app.ts b/studio/src/global/app.ts
@@ -23,6 +23,7 @@ import '@deckdeckgo/slide-youtube';
 import '@deckdeckgo/slide-author';
 import '@deckdeckgo/slide-qrcode';
 import '@deckdeckgo/slide-chart';
+import '@deckdeckgo/slide-poll';
 
 import {setupConfig as setupDeckGoConfig} from '../app/services/core/environment/environment-config';
 

diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
@@ -61,6 +61,10 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
       return;
     }
 
+    if (!this.x0 || !this.x1 || !this.y) {
+      return;
+    }
+
     if (!this.data || this.data.length <= 0) {
       return;
     }

diff --git a/webcomponents/slides/poll/src/components.d.ts b/webcomponents/slides/poll/src/components.d.ts
@@ -13,6 +13,7 @@ export namespace Components {
   interface DeckgoSlidePoll {
     'afterSwipe': () => Promise<void>;
     'beforeSwipe': (_enter: boolean, _reveal: boolean) => Promise<boolean>;
+    'connectPollServer': boolean;
     'countAnswers': number;
     'customActions': boolean;
     'customBackground': boolean;
@@ -42,6 +43,7 @@ declare global {
 
 declare namespace LocalJSX {
   interface DeckgoSlidePoll {
+    'connectPollServer'?: boolean;
     'countAnswers'?: number;
     'customActions'?: boolean;
     'customBackground'?: boolean;

diff --git a/webcomponents/slides/poll/src/components/slide/deckdeckgo-slide-poll.tsx b/webcomponents/slides/poll/src/components/slide/deckdeckgo-slide-poll.tsx
@@ -24,6 +24,8 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
 
   @Prop() pollServer: string;
 
+  @Prop() connectPollServer: boolean = true;
+
   @Prop({reflectToAttr: true}) pollLink: string;
 
   @Prop({reflectToAttr: true}) customActions: boolean = false;
@@ -88,8 +90,6 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
     this.initWindowResize();
 
     this.slideDidLoad.emit();
-
-    this.chartData = await this.initChartData();
   }
 
   async componentDidUpdate() {
@@ -130,7 +130,7 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
 
   private async init() {
     await this.initQRCodeSize();
-    await this.initSizeAndDraw();
+    await this.initChartSize();
   }
 
   private initQRCodeSize(): Promise<void> {
@@ -156,12 +156,12 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
     });
   }
 
-  private initSizeAndDraw(): Promise<void> {
+  private initChartSize(): Promise<void> {
     return new Promise<void>(async (resolve) => {
       const container: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-slide-poll-chart');
 
       if (container) {
-        this.chartWidth = container.clientWidth - 128;
+        this.chartWidth = container.clientWidth * 0.9;
         this.chartHeight = this.chartWidth * 9 / 16;
 
         const element: HTMLElement = this.el.shadowRoot.querySelector('deckgo-bar-chart');
@@ -292,6 +292,10 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
   }
 
   private async initPoll() {
+    if (!this.connectPollServer) {
+      return;
+    }
+
     if (this.chartData && this.chartData.length >= 1) {
       await this.communicationService.connect(this.pollServer, this.chartData[0] as DeckdeckgoPollQuestion);
     }
@@ -329,6 +333,8 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
   @Method()
   lazyLoadContent(): Promise<void> {
     return new Promise<void>(async (resolve) => {
+      this.chartData = await this.initChartData();
+
       const promises = [];
       promises.push(lazyLoadContent(this.el));
       promises.push(this.init());
@@ -378,18 +384,12 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
   }
 
   private renderPoll() {
-    if (!this.pollKey) {
-      return undefined;
-    }
-
     return <div class="deckgo-slide-poll">
       <div class="deckgo-slide-poll-qrcode">
         <deckgo-qrcode content={this.pollLink}>
           {this.renderLogo()}
         </deckgo-qrcode>
-        <p>
-          <slot name="how_to"></slot>
-        </p>
+        <slot name="how_to"></slot>
       </div>
 
       <div class="deckgo-slide-poll-chart">
@@ -420,7 +420,12 @@ export class DeckdeckgoSlidePoll implements DeckdeckgoSlideResize {
       return undefined;
     }
 
+    if (!this.chartData || this.chartData.length <= 0) {
+      return undefined;
+    }
+
     return <deckgo-bar-chart width={this.chartWidth} height={this.chartHeight} data={this.chartData}
+                             margin-top={0} margin-bottom={0} margin-left={0} margin-right={0}
                              animation={true} yAxis={false}></deckgo-bar-chart>
   }
 

diff --git a/webcomponents/slides/poll/src/components/slide/readme.md b/webcomponents/slides/poll/src/components/slide/readme.md
@@ -7,15 +7,16 @@
 
 ## Properties
 
-| Property           | Attribute           | Description | Type      | Default     |
-| ------------------ | ------------------- | ----------- | --------- | ----------- |
-| `countAnswers`     | `count-answers`     |             | `number`  | `5`         |
-| `customActions`    | `custom-actions`    |             | `boolean` | `false`     |
-| `customBackground` | `custom-background` |             | `boolean` | `false`     |
-| `imgAlt`           | `img-alt`           |             | `string`  | `undefined` |
-| `imgSrc`           | `img-src`           |             | `string`  | `undefined` |
-| `pollLink`         | `poll-link`         |             | `string`  | `undefined` |
-| `pollServer`       | `poll-server`       |             | `string`  | `undefined` |
+| 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` |
+| `imgSrc`            | `img-src`             |             | `string`  | `undefined` |
+| `pollLink`          | `poll-link`           |             | `string`  | `undefined` |
+| `pollServer`        | `poll-server`         |             | `string`  | `undefined` |
 
 
 ## Events