Skip to content

Commit e5b106c

Browse files
author
Gaillard
committed
add lazy loaded demo app
1 parent 97503f9 commit e5b106c

58 files changed

Lines changed: 1416 additions & 1128 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎angular.json‎

Lines changed: 72 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"projects": {
66
"angular-split-app": {
77
"root": "",
8-
"sourceRoot": "src",
8+
"sourceRoot": "src_app",
99
"projectType": "application",
1010
"prefix": "app",
1111
"schematics": {
@@ -18,26 +18,26 @@
1818
"builder": "@angular-devkit/build-angular:browser",
1919
"options": {
2020
"outputPath": "dist/angular-split-app",
21-
"index": "src/index.html",
22-
"main": "src/main.ts",
23-
"polyfills": "src/polyfills.ts",
24-
"tsConfig": "src/tsconfig.app.json",
21+
"index": "src_app/index.html",
22+
"main": "src_app/main.ts",
23+
"polyfills": "src_app/polyfills.ts",
24+
"tsConfig": "src_app/tsconfig.app.json",
2525
"assets": [
26-
"src/favicon.ico",
27-
"src/assets"
26+
"src_app/favicon.ico",
27+
"src_app/assets"
2828
],
2929
"styles": [
3030
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
31-
"src/styles.scss"
31+
"src_app/styles.scss"
3232
],
3333
"scripts": []
3434
},
3535
"configurations": {
3636
"production": {
3737
"fileReplacements": [
3838
{
39-
"replace": "src/environments/environment.ts",
40-
"with": "src/environments/environment.prod.ts"
39+
"replace": "src_app/environments/environment.ts",
40+
"with": "src_app/environments/environment.prod.ts"
4141
}
4242
],
4343
"optimization": true,
@@ -69,40 +69,74 @@
6969
"browserTarget": "angular-split-app:build:production"
7070
}
7171
}
72-
},
73-
"extract-i18n": {
74-
"builder": "@angular-devkit/build-angular:extract-i18n",
75-
"options": {
76-
"browserTarget": "angular-split-app:build"
77-
}
78-
},
79-
"test": {
80-
"builder": "@angular-devkit/build-angular:karma",
72+
}
73+
}
74+
},
75+
"angular-split-app-lazy": {
76+
"root": "",
77+
"sourceRoot": "src_lazy_app",
78+
"projectType": "application",
79+
"prefix": "app-lazy",
80+
"schematics": {
81+
"@schematics/angular:component": {
82+
"styleext": "scss"
83+
}
84+
},
85+
"architect": {
86+
"build": {
87+
"builder": "@angular-devkit/build-angular:browser",
8188
"options": {
82-
"main": "src/test.ts",
83-
"polyfills": "src/polyfills.ts",
84-
"tsConfig": "src/tsconfig.spec.json",
85-
"karmaConfig": "src/karma.conf.js",
89+
"outputPath": "dist/angular-split-app-lazy",
90+
"index": "src_lazy_app/index.html",
91+
"main": "src_lazy_app/main.ts",
92+
"polyfills": "src_lazy_app/polyfills.ts",
93+
"tsConfig": "src_lazy_app/tsconfig.app.json",
94+
"assets": [
95+
"src_lazy_app/favicon.ico",
96+
"src_lazy_app/assets"
97+
],
8698
"styles": [
87-
"src/styles.scss"
99+
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
100+
"src_lazy_app/styles.scss"
88101
],
89-
"scripts": [],
90-
"assets": [
91-
"src/favicon.ico",
92-
"src/assets"
93-
]
102+
"scripts": []
103+
},
104+
"configurations": {
105+
"production": {
106+
"fileReplacements": [
107+
{
108+
"replace": "src_lazy_app/environments/environment.ts",
109+
"with": "src_lazy_app/environments/environment.prod.ts"
110+
}
111+
],
112+
"optimization": true,
113+
"outputHashing": "all",
114+
"sourceMap": false,
115+
"extractCss": true,
116+
"namedChunks": false,
117+
"aot": true,
118+
"extractLicenses": true,
119+
"vendorChunk": false,
120+
"buildOptimizer": true,
121+
"budgets": [
122+
{
123+
"type": "initial",
124+
"maximumWarning": "2mb",
125+
"maximumError": "5mb"
126+
}
127+
]
128+
}
94129
}
95130
},
96-
"lint": {
97-
"builder": "@angular-devkit/build-angular:tslint",
131+
"serve": {
132+
"builder": "@angular-devkit/build-angular:dev-server",
98133
"options": {
99-
"tsConfig": [
100-
"src/tsconfig.app.json",
101-
"src/tsconfig.spec.json"
102-
],
103-
"exclude": [
104-
"**/node_modules/**"
105-
]
134+
"browserTarget": "angular-split-app-lazy:build"
135+
},
136+
"configurations": {
137+
"production": {
138+
"browserTarget": "angular-split-app-lazy:build:production"
139+
}
106140
}
107141
}
108142
}
@@ -119,26 +153,6 @@
119153
"tsConfig": "projects/angular-split/tsconfig.lib.json",
120154
"project": "projects/angular-split/ng-package.json"
121155
}
122-
},
123-
"test": {
124-
"builder": "@angular-devkit/build-angular:karma",
125-
"options": {
126-
"main": "projects/angular-split/src/test.ts",
127-
"tsConfig": "projects/angular-split/tsconfig.spec.json",
128-
"karmaConfig": "projects/angular-split/karma.conf.js"
129-
}
130-
},
131-
"lint": {
132-
"builder": "@angular-devkit/build-angular:tslint",
133-
"options": {
134-
"tsConfig": [
135-
"projects/angular-split/tsconfig.lib.json",
136-
"projects/angular-split/tsconfig.spec.json"
137-
],
138-
"exclude": [
139-
"**/node_modules/**"
140-
]
141-
}
142156
}
143157
}
144158
}

