feat(relative position): added support for content sticking with target element when autoUpdate is set to true

- Added drag example in documentation
- Refactored `RelativePosition` to reduce bundle size
- Added test cases for utils, and relative position
- Fixed the issue where the HTML string is given with `{hasHTML:true}` but still renders as string

Author: lokesh-coder

.gitignore

@@ -29,6 +29,7 @@
 /.sass-cache
 /connect.lock
 /coverage
+/documentation
 /libpeerconnection.log
 npm-debug.log
 yarn-error.log

README.md

@@ -154,7 +154,7 @@ new RelativePosition({
   placement: OutsidePlacement, // location of the content
   hostWidth: string | number, // content width eg, `auto`, 150, `30%`
   hostHeight: string | number, // content height eg, `auto`, 150, `30%`
-  autoUpdate: boolean // update position when window scoll/resize
+  autoUpdate: boolean // update position when window scroll/resize/drag
 });
 ```
 

dist/toppy-app/assets/archived-versions.json

@@ -11,6 +11,29 @@
             >
           </select>
         </p>
+        <div class="badges">
+          <div class="badge">
+            <a
+              class="github-button"
+              href="https://github.com/lokesh-coder/toppy"
+              data-show-count="true"
+              aria-label="Star lokesh-coder/toppy on GitHub"
+              >Star</a
+            >
+          </div>
+          <div class="badge">
+            <a
+              href="https://twitter.com/share?ref_src=twsrc%5Etfw"
+              class="twitter-share-button"
+              data-text="Cute overlay library for Angular - tooltips, modals, toastr, menu, dropdowns, alerts, popovers, sidebar and more... "
+              data-url="https://lokesh-coder.github.io/toppy/"
+              data-via="lokesh-coder"
+              data-hashtags="angular"
+              data-show-count="false"
+              >Tweet</a
+            >
+          </div>
+        </div>
       </div>
       <app-section heading="" class="d-block text-center mb-5">
         <markdown ngPreserveWhitespaces [src]="'./assets/md/introduction.md'"></markdown>
@@ -47,6 +70,9 @@
       <app-section heading="Configuration" class="table" icon="settings">
         <markdown ngPreserveWhitespaces [src]="'./assets/md/configuration.md'"></markdown>
       </app-section>
+      <app-section heading="Examples" icon="zap">
+        <markdown ngPreserveWhitespaces [src]="'./assets/md/drag.md'"></markdown> <app-drag-example></app-drag-example>
+      </app-section>
       <app-section heading="API" icon="file-text">
         <markdown ngPreserveWhitespaces [src]="'./assets/md/api.md'"></markdown>
       </app-section>

docs/app/app.component.html

@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { MarkdownModule } from 'ngx-markdown';
 import { ToppyModule } from 'toppy';
 import { AppComponent } from './app.component';
+import { DragExampleComponent } from './examples/drag-example/drag-example.component';
 import { FullscreenPositionExampleComponent } from './examples/fullscreen-position-example/fullscreen-position-example.component';
 import { GlobalPositionExampleComponent } from './examples/global-position-example/global-position-example.component';
 import { RelativePositionExampleComponent } from './examples/relative-position-example/relative-position-example.component';
@@ -32,7 +33,8 @@ import { SubSectionComponent } from './utils/sub-section/sub-section.component';
     SlidePositionExampleComponent,
     FullscreenPositionExampleComponent,
     HeroScreenComponent,
-    ScollSpyDirective
+    ScollSpyDirective,
+    DragExampleComponent
   ],
   imports: [BrowserModule, FormsModule, HttpClientModule, MarkdownModule.forRoot({ loader: HttpClient }), ToppyModule],
   providers: [],

docs/app/app.module.ts

@@ -0,0 +1,7 @@
+<div class="drag-element-holder">
+  <span draggable="true" #el class="drag-element" (mouseenter)="onMouseOver()" (mouseleave)="onMouseLeave()"
+    >Drag me</span
+  >
+</div>
+
+<div class="reset-link" (click)="reset()">reset</div>

docs/app/examples/drag-example/drag-example.component.html

@@ -0,0 +1,81 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { OutsidePlacement } from '../../../../projects/toppy/src/lib/models';
+import { RelativePosition, Toppy, ToppyRef } from '../../../../projects/toppy/src/public_api';
+
+@Component({
+  selector: 'app-drag-example',
+  templateUrl: './drag-example.component.html'
+})
+export class DragExampleComponent implements OnInit {
+  pos1 = 0;
+  pos2 = 0;
+  pos3 = 0;
+  pos4 = 0;
+  @ViewChild('el') el: ElementRef;
+  private _toppyRef: ToppyRef;
+  constructor(private toppy: Toppy) {}
+
+  ngOnInit() {
+    this._toppyRef = this.toppy
+      .overlay(
+        new RelativePosition({
+          placement: OutsidePlacement.TOP,
+          src: this.el.nativeElement,
+          hostWidth: 'auto',
+          autoUpdate: true
+        }),
+        {
+          backdrop: false,
+          dismissOnDocumentClick: false
+        }
+      )
+      .host('<div class="tooltip">tooltip</div>', { hasHTML: true })
+      .create();
+  }
+
+  ngAfterViewInit() {
+    this.dragElement();
+  }
+  reset() {
+    this.el.nativeElement.style.left = '0px';
+    this.el.nativeElement.style.top = '0px';
+  }
+  onMouseOver() {
+    this._toppyRef.open();
+  }
+  onMouseLeave() {
+    this._toppyRef.close();
+  }
+  dragMouseDown(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // get the mouse cursor position at startup:
+    this.pos3 = e.clientX;
+    this.pos4 = e.clientY;
+    document.onmouseup = this.closeDragElement.bind(this);
+    // call a function whenever the cursor moves:
+    document.onmousemove = this.elementDrag.bind(this);
+  }
+
+  elementDrag(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // calculate the new cursor position:
+    this.pos1 = this.pos3 - e.clientX;
+    this.pos2 = this.pos4 - e.clientY;
+    this.pos3 = e.clientX;
+    this.pos4 = e.clientY;
+    this.el.nativeElement.style.top = this.el.nativeElement.offsetTop - this.pos2 + 'px';
+    this.el.nativeElement.style.left = this.el.nativeElement.offsetLeft - this.pos1 + 'px';
+  }
+
+  closeDragElement() {
+    document.onmouseup = null;
+    document.onmousemove = null;
+  }
+
+  dragElement() {
+    console.log('fofo');
+    this.el.nativeElement.onmousedown = this.dragMouseDown.bind(this);
+  }
+}

docs/app/examples/drag-example/drag-example.component.ts

@@ -151,7 +151,7 @@ InsidePlacement.TOP_RIGHT;
 ```
 
 ```typescript
-InsidePlacement.CENTER**
+InsidePlacement.CENTER;
 ```
 
 </div>

docs/assets/md/api.md

@@ -0,0 +1,3 @@
+##### 1. Stick content on dragging
+
+In below example you can see that the tooltip content is sticked with the `src` element in `RelativePosition`

docs/assets/md/drag.md

@@ -4,6 +4,6 @@ new RelativePosition({
   placement: OutsidePlacement, // location of the content
   hostWidth: string | number, // content width eg, `auto`, 150, `30%`
   hostHeight: string | number, // content height eg, `auto`, 150, `30%`
-  autoUpdate: boolean // update position when window scoll/resize
+  autoUpdate: boolean // update position when window scroll/resize/drag
 });
 ```