Skip to content

Commit 09cf396

Browse files
bennadelbennadel
committed
Added second version of directive.
1 parent 5f0c871 commit 09cf396

10 files changed

Lines changed: 552 additions & 430 deletions

‎demos/hide-scrollbars-until-hover-angular9/dist/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,5 @@ <h1>
1818

1919
<app-root></app-root>
2020

21-
<script src="runtime-es2015.10ab11eeb5795700cac4.js" type="module"></script><script src="runtime-es5.10ab11eeb5795700cac4.js" nomodule defer></script><script src="polyfills-es5.3e21be3fb90e88929496.js" nomodule defer></script><script src="polyfills-es2015.34441c1a7666fa03b203.js" type="module"></script><script src="main-es2015.ab04acb178c3bd9570cd.js" type="module"></script><script src="main-es5.ab04acb178c3bd9570cd.js" nomodule defer></script></body>
21+
<script src="runtime-es2015.10ab11eeb5795700cac4.js" type="module"></script><script src="runtime-es5.10ab11eeb5795700cac4.js" nomodule defer></script><script src="polyfills-es5.3e21be3fb90e88929496.js" nomodule defer></script><script src="polyfills-es2015.34441c1a7666fa03b203.js" type="module"></script><script src="main-es2015.3d208c1b21a152a6c4d7.js" type="module"></script><script src="main-es5.3d208c1b21a152a6c4d7.js" nomodule defer></script></body>
2222
</html>

‎demos/hide-scrollbars-until-hover-angular9/dist/main-es2015.3d208c1b21a152a6c4d7.js‎

Lines changed: 211 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/hide-scrollbars-until-hover-angular9/dist/main-es2015.ab04acb178c3bd9570cd.js‎

Lines changed: 0 additions & 204 deletions
This file was deleted.

‎demos/hide-scrollbars-until-hover-angular9/dist/main-es5.3d208c1b21a152a6c4d7.js‎

Lines changed: 198 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/hide-scrollbars-until-hover-angular9/dist/main-es5.ab04acb178c3bd9570cd.js‎

Lines changed: 0 additions & 191 deletions
This file was deleted.

‎demos/hide-scrollbars-until-hover-angular9/src/app/app.component.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
<div class="lists">
3+
<app-scroll-on-mouseenter class="list-viewport">
4+
5+
<ul class="list">
6+
<li *ngFor="let movie of movies" class="item">
7+
{{ movie }}
8+
</li>
9+
</ul>
10+
11+
</app-scroll-on-mouseenter>
12+
<app-scroll-on-mouseenter class="list-viewport">
13+
14+
<ul class="list">
15+
<li *ngFor="let movie of movies" class="item">
16+
{{ movie }}
17+
</li>
18+
</ul>
19+
20+
</app-scroll-on-mouseenter>
21+
22+
<!-- *********** VERSION 2 of Directive Below This. *********** -->
23+
24+
<app-scroll-on-mouseenter2 class="list-viewport">
25+
26+
<ul class="list">
27+
<li *ngFor="let movie of movies" class="item">
28+
{{ movie }}
29+
</li>
30+
</ul>
31+
32+
</app-scroll-on-mouseenter2>
33+
<app-scroll-on-mouseenter2 class="list-viewport">
34+
35+
<ul class="list">
36+
<li *ngFor="let movie of movies" class="item">
37+
{{ movie }}
38+
</li>
39+
</ul>
40+
41+
</app-scroll-on-mouseenter2>
42+
</div>

‎demos/hide-scrollbars-until-hover-angular9/src/app/app.component.less‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,17 @@
1212
border: 1px solid #cccccc ;
1313
border-right-width: 0px ;
1414
height: 300px ;
15-
width: 200px ;
15+
width: 160px ;
1616

1717
&:last-child {
1818
border-right-width: 1px ;
1919
}
20+
21+
// The V2 versions of the directive.
22+
&:nth-child( 3 ),
23+
&:nth-child( 4 ), {
24+
background-color: #ebf2ff ;
25+
}
2026
}
2127

