Skip to content

Commit e42d263

Browse files
edcarrolledcarroll
committed
Fixed example code rendering
1 parent f24b60c commit e42d263

36 files changed

+461
-414
lines changed

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,5 @@ Thumbs.db
3434

3535
# TypeScript
3636
*.js
37-
!old-demo/make-demo.js
3837
*.map
3938
*.d.ts
40-
!old-demo/js/**/*.js
41-
old-demo/js/**/*.json

‎demo/app/app.module.ts‎

Lines changed: 33 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,52 @@
11
import { BrowserModule } from '@angular/platform-browser';
2-
import { NgModule, ApplicationRef } from '@angular/core';
2+
import { NgModule } from '@angular/core';
33
import { CommonModule } from '@angular/common';
44
import { FormsModule } from '@angular/forms';
55
import { AppComponent } from './app.component';
6-
import {routing} from "./app.routing";
6+
import { routing } from "./app.routing";
77
import { GettingStartedPage } from './pages/getting-started/getting-started.page';
88
import { PageTitleComponent } from './components/page-title/page-title.component';
99
import { ExampleComponent } from './components/example/example.component';
1010
import { SuiModule } from "../../components";
1111
import { ApiComponent } from './components/api/api.component';
12-
import {CollapsePage, COLLAPSE_EXAMPLES} from './pages/collapse/collapse.page';
13-
import {AccordionPage, ACCORDION_EXAMPLES} from "./pages/accordion/accordion.page";
14-
import {CheckboxPage, CHECKBOX_EXAMPLES} from "./pages/checkbox/checkbox.page";
15-
import {DimmerPage, DIMMER_EXAMPLES} from "./pages/dimmer/dimmer.page";
16-
import {DropdownPage, DROPDOWN_EXAMPLES} from "./pages/dropdown/dropdown.page";
17-
import {MessagePage, MESSAGE_EXAMPLES} from "./pages/message/message.page";
18-
import {ProgressPage, PROGRESS_EXAMPLES} from "./pages/progress/progress.page";
19-
import {RatingPage, RATING_EXAMPLES} from "./pages/rating/rating.page";
20-
import {SearchPage, SEARCH_EXAMPLES} from "./pages/search/search.page";
21-
import {TabsPage, TABS_EXAMPLES} from "./pages/tabs/tabs.page";
22-
import {TestPage} from "./pages/test/test.page";
23-
import {SelectPage, SELECT_EXAMPLES} from "./pages/select/select.page";
12+
import { CollapsePageComponents } from './pages/collapse/collapse.page';
13+
import { AccordionPageComponents } from "./pages/accordion/accordion.page";
14+
import { CheckboxPageComponents } from "./pages/checkbox/checkbox.page";
15+
import { DimmerPageComponents } from "./pages/dimmer/dimmer.page";
16+
import { DropdownPageComponents } from "./pages/dropdown/dropdown.page";
17+
import { MessagePageComponents } from "./pages/message/message.page";
18+
import { ProgressPageComponents } from "./pages/progress/progress.page";
19+
import { RatingPageComponents } from "./pages/rating/rating.page";
20+
import { SearchPageComponents } from "./pages/search/search.page";
21+
import { SelectPageComponents } from "./pages/select/select.page";
22+
import { TabsPageComponents } from "./pages/tabs/tabs.page";
23+
import { TestPage } from "./pages/test/test.page";
24+
25+
import {CodeblockComponent} from './components/codeblock/codeblock.component';
2426

