Skip to content

Commit 6fa37e7

Browse files
lokesh-coderlokesh-coder
authored
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
1 parent 563da25 commit 6fa37e7

32 files changed

+664
-222
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
/.sass-cache
3030
/connect.lock
3131
/coverage
32+
/documentation
3233
/libpeerconnection.log
3334
npm-debug.log
3435
yarn-error.log

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ new RelativePosition({
154154
placement: OutsidePlacement, // location of the content
155155
hostWidth: string | number, // content width eg, `auto`, 150, `30%`
156156
hostHeight: string | number, // content height eg, `auto`, 150, `30%`
157-
autoUpdate: boolean // update position when window scoll/resize
157+
autoUpdate: boolean // update position when window scroll/resize/drag
158158
});
159159
```
160160

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

-1
This file was deleted.

‎docs/app/app.component.html

+26
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,29 @@
1111
>
1212
</select>
1313
</p>
14+
<div class="badges">
15+
<div class="badge">
16+
<a
17+
class="github-button"
18+
href="https://github.com/lokesh-coder/toppy"
19+
data-show-count="true"
20+
aria-label="Star lokesh-coder/toppy on GitHub"
21+
>Star</a
22+
>
23+
</div>
24+
<div class="badge">
25+
<a
26+
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
27+
class="twitter-share-button"
28+
data-text="Cute overlay library for Angular - tooltips, modals, toastr, menu, dropdowns, alerts, popovers, sidebar and more... "
29+
data-url="https://lokesh-coder.github.io/toppy/"
30+
data-via="lokesh-coder"
31+
data-hashtags="angular"
32+
data-show-count="false"
33+
>Tweet</a
34+
>
35+
</div>
36+
</div>
1437
</div>
1538
<app-section heading="" class="d-block text-center mb-5">
1639
<markdown ngPreserveWhitespaces [src]="'./assets/md/introduction.md'"></markdown>
@@ -47,6 +70,9 @@
4770
<app-section heading="Configuration" class="table" icon="settings">
4871
<markdown ngPreserveWhitespaces [src]="'./assets/md/configuration.md'"></markdown>
4972
</app-section>
73+
<app-section heading="Examples" icon="zap">
74+
<markdown ngPreserveWhitespaces [src]="'./assets/md/drag.md'"></markdown> <app-drag-example></app-drag-example>
75+
</app-section>
5076
<app-section heading="API" icon="file-text">
5177
<markdown ngPreserveWhitespaces [src]="'./assets/md/api.md'"></markdown>
5278
</app-section>

‎docs/app/app.module.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser';
55
import { MarkdownModule } from 'ngx-markdown';
66
import { ToppyModule } from 'toppy';
77
import { AppComponent } from './app.component';
8+
import { DragExampleComponent } from './examples/drag-example/drag-example.component';
89
import { FullscreenPositionExampleComponent } from './examples/fullscreen-position-example/fullscreen-position-example.component';
910
import { GlobalPositionExampleComponent } from './examples/global-position-example/global-position-example.component';
1011
import { RelativePositionExampleComponent } from './examples/relative-position-example/relative-position-example.component';
@@ -32,7 +33,8 @@ import { SubSectionComponent } from './utils/sub-section/sub-section.component';
3233
SlidePositionExampleComponent,
3334
FullscreenPositionExampleComponent,
3435
HeroScreenComponent,
35-
ScollSpyDirective
36+
ScollSpyDirective,
37+
DragExampleComponent
3638
],
3739
imports: [BrowserModule, FormsModule, HttpClientModule, MarkdownModule.forRoot({ loader: HttpClient }), ToppyModule],
3840
providers: [],

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="drag-element-holder">
2+
<span draggable="true" #el class="drag-element" (mouseenter)="onMouseOver()" (mouseleave)="onMouseLeave()"
3+
>Drag me</span
4+
>
5+
</div>
6+
7+
<div class="reset-link" (click)="reset()">reset</div>

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

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
2+
import { OutsidePlacement } from '../../../../projects/toppy/src/lib/models';
3+
import { RelativePosition, Toppy, ToppyRef } from '../../../../projects/toppy/src/public_api';
4+
5+
@Component({
6+
selector: 'app-drag-example',
7+
templateUrl: './drag-example.component.html'
8+
})
9+
export class DragExampleComponent implements OnInit {
10+
pos1 = 0;
11+
pos2 = 0;
12+
pos3 = 0;
13+
pos4 = 0;
14+
@ViewChild('el') el: ElementRef;
15+
private _toppyRef: ToppyRef;
16+
constructor(private toppy: Toppy) {}
17+
18+
ngOnInit() {
19+
this._toppyRef = this.toppy
20+
.overlay(
21+
new RelativePosition({
22+
placement: OutsidePlacement.TOP,
23+
src: this.el.nativeElement,
24+
hostWidth: 'auto',
25+
autoUpdate: true
26+
}),
27+
{
28+
backdrop: false,
29+
dismissOnDocumentClick: false
30+
}
31+
)
32+
.host('<div class="tooltip">tooltip</div>', { hasHTML: true })
33+
.create();
34+
}
35+
36+
ngAfterViewInit() {
37+
this.dragElement();
38+
}
39+
reset() {
40+
this.el.nativeElement.style.left = '0px';
41+
this.el.nativeElement.style.top = '0px';
42+
}
43+
onMouseOver() {
44+
this._toppyRef.open();
45+
}
46+
onMouseLeave() {
47+
this._toppyRef.close();
48+
}
49+
dragMouseDown(e) {
50+
e = e || window.event;
51+
e.preventDefault();
52+
// get the mouse cursor position at startup:
53+
this.pos3 = e.clientX;
54+
this.pos4 = e.clientY;
55+
document.onmouseup = this.closeDragElement.bind(this);
56+
// call a function whenever the cursor moves:
57+
document.onmousemove = this.elementDrag.bind(this);
58+
}
59+
60+
elementDrag(e) {
61+
e = e || window.event;
62+
e.preventDefault();
63+
// calculate the new cursor position:
64+
this.pos1 = this.pos3 - e.clientX;
65+
this.pos2 = this.pos4 - e.clientY;
66+
this.pos3 = e.clientX;
67+
this.pos4 = e.clientY;
68+
this.el.nativeElement.style.top = this.el.nativeElement.offsetTop - this.pos2 + 'px';
69+
this.el.nativeElement.style.left = this.el.nativeElement.offsetLeft - this.pos1 + 'px';
70+
}
71+
72+
closeDragElement() {
73+
document.onmouseup = null;
74+
document.onmousemove = null;
75+
}
76+
77+
dragElement() {
78+
console.log('fofo');
79+
this.el.nativeElement.onmousedown = this.dragMouseDown.bind(this);
80+
}
81+
}

‎docs/assets/md/api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ InsidePlacement.TOP_RIGHT;
151151
```
152152

