11import { DOCUMENT } from '@angular/common' ;
22import { DomSanitizer , SafeUrl } from '@angular/platform-browser' ;
3- import { Component , ElementRef , Inject , Input , OnInit , ViewEncapsulation } from '@angular/core' ;
3+ import { ChangeDetectorRef , Component , ElementRef , Inject , Input , OnDestroy , OnInit , ViewEncapsulation } from '@angular/core' ;
44import { Router , ActivatedRoute } from '@angular/router' ;
55import { environment } from '../../../environments/environment' ;
66import sdk from '@stackblitz/sdk' ;
7+ import { AppService , DemoCode } from '../../app.service' ;
8+ import { Observable , Subject , takeUntil , tap } from 'rxjs' ;
79
810@Component ( {
911 selector : 'nz-code-box' ,
1012 encapsulation : ViewEncapsulation . None ,
1113 templateUrl : './nz-codebox.component.html' ,
1214 styleUrls : [ './nz-codebox.less' ]
1315} )
14- export class NzCodeBoxComponent implements OnInit {
16+ export class NzCodeBoxComponent implements OnInit , OnDestroy {
1517 _code : string ;
1618 _copied = false ;
1719 _commandCopied = false ;
20+ highlightCode ?: string ;
21+ copyLoading = false ;
22+ codeLoaded = false ;
1823 showIframe : boolean ;
1924 simulateIFrame : boolean ;
2025 iframe : SafeUrl ;
21- nzWidth = window . innerWidth * 0.8 ;
26+ destroy$ = new Subject < void > ( ) ;
2227 @Input ( ) nzTitle : string ;
2328 @Input ( ) nzExpanded = false ;
2429 @Input ( ) nzSelected = false ;
@@ -46,35 +51,6 @@ export class NzCodeBoxComponent implements OnInit {
4651 this . _code = value ;
4752 }
4853
49- navigateToFragment ( ) {
50- // window.location.hash = this.nzLink;
51- }
52-
53- copyCode ( code ) {
54- this . copy ( code ) . then ( ( ) => {
55- this . _copied = true ;
56- setTimeout ( ( ) => {
57- this . _copied = false ;
58- } , 1000 ) ;
59- } ) ;
60- }
61-
62- handleCancel ( ) : void {
63- this . nzExpanded = false ;
64- }
65-
66- handleOk ( ) : void {
67- this . nzExpanded = false ;
68- }
69-
70- nzOkText ( ) {
71- if ( window . location . href . split ( '/' ) . splice ( - 1 ) [ 0 ] === 'zh' ) {
72- return '返回' ;
73- } else {
74- return 'Back' ;
75- }
76- }
77-
7854 copyGenerateCommand ( command ) {
7955 this . copy ( command ) . then ( ( ) => {
8056 this . _commandCopied = true ;
@@ -85,7 +61,8 @@ export class NzCodeBoxComponent implements OnInit {
8561 }
8662
8763 copy ( value : string ) : Promise < string > {
88- const promise = new Promise < string > ( ( resolve , reject ) : void => {
64+ return new Promise < string > ( ( resolve ) : void => {
65+ // @ts -ignore
8966 let copyTextArea = null as HTMLTextAreaElement ;
9067 try {
9168 copyTextArea = this . dom . createElement ( 'textarea' ) ;
@@ -103,10 +80,50 @@ export class NzCodeBoxComponent implements OnInit {
10380 }
10481 }
10582 } ) ;
83+ }
10684
107- return promise ;
85+ copyCode ( ) : void {
86+ setTimeout ( ( ) => {
87+ this . copyLoading = ! this . codeLoaded ;
88+ this . cdr . markForCheck ( ) ;
89+ } , 120 ) ;
90+ this . getDemoCode ( ) . subscribe ( data => {
91+ this . copyLoading = false ;
92+ this . cdr . markForCheck ( ) ;
93+ this . copy ( data . rawCode ) . then ( ( ) => {
94+ this . _copied = true ;
95+ setTimeout ( ( ) => {
96+ this . _copied = false ;
97+ this . cdr . markForCheck ( ) ;
98+ } , 1000 ) ;
99+ } ) ;
100+ } ) ;
108101 }
109102
103+
104+ getDemoCode ( ) : Observable < DemoCode > {
105+ return this . appService . getCode ( this . nzId ) . pipe (
106+ takeUntil ( this . destroy$ ) ,
107+ tap ( data => {
108+ if ( data ) {
109+ this . highlightCode = data . highlightCode ;
110+ this . codeLoaded = true ;
111+ this . cdr . markForCheck ( ) ;
112+ }
113+ } )
114+ ) ;
115+ }
116+
117+ expandCode ( expanded : boolean ) : void {
118+ this . nzExpanded = expanded ;
119+ if ( expanded ) {
120+ this . getDemoCode ( ) . subscribe ( ) ;
121+ }
122+ this . cdr . markForCheck ( ) ;
123+ }
124+
125+
126+
110127 /** bug here https://github.com/stackblitz/core/issues/311 **/
111128 openOnStackBlitz ( ) {
112129 sdk . openProject ( {
@@ -361,10 +378,17 @@ export class AppModule { }
361378 constructor (
362379 @Inject ( DOCUMENT ) private dom : Document ,
363380 private sanitizer : DomSanitizer ,
381+ private appService : AppService ,
382+ private cdr : ChangeDetectorRef ,
364383 private _el : ElementRef ,
365384 private activatedRoute : ActivatedRoute ,
366385 private router : Router
367386 ) { }
368387
369388 ngOnInit ( ) { }
370- }
389+
390+ ngOnDestroy ( ) : void {
391+ this . destroy$ . next ( ) ;
392+ this . destroy$ . complete ( ) ;
393+ }
394+ }
0 commit comments