{{message}}
12 |
2 |
5 |
12 |
--------------------------------------------------------------------------------
/src/app/editor/editor.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { readTitleSuffix } from './editor.component';
2 |
3 | describe('EditorComponent', () => {
4 |
5 | it('readTitleSuffix() returns proper value', () => {
6 | expect(readTitleSuffix('alfa - dot.com', ' - ')).toEqual('dot.com');
7 | expect(readTitleSuffix('alfa - beta - bar.com', ' - ')).toEqual('bar.com');
8 | expect(readTitleSuffix('foo.org', ' - ')).toEqual('foo.org');
9 | });
10 | });
11 |
--------------------------------------------------------------------------------
/src/app/editor/editor.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
2 | import { Title } from '@angular/platform-browser';
3 |
4 | import { LoaderPopupService } from './popups/loader/loader-popup.service';
5 | import { PopupService } from './popups/popup.service';
6 | import { StateService } from './state.service';
7 | import { TemplateSource } from './template-source';
8 |
9 | @Component({
10 | selector: 'app-editor',
11 | templateUrl: './editor.component.html'
12 | })
13 | export class EditorComponent implements OnInit, OnChanges {
14 |
15 | @Input()
16 | public templateSource: TemplateSource;
17 |
18 | @ViewChild('container', { static: true, read: ViewContainerRef })
19 | public container: ViewContainerRef;
20 |
21 | public constructor(
22 | private readonly popupService: PopupService,
23 | private readonly stateService: StateService,
24 | private readonly titleService: Title,
25 | private readonly loaderPopup: LoaderPopupService) {
26 | }
27 |
28 | public ngOnInit() {
29 | this.popupService.setContainer(this.container);
30 | this.stateService.onStateChanged.subscribe(() => this.onStateChanged());
31 |
32 | if (this.templateSource) {
33 | this.load();
34 | }
35 | }
36 |
37 | public ngOnChanges(changes: SimpleChanges) {
38 | if (changes.templateSource && !changes.templateSource.firstChange) {
39 | this.load();
40 | }
41 | }
42 |
43 | private onStateChanged() {
44 | this.reloadPageTitle();
45 | }
46 |
47 | private load() {
48 | this.loaderPopup.load(this.templateSource);
49 | }
50 |
51 | private reloadPageTitle() {
52 | const templateName = this.stateService.templateManifest.meta.name;
53 | const separator = ' - ';
54 | const suffix = readTitleSuffix(this.titleService.getTitle(), separator);
55 | this.titleService.setTitle(templateName + separator + suffix);
56 | }
57 | }
58 |
59 | export function readTitleSuffix(title: string, separator: string): string {
60 | const p = title.lastIndexOf(separator);
61 | return p > 0 ? title.substring(p + separator.length) : title;
62 | }
63 |
--------------------------------------------------------------------------------
/src/app/editor/editor.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 | import { BrowserModule } from '@angular/platform-browser';
4 |
5 | import { EditorComponent } from './editor.component';
6 | import { PopupModule } from './popups/popup.module';
7 | import { PreviewModule } from './preview/preview.module';
8 | import { SidebarModule } from './sidebar/sidebar.module';
9 | import { StateService } from './state.service';
10 |
11 | @NgModule({
12 | declarations: [
13 | EditorComponent,
14 | ],
15 | imports: [
16 | BrowserModule,
17 | CommonModule,
18 | SidebarModule,
19 | PopupModule,
20 | PreviewModule
21 | ],
22 | providers: [
23 | StateService
24 | ],
25 | exports: [
26 | EditorComponent
27 | ]
28 | })
29 | export class EditorModule {
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/editor/popups/confirm/confirm-popup-mode.ts:
--------------------------------------------------------------------------------
1 |
2 | export enum ConfirmPopupMode {
3 | ok,
4 | okCancel
5 | }
6 |
--------------------------------------------------------------------------------
/src/app/editor/popups/confirm/confirm-popup.component.html:
--------------------------------------------------------------------------------
1 |
6 |
9 |
10 |
2 |
--------------------------------------------------------------------------------
/src/app/editor/popups/confirm/confirm-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 |
4 | import { PopupComponent } from '../popup.service';
5 | import { ConfirmPopupMode } from './confirm-popup-mode';
6 |
7 | @Component({
8 | templateUrl: './confirm-popup.component.html'
9 | })
10 | export class ConfirmPopupComponent implements OnInit, PopupComponent
3 |
23 |
4 |
9 | {{title}}
5 | 8 |
10 |
14 |
22 |
11 |
13 |
2 |
62 |
--------------------------------------------------------------------------------
/src/app/editor/popups/export/export-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import * as fileSaver from 'file-saver';
3 | import { Observable, Subject } from 'rxjs';
4 | import { PROJECT_DONATE_URL } from 't3mpl-core/core/constants';
5 | import { TemplateManifestMeta } from 't3mpl-core/core/model';
6 |
7 | import { StateService } from '../../state.service';
8 | import { PopupComponent } from '../popup.service';
9 | import { ExportPopupMode } from './export-popup-mode';
10 | import { DataZipGenerator } from './generators/data-zip-generator';
11 | import { ReleaseZipGenerator } from './generators/relase-zip-generator';
12 | import { TemplateZipGenerator } from './generators/template-zip-generator';
13 | import { ZipFile } from './generators/zip-utils';
14 |
15 | @Component({
16 | templateUrl: './export-popup.component.html'
17 | })
18 | export class ExportPopupComponent implements OnInit, PopupComponent
3 |
61 |
4 |
5 |
9 |
12 |
13 |
5 | {{ 'exportPopup.publishWebsite' | translate }}
6 | {{ 'exportPopup.exportData' | translate }}
7 | {{ 'exportPopup.exportTemplate' | translate }}
8 |
9 |
12 |
14 |
52 |
60 |
15 |
34 |
50 |
51 | {{ 'exportPopup.considerDonation' | translate }}
16 | 17 |{{ 'exportPopup.authorOfEditor' | translate }}
18 | 19 |
20 |
23 |
24 | {{ 'exportPopup.author' | translate }}:
21 | Bartlomiej Tadych
22 |
25 |
32 |
33 | {{ 'exportPopup.donation' | translate }}:
26 |
31 | {{ 'exportPopup.authorOfTemplate' | translate }} {{templateMeta.name}}
35 | 36 |
37 |
40 |
41 | {{ 'exportPopup.author' | translate }}:
38 | {{templateMeta.author}}
39 |
42 |
49 | {{ 'exportPopup.donation' | translate }}:
43 |
48 |
2 |
24 |
--------------------------------------------------------------------------------
/src/app/editor/popups/html-editor/html-editor-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 | import { HTML_CONTENT_BASE_PATH, HTML_CONTENT_EXT } from 't3mpl-core/core/constants';
4 | import { generateFileName } from 't3mpl-core/core/utils/file-name-generator';
5 |
6 | import { StateService } from '../../state.service';
7 | import { PopupComponent } from '../popup.service';
8 |
9 | @Component({
10 | templateUrl: './html-editor-popup.component.html'
11 | })
12 | export class HtmlEditorPopupComponent implements OnInit, PopupComponent
3 |
23 |
4 |
9 | {{ 'htmlEditorPopup.editHtml' | translate }}
5 | 8 |
10 |
14 |
22 |
11 |
12 |
13 |
2 |
27 |
--------------------------------------------------------------------------------
/src/app/editor/popups/image-picker/image-picker-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 | import { IMAGE_CONTENT_BASE_PATH } from 't3mpl-core/core/constants';
4 | import { generateFileName } from 't3mpl-core/core/utils/file-name-generator';
5 | import { getFileExt } from 't3mpl-core/core/utils/path-utils';
6 |
7 | import { StateService } from '../../state.service';
8 | import { PopupComponent } from '../popup.service';
9 |
10 | const MAX_SIZE = 200;
11 |
12 | @Component({
13 | selector: 'app-image-picker-popup',
14 | templateUrl: './image-picker-popup.component.html'
15 | })
16 | export class ImagePickerPopupComponent implements OnInit, PopupComponent
3 |
26 |
4 |
9 | {{ 'imagePickerPopup.pickImage' | translate }}
5 | 8 |
10 |
17 |
25 |
11 |
16 |
12 |
13 |
14 |
15 |
2 |
27 |
--------------------------------------------------------------------------------
/src/app/editor/popups/import/import-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { Observable, Subject } from 'rxjs';
3 |
4 | import { PopupComponent } from '../popup.service';
5 | import { ImportPopupMode } from './import-popup-mode';
6 | import { DataImporter } from './importers/data-importer';
7 | import { TemplateImporter } from './importers/template-importer';
8 |
9 | @Component({
10 | templateUrl: './import-popup.component.html'
11 | })
12 | export class ImportPopupComponent implements PopupComponent
3 |
26 |
4 |
5 |
8 |
11 |
12 |
5 | {{ 'importPopup.importData' | translate }}
6 | {{ 'importPopup.importTemplate' | translate }}
7 |
8 |
11 |
13 |
17 |
25 |
14 |
15 |
16 |
2 |
21 |
--------------------------------------------------------------------------------
/src/app/editor/popups/loader/loader-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 | import { TEMPLATE_DATA_FILE_NAME, TEMPLATE_MANIFEST_FILE_NAME } from 't3mpl-core/core/constants';
4 |
5 | import { StateService } from '../../state.service';
6 | import { TemplateSource } from '../../template-source';
7 | import { PopupComponent } from '../popup.service';
8 | import { loadData, loadTemplate, OnFileLoadedHandler } from './remote-template-loader';
9 |
10 | @Component({
11 | templateUrl: './loader-popup.component.html'
12 | })
13 | export class LoaderPopupComponent implements OnInit, PopupComponent
3 |
20 |
4 |
11 | 5 | {{ 'loaderPopup.title' | translate }} 6 |
7 | 10 |
12 |
13 |
14 |
19 |
2 |
29 |
--------------------------------------------------------------------------------
/src/app/editor/popups/markdown-editor/markdown-editor-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 | import { IMAGE_CONTENT_BASE_PATH, MARKDOWN_CONTENT_BASE_PATH, MARKDOWN_CONTENT_EXT } from 't3mpl-core/core/constants';
4 | import { generateFileName } from 't3mpl-core/core/utils/file-name-generator';
5 | import { getFileExt } from 't3mpl-core/core/utils/path-utils';
6 |
7 | import { FileLoader } from '../../core/file-loader';
8 | import { StateService } from '../../state.service';
9 | import { PopupComponent } from '../popup.service';
10 | import { insertAtCursor } from './insert-at-cursor';
11 |
12 | @Component({
13 | templateUrl: './markdown-editor-popup.component.html'
14 | })
15 | export class MarkdownEditorPopupComponent implements OnInit, PopupComponent
3 |
28 |
4 |
9 | {{ 'markdownEditorPopup.editMarkdown' | translate }}
5 | 8 |
10 |
19 |
27 |
11 |
14 |
15 |
16 |
17 |
18 |
2 |
43 |
--------------------------------------------------------------------------------
/src/app/editor/popups/template-info/template-info-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 | import { TemplateManifestMeta } from 't3mpl-core/core/model';
4 |
5 | import { StateService } from '../../state.service';
6 | import { PopupComponent } from '../popup.service';
7 |
8 | @Component({
9 | templateUrl: './template-info-popup.component.html'
10 | })
11 | export class TemplateInfoPopupComponent implements OnInit, PopupComponent
3 |
42 |
4 |
9 | {{ 'templateInfoPopup.title' | translate }}
5 | 8 |
10 |
36 |
41 |
11 |
35 | {{meta.name}}
12 | 13 |
14 |
17 | {{ 'templateInfoPopup.version' | translate }}:
15 | {{meta.version}}
16 |
18 |
21 | {{ 'templateInfoPopup.license' | translate }}:
19 | {{meta.license}}
20 |
22 |
25 |
26 | {{ 'templateInfoPopup.author' | translate }}:
23 | {{meta.author}}
24 |
27 |
30 | {{ 'templateInfoPopup.homepage' | translate }}:
28 |
29 |
31 |
34 | {{ 'templateInfoPopup.donation' | translate }}:
32 |
33 |
2 |
21 |
--------------------------------------------------------------------------------
/src/app/editor/popups/uploader/uploader-popup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 |
4 | import { StateService } from '../../state.service';
5 | import { PopupComponent } from '../popup.service';
6 | import { uploadTemplateData } from './template-data-uploader';
7 |
8 | @Component({
9 | templateUrl: './uploader-popup.component.html'
10 | })
11 | export class UploaderPopupComponent implements OnInit, PopupComponent
3 |
20 |
4 |
11 | 5 | {{ 'uploaderPopup.title' | translate }} 6 |
7 | 10 |
12 |
13 |
14 |
19 |
2 |
25 |
--------------------------------------------------------------------------------
/src/app/editor/preview/page-tabs.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { merge } from 'rxjs';
3 | import { debounceTime } from 'rxjs/operators';
4 |
5 | import { PreviewMode, StateService } from '../state.service';
6 |
7 | @Component({
8 | selector: 'app-page-tabs',
9 | templateUrl: './page-tabs.component.html'
10 | })
11 | export class PageTabsComponent implements OnInit {
12 |
13 | public currentVirtualFilePath: string;
14 | public virtualFilePaths: string[];
15 | public previewMode: PreviewMode;
16 |
17 | public constructor(
18 | private readonly stateService: StateService) {
19 | }
20 |
21 | public ngOnInit() {
22 | merge(
23 | this.stateService.onStateChanged,
24 | this.stateService.onPageChanged,
25 | this.stateService.onConfigurationChanged,
26 | this.stateService.onPreviewModeChanged
27 | )
28 | .pipe(debounceTime(50))
29 | .subscribe(() => this.reload());
30 | }
31 |
32 | private reload() {
33 | this.virtualFilePaths = this.stateService.pages.map(p => p.virtualFilePath);
34 | this.currentVirtualFilePath = this.stateService.currentPage
35 | ? this.stateService.currentPage.virtualFilePath
36 | : null;
37 | this.previewMode = this.stateService.previewMode;
38 | }
39 |
40 | public openPage(virtualFilePath: string) {
41 | this.stateService.setCurrentPage(virtualFilePath);
42 | }
43 |
44 | public changeMode(mode: PreviewMode) {
45 | this.stateService.setPreviewMode(mode);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/app/editor/preview/preview-utils.ts:
--------------------------------------------------------------------------------
1 |
2 | export function createCodeDocument(text: string): string {
3 | const body = document.createElement('body');
4 | body.style.color = '#000';
5 | body.style.background = '#FFF';
6 | body.style.fontSize = '16px';
7 | const pre = document.createElement('pre');
8 | pre.innerText = text;
9 | body.appendChild(pre);
10 | return body.outerHTML;
11 | }
12 |
13 | export function createErrorDocument(message: string): string {
14 | const code = document.createElement('code');
15 | code.style.display = 'block';
16 | code.style.background = 'red';
17 | code.style.color = 'white';
18 | code.style.padding = '1rem';
19 | code.innerText = message;
20 | return code.outerHTML;
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/editor/preview/preview.component.html:
--------------------------------------------------------------------------------
1 |
3 |
13 | -
4 |
- 8 | 9 | {{vfp}} 10 | 11 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
4 |
--------------------------------------------------------------------------------
/src/app/editor/preview/preview.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
2 | import { merge } from 'rxjs';
3 | import { debounceTime } from 'rxjs/operators';
4 |
5 | import { StateService } from '../state.service';
6 | import { DataPreviewRenderer } from './data-preview-renderer';
7 | import { TemplatePreviewRenderer } from './template-preview-renderer';
8 |
9 | const OPEN_PAGE_MESSAGE = 'openPage:';
10 |
11 | @Component({
12 | selector: 'app-preview',
13 | templateUrl: './preview.component.html'
14 | })
15 | export class PreviewComponent implements OnInit, OnDestroy {
16 |
17 | @ViewChild('iframe', { static: true })
18 | public iframe: ElementRef
3 |
9 | -
4 |
- 5 | {{ 'configuration.routing' | translate }} 6 | 7 |
10 |
11 |
48 |
12 |
33 |
34 |
13 |
14 |
15 | {{ 'configuration.pathStrategy' | translate }} *
16 | {{ 'configuration.pathStrategyExplain' | translate }}
17 |
18 |
19 |
20 |
21 |
32 | -
22 |
- 23 | 27 | {{pps.example}} 28 | 29 |
35 |
46 |
47 |
36 |
37 |
38 | {{ 'configuration.baseUrl' | translate }}
39 | {{ 'configuration.baseUrlExplain' | translate }}
40 |
41 |
42 |
43 |
44 |
45 |
2 |
13 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/boolean-property.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { TextPropertyContract } from 't3mpl-core/core/model';
3 |
4 | import { StateService } from '../../state.service';
5 |
6 | @Component({
7 | selector: 'app-boolean-property',
8 | templateUrl: './boolean-property.component.html'
9 | })
10 | export class BooleanPropertyComponent implements OnInit {
11 |
12 | @Input()
13 | public property: TextPropertyContract;
14 | @Input()
15 | public dataPath: string;
16 |
17 | public value: boolean;
18 | public validationError: string;
19 |
20 | public constructor(
21 | private readonly stateService: StateService) {
22 | }
23 |
24 | public ngOnInit() {
25 | this.value = this.stateService.getValue
3 |
4 |
5 | {{property._label}} *
6 | ({{property._description}})
7 |
8 |
9 |
10 |
11 |
12 |
2 |
23 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/choice-property.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { ChoicePropertyContract } from 't3mpl-core/core/model';
3 |
4 | import { StateService } from '../../state.service';
5 |
6 | @Component({
7 | selector: 'app-choice-property',
8 | templateUrl: './choice-property.component.html'
9 | })
10 | export class ChoicePropertyComponent implements OnInit {
11 |
12 | @Input()
13 | public property: ChoicePropertyContract;
14 | @Input()
15 | public dataPath: string;
16 |
17 | public orderedValues: ChoiceValue[];
18 | public value: string;
19 | public validationError: string;
20 |
21 | public constructor(
22 | private readonly stateService: StateService) {
23 | }
24 |
25 | public ngOnInit() {
26 | this.value = this.stateService.getValue(this.dataPath);
27 | this.validate();
28 |
29 | this.orderedValues = Object.keys(this.property.values).map(value => {
30 | return {
31 | value,
32 | label: this.property.values[value]
33 | };
34 | });
35 | this.orderedValues.sort((a, b) => a.label.localeCompare(b.label));
36 | }
37 |
38 | public onValueChanged(value: string) {
39 | this.value = value || null;
40 | this.stateService.setValue(this.dataPath, this.value);
41 | this.validate();
42 | }
43 |
44 | private validate() {
45 | this.validationError = this.stateService.validate(this.property, this.dataPath, this.value);
46 | }
47 | }
48 |
49 | interface ChoiceValue {
50 | value: string;
51 | label: string;
52 | }
53 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/collection-property.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 | {{property._label}} *
6 | ({{property._description}})
7 |
8 |
9 |
10 |
21 |
22 |
2 |
18 |
19 |
3 |
4 |
5 | {{property._label}} *
6 | ({{property._description}})
7 |
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
20 |
41 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/collection-property.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { getCollectionItemName } from './collection-property.component';
2 |
3 | describe('getCollectionItemName', () => {
4 |
5 | it('getCollectionItemName() returns proper value', () => {
6 | expect(getCollectionItemName('Rows')).toEqual('Row');
7 | expect(getCollectionItemName('Menu Items')).toEqual('Menu Item');
8 | expect(getCollectionItemName('Logo')).toEqual('Item');
9 | expect(getCollectionItemName('Item')).toEqual('Item');
10 | expect(getCollectionItemName('s')).toEqual('Item');
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/collection-property.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { CollectionPropertyContract } from 't3mpl-core/core/model';
3 |
4 | import { StateService } from '../../state.service';
5 |
6 | @Component({
7 | selector: 'app-collection-property',
8 | templateUrl: './collection-property.component.html'
9 | })
10 | export class CollectionPropertyComponent implements OnInit {
11 |
12 | @Input()
13 | public property: CollectionPropertyContract;
14 | @Input()
15 | public dataPath: string;
16 |
17 | public items: any[];
18 | public itemName: string;
19 | public validationError: string;
20 | public canAddItem: boolean;
21 |
22 | public constructor(
23 | private readonly stateService: StateService) {
24 | }
25 |
26 | public ngOnInit() {
27 | this.itemName = getCollectionItemName(this.property._label);
28 | this.reload();
29 | }
30 |
31 | private reload() {
32 | this.items = this.stateService.getValue
21 |
38 |
39 |
40 |
22 | {{itemName}} {{items.length - ix}}
23 |
24 |
27 |
30 |
33 |
34 |
35 |
2 |
13 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/color-property.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { ColorPropertyContract } from 't3mpl-core/core/model';
3 |
4 | import { StateService } from '../../state.service';
5 |
6 | @Component({
7 | selector: 'app-color-property',
8 | templateUrl: './color-property.component.html'
9 | })
10 | export class ColorPropertyComponent implements OnInit {
11 |
12 | @Input()
13 | public property: ColorPropertyContract;
14 | @Input()
15 | public dataPath: string;
16 |
17 | public value: string;
18 | public validationError: string;
19 |
20 | public constructor(
21 | private readonly stateService: StateService) {
22 | }
23 |
24 | public ngOnInit() {
25 | this.value = this.stateService.getValue
3 |
4 |
5 | {{property._label}} *
6 | ({{property._description}})
7 |
8 |
9 |
10 |
11 |
12 |
2 |
14 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/datetime-property.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import * as dayjs from 'dayjs';
3 | import { TextPropertyContract } from 't3mpl-core/core/model';
4 |
5 | import { StateService } from '../../state.service';
6 |
7 | @Component({
8 | selector: 'app-datetime-property',
9 | templateUrl: './datetime-property.component.html'
10 | })
11 | export class DatePropertyComponent implements OnInit {
12 |
13 | @Input()
14 | public property: TextPropertyContract;
15 | @Input()
16 | public dataPath: string;
17 |
18 | public value: string;
19 | public dateValue: string;
20 | public timeValue: string;
21 | public validationError: string;
22 |
23 | public constructor(
24 | private readonly stateService: StateService) {
25 | }
26 |
27 | public ngOnInit() {
28 | this.value = this.stateService.getValue
3 |
4 |
5 | {{property._label}} *
6 | ({{property._description}})
7 |
8 |
9 |
10 |
11 |
12 |
13 |
2 |
16 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/html-property.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { HtmlPropertyContract } from 't3mpl-core/core/model';
3 |
4 | import { HtmlEditorPopupService } from '../../popups/html-editor/html-editor-popup.service';
5 | import { StateService } from '../../state.service';
6 |
7 | @Component({
8 | selector: 'app-html-property',
9 | templateUrl: './html-property.component.html'
10 | })
11 | export class HtmlPropertyComponent implements OnInit {
12 |
13 | @Input()
14 | public property: HtmlPropertyContract;
15 | @Input()
16 | public dataPath: string;
17 |
18 | public value: string;
19 | public charCount: number;
20 | public validationError: string;
21 |
22 | public constructor(
23 | private readonly stateService: StateService,
24 | private readonly htmlEditorPopupService: HtmlEditorPopupService) {
25 | }
26 |
27 | public ngOnInit() {
28 | this.value = this.stateService.getValue
3 |
4 |
5 | {{property._label}} *
6 | ({{property._description}})
7 |
8 |
9 |
10 |
13 |
14 |
15 |
2 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/image-property.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
3 | import { ImagePropertyContract } from 't3mpl-core/core/model';
4 |
5 | import { ImagePickerPopupService } from '../../popups/image-picker/image-picker-popup.service';
6 | import { StateService } from '../../state.service';
7 |
8 | const MAX_HEIGHT = 55;
9 | const MAX_WIDTH = 100;
10 |
11 | @Component({
12 | selector: 'app-image-property',
13 | templateUrl: './image-property.component.html'
14 | })
15 | export class ImagePropertyComponent implements OnInit {
16 |
17 | @Input()
18 | public property: ImagePropertyContract;
19 | @Input()
20 | public dataPath: string;
21 |
22 | public value: string;
23 | public previewDataUrl: SafeResourceUrl;
24 | public validationError: string;
25 |
26 | public pickerWidth: number;
27 | public pickerHeight: number;
28 |
29 | public constructor(
30 | private readonly stateService: StateService,
31 | private readonly imagePickerService: ImagePickerPopupService,
32 | private readonly domSanitizer: DomSanitizer) {
33 | }
34 |
35 | public ngOnInit() {
36 | this.value = this.stateService.getValue
3 |
4 |
5 | {{property._label}} *
6 | ({{property._description}})
7 |
8 |
9 |
10 |
14 |
15 | {{property.width || '∞'}}×{{property.height || '∞'}}
16 |
17 | ![]()
18 |
19 |
20 |
21 |
2 |
16 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/markdown-property.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { HtmlPropertyContract } from 't3mpl-core/core/model';
3 |
4 | import { MarkdownEditorPopupService } from '../../popups/markdown-editor/markdown-editor-popup.service';
5 | import { StateService } from '../../state.service';
6 |
7 | @Component({
8 | selector: 'app-markdown-property',
9 | templateUrl: './markdown-property.component.html'
10 | })
11 | export class MarkdownPropertyComponent implements OnInit {
12 |
13 | @Input()
14 | public property: HtmlPropertyContract;
15 | @Input()
16 | public dataPath: string;
17 |
18 | public value: string;
19 | public charCount: number;
20 | public validationError: string;
21 |
22 | public constructor(
23 | private readonly stateService: StateService,
24 | private readonly markdownEditorPopupService: MarkdownEditorPopupService) {
25 | }
26 |
27 | public ngOnInit() {
28 | this.value = this.stateService.getValue
3 |
4 |
5 | {{property._label}} *
6 | ({{property._description}})
7 |
8 |
9 |
10 |
13 |
14 |
15 |
14 | Not supported property type: {{p.contract.type}}
15 |
16 |
17 |
2 |
13 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/properties/text-property.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { TextPropertyContract } from 't3mpl-core/core/model';
3 |
4 | import { StateService } from '../../state.service';
5 |
6 | @Component({
7 | selector: 'app-text-property',
8 | templateUrl: './text-property.component.html'
9 | })
10 | export class TextPropertyComponent implements OnInit {
11 |
12 | @Input()
13 | public property: TextPropertyContract;
14 | @Input()
15 | public dataPath: string;
16 |
17 | public value: string;
18 | public validationError: string;
19 |
20 | public constructor(
21 | private readonly stateService: StateService) {
22 | }
23 |
24 | public ngOnInit() {
25 | this.value = this.stateService.getValue
3 |
4 |
5 | {{property._label}} *
6 | ({{property._description}})
7 |
8 |
9 |
10 |
11 |
12 |
4 |
13 | -
5 |
- 9 | {{s.value._label}} 10 | 11 |
14 |
17 |
18 |
19 |
2 |
45 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/sidebar.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { SectionContractMap } from 't3mpl-core/core/model';
2 |
3 | import { groupByPanel } from './sidebar.component';
4 |
5 | describe('groupByPanel()', () => {
6 |
7 | it('groupByPanel() returns proper value', () => {
8 | const map: SectionContractMap = {
9 | ALFA: {
10 | _panel: 'ubuntu',
11 | properties: {}
12 | },
13 | BETA: {
14 | _panel: 'linux',
15 | properties: {}
16 | },
17 | GAMMA: {
18 | _panel: null,
19 | properties: {}
20 | },
21 | DELTA: {
22 | _panel: 'ubuntu',
23 | properties: {}
24 | },
25 | OMEGA: {
26 | _panel: 'linux',
27 | properties: {}
28 | }
29 | };
30 |
31 | const panels = groupByPanel(map);
32 |
33 | const panel1SectionNames = Object.keys(panels[0]);
34 | expect(panel1SectionNames).toContain('ALFA');
35 | expect(panel1SectionNames).toContain('DELTA');
36 |
37 | const panel2SectionNames = Object.keys(panels[1]);
38 | expect(panel2SectionNames).toContain('BETA');
39 | expect(panel2SectionNames).toContain('OMEGA');
40 |
41 | const panel3SectionNames = Object.keys(panels[2]);
42 | expect(panel3SectionNames).toContain('GAMMA');
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { SectionContractMap } from 't3mpl-core/core/model';
3 |
4 | import { version } from '../../../../package.json';
5 | import { StateService } from '../state.service';
6 |
7 | @Component({
8 | selector: 'app-sidebar',
9 | templateUrl: './sidebar.component.html'
10 | })
11 | export class SidebarComponent implements OnInit {
12 |
13 | public readonly appVersion: string = version;
14 | public templateName: string;
15 |
16 | public items: SidebarItem[];
17 | public currentItem: SidebarItem;
18 |
19 | public constructor(
20 | private readonly stateService: StateService) {
21 | }
22 |
23 | public ngOnInit() {
24 | this.stateService.onStateChanged.subscribe(() => this.onStateChanged());
25 | }
26 |
27 | private onStateChanged() {
28 | const manifest = this.stateService.templateManifest;
29 | this.templateName = manifest.meta.name;
30 |
31 | const items: SidebarItem[] = Object.keys(manifest.dataContract.zones).map(zoneName => {
32 | const zone = manifest.dataContract.zones[zoneName];
33 | return {
34 | type: 'zone',
35 | label: zone._label,
36 | zonePath: zoneName,
37 | zoneSections: groupByPanel(zone.sections)
38 | };
39 | });
40 | items.push({
41 | type: 'separator',
42 | label: '────'
43 | });
44 | items.push({
45 | type: 'configuration',
46 | label: 'Configuration'
47 | });
48 | this.items = items;
49 | this.currentItem = items[0];
50 | }
51 |
52 | public onItemChanged(itemIndex: number) {
53 | this.currentItem = this.items[itemIndex];
54 | }
55 | }
56 |
57 | interface SidebarItem {
58 | type: SidebarItemType;
59 | label: string;
60 | zonePath?: string;
61 | zoneSections?: SectionContractMap[];
62 | }
63 |
64 | type SidebarItemType = 'configuration' | 'separator' | 'zone';
65 |
66 | export function groupByPanel(map: SectionContractMap): SectionContractMap[] {
67 | const paneled: { [panelName: string]: SectionContractMap } = {};
68 | const sections: SectionContractMap[] = [];
69 |
70 | for (const sectionName of Object.keys(map)) {
71 | const section = map[sectionName];
72 | if (section._panel) {
73 | if (!paneled[section._panel]) {
74 | paneled[section._panel] = {};
75 | sections.push(paneled[section._panel]);
76 | }
77 | paneled[section._panel][sectionName] = section;
78 | } else {
79 | const single = {};
80 | single[sectionName] = section;
81 | sections.push(single);
82 | }
83 | }
84 | return sections;
85 | }
86 |
--------------------------------------------------------------------------------
/src/app/editor/sidebar/sidebar.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { TranslateModule } from '@ngx-translate/core';
5 |
6 | import { ConfigurationComponent } from './configuration/configuration.component';
7 | import { DropdownDirective } from './dropdown.directive';
8 | import { BooleanPropertyComponent } from './properties/boolean-property.component';
9 | import { ChoicePropertyComponent } from './properties/choice-property.component';
10 | import { CollectionPropertyComponent } from './properties/collection-property.component';
11 | import { ColorPropertyComponent } from './properties/color-property.component';
12 | import { DatePropertyComponent } from './properties/datetime-property.component';
13 | import { HtmlPropertyComponent } from './properties/html-property.component';
14 | import { ImagePropertyComponent } from './properties/image-property.component';
15 | import { MarkdownPropertyComponent } from './properties/markdown-property.component';
16 | import { PropertiesComponent } from './properties/properties.component';
17 | import { TextPropertyComponent } from './properties/text-property.component';
18 | import { SectionComponent } from './sections.component';
19 | import { SidebarMenuComponent } from './sidebar-menu.component';
20 | import { SidebarComponent } from './sidebar.component';
21 |
22 | @NgModule({
23 | declarations: [
24 | SidebarComponent,
25 | SidebarMenuComponent,
26 | DropdownDirective,
27 |
28 | ConfigurationComponent,
29 | SectionComponent,
30 | PropertiesComponent,
31 | TextPropertyComponent,
32 | BooleanPropertyComponent,
33 | DatePropertyComponent,
34 | ChoicePropertyComponent,
35 | CollectionPropertyComponent,
36 | HtmlPropertyComponent,
37 | MarkdownPropertyComponent,
38 | ImagePropertyComponent,
39 | ColorPropertyComponent,
40 | ],
41 | exports: [
42 | SidebarComponent
43 | ],
44 | imports: [
45 | TranslateModule.forChild(),
46 | BrowserModule,
47 | CommonModule
48 | ]
49 | })
50 | export class SidebarModule {
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/editor/state.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { Page } from 't3mpl-core/core/model';
2 |
3 | import { getNextCurrentPage } from './state.service';
4 |
5 | describe('StateService', () => {
6 |
7 | it('getNextCurrentPage() returns proper value', () => {
8 | const pageO = { filePath: 'o.html', virtualFilePath: 'o/', name: 'O', templateFilePath: 'o.html' };
9 | const pages1: Page[] = [
10 | { filePath: 'a.html', virtualFilePath: 'a/', name: 'A', templateFilePath: 'a.html' },
11 | { filePath: 'b.html', virtualFilePath: 'b/', name: 'B', templateFilePath: 'b.html' },
12 | { filePath: 'c.html', virtualFilePath: 'c/', name: 'C', templateFilePath: 'c.html' }
13 | ];
14 |
15 | const pages2 = [...pages1];
16 | pages2.splice(1, 2);
17 | pages2.push(pageO);
18 |
19 | const pages3 = [...pages1];
20 | pages3.push(pageO);
21 |
22 | const r1 = getNextCurrentPage(pages1, pages1, pages1[1]);
23 | expect(r1).toBeNull();
24 |
25 | const r2 = getNextCurrentPage(pages1, pages2, pages1[0]);
26 | expect(r2.virtualFilePath).toEqual('a/');
27 |
28 | const r3 = getNextCurrentPage([], pages1, null);
29 | expect(r3.virtualFilePath).toEqual('a/');
30 |
31 | const r4 = getNextCurrentPage(pages1, pages2, pages1[1]);
32 | expect(r4.virtualFilePath).toEqual('a/');
33 |
34 | const r5 = getNextCurrentPage(pages1, pages3, pages1[0]);
35 | expect(r5.virtualFilePath).toEqual('a/');
36 | });
37 | });
38 |
--------------------------------------------------------------------------------
/src/app/editor/state.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 | import { DataActivator } from 't3mpl-core/core/data/data-activator';
4 | import { DataPath } from 't3mpl-core/core/data/data-path';
5 | import { DataValidator } from 't3mpl-core/core/data/data-validator';
6 | import { MemoryStorage } from 't3mpl-core/core/memory-storage';
7 | import {
8 | Page,
9 | PropertyContract,
10 | PropertyContractMap,
11 | TemplateConfiguration,
12 | TemplateData,
13 | TemplateManifest
14 | } from 't3mpl-core/core/model';
15 | import { PagesResolver } from 't3mpl-core/core/pages-resolver';
16 | import { ReadableStorage, WritableStorage } from 't3mpl-core/core/storage';
17 | import { getDefaultConfiguration } from 't3mpl-core/core/template-configuration';
18 |
19 | import { TemplateSource } from './template-source';
20 |
21 | @Injectable()
22 | export class StateService {
23 |
24 | private dataActivator: DataActivator;
25 | private dataValidator: DataValidator;
26 |
27 | public onStateChanged: Subject
3 |
12 |
13 |
4 |
8 | 5 | T3MPL {{appVersion}} 6 |
7 |
9 |
11 |
14 |
29 |
30 |
15 | {{templateName}}
16 |
17 |
18 |
27 |
28 |
31 |
32 |
33 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | 3 | 4 |
{{{$copyright}}} {{COMMON.FOOTER.COPYRIGHT}}
5 | 6 | {{#if COMMON.FOOTER.POWERED_BY}} 7 |{{{$powered_by}}}
8 | {{/if}} 9 | 10 | {{#if COMMON.FOOTER.POST_HTML}} 11 | {{{$html COMMON.FOOTER.POST_HTML}}} 12 | {{/if}} 13 | 14 |