153153
```typescript
154-
InsidePlacement.CENTER**
154+
InsidePlacement.CENTER;
155155
```
156156

157157
</div>

‎docs/assets/md/drag.md

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

‎docs/assets/md/relative-position-api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ new RelativePosition({
44
placement: OutsidePlacement, // location of the content
55
hostWidth: string | number, // content width eg, `auto`, 150, `30%`
66
hostHeight: string | number, // content height eg, `auto`, 150, `30%`
7-
autoUpdate: boolean // update position when window scoll/resize
7+
autoUpdate: boolean // update position when window scroll/resize/drag
88
});
99
```

‎docs/index.html

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Toppy - A overlay library for Angular</title>
6+
<base href="/toppy/" />
37

4-
<head>
5-
<meta charset="utf-8">
6-
<title>Toppy - A overlay library for Angular</title>
7-
<base href="/toppy/">
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
10+
</head>
811

9-
<meta name="viewport" content="width=device-width, initial-scale=1">
10-
<link rel="icon" type="image/x-icon" href="favicon.ico">
11-
</head>
12-
13-
<body>
14-
<app-root></app-root>
15-
</body>
16-
17-
</html>
12+
<body>
13+
<app-root></app-root>
14+
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
15+
<script async defer src="https://buttons.github.io/buttons.js"></script>
16+
</body>
17+
</html>

‎docs/styles/_config.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ $toppy--base-font-size: 14px;
22
$toppy--base-font-size-xl: 16px;
33
$toppy--app-name: 'TOPPY';
44
$toppy--debug: false;
5-
$toppy--font-family: 'Inconsolata', 'Rubik', 'Inter UI', 'Nunito Sans';
6-
$toppy--font-family-monospace: 'Inconsolata', 'Courier New', 'Lucida Console', Monaco, Courier, monospace;
5+
$toppy--font-family: acumin-pro, 'Inconsolata', 'Rubik', 'Inter UI', 'Nunito Sans';
6+
$toppy--font-family-monospace: 'Roboto Mono', 'Courier New', 'Lucida Console', Monaco, Courier, monospace;
77
$toppy--current-theme: 'DEFAULT';
88
$toppy--themes: (
99
'default': 'DEFAULT',

‎docs/styles/_temp.scss

+23-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/* well here comes, some temperory fix styles, which will be removed later */
2-
2+
code {
3+
font-size: 0.9rem;
4+
}
35
.tooltip {
46
background: #673ab7;
57
padding: 2px 9px;
@@ -32,3 +34,23 @@ h4 {
3234
color: #fff;
3335
padding: 0 12px;
3436
}
37+
38+
.drag-element-holder {
39+
width: calc(9rem + 2px);
40+
border: 1px dashed #aaa;
41+
display: inline-block;
42+
position: relative;
43+
height: 52px;
44+
box-sizing: border-box;
45+
}
46+
.drag-element {
47+
background: #e6e8f3;
48+
padding: 1rem;
49+
position: absolute;
50+
width: 9rem;
51+
height: 50px;
52+
display: inline-block;
53+
text-align: center;
54+
border: 1px solid transparent;
55+
cursor: grab;
56+
}

‎docs/styles/base/_fonts.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@include default-theme() {
2-
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');
2+
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700');
3+
@import url('https://use.typekit.net/uur7gsm.css');
34
}
45

56
@include dark-theme() {

‎docs/styles/vendors/_prism.scss

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
markdown pre[class*='language-'] {
22
background: #f9f9f9;
33
code {
4-
font-size: 1.1rem;
4+
font-size: 13px;
55
font-family: $toppy--font-family-monospace;
66
}
77
}
8+
markdown .inline-code pre[class*='language-'] code {
9+
font-size: 13px !important;
10+
}
811
markdown code[class*='language-'],
912
markdown pre[class*='language-'] {
1013
color: #51585d;
1114
}
15+
16+
.token.constant {
17+
color: #e91e63 !important;
18+
font-size: 11px;
19+
font-weight: 500;
20+
}

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,10 @@
9393
"karma": "~3.1.1",
9494
"karma-chrome-launcher": "~2.2.0",
9595
"karma-coverage-istanbul-reporter": "~2.0.4",
96+
"karma-helpful-reporter": "^0.3.4",
9697
"karma-jasmine": "~2.0.1",
9798
"karma-jasmine-html-reporter": "^1.4.0",
99+
"karma-viewport": "^1.0.2",
98100
"ng-packagr": "^4.4.0",
99101
"nodemon": "^1.18.7",
100102
"protractor": "~5.4.1",

‎projects/toppy/karma.conf.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
// Karma configuration file, see link for more information
22
// https://karma-runner.github.io/1.0/config/configuration-file.html
33

4-
module.exports = function (config) {
4+
module.exports = function(config) {
55
config.set({
66
basePath: '',
7-
frameworks: ['jasmine', '@angular-devkit/build-angular'],
7+
frameworks: ['jasmine', '@angular-devkit/build-angular', 'viewport'],
88
plugins: [
99
require('karma-jasmine'),
10+
require('karma-viewport'),
1011
require('karma-chrome-launcher'),
1112
require('karma-jasmine-html-reporter'),
1213
require('karma-coverage-istanbul-reporter'),
13-
require('@angular-devkit/build-angular/plugins/karma')
14+
require('@angular-devkit/build-angular/plugins/karma'),
1415
],
1516
client: {
16-
clearContext: false // leave Jasmine Spec Runner output visible in browser
17+
clearContext: true // leave Jasmine Spec Runner output visible in browser
1718
},
1819
coverageIstanbulReporter: {
1920
dir: require('path').join(__dirname, '../../coverage'),
20-
reports: ['html', 'lcovonly','json'],
21+
reports: ['html', 'lcovonly', 'json'],
2122
fixWebpackSourcePaths: true
2223
},
2324
reporters: ['progress', 'kjhtml'],

0 commit comments

Comments
 (0)