add shortcodes and scrolltop blog post

content/blog/rxjs-scroll-position.md

@@ -0,0 +1,24 @@
+---
+title: 'Tracking the scroll position in Angular | A practical guide to RxJS'
+description: ''
+published: true
+publishedAt: 2020-12-14T19:20:51.808Z
+updatedAt: 2020-12-14T19:20:51.808Z
+tags:
+  - RxJS
+  - Angular
+keywords:
+  - Scroll Position
+  - RxJS
+  - Angular
+authors:
+  - 'Gary Großgarten'
+github: https://github.com/garygrossgarten/observables
+---
+
+## Demo
+
+Here's a demo tracking the scrolltop of the container element.
+
+<div shortcode="scroll"></div>
+<div shortcode="scroll/container"></div>

package.json

@@ -35,6 +35,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "11.0.0",
+    "@angular/cdk": "^11.0.2",
     "@angular/common": "11.0.0",
     "@angular/compiler": "11.0.0",
     "@angular/core": "11.0.0",
@@ -44,6 +45,7 @@
     "@angular/platform-browser-dynamic": "11.0.0",
     "@angular/router": "11.0.0",
     "@angular/service-worker": "11.0.0",
+    "@garygrossgarten/shortcodes": "0.0.1",
     "@scullyio/init": "1.0.1",
     "@scullyio/ng-lib": "1.0.0",
     "@scullyio/scully": "1.0.5",

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { NewsletterSignupModule } from '@components/newsletter-signup/newsletter
 import { NizSearchComponentModule } from '@components/search/search.module';
 import { PipesModule } from '@pipes/pipes.module';
 import { NizFooterModule } from '@components/footer/footer.module';
+import { ShortcodeModule } from '@garygrossgarten/shortcodes';
 
 @NgModule({
   declarations: [AppComponent],
@@ -35,15 +36,22 @@ import { NizFooterModule } from '@components/footer/footer.module';
     MarkdownModule.forRoot({ loader: HttpClient }),
     NizTabsModule,
     NizTabModule,
-    NizFooterModule, 
+    NizFooterModule,
     NizNavbarModule,
     NizToolbarModule,
     NizInlineSvgModule,
     NewsletterSignupModule,
     NizSearchComponentModule,
     PipesModule,
     NizToastModule,
-    NizMenuModule
+    NizMenuModule,
+    ShortcodeModule.forRoot([
+      {
+        path: 'scroll',
+        loadChildren: () =>
+          import('./demos/scroll/scroll.module').then((d) => d.ScrollModule),
+      },
+    ]),
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/demos/scroll/scroll.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ScrollComponent } from './scrolltop.component';
+import { ScrollContainerComponent } from './scrollcontainer.component';
+import { ShortcodeModule } from '@garygrossgarten/shortcodes';
+import { ScrollPipe } from './scroll.pipe';
+import { ScrollDirectionPipe } from './scrolldirection.pipe';
+import { NizInlineSvgModule } from '@notiz/ngx-design';
+
+@NgModule({
+  declarations: [
+    ScrollComponent,
+    ScrollPipe,
+    ScrollContainerComponent,
+    ScrollDirectionPipe
+  ],
+  imports: [
+    CommonModule,
+    NizInlineSvgModule,
+    ShortcodeModule.forChild([
+      { path: '', component: ScrollComponent },
+      { path: 'container', component: ScrollContainerComponent },
+    ]),
+  ],
+})
+export class ScrollModule {}

src/app/demos/scroll/scroll.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Observable } from 'rxjs';
+import { scrollPercent$ } from './scroll';
+
+@Pipe({
+  name: 'scroll',
+  pure: true,
+})
+export class ScrollPipe implements PipeTransform {
+  transform(el: HTMLElement): Observable<number> {
+    return scrollPercent$(el);
+  }
+}

src/app/demos/scroll/scroll.ts

