Skip to content

Commit 50dc20f

Browse files
BrunnerLivioBrunnerLivio
committed
Refactor code component into a custom element
1 parent 32bd160 commit 50dc20f

File tree

6 files changed

+136
-0
lines changed

6 files changed

+136
-0
lines changed

‎src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import { BasePageComponent } from './homepage/pages/page/page.component';
3535
import { PipesComponent } from './homepage/pages/pipes/pipes.component';
3636
import { SupportComponent } from './homepage/pages/support/support.component';
3737
import { SharedModule } from './shared/shared.module';
38+
import { CustomElementsModule } from './custom-elements/custom-elements.module';
3839

3940
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
4041
suppressScrollX: true,
@@ -49,6 +50,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
4950
HttpClientModule,
5051
PerfectScrollbarModule,
5152
SharedModule,
53+
CustomElementsModule,
5254
],
5355
declarations: [
5456
AppComponent,

‎src/app/custom-elements/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Custom Elements
2+
3+
## <code-element>
4+
5+
### Attributes
6+
7+
| Attribute | Type |
8+
|-----------|---------|
9+
| filename | string |
10+
11+
### Usage
12+
13+
```html
14+
<code-element filename="cat.service">
15+
<pre slot="ts" class="language-typescript">
16+
<code class="language-typescript">
17+
console.log("Hello");
18+
</code>
19+
</pre>
20+
<pre slot="js" class="language-javascript">
21+
<code class="language-javascript">
22+
console.log("Hello");
23+
</code>
24+
</pre>
25+
</code-element>
26+
```

‎src/app/custom-elements/code/code.component.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="code-wrapper" [ngClass]="{ 'has-switcher': hasSwitcher }">
2+
<div class="filename" *ngIf="hasSwitcher">
3+
<span> {{ filename }}{{ isJsActive ? '.js' : '.ts' }} </span>
4+
<div class="tabs-wrapper">
5+
<span class="tab" [class.active]="isJsActive" (click)="isJsActive = true">
6+
JS
7+
</span>
8+
<span
9+
class="tab active"
10+
[class.active]="!isJsActive"
11+
(click)="isJsActive = false"
12+
>
13+
TS
14+
</span>
15+
</div>
16+
</div>
17+
<slot name="ts" *ngIf="!isJsActive"></slot>
18+
<slot name="js" *ngIf="isJsActive"></slot>
19+
</div>

‎src/app/custom-elements/code/code.component.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@import './../../../scss/utils.scss';
2+
3+
.tabs-wrapper {
4+
position: absolute;
5+
right: 0;
6+
top: 0;
7+
bottom: 0;
8+
}
9+
10+
.tab {
11+
color: #dfdfdf;
12+
cursor: pointer;
13+
margin: 0;
14+
float: right;
15+
font-weight: 600;
16+
height: 100%;
17+
padding: 12px 20px;
18+
box-sizing: border-box;
19+
-webkit-box-sizing: border-box;
20+
&:hover:not(.active) {
21+
color: #efefef;
22+
}
23+
&.active {
24+
display: none;
25+
}
26+
}
27+
28+
.filename {
29+
background: #151515;
30+
color: #fff;
31+
padding: 12px 30px;
32+
margin: 35px 0 -35px;
33+
display: block;
34+
min-height: 25px;
35+
position: relative;
36+
border-top-left-radius: 6px;
37+
border-top-right-radius: 6px;
38+
overflow: hidden;
39+
font-size: 15px;
40+
}
41+
42+
:host .has-switcher ::slotted(pre) {
43+
border-top-left-radius: 0 !important;
44+
border-top-right-radius: 0 !important;
45+
}

‎src/app/custom-elements/code/code.component.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {
2+
Component,
3+
Input,
4+
ViewEncapsulation,
5+
AfterViewInit,
6+
ElementRef,
7+
} from '@angular/core';
8+
9+
@Component({
10+
selector: 'app-code',
11+
templateUrl: './code.component.html',
12+
styleUrls: ['./code.component.scss'],
13+
encapsulation: ViewEncapsulation.ShadowDom,
14+
})
15+
export class CodeComponent implements AfterViewInit {
16+
constructor(public element: ElementRef) {}
17+
18+
public isJsActive = false;
19+
public hasSwitcher: boolean;
20+
21+
@Input() public filename: string;
22+
23+
ngAfterViewInit() {
24+
this.hasSwitcher = this.element.nativeElement.children.length > 1;
25+
}
26+
}

‎src/app/custom-elements/custom-elements.module.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { NgModule, Injector, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { CodeComponent } from './code/code.component';
4+
import { createCustomElement } from '@angular/elements';
5+
6+
@NgModule({
7+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
8+
declarations: [CodeComponent],
9+
imports: [CommonModule],
10+
entryComponents: [CodeComponent],
11+
exports: [CodeComponent],
12+
})
13+
export class CustomElementsModule {
14+
constructor(injector: Injector) {
15+
const CodeElement = createCustomElement(CodeComponent, { injector });
16+
customElements.define('code-element', CodeElement);
17+
}
18+
}

0 commit comments

Comments
 (0)