‎src/test.ts‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/tsconfig.spec.json‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/tslint.json‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

src/app/app.module.ts renamed to src_app/app/app.module.ts

File renamed without changes.

src/app/component/app.component.ts renamed to src_app/app/component/app.component.ts

File renamed without changes.

src/app/component/changelog/changelog.route.component.ts renamed to src_app/app/component/changelog/changelog.route.component.ts

File renamed without changes.

src/app/component/doc/doc.route.component.html renamed to src_app/app/component/doc/doc.route.component.html

File renamed without changes.

src/app/component/doc/doc.route.component.ts renamed to src_app/app/component/doc/doc.route.component.ts

Lines changed: 78 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,78 @@
1-
import { Component } from '@angular/core';
2-
3-
@Component({
4-
selector: 'sp-doc',
5-
styles: [`
6-
:host {
7-
display: block;
8-
width: 100%;
9-
margin: 50px 0;
10-
}
11-
h4 {
12-
margin: 20px 0;
13-
}
14-
.sel {
15-
font-size: 16px;
16-
color: #adadad;
17-
}
18-
tr > th {
19-
color: #adadad;
20-
}
21-
tr > th:first-child,
22-
.selContent {
23-
font-weight: bold;
24-
color: #ffc421;
25-
}
26-
tr > td:first-child {
27-
font-weight: bold;
28-
}
29-
`],
30-
templateUrl: './doc.route.component.html'
31-
})
32-
export class DocComponent {
33-
34-
readonly splitDoc = {
35-
inputs: [
36-
{name: 'direction', type: 'string', default: '"horizontal"', details: 'Select split direction: <code>"horizontal"</code> or <code>"vertical"</code>.'},
37-
{name: 'gutterSize', type: 'number', default: '11', details: `Gutters's size (dragging elements) in pixels.`},
38-
{name: 'disabled', type: 'boolean', default: 'false', details: 'Disable the dragging feature (remove cursor/image on gutters). <code>(gutterClick)</code> still emits.'},
39-
{name: 'useTransition', type: 'boolean', default: 'false', details: 'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
40-
],
41-
outputs: [
42-
{name: 'dragStart', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag starts.'},
43-
{name: 'dragEnd', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag ends.'},
44-
{name: 'gutterClick', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when user clicks on a gutter.'},
45-
{name: 'transitionEnd', value: 'Array<number>', details: 'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code>).<br>Only if <code>[useTransition]="true"</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
46-
],
47-
class: [
48-
{name: 'dragProgress$', type: 'Observable<{gutterNum: number, sizes: Array<number>}>', details: 'Emit when dragging. Replace old <code>(dragProgress)</code> template event for better flexibility about change detection mechanism.'},
49-
{name: 'setVisibleAreaSizes()', type: '(Array<number>) => boolean', details: 'Set all <b>visible</b> area sizes in one go, return a boolean to know if input values were correct. Useful when combined with <code>dragProgress$</code> to sync multiple splits.'},
50-
{name: 'getVisibleAreaSizes()', type: '() => Array<number>', details: 'Get all <b>visible</b> area sizes.'},
51-
],
52-
};
53-
54-
readonly splitAreaDoc = {
55-
inputs: [
56-
{name: 'size', type: 'number', default: '100/nb_visible_areas', details: 'Size of the area in percent (value between <code>0</code> and <code>100</code>).<br>If not provided or if all areas sizes not equal to 100, all areas will have the same size.'},
57-
]
58-
}
59-
60-
readonly cssClasses = {
61-
split: [
62-
{name: 'is-init', details: 'Added after component initialization.'},
63-
{name: 'is-horizontal / is-vertical', details: 'Depends on <code>&lt;as-split [direction]="x"&gt;</code>.'},
64-
{name: 'is-disabled', details: 'Added when <code>&lt;as-split [disabled]="true"&gt;</code>.'},
65-
{name: 'is-transition', details: 'Added when <code>&lt;as-split [useTransition]="true"&gt;</code>.'},
66-
{name: 'is-dragging', details: 'Added while a gutter is dragged.'},
67-
],
68-
area: [
69-
{name: 'as-split-area', details: 'Added on all areas.'},
70-
{name: 'is-hided', details: 'Added when <code>&lt;as-split-area [visible]="false"&gt;</code>.'},
71-
],
72-
gutter: [
73-
{name: 'as-split-gutter', details: 'Added on all gutters.'},
74-
{name: 'is-dragged', details: 'Added on gutter while dragged.'},
75-
],
76-
};
77-
78-
}
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'sp-doc',
5+
styles: [`
6+
:host {
7+
display: block;
8+
width: 100%;
9+
margin: 50px 0;
10+
}
11+
h4 {
12+
margin: 20px 0;
13+
}
14+
.sel {
15+
font-size: 16px;
16+
color: #adadad;
17+
}
18+
tr > th {
19+
color: #adadad;
20+
}
21+
tr > th:first-child,
22+
.selContent {
23+
font-weight: bold;
24+
color: #ffc421;
25+
}
26+
tr > td:first-child {
27+
font-weight: bold;
28+
}
29+
`],
30+
templateUrl: './doc.route.component.html'
31+
})
32+
export class DocComponent {
33+
34+
readonly splitDoc = {
35+
inputs: [
36+
{name: 'direction', type: 'string', default: '"horizontal"', details: 'Select split direction: <code>"horizontal"</code> or <code>"vertical"</code>.'},
37+
{name: 'gutterSize', type: 'number', default: '11', details: `Gutters's size (dragging elements) in pixels.`},
38+
{name: 'disabled', type: 'boolean', default: 'false', details: 'Disable the dragging feature (remove cursor/image on gutters). <code>(gutterClick)</code> still emits.'},
39+
{name: 'useTransition', type: 'boolean', default: 'false', details: 'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
40+
],
41+
outputs: [
42+
{name: 'dragStart', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag starts.'},
43+
{name: 'dragEnd', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag ends.'},
44+
{name: 'gutterClick', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when user clicks on a gutter.'},
45+
{name: 'transitionEnd', value: 'Array<number>', details: 'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code>).<br>Only if <code>[useTransition]="true"</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
46+
],
47+
class: [
48+
{name: 'dragProgress$', type: 'Observable<{gutterNum: number, sizes: Array<number>}>', details: 'Emit when dragging. Replace old <code>(dragProgress)</code> template event for better flexibility about change detection mechanism.'},
49+
{name: 'setVisibleAreaSizes()', type: '(Array<number>) => boolean', details: 'Set all <b>visible</b> area sizes in one go, return a boolean to know if input values were correct. Useful when combined with <code>dragProgress$</code> to sync multiple splits.'},
50+
{name: 'getVisibleAreaSizes()', type: '() => Array<number>', details: 'Get all <b>visible</b> area sizes.'},
51+
],
52+
};
53+
54+
readonly splitAreaDoc = {
55+
inputs: [
56+
{name: 'size', type: 'number', default: '100/nb_visible_areas', details: 'Size of the area in percent (value between <code>0</code> and <code>100</code>).<br>If not provided or if all areas sizes not equal to 100, all areas will have the same size.'},
57+
]
58+
}
59+
60+
readonly cssClasses = {
61+
split: [
62+
{name: 'is-init', details: 'Added after component initialization.'},
63+
{name: 'is-horizontal / is-vertical', details: 'Depends on <code>&lt;as-split [direction]="x"&gt;</code>.'},
64+
{name: 'is-disabled', details: 'Added when <code>&lt;as-split [disabled]="true"&gt;</code>.'},
65+
{name: 'is-transition', details: 'Added when <code>&lt;as-split [useTransition]="true"&gt;</code>.'},
66+
{name: 'is-dragging', details: 'Added while a gutter is dragged.'},
67+
],
68+
area: [
69+
{name: 'as-split-area', details: 'Added on all areas.'},
70+
{name: 'is-hided', details: 'Added when <code>&lt;as-split-area [visible]="false"&gt;</code>.'},
71+
],
72+
gutter: [
73+
{name: 'as-split-gutter', details: 'Added on all gutters.'},
74+
{name: 'is-dragged', details: 'Added on gutter while dragged.'},
75+
],
76+
};
77+
78+
}

src/app/component/exampleTitle.component.ts renamed to src_app/app/component/exampleTitle.component.ts

File renamed without changes.

0 commit comments

Comments
 (0)