From b56d7720277acb55bcb5d7e5f2900947fb9e2ae6 Mon Sep 17 00:00:00 2001 From: tsv2013 Date: Mon, 15 Jan 2024 16:05:14 +0300 Subject: [PATCH] Work for #7669 - use shared TOCModel and give access to it (#7672) * Work for #7669 - use shared TOCModel and give access to it * Fix f-tests --------- Co-authored-by: tsv2013 --- .../progress/toc/progress.component.html | 10 +++--- .../progress/toc/progress.component.ts | 12 ++----- .../src/components/progress/ProgressToc.vue | 13 ++++--- packages/survey-vue3-ui/src/index.ts | 2 +- ...ogress-toc.scss => sv-navigation-toc.scss} | 0 src/knockout/components/progress/toc.html | 4 ++- src/knockout/components/progress/toc.ts | 6 ++-- src/main.scss | 5 ++- src/modern.fontless.scss | 9 +++-- src/react/reactSurveyProgressToc.tsx | 4 +-- src/survey.ts | 35 +++++++++++++------ src/surveyToc.ts | 2 +- src/vue/progressToc.vue | 15 ++++---- tests/surveytests.ts | 14 ++++---- 14 files changed, 74 insertions(+), 57 deletions(-) rename src/common-styles/{sv-progress-toc.scss => sv-navigation-toc.scss} (100%) diff --git a/packages/survey-angular-ui/src/components/progress/toc/progress.component.html b/packages/survey-angular-ui/src/components/progress/toc/progress.component.html index 7f6a41dafe..88fddc7ed2 100644 --- a/packages/survey-angular-ui/src/components/progress/toc/progress.component.html +++ b/packages/survey-angular-ui/src/components/progress/toc/progress.component.html @@ -1,9 +1,9 @@ -
- -
- - +
+ +
+ +
\ No newline at end of file diff --git a/packages/survey-angular-ui/src/components/progress/toc/progress.component.ts b/packages/survey-angular-ui/src/components/progress/toc/progress.component.ts index c902149292..32090e677d 100644 --- a/packages/survey-angular-ui/src/components/progress/toc/progress.component.ts +++ b/packages/survey-angular-ui/src/components/progress/toc/progress.component.ts @@ -4,22 +4,16 @@ import { createTOCListModel, getTocRootCss, ListModel, SurveyModel, TOCModel } f import { AngularComponentFactory } from "../../../component-factory"; @Component({ - selector: "sv-progress-toc, sv-ng-progress-toc", + selector: "sv-navigation-toc, sv-ng-navigation-toc", templateUrl: "./progress.component.html", styles: [":host { display: none; }"] }) export class ProgressTocComponent extends EmbeddedViewContentComponent implements OnChanges, OnInit { - public tocModel!: TOCModel; - @Input() model!: SurveyModel; - private createProgressTOCModel() { - this.tocModel = new TOCModel(this.model); - } + @Input() model!: TOCModel; override ngOnInit(): void { super.ngOnInit(); - this.createProgressTOCModel(); } ngOnChanges(changes: SimpleChanges): void { - this.createProgressTOCModel(); } } -AngularComponentFactory.Instance.registerComponent("sv-progress-toc", ProgressTocComponent); +AngularComponentFactory.Instance.registerComponent("sv-navigation-toc", ProgressTocComponent); diff --git a/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue b/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue index 2218122b52..e18996d4b0 100644 --- a/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue +++ b/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue @@ -1,16 +1,15 @@ diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts index ec6f6a876a..3650a4ed3d 100644 --- a/packages/survey-vue3-ui/src/index.ts +++ b/packages/survey-vue3-ui/src/index.ts @@ -215,7 +215,7 @@ function registerComponents(app: App) { app.component("sv-components-container", Container); app.component("sv-progress-buttons", ProgressButtons); - app.component("sv-progress-toc", ProgressToc); + app.component("sv-navigation-toc", ProgressToc); app.component("sv-progress-pages", Progress); app.component("sv-progress-questions", Progress); app.component("sv-progress-correctquestions", Progress); diff --git a/src/common-styles/sv-progress-toc.scss b/src/common-styles/sv-navigation-toc.scss similarity index 100% rename from src/common-styles/sv-progress-toc.scss rename to src/common-styles/sv-navigation-toc.scss diff --git a/src/knockout/components/progress/toc.html b/src/knockout/components/progress/toc.html index 7d8e2b97e8..805494c1f6 100644 --- a/src/knockout/components/progress/toc.html +++ b/src/knockout/components/progress/toc.html @@ -1,3 +1,4 @@ +
@@ -8,4 +9,5 @@
-
\ No newline at end of file +
+ \ No newline at end of file diff --git a/src/knockout/components/progress/toc.ts b/src/knockout/components/progress/toc.ts index 68b2c79970..48b625c219 100644 --- a/src/knockout/components/progress/toc.ts +++ b/src/knockout/components/progress/toc.ts @@ -2,10 +2,12 @@ import * as ko from "knockout"; import { TOCModel } from "survey-core"; const template: any = require("html-loader?interpolate!val-loader!./toc.html"); -ko.components.register("sv-progress-toc", { +ko.components.register("sv-navigation-toc", { viewModel: { createViewModel: (params: any, componentInfo: any) => { - return new TOCModel(params.model); + return { + tocModel: params.model as TOCModel + }; }, }, template: template diff --git a/src/main.scss b/src/main.scss index 8772061499..7a949c19da 100644 --- a/src/main.scss +++ b/src/main.scss @@ -3,13 +3,15 @@ background-repeat: no-repeat; background-position: center; } + :root { --sjs-default-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; } + $font-family: var(--font-family, var(--sjs-default-font-family)); @import "./common-styles/sv-progress-buttons.scss"; -@import "./common-styles/sv-progress-toc.scss"; +@import "./common-styles/sv-navigation-toc.scss"; @import "./common-styles/window.scss"; @import "./common-styles/sv-brand-info.scss"; @import "./common-styles/sv-drag-drop.scss"; @@ -949,6 +951,7 @@ body { .sv_q_dropdown_control input[readonly] { pointer-events: none; } + @import "./main.rtl.scss"; @import "./main.m600.scss"; diff --git a/src/modern.fontless.scss b/src/modern.fontless.scss index d97bf86ff8..3afa91ade2 100644 --- a/src/modern.fontless.scss +++ b/src/modern.fontless.scss @@ -3,7 +3,7 @@ @import "./modern/blocks/sv-window.scss"; @import "./common-styles/sv-popup.scss"; @import "./common-styles/sv-progress-buttons.scss"; -@import "./common-styles/sv-progress-toc.scss"; +@import "./common-styles/sv-navigation-toc.scss"; @import "./modern/blocks/sv-container.scss"; @import "./modern/blocks/sv-body.scss"; @import "./modern/blocks/sv-page.scss"; @@ -52,6 +52,7 @@ body { .sv-matrixdynamic__drag-icon { padding-top: 16px; } + .sv-matrixdynamic__drag-icon:after { content: " "; display: block; @@ -63,10 +64,12 @@ body { cursor: move; margin-top: 12px; } + .sv-matrix__drag-drop-ghost-position-top, .sv-matrix__drag-drop-ghost-position-bottom { position: relative; } + .sv-matrix__drag-drop-ghost-position-top::after, .sv-matrix__drag-drop-ghost-position-bottom::after { content: ""; @@ -76,13 +79,15 @@ body { position: absolute; left: 0; } + .sv-matrix__drag-drop-ghost-position-top::after { top: 0; } + .sv-matrix__drag-drop-ghost-position-bottom::after { bottom: 0; } .sv-skeleton-element { background-color: var(--background-dim, $background-dim); -} +} \ No newline at end of file diff --git a/src/react/reactSurveyProgressToc.tsx b/src/react/reactSurveyProgressToc.tsx index 3271107f95..a41076fd18 100644 --- a/src/react/reactSurveyProgressToc.tsx +++ b/src/react/reactSurveyProgressToc.tsx @@ -8,7 +8,7 @@ import { SvgIcon } from "./components/svg-icon/svg-icon"; export class SurveyProgressToc extends SurveyNavigationBase { render(): JSX.Element { - const tocModel = new TOCModel(this.props.model); + const tocModel = this.props.model; let content: JSX.Element; if(tocModel.isMobile) { content =
@@ -26,6 +26,6 @@ export class SurveyProgressToc extends SurveyNavigationBase { } } -ReactElementFactory.Instance.registerElement("sv-progress-toc", (props) => { +ReactElementFactory.Instance.registerElement("sv-navigation-toc", (props) => { return React.createElement(SurveyProgressToc, props); }); diff --git a/src/survey.ts b/src/survey.ts index 09f8e9b8ef..46890e43eb 100644 --- a/src/survey.ts +++ b/src/survey.ts @@ -76,6 +76,7 @@ import { Cover } from "./header"; import { surveyTimerFunctions } from "./surveytimer"; import { QuestionSignaturePadModel } from "./question_signaturepad"; import { SurveyTaskManagerModel } from "./surveyTaskManager"; +import { TOCModel } from "./surveyToc"; /** * The `SurveyModel` object contains properties and methods that allow you to control the survey and access its elements. @@ -997,8 +998,8 @@ export class SurveyModel extends SurveyElementCore }); this.addLayoutElement({ id: "toc-navigation", - component: "sv-progress-toc", - data: this + component: "sv-navigation-toc", + data: new TOCModel(this) }); this.layoutElements.push({ id: "navigationbuttons", @@ -1198,7 +1199,7 @@ export class SurveyModel extends SurveyElementCore @property({ onSet: (newValue, target: SurveyModel) => { if (newValue === "advanced") { - const layoutElement = target.layoutElements.filter(a => a.id === "advanced-header")[0]; + const layoutElement = target.findLayoutElement("advanced-header"); if (!layoutElement) { var advHeader = new Cover(); advHeader.logoPositionX = target.logoPosition === "right" ? "right" : "left"; @@ -2793,7 +2794,7 @@ export class SurveyModel extends SurveyElementCore this.setDataCore(newData); } public setDataCore(data: any, clearData: boolean = false): void { - if(clearData) { + if (clearData) { this.valuesHash = {}; } if (data) { @@ -3142,15 +3143,15 @@ export class SurveyModel extends SurveyElementCore public tryNavigateToPage(page: PageModel): boolean { if (this.isDesignMode) return false; const index = this.visiblePages.indexOf(page); - if(index < 0) return false; - if(index === this.currentPageNo) return false; + if (index < 0) return false; + if (index === this.currentPageNo) return false; if (index < this.currentPageNo) { this.currentPageNo = index; return true; } for (let i = this.currentPageNo; i < index; i++) { const page = this.visiblePages[i]; - if(!page.validate(true, true)) return false; + if (!page.validate(true, true)) return false; page.passed = true; } this.currentPage = page; @@ -6335,7 +6336,7 @@ export class SurveyModel extends SurveyElementCore allowNotifyValueChanged: boolean = true, questionName?: string ): void { - if(this.isCreatingPagesForPreview) return; + if (this.isCreatingPagesForPreview) return; var newValue = newQuestionValue; if (allowNotifyValueChanged) { newValue = this.questionOnValueChanging(name, newQuestionValue); @@ -7085,7 +7086,7 @@ export class SurveyModel extends SurveyElementCore return this.getLocalizationFormatString(strName, surveySpent, surveyLimit); } private getDisplayClockTime(val: number): string { - if(val < 0) { + if (val < 0) { val = 0; } const min: number = Math.floor(val / 60); @@ -7394,8 +7395,12 @@ export class SurveyModel extends SurveyElementCore this.layoutElements.push(layoutElement); return existingLayoutElement; } - public removeLayoutElement(layoutElementId: string): ISurveyLayoutElement { + public findLayoutElement(layoutElementId: string): ISurveyLayoutElement { const layoutElement = this.layoutElements.filter(a => a.id === layoutElementId)[0]; + return layoutElement; + } + public removeLayoutElement(layoutElementId: string): ISurveyLayoutElement { + const layoutElement = this.findLayoutElement(layoutElementId); if (!!layoutElement) { const layoutElementIndex = this.layoutElements.indexOf(layoutElement); this.layoutElements.splice(layoutElementIndex, 1); @@ -7418,7 +7423,7 @@ export class SurveyModel extends SurveyElementCore } } } else if (this.state === "running" && isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) { - const headerLayoutElement = this.layoutElements.filter(a => a.id === "advanced-header")[0]; + const headerLayoutElement = this.findLayoutElement("advanced-header"); const advHeader = headerLayoutElement && headerLayoutElement.data as Cover; let isBelowHeader = !advHeader || advHeader.hasBackground; if (container === "header" && !isBelowHeader) { @@ -7518,6 +7523,14 @@ export class SurveyModel extends SurveyElementCore this.removeScrollEventListener(); this.destroyResizeObserver(); this.rootElement = undefined; + if (this.layoutElements) { + for (var i = 0; i < this.layoutElements.length; i++) { + if (!!this.layoutElements[i].data && this.layoutElements[i].data !== this && this.layoutElements[i].data.dispose) { + this.layoutElements[i].data.dispose(); + } + } + this.layoutElements.splice(0, this.layoutElements.length); + } super.dispose(); this.editingObj = null; if (!this.pages) return; diff --git a/src/surveyToc.ts b/src/surveyToc.ts index 15d4381a62..99a7f86cb1 100644 --- a/src/surveyToc.ts +++ b/src/surveyToc.ts @@ -47,7 +47,7 @@ export function createTOCListModel(survey: SurveyModel, onAction?: () => void) { listModel.locOwner = survey; listModel.searchEnabled = false; survey.onCurrentPageChanged.add((s, o) => { - listModel.selectedItem = items.filter(i => i.id === survey.currentPage.name)[0]; + listModel.selectedItem = items.filter(i => !!survey.currentPage && i.id === survey.currentPage.name)[0]; }); return listModel; } diff --git a/src/vue/progressToc.vue b/src/vue/progressToc.vue index b646f82f33..08f5552ba8 100644 --- a/src/vue/progressToc.vue +++ b/src/vue/progressToc.vue @@ -1,10 +1,10 @@ @@ -15,15 +15,14 @@ import { SurveyModel, createTOCListModel, getTocRootCss, TOCModel } from "survey @Component export class ProgressToc extends Vue { + @Prop() model: TOCModel; @Prop() survey: SurveyModel; @Prop() css: any; - public tocModel: any = undefined; constructor() { super(); - this.tocModel = new TOCModel(this.survey); } } -Vue.component("sv-progress-toc", ProgressToc); +Vue.component("sv-navigation-toc", ProgressToc); export default ProgressToc; diff --git a/tests/surveytests.ts b/tests/surveytests.ts index 4e78e6c9b6..5b6a0e95a1 100644 --- a/tests/surveytests.ts +++ b/tests/surveytests.ts @@ -17002,7 +17002,7 @@ QUnit.test("getContainerContent - navigation", function (assert) { "id": "navigationbuttons" }], "nav left contentBottom"); assert.deepEqual(getContainerContent("left"), [{ - "component": "sv-progress-toc", + "component": "sv-navigation-toc", "id": "toc-navigation" }], "nav left left"); assert.deepEqual(getContainerContent("right"), [], "nav left right"); @@ -17020,7 +17020,7 @@ QUnit.test("getContainerContent - navigation", function (assert) { }], "nav right contentBottom"); assert.deepEqual(getContainerContent("left"), [], "nav right left"); assert.deepEqual(getContainerContent("right"), [{ - "component": "sv-progress-toc", + "component": "sv-navigation-toc", "id": "toc-navigation" }], "nav right right"); @@ -17152,7 +17152,7 @@ QUnit.test("getContainerContent - progress", function (assert) { assert.deepEqual(getContainerContent("contentTop"), [], "progress toc both contentTop"); assert.deepEqual(getContainerContent("contentBottom"), [], "progress toc both contentBottom"); assert.deepEqual(getContainerContent("left"), [{ - "component": "sv-progress-toc", + "component": "sv-navigation-toc", "id": "toc-navigation" }], "progress toc both left"); assert.deepEqual(getContainerContent("right"), [], "progress toc both right"); @@ -17164,7 +17164,7 @@ QUnit.test("getContainerContent - progress", function (assert) { assert.deepEqual(getContainerContent("contentTop"), [], "progress toc left contentTop"); assert.deepEqual(getContainerContent("contentBottom"), [], "progress toc left contentBottom"); assert.deepEqual(getContainerContent("left"), [{ - "component": "sv-progress-toc", + "component": "sv-navigation-toc", "id": "toc-navigation" }], "progress toc left left"); assert.deepEqual(getContainerContent("right"), [], "progress toc left right"); @@ -17176,7 +17176,7 @@ QUnit.test("getContainerContent - progress", function (assert) { assert.deepEqual(getContainerContent("contentBottom"), [], "progress toc right contentBottom"); assert.deepEqual(getContainerContent("left"), [], "progress toc right left"); assert.deepEqual(getContainerContent("right"), [{ - "component": "sv-progress-toc", + "component": "sv-navigation-toc", "id": "toc-navigation" }], "progress toc right right"); @@ -17228,7 +17228,7 @@ QUnit.test("getContainerContent - do not show TOC on preview", function (assert) "id": "navigationbuttons" }], ""); assert.deepEqual(getContainerContent("left"), [{ - "component": "sv-progress-toc", + "component": "sv-navigation-toc", "id": "toc-navigation" }], "show toc left"); assert.deepEqual(getContainerContent("right"), [], ""); @@ -17304,7 +17304,7 @@ QUnit.test("getContainerContent - do not show TOC on start page", function (asse "id": "navigationbuttons" }], ""); assert.deepEqual(getContainerContent("left"), [{ - "component": "sv-progress-toc", + "component": "sv-navigation-toc", "id": "toc-navigation" }], "show toc left"); assert.deepEqual(getContainerContent("right"), [], "");