@@ -17,6 +17,9 @@ export type Views = 'snippet' | 'full' | 'demo';
1717/** Regular expression that matches a file name and its extension */
1818const fileExtensionRegex = / ( .* ) \. ( \w + ) / ;
1919
20+ /** Preferred order for files of an example displayed in the viewer. */
21+ const preferredExampleFileOrder = [ 'HTML' , 'TS' , 'CSS' ] ;
22+
2023@Component ( {
2124 selector : 'example-viewer' ,
2225 templateUrl : './example-viewer.html' ,
@@ -28,7 +31,7 @@ export class ExampleViewer implements OnInit {
2831 /** The tab to jump to when expanding from snippet view. */
2932 selectedTab : number = 0 ;
3033
31- /** Map of example files that should be displayed in the view-source tab. */
34+ /** Map of example files that should be displayed in the view-source tab in order . */
3235 exampleTabs : { [ tabName : string ] : string } ;
3336
3437 /** Data for the currently selected example. */
@@ -79,21 +82,24 @@ export class ExampleViewer implements OnInit {
7982 }
8083 }
8184
85+ /** Selects a given tab based on the example file of the compact view. */
8286 selectCorrectTab ( ) {
83- const fileType = this . file ?. split ( '.' ) . slice ( - 1 ) [ 0 ] ;
84- switch ( fileType ) {
85- case 'html' :
86- this . selectedTab = 0 ;
87- break ;
88- case 'ts' :
89- this . selectedTab = 1 ;
90- break ;
91- case 'css' :
92- this . selectedTab = 2 ;
93- break ;
94- default :
95- console . error ( `Unexpected file type: ${ fileType } ) ;
87+ if ( ! this . file || ! this . exampleTabs ) {
88+ return ;
9689 }
90+
91+ const extension = this . file . substring ( this . file . lastIndexOf ( '.' ) + 1 ) ;
92+ const exampleTabNames = this . _getExampleTabNames ( ) ;
93+
94+ for ( let i = 0 ; i < exampleTabNames . length ; i ++ ) {
95+ const tabName = exampleTabNames [ i ] ;
96+ if ( tabName . toLowerCase ( ) === extension || tabName . endsWith ( `.${ extension } ) ) {
97+ this . selectedTab = i ;
98+ return ;
99+ }
100+ }
101+
102+ console . error ( `Could not find tab for file extension: "${ extension } ) ;
97103 }
98104
99105 toggleCompactView ( ) {
@@ -129,12 +135,19 @@ export class ExampleViewer implements OnInit {
129135 fileName = `${ contentBeforeDot } ${ contentAfterDot } ;
130136 }
131137
132- const examplePath = `${ this . exampleData . module . importSpecifier } ${ this . example } ;
133- return `/docs-content/examples-highlighted/${ examplePath } ${ fileName } ;
138+ return `/docs-content/examples-highlighted/${ this . exampleData . packagePath } ${ fileName } ;
134139 }
135140
136141 _getExampleTabNames ( ) {
137- return Object . keys ( this . exampleTabs ) ;
142+ return Object . keys ( this . exampleTabs ) . sort ( ( a , b ) => {
143+ let indexA = preferredExampleFileOrder . indexOf ( a ) ;
144+ let indexB = preferredExampleFileOrder . indexOf ( b ) ;
145+ // Files which are not part of the preferred example file order should be
146+ // moved after all items with a preferred index.
147+ if ( indexA === - 1 ) indexA = preferredExampleFileOrder . length ;
148+ if ( indexB === - 1 ) indexB = preferredExampleFileOrder . length ;
149+ return ( indexA - indexB ) || 1 ;
150+ } ) ;
138151 }
139152
140153 /** Loads the component and module factory for the currently selected example. */
@@ -158,22 +171,28 @@ export class ExampleViewer implements OnInit {
158171 }
159172
160173 private _generateExampleTabs ( ) {
161- const examplePath = `${ this . exampleData . module . importSpecifier } ${ this . example } ;
162- const docsContentPath = `/docs-content/examples-highlighted/${ examplePath } ;
163-
164- this . exampleTabs = {
165- HTML : `${ docsContentPath } ${ this . example } ,
166- TS : `${ docsContentPath } ${ this . example } ,
167- CSS : `${ docsContentPath } ${ this . example } ,
168- } ;
174+ const docsContentPath = `/docs-content/examples-highlighted/${ this . exampleData . packagePath } ;
175+ // Name of the default example files. If files with such name exist within the example,
176+ // we provide a shorthand for them within the example tabs (for less verbose tabs).
177+ const exampleBaseFileName = `${ this . example } ;
169178
170- const additionalFiles = this . exampleData . additionalFiles || [ ] ;
179+ this . exampleTabs = { } ;
171180
172- additionalFiles . forEach ( ( fileName : string ) => {
181+ for ( const fileName of this . exampleData . files ) {
173182 // Since the additional files refer to the original file name, we need to transform
174183 // the file name to match the highlighted HTML file that displays the source.
175184 const fileSourceName = fileName . replace ( fileExtensionRegex , '$1-$2.html' ) ;
176- this . exampleTabs [ fileName ] = `${ docsContentPath } ${ fileSourceName } ;
177- } ) ;
185+ const importPath = `${ docsContentPath } ${ fileSourceName } ;
186+
187+ if ( fileName === `${ exampleBaseFileName } ) {
188+ this . exampleTabs [ 'TS' ] = importPath ;
189+ } else if ( fileName === `${ exampleBaseFileName } ) {
190+ this . exampleTabs [ 'CSS' ] = importPath ;
191+ } else if ( fileName === `${ exampleBaseFileName } ) {
192+ this . exampleTabs [ 'HTML' ] = importPath ;
193+ } else {
194+ this . exampleTabs [ fileName ] = importPath ;
195+ }
196+ }
178197 }
179198}
0 commit comments