feat: new pager style

Author: peterpeterparker

src/components.d.ts

@@ -20,6 +20,7 @@ export namespace Components {
     'isEnd': () => Promise<boolean>;
     'keyboard': boolean;
     'pager': boolean;
+    'pagerPercentage': boolean;
     'slideNext': () => Promise<void>;
     'slidePrev': () => Promise<void>;
     'slideTo': (index: number, speed?: number) => Promise<void>;
@@ -28,15 +29,18 @@ export namespace Components {
   interface DeckgoDeckAttributes extends StencilHTMLAttributes {
     'keyboard'?: boolean;
     'pager'?: boolean;
+    'pagerPercentage'?: boolean;
   }
 
   interface DeckgoPager {
     'activeIndex': number;
     'length': number;
+    'percentage': boolean;
   }
   interface DeckgoPagerAttributes extends StencilHTMLAttributes {
     'activeIndex'?: number;
     'length'?: number;
+    'percentage'?: boolean;
   }
 
   interface DeckgoSlideCode {

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.scss

@@ -18,8 +18,7 @@ div.deckgo-deck {
 div.deckgo-pager {
   position: fixed;
   bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 0);
+  left: 0;
 }
 
 @media print {

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx

@@ -18,6 +18,7 @@ export class DeckdeckgoDeck {
   @Prop() keyboard: boolean = true;
 
   @Prop() pager: boolean = true;
+  @Prop() pagerPercentage: boolean = true;
 
   private startX: number = null;
   private deckTranslateX: number = 0;
@@ -378,7 +379,7 @@ export class DeckdeckgoDeck {
   render() {
     return [
       <div class="deckgo-deck"><slot/></div>,
-      <div class="deckgo-pager">{this.pager ? <deckgo-pager active-index={this.activeIndex} length={this.length}></deckgo-pager> : ''}</div>
+      <div class="deckgo-pager">{this.pager ? <deckgo-pager active-index={this.activeIndex} length={this.length} percentage={this.pagerPercentage}></deckgo-pager> : ''}</div>
     ]
   }
 

src/components/pager/deckdeckgo-pager/deckdeckgo-pager.scss

@@ -1,20 +1,33 @@
-div.deckgo-pager-container {
-  width: 30vw;
-  margin-bottom: 8px;
+.deckgo-pager-circular-chart {
+  height: var(--pager-size, 56px);
+  width: var(--pager-size, 56px);
+  margin: var(--pager-margin-top, 8px) var(--pager-margin-end, 8px) var(--pager-margin-bottom, 8px) var(--pager-margin-start, 8px);
+  display: block;
+}
 
-  display: flex;
-  justify-content: flex-start;
+.deckgo-pager-circle-bg {
+  fill: none;
+  stroke: var(--pager-background, #eee);
+  stroke-width: var(--pager-stroke-outter-width, 2.8);
+}
 
-  div.deckgo-pager-step {
-    background: lightgrey;
-    height: 2px;
+.deckgo-pager-circle {
+  stroke: var(--pager-color, #4c8dff);
+  fill: none;
+  stroke-width: var(--pager-stroke-inner-width, 1.8);
+  stroke-linecap: round;
+}
 
-    &:not(:last-child) {
-      margin-right: 2px;
-    }
+.deckgo-pager-percentage {
+  fill: var(--pager-text-color, #4c8dff);
+  font-family: sans-serif;
+  font-size: 0.5em;
+  text-anchor: middle;
+  font-weight: 300;
+}
 
-    &.deckgo-pager-current {
-      background: black;
-    }
+@media print {
+  .deckgo-pager-circular-chart {
+    display: none;
   }
 }

src/components/pager/deckdeckgo-pager/deckdeckgo-pager.tsx

@@ -11,34 +11,40 @@ export class DeckdeckgoPager {
   @Prop() activeIndex: number;
   @Prop() length: number;
 
+  @Prop() percentage: boolean = false;
+
   @State()
-  private steps: number[] = [];
   private progression: number = 0;
 
   @Watch('length')
+  @Watch('activeIndex')
   calculateProgression() {
-    this.steps = Array.from({ length: this.length }, (_v, i) => i);
     this.progression = Math.round(((this.activeIndex + 1) / this.length) * 100);
   }
 
+  // Nice circular percentage chart from the article of Sergio Pedercini
+  // https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705
   render() {
-    return <div class="deckgo-pager-container">
-      {this.renderSteps()}
-    </div>
+    const ratio: string = '' + this.progression + ', 100';
+
+    return <svg viewBox="0 0 36 36" class="deckgo-pager-circular-chart">
+      <path class="deckgo-pager-circle-bg"
+            d="M18 2.0845
+            a 15.9155 15.9155 0 0 1 0 31.831
+            a 15.9155 15.9155 0 0 1 0 -31.831"
+      />
+      <path class="deckgo-pager-circle"
+            stroke-dasharray={ratio}
+            d="M18 2.0845
+        a 15.9155 15.9155 0 0 1 0 31.831
+        a 15.9155 15.9155 0 0 1 0 -31.831"
+      />
+      {this.renderText()}
+    </svg>
   }
 
-  private renderSteps() {
-    const style = {
-      width: this.progression + '%'
-    };
-
-    return (
-      this.steps.map((i: number) => {
-        return <div
-          class={i === this.activeIndex ? 'deckgo-pager-current deckgo-pager-step' : 'deckgo-pager-step'}
-          style={style}></div>
-      })
-    );
+  private renderText() {
+    return this.percentage ? <text x="18" y="20.35" className="deckgo-pager-percentage">{this.progression}%</text> : undefined;
   }
 
 }

src/index.html

@@ -122,7 +122,7 @@ <h1 slot="title">Code</h1>
   }
 </script>
 
-<div style="position: fixed; bottom: 0;">
+<div style="position: fixed; bottom: 0; right: 0;">
   <button onclick="slidePrev()">Prev</button>
   <button onclick="slideNext()">Next</button>
   <button onclick="slideTo()">Slide to</button>