feat: modify pager display and add ability to display steps

Author: peterpeterparker

docs/docs/deck/app-deck-pager/app-deck-pager.md

@@ -4,16 +4,18 @@
 
 Also worth to notice that the pager inherits per default the document and deck direction (LTR or RTL for example).
 
-- [Show or hide](#app-deck-pager-show-or-hide)
+- [Deck](#app-deck-pager-deck)
 - [Customization](#app-deck-pager-customization)
 
 ## Show or hide
 
-The show or hide options of the pager are available on the `<deckgo-deck>` element.
+To show or hide the pager, a CSS4 variable has to be set on the `<deckgo-deck>` element. Two more options are also available when set on this element.
 
-| Attribute                      | Type   | Default   | Description   |
-| -------------------------- |-----------------|-----------------|-----------------|
-| pagerPercentage | boolean | true | Show or hide the progression in percentage inside the pager |
+| Attribute                      | Default   | Description   |
+| -------------------------- |-----------------|-----------------|
+| --pager-display | | The display property of the pager. Set to `none` to hide it. |
+| --pager-position-left | | The left attribute of the absolute positioning of the pager over the deck |
+| --pager-position-right | | The right attribute of the absolute positioning of the pager over the deck |
 
 ## Customization
 
@@ -31,8 +33,9 @@ The following style options are available to style the pager:
 | --pager-text-size | 0.5em | |
 | --pager-stroke-outer-width | 2.8 | |
 | --pager-stroke-inner-width | 1.8 | |
-| --pager-position-left | | |
-| --pager-position-right | | |
-| --pager-display | | To hide the pager |
+| --pager-text-percentage-display | hidden | Set to `block` to display a progression with percentage (for example: 35%) |
+| --pager-text-slides-display | hidden | Set to `block` to display a progression as slides' count (for example: 2/15) |
+
+Note: of course if you would display both `--pager-text-percentage-display` and `--pager-text-slides-display` it would be a weird display, use just one at once.
 
 [DeckDeckGo]: https://deckdeckgo.com

docs/src/app/pages/docs/deck/app-deck-pager/app-deck-pager.tsx

@@ -34,25 +34,33 @@ export class AppDeckPager {
 <p><a href="https://deckdeckgo.com">DeckDeckGo</a> will per default display a pager in form of a progress circle bar. It&#39;s possible to hide it or to customize the following various style options.</p>
 <p>Also worth to notice that the pager inherits per default the document and deck direction (LTR or RTL for example).</p>
 <ul>
-<li><a href="#app-deck-pager-show-or-hide">Show or hide</a></li>
+<li><a href="#app-deck-pager-deck">Deck</a></li>
 <li><a href="#app-deck-pager-customization">Customization</a></li>
 </ul>
 <h2 id="app-deck-pager-show-or-hide">Show or hide</h2>
-<p>The show or hide options of the pager are available on the <code>&lt;deckgo-deck&gt;</code> element.</p>
+<p>To show or hide the pager, a CSS4 variable has to be set on the <code>&lt;deckgo-deck&gt;</code> element. Two more options are also available when set on this element.</p>
 <table>
 <thead>
 <tr>
 <th>Attribute</th>
-<th>Type</th>
 <th>Default</th>
 <th>Description</th>
 </tr>
 </thead>
 <tbody><tr>
-<td>pagerPercentage</td>
-<td>boolean</td>
-<td>true</td>
-<td>Show or hide the progression in percentage inside the pager</td>
+<td>--pager-display</td>
+<td></td>
+<td>The display property of the pager. Set to <code>none</code> to hide it.</td>
+</tr>
+<tr>
+<td>--pager-position-left</td>
+<td></td>
+<td>The left attribute of the absolute positioning of the pager over the deck</td>
+</tr>
+<tr>
+<td>--pager-position-right</td>
+<td></td>
+<td>The right attribute of the absolute positioning of the pager over the deck</td>
 </tr>
 </tbody></table>
 <h2 id="app-deck-pager-customization">Customization</h2>
@@ -116,21 +124,17 @@ export class AppDeckPager {
 <td></td>
 </tr>
 <tr>
-<td>--pager-position-left</td>
-<td></td>
-<td></td>
-</tr>
-<tr>
-<td>--pager-position-right</td>
-<td></td>
-<td></td>
+<td>--pager-text-percentage-display</td>
+<td>hidden</td>
+<td>Set to <code>block</code> to display a progression with percentage (for example: 35%)</td>
 </tr>
 <tr>
-<td>--pager-display</td>
-<td></td>
-<td>To hide the pager</td>
+<td>--pager-text-slides-display</td>
+<td>hidden</td>
+<td>Set to <code>block</code> to display a progression as slides&#39; count (for example: 2/15)</td>
 </tr>
 </tbody></table>
+<p>Note: of course if you would display both <code>--pager-text-percentage-display</code> and <code>--pager-text-slides-display</code> it would be a weird display, use just one at once.</p>
 </main>
 
         <app-footer></app-footer>

webcomponents/core/CHANGELOG.md

@@ -1,3 +1,18 @@
+<a name="1.0.0-beta.38"></a>
+# 1.0.0-beta.38 (2019-06-06)
+
+### Breaking changes
+
+* hide pager progression with a CSS4 variable
+
+### Fix
+
+* don't track slides' swipe if contextmenu is fired
+
+### Features
+
+* new progression text as slides count available
+
 <a name="1.0.0-beta.37"></a>
 # 1.0.0-beta.37 (2019-06-04)
 

webcomponents/core/src/components.d.ts

@@ -23,7 +23,6 @@ export namespace Components {
     'isMobile': () => Promise<boolean>;
     'keyboard': boolean;
     'loadBackground': () => Promise<void>;
-    'pagerPercentage': boolean;
     'slideNext': (slideAnimation?: boolean, emitEvent?: boolean) => Promise<void>;
     'slidePrev': (slideAnimation?: boolean, emitEvent?: boolean) => Promise<void>;
     'slideTo': (index: number, speed?: number, emitEvent?: boolean) => Promise<void>;
@@ -39,7 +38,6 @@ export namespace Components {
   interface DeckgoPager {
     'activeIndex': number;
     'length': number;
-    'percentage': boolean;
   }
   interface DeckgoSlideAuthor {
     'afterSwipe': () => Promise<void>;
@@ -280,7 +278,6 @@ declare namespace LocalJSX {
     'onSlideToChange'?: (event: CustomEvent<number>) => void;
     'onSlideWillChange'?: (event: CustomEvent<number>) => void;
     'onSlidesDidLoad'?: (event: CustomEvent<any>) => void;
-    'pagerPercentage'?: boolean;
   }
   interface DeckgoGif extends JSXBase.HTMLAttributes<HTMLDeckgoGifElement> {
     'alt'?: string;
@@ -291,7 +288,6 @@ declare namespace LocalJSX {
   interface DeckgoPager extends JSXBase.HTMLAttributes<HTMLDeckgoPagerElement> {
     'activeIndex'?: number;
     'length'?: number;
-    'percentage'?: boolean;
   }
   interface DeckgoSlideAuthor extends JSXBase.HTMLAttributes<HTMLDeckgoSlideAuthorElement> {
     'customActions'?: boolean;

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

@@ -23,8 +23,6 @@ export class DeckdeckgoDeck {
 
   @Prop() keyboard: boolean = true;
 
-  @Prop() pagerPercentage: boolean = true;
-
   @Prop() embedded: boolean = false;
 
   @Prop() cloneBackground: boolean = true;
@@ -190,7 +188,6 @@ export class DeckdeckgoDeck {
 
   @Listen('mousedown', {passive: true})
   mousedown($event: MouseEvent) {
-    console.log('down');
     this.start($event);
   }
 
@@ -201,7 +198,6 @@ export class DeckdeckgoDeck {
 
   @Listen('mouseup', {passive: true})
   async mouseup($event: MouseEvent) {
-    console.log('up');
     await this.stop($event);
   }
 
@@ -212,7 +208,6 @@ export class DeckdeckgoDeck {
 
   @Listen('mousemove', {passive: true})
   async mousemove($event: MouseEvent) {
-    console.log('move');
     await this.move($event);
   }
 
@@ -819,7 +814,7 @@ export class DeckdeckgoDeck {
         <slot name="background"></slot>
       </div>,
       <div class="deckgo-pager">
-        <deckgo-pager active-index={this.activeIndex} length={this.length} percentage={this.pagerPercentage}></deckgo-pager>
+        <deckgo-pager active-index={this.activeIndex} length={this.length}></deckgo-pager>
       </div>
     ]
   }

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

@@ -27,11 +27,19 @@
   transition: stroke-dasharray 500ms cubic-bezier(0.23, 1, 0.320, 1);
 }
 
-.deckgo-pager-percentage {
+.deckgo-pager-progression {
   fill: var(--pager-text-color, #4c8dff);
   font-size: var(--pager-text-size, 0.5em);
   text-anchor: middle;
   font-weight: 300;
+
+  &.deckgo-pager-percentage {
+    display: var(--pager-text-percentage-display, none);
+  }
+
+  &.deckgo-pager-slides {
+    display: var(--pager-text-slides-display, none);
+  }
 }
 
 @media print {

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

@@ -11,21 +11,19 @@ export class DeckdeckgoPager {
   @Prop() activeIndex: number;
   @Prop() length: number;
 
-  @Prop() percentage: boolean = false;
-
   @State()
-  private progression: number = 0;
+  private percentageProgression: number = 0;
 
   @Watch('length')
   @Watch('activeIndex')
   calculateProgression() {
-    this.progression = this.length > 0 ? Math.round(((this.activeIndex + 1) / this.length) * 100) : 0;
+    this.percentageProgression = this.length > 0 ? Math.round(((this.activeIndex + 1) / this.length) * 100) : 0;
   }
 
   // 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() {
-    const ratio: string = '' + this.progression + ', 100';
+    const ratio: string = '' + this.percentageProgression + ', 100';
 
     return <svg viewBox="0 0 36 36" class="deckgo-pager-circular-chart">
       <path class="deckgo-pager-circle-bg"
@@ -44,7 +42,10 @@ export class DeckdeckgoPager {
   }
 
   private renderText() {
-    return this.percentage ? <text x="18" y="20.35" class="deckgo-pager-percentage">{this.progression}%</text> : undefined;
+    return [
+      <text x="18" y="20.35" class="deckgo-pager-progression deckgo-pager-percentage">{this.percentageProgression}%</text>,
+      <text x="18" y="20.35" class="deckgo-pager-progression deckgo-pager-slides">{this.activeIndex + 1}/{this.length}</text>
+    ];
   }
 
 }