purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added the [path] input to the fuse-highlight for loading source code externally

Browse Source 
+ Removed highlight.js and angular2-markdown
+ Updated the Angular Material example viewer
This commit is contained in:
Sercan Yemen 2018-01-08 16:02:00 +03:00
parent 2288905cbd
commit 35f3512e89
8 changed files with 54 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
package-lock.json generated
View File

@ -512,15 +512,6 @@
"resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-2.0.0.tgz",
"integrity": "sha512-Jsa818fxtAtBA3Fp1u4mWV9tcpakM+bNYFFbB/AjKig2BtzZkeyLx3vjcBCfwPmXkK10kX2QKR8RDALk1w209A=="
},
"angular2-markdown": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/angular2-markdown/-/angular2-markdown-1.6.0.tgz",
"integrity": "sha1-hja/narXD8NWMxJnB/+zPmhPurE=",
"requires": {
"marked": "0.3.9",
"prismjs": "1.9.0"
}
},
"ansi-html": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@ -4863,11 +4854,6 @@
"integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
"dev": true
},
"highlight.js": {
"version": "9.12.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
"integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -6274,11 +6260,6 @@
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
"dev": true
},
"marked": {
"version": "0.3.9",
"resolved": "https://registry.npmjs.org/marked/-/marked-0.3.9.tgz",
"integrity": "sha512-nW5u0dxpXxHfkHzzrveY45gCbi+R4PaO4WRZYqZNl+vB0hVGeqlFn0aOg1c8AKL63TrNFn9Bm2UP4AdiZ9TPLw=="
},
"math-expression-evaluator": {
"version": "1.2.17",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",

2
package.json
View File

@ -43,12 +43,10 @@
"@types/prismjs": "1.9.0",
"angular-calendar": "0.23.0",
"angular-in-memory-web-api": "0.5.2",
"angular2-markdown": "1.6.0",
"classlist.js": "1.1.20150312",
"core-js": "2.5.3",
"d3": "4.12.0",
"hammerjs": "2.0.8",
"highlight.js": "9.12.0",
"intl": "1.2.5",
"moment": "2.20.1",
"ngrx-store-freeze": "0.2.0",

2
src/app/app.module.ts
View File

@ -12,7 +12,6 @@ import { FuseMainModule } from './main/main.module';
import { FuseSplashScreenService } from './core/services/splash-screen.service';
import { FuseConfigService } from './core/services/config.service';
import { FuseNavigationService } from './core/components/navigation/navigation.service';
import { MarkdownModule } from 'angular2-markdown';
import { TranslateModule } from '@ngx-translate/core';
import { AppStoreModule } from './store/store.module';
@ -57,7 +56,6 @@ const appRoutes: Routes = [
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes),
SharedModule,
MarkdownModule.forRoot(),
TranslateModule.forRoot(),
InMemoryWebApiModule.forRoot(FuseFakeDbService, {
delay : 0,

36
src/app/core/components/highlight/highlight.component.ts
View File

@ -1,4 +1,6 @@
import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as Prism from 'prismjs/prism';
import './prism-languages';
@ -11,25 +13,46 @@ export class FuseHighlightComponent implements OnInit
{
@ContentChild('source') source: ElementRef;
@Input('lang') lang: string;
@Input('path') path: string;
constructor(
private elementRef: ElementRef
private elementRef: ElementRef,
private http: HttpClient
)
{
}
ngOnInit()
{
const originalSource = this.source.nativeElement.value;
if ( !originalSource || !this.lang )
// If there is no language defined, return...
if ( !this.lang )
{
return;
}
// If the path is defined...
if ( this.path )
{
// Get the source
this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
// Highlight it
this.highlight(response);
});
}
// If the path is not defined and the source element exists...
if ( !this.path && this.source )
{
// Highlight it
this.highlight(this.source.nativeElement.value);
}
}
highlight(sourceCode)
{
// Split the source into lines
const sourceLines = originalSource.split('\n');
const sourceLines = sourceCode.split('\n');
// Remove the first and the last line of the source
// code if they are blank lines. This way, the html
@ -73,6 +96,7 @@ export class FuseHighlightComponent implements OnInit
// Replace the innerHTML of the component with the highlighted code
this.elementRef.nativeElement.innerHTML =
'<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
}
}

5
src/app/core/modules/shared.module.ts
View File

@ -21,7 +21,6 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
import { FuseTranslationLoaderService } from '../services/translation-loader.service';
import { CookieService } from 'ngx-cookie-service';
import { MarkdownModule } from 'angular2-markdown';
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
@ -44,8 +43,7 @@ import { TranslateModule } from '@ngx-translate/core';
ReactiveFormsModule,
ColorPickerModule,
NgxDnDModule,
NgxDatatableModule,
MarkdownModule
NgxDatatableModule
],
exports : [
FlexLayoutModule,
@ -64,7 +62,6 @@ import { TranslateModule } from '@ngx-translate/core';
NgxDatatableModule,
FuseIfOnDomDirective,
FuseMaterialColorPickerComponent,
MarkdownModule,
TranslateModule
],
entryComponents: [

2
src/app/core/scss/partials/plugins/_prism.scss
View File

@ -2,7 +2,7 @@
$base00: #263238;
$base01: #2C393F;
$base02: #4A5A62;
$base02: #62727A;
$base03: #707880;
$base04: #C9CCD3;
$base05: #CDD3DE;

29
src/app/main/content/components/angular-material/example-viewer/example-viewer.html
View File

@ -7,9 +7,11 @@
<button mat-icon-button type="button" (click)="toggleSourceView()"
[matTooltip]="'View source'">
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit=""
preserveAspectRatio="xMidYMid meet" focusable="false">
<path fill="none" d="M0 0h24v24H0V0z"></path>
<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
<path
d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
</svg>
</mat-icon>
</button>
@ -23,29 +25,40 @@
<mat-tab label="CSS"></mat-tab>
</mat-tab-group>
<div class="tab-content">
<section class="tab" *ngIf="selectedIndex === 0" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
<section class="tab" *ngIf="selectedIndex === 0"
[@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
<button mat-icon-button type="button" class="example-source-copy"
title="Copy example source" aria-label="Copy example source to clipboard"
(click)="copySource(htmlView.el.nativeElement.innerText)">
<mat-icon>content_copy</mat-icon>
</button>
<div Markdown #htmlView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'"></div>
<fuse-highlight lang="html"
[path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'">
</fuse-highlight>
</section>
<section class="tab" *ngIf="selectedIndex === 1" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
<section class="tab" *ngIf="selectedIndex === 1"
[@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
<button mat-icon-button type="button" class="example-source-copy"
title="Copy example source" aria-label="Copy example source to clipboard"
(click)="copySource(tsView.el.nativeElement.innerText)">
<mat-icon>content_copy</mat-icon>
</button>
<div Markdown #tsView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'"></div>
<fuse-highlight lang="typescript"
[path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'">
</fuse-highlight>
</section>
<section class="tab" *ngIf="selectedIndex === 2" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
<section class="tab" *ngIf="selectedIndex === 2"
[@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
<button mat-icon-button type="button" class="example-source-copy"
title="Copy example source" aria-label="Copy example source to clipboard"
(click)="copySource(cssView.el.nativeElement.innerText)">
<mat-icon>content_copy</mat-icon>
</button>
<div Markdown #cssView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'"></div>
<fuse-highlight lang="css"
[path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'">
</fuse-highlight>
</section>
</div>
</div>

2
src/app/main/content/components/highlight/highlight.component.html
View File

@ -61,7 +61,7 @@
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">lang</code>
<span>
Language of the code to be highlighted. All highlight.js languages can be used.
Language of the code to be highlighted.
</span>
</p>
</div>