2527
@NgModule({
2628
declarations: [
2729
AppComponent,
28-
GettingStartedPage,
30+
2931
PageTitleComponent,
3032
ExampleComponent,
3133
ApiComponent,
32-
AccordionPage,
33-
ACCORDION_EXAMPLES,
34-
CollapsePage,
35-
COLLAPSE_EXAMPLES,
36-
CheckboxPage,
37-
CHECKBOX_EXAMPLES,
38-
DimmerPage,
39-
DIMMER_EXAMPLES,
40-
DropdownPage,
41-
DROPDOWN_EXAMPLES,
42-
MessagePage,
43-
MESSAGE_EXAMPLES,
44-
ProgressPage,
45-
PROGRESS_EXAMPLES,
46-
RatingPage,
47-
RATING_EXAMPLES,
48-
SearchPage,
49-
SEARCH_EXAMPLES,
50-
SelectPage,
51-
SELECT_EXAMPLES,
52-
TabsPage,
53-
TABS_EXAMPLES,
34+
CodeblockComponent,
35+
36+
GettingStartedPage,
37+
38+
AccordionPageComponents,
39+
CheckboxPageComponents,
40+
CollapsePageComponents,
41+
DimmerPageComponents,
42+
DropdownPageComponents,
43+
MessagePageComponents,
44+
ProgressPageComponents,
45+
RatingPageComponents,
46+
SearchPageComponents,
47+
SelectPageComponents,
48+
TabsPageComponents,
49+
5450
TestPage
5551
],
5652
imports: [

‎demo/app/components/codeblock/codeblock.component.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component, AfterViewInit, Input } from '@angular/core';
2+
3+
@Component({
4+
selector: "demo-codeblock",
5+
template: `
6+
<pre [ngClass]="languageClass" [innerHTML]="html"></pre>
7+
`
8+
})
9+
export class CodeblockComponent implements AfterViewInit{
10+
@Input()
11+
public language:string;
12+
13+
@Input()
14+
public src:string;
15+
16+
private html:string;
17+
18+
private languageClass:any = {};
19+
20+
constructor() {}
21+
22+
ngAfterViewInit(): any {
23+
if (this.src[0] == "\n") {
24+
this.src = this.src.replace("\n", "");
25+
}
26+
this.languageClass[`language-${this.language}`] = true;
27+
this.html = Prism.highlight(this.src || "", Prism.languages[this.language]);
28+
}
29+
}

‎demo/app/components/codeblock/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './codeblock.component';

‎demo/app/components/codeblock/shared/index.ts‎

Whitespace-only changes.

‎demo/app/components/example/example.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div [suiCollapse]="!detail">
1414
<div class="annotation transition visible">
1515
<div class="ui instructive bottom attached segment">
16-
<!--<codeblock [src]="code"></codeblock>-->
16+
<demo-codeblock language="markup" [src]="code"></demo-codeblock>
1717
</div>
1818
</div>
1919
</div>

‎demo/app/pages/accordion/accordion.page.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
<div class="ui main container">
88
<div class="ui dividing right rail"></div>
99
<h2 id="examples" class="ui dividing header">Examples</h2>
10-
<demo-example code="app/components/accordion/standard.example.html">
10+
<demo-example [code]="exampleStandardTemplate">
1111
<div info>
1212
<h4 class="ui header">Accordion</h4>
1313
<p>Standard accordion</p>
1414
</div>
1515
<accordion-example-standard result></accordion-example-standard>
1616
</demo-example>
17-
<demo-example code="app/components/accordion/styled.example.html">
17+
<demo-example [code]="exampleStyledTemplate">
1818
<div info>
1919
<h4 class="ui header">Styled</h4>
2020
<p>Adding classes to the root element applies styles</p>

‎demo/app/pages/accordion/accordion.page.ts‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,8 @@ export class AccordionPage {
3838
}
3939
]
4040
}
41-
]
42-
}
43-
44-
@Component({
45-
selector: 'accordion-example-standard',
46-
template: `
41+
];
42+
public exampleStandardTemplate:string = `
4743
<sui-accordion [closeOthers]="false">
4844
<sui-accordion-panel [isOpen]="true">
4945
<div title>
@@ -75,13 +71,8 @@ export class AccordionPage {
7571
</div>
7672
</sui-accordion-panel>
7773
</sui-accordion>
78-
`
79-
})
80-
export class AccordionExampleStandard { }
81-
82-
@Component({
83-
selector: 'accordion-example-styled',
84-
template: `
74+
`;
75+
public exampleStyledTemplate:string = `
8576
<sui-accordion class="styled fluid">
8677
<sui-accordion-panel [isOpen]="true">
8778
<div title>
@@ -102,9 +93,20 @@ export class AccordionExampleStandard { }
10293
</div>
10394
</sui-accordion-panel>
10495
</sui-accordion>
105-
`
96+
`;
97+
}
98+
99+
@Component({
100+
selector: 'accordion-example-standard',
101+
template: new AccordionPage().exampleStandardTemplate
102+
})
103+
export class AccordionExampleStandard { }
104+
105+
@Component({
106+
selector: 'accordion-example-styled',
107+
template: new AccordionPage().exampleStyledTemplate
106108
})
107109
export class AccordionExampleStyled { }
108110

109-
export const ACCORDION_EXAMPLES:Array<any> = [AccordionExampleStandard, AccordionExampleStyled];
111+
export const AccordionPageComponents:Array<any> = [AccordionPage, AccordionExampleStandard, AccordionExampleStyled];
110112

‎demo/app/pages/checkbox/checkbox.page.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="ui main container">
88
<div class="ui dividing right rail"></div>
99
<h2 id="examples" class="ui dividing header">Examples</h2>
10-
<demo-example code="app/components/checkbox/standard.example.html">
10+
<demo-example [code]="exampleStandardTemplate">
1111
<div info>
1212
<h4 class="ui header">Checkbox</h4>
1313
<p>A standard checkbox</p>
@@ -16,7 +16,7 @@ <h4 class="ui header">Checkbox</h4>
1616
<checkbox-example-standard></checkbox-example-standard>
1717
</div>
1818
</demo-example>
19-
<demo-example code="app/components/checkbox/radio.example.html">
19+
<demo-example [code]="exampleRadioButtonTemplate">
2020
<div info>
2121
<h4 class="ui header">Radio button</h4>
2222
<p>A standard radio button</p>
@@ -25,7 +25,7 @@ <h4 class="ui header">Radio button</h4>
2525
<checkbox-example-radio-button></checkbox-example-radio-button>
2626
</div>
2727
</demo-example>
28-
<demo-example code="app/components/checkbox/styled.example.html">
28+
<demo-example [code]="exampleStyledTemplate">
2929
<div info>
3030
<h4 class="ui header">Styled variations</h4>
3131
<p>Checkboxes and Radio Buttons can be styled</p>

‎demo/app/pages/checkbox/checkbox.page.ts‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,8 @@ export class CheckboxPage {
7878
}
7979
]
8080
}
81-
]
82-
}
83-
84-
@Component({
85-
selector: 'checkbox-example-standard',
86-
template: `
81+
];
82+
public exampleStandardTemplate:string = `
8783
<div class="ui form">
8884
<div class="grouped fields">
8985
<label>Checkbox Example</label>
@@ -102,16 +98,8 @@ export class CheckboxPage {
10298
<sui-checkbox [(ngModel)]="eCheck">Mirrors value of 1st checkbox</sui-checkbox>
10399
</div>
104100
</div>
105-
</div>
106-
`
107-
})
108-
export class CheckboxExampleStandard {
109-
public eCheck:boolean = true;
110-
}
111-
112-
@Component({
113-
selector: 'checkbox-example-radio-button',
114-
template: `
101+
</div>`;
102+
public exampleRadioButtonTemplate:string = `
115103
<div class="ui form">
116104
<div class="grouped fields">
117105
<label>Radio Button Example</label>
@@ -132,15 +120,8 @@ export class CheckboxExampleStandard {
132120
</div>
133121
</div>
134122
<p>The currently selected value is {{ eRadio | json }}</p>
135-
`
136-
})
137-
export class CheckboxExampleRadioButton {
138-
public eRadio:any = "world";
139-
}
140-
141-
@Component({
142-
selector: 'checkbox-example-styled',
143-
template: `
123+
`;
124+
public exampleStyledTemplate:string = `
144125
<div class="ui form">
145126
<div class="grouped fields">
146127
<label>Checkbox Style Examples</label>
@@ -166,9 +147,29 @@ export class CheckboxExampleRadioButton {
166147
</sui-radio-button>
167148
</div>
168149
</div>
169-
</div>
170-
`
150+
</div>`;
151+
}
152+
153+
@Component({
154+
selector: 'checkbox-example-standard',
155+
template: new CheckboxPage().exampleStandardTemplate
156+
})
157+
export class CheckboxExampleStandard {
158+
public eCheck:boolean = true;
159+
}
160+
161+
@Component({
162+
selector: 'checkbox-example-radio-button',
163+
template: new CheckboxPage().exampleRadioButtonTemplate
164+
})
165+
export class CheckboxExampleRadioButton {
166+
public eRadio:any = "world";
167+
}
168+
169+
@Component({
170+
selector: 'checkbox-example-styled',
171+
template: new CheckboxPage().exampleStyledTemplate
171172
})
172173
export class CheckboxExampleStyled { }
173174

174-
export const CHECKBOX_EXAMPLES:Array<any> = [CheckboxExampleStandard, CheckboxExampleRadioButton, CheckboxExampleStyled];
175+
export const CheckboxPageComponents:Array<any> = [CheckboxPage, CheckboxExampleStandard, CheckboxExampleRadioButton, CheckboxExampleStyled];

0 commit comments

Comments
 (0)