2228
.list {

‎demos/hide-scrollbars-until-hover-angular9/src/app/app.component.ts‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,7 @@ import { Component } from "@angular/core";
88
@Component({
99
selector: "app-root",
1010
styleUrls: [ "./app.component.less" ],
11-
template:
12-
`
13-
<div class="lists">
14-
<app-scroll-on-mouseenter class="list-viewport">
15-
16-
<ul class="list">
17-
<li *ngFor="let movie of movies" class="item">
18-
{{ movie }}
19-
</li>
20-
</ul>
21-
22-
</app-scroll-on-mouseenter>
23-
<app-scroll-on-mouseenter class="list-viewport">
24-
25-
<ul class="list">
26-
<li *ngFor="let movie of movies" class="item">
27-
{{ movie }}
28-
</li>
29-
</ul>
30-
31-
</app-scroll-on-mouseenter>
32-
<app-scroll-on-mouseenter class="list-viewport">
33-
34-
<ul class="list">
35-
<li *ngFor="let movie of movies" class="item">
36-
{{ movie }}
37-
</li>
38-
</ul>
39-
40-
</app-scroll-on-mouseenter>
41-
</div>
42-
`
11+
templateUrl: "./app.component.html"
4312
})
4413
export class AppComponent {
4514

‎demos/hide-scrollbars-until-hover-angular9/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { NgModule } from "@angular/core";
66
// Import the application components and services.
77
import { AppComponent } from "./app.component";
88
import { ScrollOnMouseenterComponent } from "./scroll-on-mouseenter.component";
9+
import { ScrollOnMouseenter2Component } from "./scroll-on-mouseenter2.component";
910

1011
// ----------------------------------------------------------------------------------- //
1112
// ----------------------------------------------------------------------------------- //
@@ -17,7 +18,8 @@ import { ScrollOnMouseenterComponent } from "./scroll-on-mouseenter.component";
1718
providers: [],
1819
declarations: [
1920
AppComponent,
20-
ScrollOnMouseenterComponent
21+
ScrollOnMouseenterComponent,
22+
ScrollOnMouseenter2Component
2123
],
2224
bootstrap: [
2325
AppComponent

‎demos/hide-scrollbars-until-hover-angular9/src/app/scroll-on-mouseenter2.component.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
import { ElementRef } from "@angular/core";
5+
6+
// ----------------------------------------------------------------------------------- //
7+
// ----------------------------------------------------------------------------------- //
8+
9+
@Component({
10+
selector: "app-scroll-on-mouseenter2",
11+
host: {
12+
"[class.is-scrollable]": "isScrollable",
13+
"(mouseenter)": "enable()",
14+
"(mouseleave)": "disable()"
15+
},
16+
styles: [
17+
`
18+
:host {
19+
display: block ;
20+
overflow: hidden ;
21+
}
22+
.wrapper {
23+
width: calc( 100% - 16px ) ;
24+
}
25+
26+
:host( .is-scrollable ) {
27+
overflow: auto ;
28+
overscroll-behavior: contain ;
29+
}
30+
`
31+
],
32+
template:
33+
`
34+
<div class="wrapper" [style.width.px]="wrapperWidth">
35+
<ng-content></ng-content>
36+
</div>
37+
`
38+
})
39+
export class ScrollOnMouseenter2Component {
40+
41+
public isScrollable: boolean;
42+
public wrapperWidth: number | null;
43+
44+
private elementRef: ElementRef;
45+
46+
// I initialize the scroll-on-mouseenter component.
47+
constructor( elementRef: ElementRef ) {
48+
49+
this.elementRef = elementRef;
50+
51+
this.isScrollable = false;
52+
this.wrapperWidth = null;
53+
54+
}
55+
56+
// ---
57+
// PUBLIC METHODS.
58+
// ---
59+
60+
// I disable scrolling on the host component.
61+
public disable() : void {
62+
63+
this.isScrollable = false;
64+
// NOTE: By setting the CSS property to NULL, the browser will REMOVE the inline
65+
// style from the wrapper, allowing the stylesheet properties to take precedence.
66+
this.wrapperWidth = null;
67+
68+
}
69+
70+
71+
// I enable scrolling on the host component.
72+
public enable() : void {
73+
74+
this.isScrollable = true;
75+
// At this point (while the host element is still deactivated - our view-model
76+
// has not yet been reconciled with the component template), the width of the
77+
// wrapper is "calc( 100% - 16px )". When we activate the host element, the
78+
// scrollbars MAY OR MAY NOT APPEAR (depending on the user's MacOS settings). As
79+
// such, we have to switch from a calculated width to an EXACT WIDTH in order to
80+
// prevent the content from jumping. To do this, we're going to set an INLINE
81+
// style width that is equal to the current calc()-based width.
82+
this.wrapperWidth = this.elementRef.nativeElement
83+
.childNodes[ 0 ]
84+
.clientWidth
85+
;
86+
87+
}
88+
89+
}

0 commit comments

Comments
 (0)