@@ -0,0 +1,39 @@
+import { fromEvent, merge, zip } from 'rxjs';
+import {
+  distinctUntilChanged,
+  filter,
+  map,
+  pairwise,
+  startWith,
+} from 'rxjs/operators';
+
+export const pageScroll$ = () =>
+  fromEvent(window, 'scroll').pipe(
+    map(() => document.documentElement.scrollTop)
+  );
+
+export const scrolltop$ = (el: Element) =>
+  merge(fromEvent(el, 'scroll')).pipe(
+    startWith(el.scrollTop),
+    map(() => el.scrollTop)
+  );
+
+export const scrollHeight$ = (el: Element) =>
+  merge(fromEvent(el, 'scroll')).pipe(
+    startWith(el.scrollHeight),
+    map(() => el.scrollHeight)
+  );
+
+export const scrollPercent$ = (el: Element) =>
+  zip(scrolltop$(el), scrollHeight$(el)).pipe(
+    filter(([top, height]) => height - el.clientHeight !== 0),
+    map(([top, height]) => (100 * top) / (height - el.clientHeight)),
+    startWith(0)
+  );
+
+export const scrolldir$ = (el: Element) =>
+  scrolltop$(el).pipe(
+    pairwise(),
+    map(([v1, v2]) => (v1 > v2 ? 'UP' : 'DOWN')),
+    distinctUntilChanged()
+  );

src/app/demos/scroll/scrollcontainer.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'niz-scroll',
+  template: ` <div class="flex flex-row space-x-2">
+      <span class="text-2xl w-16">{{ (el | scroll | async)?.toFixed() }}%</span>
+      <niz-inline-svg
+        class="h-8 w-8 transform inline-flex transition-transform duration-200 ease-in-out text-color"
+        [ngClass]="{ 'rotate-180': (el | scrolldir | async) === 'UP' }"
+        svgSource="assets/img/arrow_downward-black-18dp.svg"
+      ></niz-inline-svg>
+    </div>
+    <div
+      #el
+      [style.height.px]="420"
+      class="border-blue-300 border-dashed border-4 rounded-lg w-full overflow-y-scroll"
+    >
+      <div
+        style="height:400vh;"
+        class="flex flex-col justify-center items-center bg-gradient-to-b from-blue-50 to-blue-900"
+      ></div>
+    </div>`,
+})
+export class ScrollContainerComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/demos/scroll/scrolldirection.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Observable } from 'rxjs';
+import { scrolldir$ } from './scroll';
+
+@Pipe({
+  name: 'scrolldir',
+  pure: true,
+})
+export class ScrollDirectionPipe implements PipeTransform {
+  transform(el: HTMLElement): Observable<string> {
+    return scrolldir$(el);
+  }
+}

src/app/demos/scroll/scrolltop.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { pageScroll$ } from './scroll';
+
+@Component({
+  selector: 'niz-scroll',
+  template: `
+  Page Scrolltop: {{scroll$ | async}}
+  `,
+})
+export class ScrollComponent implements OnInit {
+  scroll$ = pageScroll$().pipe(map((v) => v.toFixed()));
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/pages/blog-post/blog-post.component.html

@@ -41,7 +41,7 @@ <h2 class="space-x-4 text-4xl font-bold line-clamp-2 min leading-normal">
     <div
       class="max-w-screen-xl flex flex-col-reverse mt-10 md:flex-row md:space-x-5"
     >
-      <div class="w-full flex flex-col space-y-4 md:w-9/12 xl:w-10/12 post">
+      <div shortcodes class="w-full flex flex-col space-y-4 md:w-9/12 xl:w-10/12 post">
         <scully-content></scully-content>
       </div>
       <div class="top-32 w-full flex flex-col mt-5 md:w-3/12 xl:w-2/12 md:mt-0">

src/app/pages/blog-post/blog-post.module.ts

@@ -18,6 +18,7 @@ import { RouterModule } from '@angular/router';
 
 import { PipesModule } from '@pipes/pipes.module';
 import { SeoModule } from '@components/seo/seo.module';
+import { ShortcodeModule } from '@garygrossgarten/shortcodes';
 
 @NgModule({
   declarations: [BlogPostComponent],
@@ -37,6 +38,7 @@ import { SeoModule } from '@components/seo/seo.module';
     NizChipModule,
     PipesModule,
     SeoModule,
+    ShortcodeModule
   ],
 })
 export class BlogPostModule {}