From a39f090746c36100a416a2a621725a033d556c53 Mon Sep 17 00:00:00 2001 From: dmitrykurmanov Date: Wed, 30 Aug 2023 13:10:37 +0000 Subject: [PATCH 1/7] Release: 1.9.105 [azurepipelines skip] --- CHANGELOG.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 91aa43fbb1..48926996d4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [1.9.105](https://github.com/surveyjs/survey-library/compare/v1.9.104...v1.9.105) (2023-08-30) + ## [1.9.104](https://github.com/surveyjs/survey-library/compare/v1.9.103...v1.9.104) (2023-08-22) ## [1.9.103](https://github.com/surveyjs/survey-library/compare/v1.9.102...v1.9.103) (2023-08-15) diff --git a/package.json b/package.json index b1c1abea0e..fd89df41a7 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "testcafe:ci:angular": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless testCafe/ --app \"http-server ./packages/survey-angular-ui/example/dist --proxy http://localhost:8080? -p 8080\" --selector-timeout 1500 --reporter minimal --env=angular", "prepare": "husky install" }, - "version": "1.9.104", + "version": "1.9.105", "name": "survey-library", "private": true, "devDependencies": { From 2db6231e6cf934b8b1de3d1481a42931f00f5404 Mon Sep 17 00:00:00 2001 From: dmitrykurmanov Date: Wed, 30 Aug 2023 13:10:40 +0000 Subject: [PATCH 2/7] Release: 1.9.105 [azurepipelines skip] --- packages/survey-angular-ui/CHANGELOG.md | 2 ++ packages/survey-angular-ui/package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/survey-angular-ui/CHANGELOG.md b/packages/survey-angular-ui/CHANGELOG.md index 87fe46f2aa..da62c9ba23 100644 --- a/packages/survey-angular-ui/CHANGELOG.md +++ b/packages/survey-angular-ui/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [1.9.105](https://github.com/surveyjs/surveyjs/compare/v1.9.104...v1.9.105) (2023-08-30) + ## [1.9.104](https://github.com/surveyjs/surveyjs/compare/v1.9.103...v1.9.104) (2023-08-22) ## [1.9.103](https://github.com/surveyjs/surveyjs/compare/v1.9.102...v1.9.103) (2023-08-15) diff --git a/packages/survey-angular-ui/package.json b/packages/survey-angular-ui/package.json index 17c273d470..9edd7df37c 100644 --- a/packages/survey-angular-ui/package.json +++ b/packages/survey-angular-ui/package.json @@ -1,6 +1,6 @@ { "name": "survey-angular-ui", - "version": "1.9.104", + "version": "1.9.105", "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.", "keywords": [ "Survey", From 6c25fb03c6b4f338cefd72f493d490fe80aad442 Mon Sep 17 00:00:00 2001 From: dmitrykurmanov Date: Wed, 30 Aug 2023 13:10:42 +0000 Subject: [PATCH 3/7] Release: 1.9.105 [azurepipelines skip] --- packages/survey-vue3-ui/CHANGELOG.md | 2 ++ packages/survey-vue3-ui/package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/survey-vue3-ui/CHANGELOG.md b/packages/survey-vue3-ui/CHANGELOG.md index 57b004ab2a..0c7c6ce529 100644 --- a/packages/survey-vue3-ui/CHANGELOG.md +++ b/packages/survey-vue3-ui/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. +## [1.9.105](https://github.com/surveyjs/survey-library/compare/v1.9.104...v1.9.105) (2023-08-30) + ## [1.9.104](https://github.com/surveyjs/survey-library/compare/v1.9.103...v1.9.104) (2023-08-22) ## [1.9.103](https://github.com/surveyjs/survey-library/compare/v1.9.102...v1.9.103) (2023-08-15) diff --git a/packages/survey-vue3-ui/package.json b/packages/survey-vue3-ui/package.json index 4970437b52..355a297a3b 100644 --- a/packages/survey-vue3-ui/package.json +++ b/packages/survey-vue3-ui/package.json @@ -1,6 +1,6 @@ { "name": "survey-vue3-ui", - "version": "1.9.104", + "version": "1.9.105", "scripts": { "dev": "vite", "preview": "vite preview", From 0a0c2f56d2f7777f607a0d067e891835cb5f68ac Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 30 Aug 2023 19:13:03 +0300 Subject: [PATCH 4/7] Add matrix column visible property (#6818) --- src/question_matrixdropdownbase.ts | 33 ++++++------ src/question_matrixdropdowncolumn.ts | 29 +++++++--- src/question_matrixdropdownrendered.ts | 8 +-- tests/jsonobjecttests.ts | 8 +++ tests/question_matrixdropdownbasetests.ts | 65 +++++++++++++++++++++++ tests/question_matrixdynamictests.ts | 20 +++++-- 6 files changed, 130 insertions(+), 33 deletions(-) diff --git a/src/question_matrixdropdownbase.ts b/src/question_matrixdropdownbase.ts index c84938277d..d2e95b6964 100644 --- a/src/question_matrixdropdownbase.ts +++ b/src/question_matrixdropdownbase.ts @@ -7,10 +7,8 @@ import { IElement, IQuestion, ISurveyData, ISurvey, ISurveyImpl, ITextProcessor, import { SurveyElement } from "./survey-element"; import { TextPreProcessorValue, QuestionTextProcessor } from "./textPreProcessor"; import { ItemValue } from "./itemvalue"; -import { surveyLocalization } from "./surveyStrings"; import { QuestionFactory } from "./questionfactory"; import { ILocalizableOwner, LocalizableString } from "./localizablestring"; -import { getCurrecyCodes } from "./question_expression"; import { FunctionFactory } from "./functionsfactory"; import { PanelModel } from "./panel"; import { settings } from "./settings"; @@ -18,7 +16,7 @@ import { KeyDuplicationError } from "./error"; import { SurveyModel } from "./survey"; import { SurveyError } from "./survey-error"; import { CssClassBuilder } from "./utils/cssClassBuilder"; -import { MatrixDropdownColumn } from "./question_matrixdropdowncolumn"; +import { IMatrixColumnOwner, MatrixDropdownColumn } from "./question_matrixdropdowncolumn"; import { QuestionMatrixDropdownRenderedCell, QuestionMatrixDropdownRenderedRow, QuestionMatrixDropdownRenderedTable } from "./question_matrixdropdownrendered"; export interface IMatrixDropdownData { @@ -681,7 +679,6 @@ implements ISurveyData, ISurveyImpl, ILocalizableOwner { var columns = this.data.columns; for (var i = 0; i < columns.length; i++) { var column = columns[i]; - if (!column.isVisible) continue; var cell = this.createCell(column); this.cells.push(cell); var cellValue = this.getCellValue(value, column.name); @@ -783,7 +780,7 @@ export class MatrixDropdownTotalRowModel extends MatrixDropdownRowModelBase { /** * A base class for the [QuestionMatrixDropdownModel](https://surveyjs.io/form-library/documentation/questionmatrixdropdownmodel) and [QuestionMatrixDynamicModel](https://surveyjs.io/form-library/documentation/questionmatrixdynamicmodel) classes. */ -export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel implements IMatrixDropdownData { +export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel implements IMatrixDropdownData, IMatrixColumnOwner { public static get defaultCellType() { return settings.matrix.defaultCellType; } @@ -1258,11 +1255,16 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel, properties: HashTable - ) { + ): void { if (!this.generatedVisibleRows) return; var newValues = this.getRowConditionValues(values); var rows = this.generatedVisibleRows; @@ -1375,7 +1377,8 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel(); @@ -1418,14 +1421,12 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel): void { const choices = q.visibleChoices; diff --git a/src/question_matrixdropdowncolumn.ts b/src/question_matrixdropdowncolumn.ts index 51837a1b37..5b6468fa27 100644 --- a/src/question_matrixdropdowncolumn.ts +++ b/src/question_matrixdropdowncolumn.ts @@ -27,6 +27,7 @@ export interface IMatrixColumnOwner extends ILocalizableOwner { oldValue: any ): void; onShowInMultipleColumnsChanged(column: MatrixDropdownColumn): void; + onColumnVisibilityChanged(column: MatrixDropdownColumn): void; getCellType(): string; getCustomCellType(column: MatrixDropdownColumn, row: MatrixDropdownRowModelBase, cellType: string): string; onColumnCellTypeChanged(column: MatrixDropdownColumn): void; @@ -122,7 +123,6 @@ export class MatrixDropdownColumn extends Base private templateQuestionValue: Question; private colOwnerValue: IMatrixColumnOwner = null; private indexValue = -1; - private _isVisible = true; private _hasVisibleCell = true; private _visiblechoices: Array; @@ -131,6 +131,7 @@ export class MatrixDropdownColumn extends Base this.createLocalizableString("totalFormat", this); this.createLocalizableString("cellHint", this); this.registerPropertyChangedHandlers(["showInMultipleColumns"], () => { this.doShowInMultipleColumnsChanged(); }); + this.registerPropertyChangedHandlers(["visible"], () => { this.doColumnVisibilityChanged(); }); this.updateTemplateQuestion(); this.name = name; if (title) { @@ -201,17 +202,23 @@ export class MatrixDropdownColumn extends Base this.colOwner.onColumnCellTypeChanged(this); } } - public get templateQuestion() { + public get templateQuestion(): Question { return this.templateQuestionValue; } public get value() { return this.templateQuestion.name; } - public get isVisible() { - return this._isVisible; + //For filtering columns + public get isVisible(): boolean { + return true; } - public setIsVisible(newVal: boolean): void { - this._isVisible = newVal; + public get isColumnVisible(): boolean { + if(this.isDesignMode) return true; + return this.visible && this.hasVisibleCell; + } + public get visible(): boolean { return this.getPropertyValue("visible"); } + public set visible(val: boolean) { + this.setPropertyValue("visible", val); } public get hasVisibleCell(): boolean { return this._hasVisibleCell; @@ -616,14 +623,19 @@ export class MatrixDropdownColumn extends Base } } - private doShowInMultipleColumnsChanged() { - if (this.colOwner != null && !this.isLoadingFromJson) { + private doShowInMultipleColumnsChanged(): void { + if (this.colOwner != null) { this.colOwner.onShowInMultipleColumnsChanged(this); } if (this.templateQuestion) { this.templateQuestion.autoOtherMode = this.isShowInMultipleColumns; } } + private doColumnVisibilityChanged(): void { + if (this.colOwner != null && !this.isDesignMode) { + this.colOwner.onColumnVisibilityChanged(this); + } + } private getProperties(curCellType: string): Array { return Serializer.getDynamicPropertiesByObj(this, curCellType); } @@ -710,6 +722,7 @@ Serializer.addClass( } }, "width", + { name: "visible:switch", default: true, overridingProperty: "visibleIf" }, "visibleIf:condition", "enableIf:condition", "requiredIf:condition", diff --git a/src/question_matrixdropdownrendered.ts b/src/question_matrixdropdownrendered.ts index 490e90eab3..9e90227500 100644 --- a/src/question_matrixdropdownrendered.ts +++ b/src/question_matrixdropdownrendered.ts @@ -408,7 +408,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base { if (this.matrix.isColumnLayoutHorizontal) { for (var i = 0; i < this.matrix.visibleColumns.length; i++) { var column = this.matrix.visibleColumns[i]; - if (!column.hasVisibleCell) continue; + if (!column.isColumnVisible) continue; if (this.matrix.IsMultiplyColumn(column)) { this.createMutlipleColumnsHeader(column); } else { @@ -450,7 +450,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base { var cells = this.matrix.visibleTotalRow.cells; for (var i = 0; i < cells.length; i++) { var cell = cells[i]; - if (!cell.column.hasVisibleCell) continue; + if (!cell.column.isColumnVisible) continue; if (this.matrix.IsMultiplyColumn(cell.column)) { this.createMutlipleColumnsFooter(this.footerRow, cell); } else { @@ -686,7 +686,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base { } for (var i = 0; i < row.cells.length; i++) { let cell = row.cells[i]; - if (!cell.column.hasVisibleCell) continue; + if (!cell.column.isColumnVisible) continue; if (this.matrix.IsMultiplyColumn(cell.column)) { this.createMutlipleEditCells(res, cell); } else { @@ -762,7 +762,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base { var renderedRows = []; for (var i = 0; i < columns.length; i++) { var col = columns[i]; - if (col.isVisible && col.hasVisibleCell) { + if (col.isColumnVisible) { if (this.matrix.IsMultiplyColumn(col)) { this.createMutlipleVerticalRows(renderedRows, col, i); } else { diff --git a/tests/jsonobjecttests.ts b/tests/jsonobjecttests.ts index bac1a2d9bd..0ce8ffd81e 100644 --- a/tests/jsonobjecttests.ts +++ b/tests/jsonobjecttests.ts @@ -2980,4 +2980,12 @@ QUnit.test("multipletextitem, name property should be required and unique", func const prop = Serializer.findProperty("multipletextitem", "name"); assert.equal(prop.isRequired, true, "name property is required"); assert.equal(prop.isUnique, true, "name property is unique"); +}); +QUnit.test("load matrix column, visible property", function (assert) { + const matrix = new QuestionMatrixDynamicModel("q1"); + const column = matrix.addColumn("col1"); + assert.equal(column.visible, true, "It is visible by default"); + column.fromJSON({ title: "column1", visible: false }); + assert.equal(column.title, "column1", "set column title correctly"); + assert.equal(column.visible, false, "column.visible is false"); }); \ No newline at end of file diff --git a/tests/question_matrixdropdownbasetests.ts b/tests/question_matrixdropdownbasetests.ts index f96dd77d4f..5c4b5cc056 100644 --- a/tests/question_matrixdropdownbasetests.ts +++ b/tests/question_matrixdropdownbasetests.ts @@ -635,4 +635,69 @@ QUnit.test("Set incorrect value into matrix dropdown", function (assert) { assert.notOk(matrix.value, "matrix value is empty, #2"); survey.data = { matrix: { row1: 1 } }; assert.equal(matrix.isEmpty(), false, "Set correct value"); +}); +QUnit.test("column.visible property", function (assert) { + const survey = new SurveyModel({ + elements: [ + { + type: "matrixdropdown", + name: "matrix", + columns: [ + { name: "col1", cellType: "text" }, + { name: "col2", cellType: "text", visible: false }, + { name: "col3", cellType: "text" } + ], + rows: ["row1"], + }, + ], + }); + const matrix = survey.getQuestionByName("matrix"); + assert.equal(matrix.columns[0].visible, true, "The default column.visible is true"); + assert.equal(matrix.columns[1].visible, false, "The second column.visible is false"); + let table = matrix.renderedTable; + assert.equal(table.headerRow.cells.length, 1 + 2, "Header: One column is invisible, #1"); + assert.equal(table.rows[1].cells.length, 1 + 2, "Row: One column is invisible, #1"); + assert.equal(table.headerRow.cells[2].headers, "col3", "The second column is col3, #1"); + matrix.columns[1].visible = true; + assert.notStrictEqual(table, matrix.renderedTable); + table = matrix.renderedTable; + assert.equal(table.headerRow.cells.length, 1 + 3, "Header: All columns are visible, #2"); + assert.equal(table.rows[1].cells.length, 1 + 3, "Row: All columns are visible, #2"); + assert.equal(table.headerRow.cells[2].headers, "col2", "The second column is col2, #2"); + matrix.columns[2].visible = false; + table = matrix.renderedTable; + assert.equal(table.headerRow.cells.length, 1 + 2, "Header: the last column is invisible, #3"); + assert.equal(table.rows[1].cells.length, 1 + 2, "Row: the last column is invisible, #3"); + assert.equal(table.headerRow.cells[2].headers, "col2", "The last column is col2, #3"); +}); +QUnit.test("column.visible property and design time", function (assert) { + const survey = new SurveyModel(); + survey.setDesignMode(true); + survey.fromJSON({ + elements: [ + { + type: "matrixdropdown", + name: "matrix", + columns: [ + { name: "col1", cellType: "text" }, + { name: "col2", cellType: "text", visible: false }, + { name: "col3", cellType: "text" } + ], + rows: ["row1"], + }, + ], + }); + const matrix = survey.getQuestionByName("matrix"); + assert.equal(matrix.columns[0].visible, true, "Column is visible by default"); + assert.equal(matrix.columns[1].visible, false, "visible property is false"); + assert.equal(matrix.columns[1].hasVisibleCell, true, "It is visible"); + let table = matrix.renderedTable; + assert.equal(table.headerRow.cells.length, 1 + 3, "Header: One column is invisible, but it is visible in design-time, #1"); + assert.equal(table.rows[1].cells.length, 1 + 3, "Row: One column is invisible, but it is visible in design-time, #1"); + assert.equal(table.headerRow.cells[3].headers, "col3", "The last column is col3, #1"); + matrix.columns[2].visible = false; + table = matrix.renderedTable; + assert.equal(table.headerRow.cells.length, 1 + 3, "Header: Two columns are invisible, but it is visible in design-time, #2"); + assert.equal(table.rows[1].cells.length, 1 + 3, "Row: Two columns are invisible, but it is visible in design-time, #2"); + assert.equal(table.headerRow.cells[3].headers, "col3", "The last column is col3, #2"); }); \ No newline at end of file diff --git a/tests/question_matrixdynamictests.ts b/tests/question_matrixdynamictests.ts index beb51e95e6..825894d207 100644 --- a/tests/question_matrixdynamictests.ts +++ b/tests/question_matrixdynamictests.ts @@ -1097,11 +1097,14 @@ QUnit.test("Matrixdynamic column.visibleIf", function (assert) { question.columns.push(new MatrixDropdownColumn("column1")); question.columns.push(new MatrixDropdownColumn("column2")); question.columns.push(new MatrixDropdownColumn("column3")); - question.columns[0]["choices"] = [1, 2, 3]; - question.columns[1]["choices"] = [4, 5]; - question.columns[2]["choices"] = [7, 8, 9, 10]; - question.columns[2].isRequired = true; - + const columns = question.columns; + columns[0]["choices"] = [1, 2, 3]; + columns[1]["choices"] = [4, 5]; + columns[2]["choices"] = [7, 8, 9, 10]; + columns[2].isRequired = true; + assert.equal(columns[0].visible, true, "columns[0].visible"); + assert.equal(columns[1].visible, true, "columns[1].visible"); + assert.equal(columns[2].visible, true, "columns[2].visible"); question.columns[1].visibleIf = "{row.column1} = 2"; question.columns[2].visibleIf = "{a} = 5"; @@ -1327,6 +1330,7 @@ QUnit.test( "The second column is invisible" ); survey.setValue("q2", 1); + let table = matrix.renderedTable; assert.equal( matrix.columns[0].hasVisibleCell, true, @@ -1362,6 +1366,7 @@ QUnit.test( "The second column is invisible now" ); survey.setValue("q2", 2); + table = matrix.renderedTable; assert.equal( matrix.columns[0].hasVisibleCell, false, @@ -7955,10 +7960,15 @@ QUnit.test("Summary doesn't work correctly if there is invisible column and clea clearInvisibleValues: "onHiddenContainer" }); const matrix = survey.getAllQuestions()[0]; + const rows = matrix.visibleRows; + assert.equal(rows.length, 2, "two rows"); + assert.equal(rows[0].cells.length, 4, "row[0].cells.length = 4"); + assert.equal(rows[1].cells.length, 4, "row[1].cells.length = 4"); matrix.visibleRows[0].cells[0].question.value = 1; matrix.visibleRows[0].cells[1].question.value = 2; matrix.visibleRows[1].cells[0].question.value = 3; matrix.visibleRows[1].cells[1].question.value = 4; + assert.equal(matrix.visibleTotalRow.cells.length, 4, "There are 4 cells"); assert.equal(matrix.visibleTotalRow.cells[2].value, 1 + 2 + 3 + 4, "summary calculated correctly"); }); QUnit.test("Set empty string to expression with empty total type", function (assert) { From 105a2662fc57d3c7285c8606253c7cfae5d1b72e Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Wed, 30 Aug 2023 19:13:21 +0300 Subject: [PATCH 5/7] resolve #6654 Survey fit in container (#6832) Co-authored-by: OlgaLarina --- src/defaultCss/defaultV2Css.ts | 1 + src/defaultV2-theme/defaultV2.fontless.scss | 33 +++++++++++++++++++++ src/survey.ts | 4 +++ tests/surveytests.ts | 26 ++++++++++++++++ 4 files changed, 64 insertions(+) diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts index 9475af7f7b..68bce2c0ef 100644 --- a/src/defaultCss/defaultV2Css.ts +++ b/src/defaultCss/defaultV2Css.ts @@ -15,6 +15,7 @@ export var defaultV2Css = { rootMobile: "sd-root-modern--mobile", rootReadOnly: "sd-root--readonly", rootCompact: "sd-root--compact", + rootFitToContainer: "sd-root-modern--full-container", rootBackgroundImage: "sd-root_background-image", container: "sd-container-modern", header: "sd-title sd-container-modern__title", diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss index 16b6af30b8..1748a4885d 100644 --- a/src/defaultV2-theme/defaultV2.fontless.scss +++ b/src/defaultV2-theme/defaultV2.fontless.scss @@ -95,6 +95,39 @@ body { } } +.sd-root-modern.sd-root-modern--full-container { + width: 100%; + height: 100%; + overflow: auto; + + * { + scrollbar-width: thin; + scrollbar-color: $border transparent; + } + + &::-webkit-scrollbar { + width: 12px; + height: 12px; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + border-radius: 32px; + background-color: $border; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb:hover { + border: 2px solid rgba(0, 0, 0, 0); + background-color: $foreground-light; + } +} + .sd-root-modern--mobile { --sd-timer-size: calc(9 * #{$base-unit}); } diff --git a/src/survey.ts b/src/survey.ts index 4b38732fa7..cb41e3dac2 100644 --- a/src/survey.ts +++ b/src/survey.ts @@ -1130,6 +1130,8 @@ export class SurveyModel extends SurveyElementCore } @property() completedCss: string; @property() containerCss: string; + @property({ onSet: (newValue, target: SurveyModel) => { target.updateCss(); } }) fitToContainer: boolean; + private getNavigationCss(main: string, btn: string) { return new CssClassBuilder().append(main) .append(btn).toString(); @@ -4482,6 +4484,7 @@ export class SurveyModel extends SurveyElementCore .append(this.css.rootMobile, this.isMobile) .append(this.css.rootReadOnly, this.mode === "display") .append(this.css.rootCompact, this.isCompact) + .append(this.css.rootFitToContainer, this.fitToContainer) .toString(); } private resizeObserver: ResizeObserver; @@ -7453,6 +7456,7 @@ Serializer.addClass("survey", [ choices: ["auto", "static", "responsive"], }, { name: "width", visibleIf: (obj: any) => { return obj.widthMode === "static"; } }, + { name: "fitToContainer:boolean", default: false }, { name: "backgroundImage", visible: false }, { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false }, { name: "backgroundImageAttachment", default: "scroll", choices: ["scroll", "fixed"], visible: false }, diff --git a/tests/surveytests.ts b/tests/surveytests.ts index a5b7126c7b..9a2b68bd15 100644 --- a/tests/surveytests.ts +++ b/tests/surveytests.ts @@ -15763,6 +15763,32 @@ QUnit.test("Check navigation bar css update", function (assert) { survey.css = { actionBar: { root: "custom-navigation", defaultSizeMode: "" }, footer: "custom-footer" }; assert.equal(survey.navigationBar.getRootCss(), "custom-navigation custom-footer"); }); +QUnit.test("Check survey getRootCss function - defaultV2Css", function (assert) { + const survey = new SurveyModel({ + "elements": [ + { + type: "text", + name: "q1", + } + ] + }); + survey.css = defaultV2Css; + assert.equal(survey.getRootCss(), "sd-root-modern"); + + survey.setIsMobile(true); + assert.equal(survey.getRootCss(), "sd-root-modern sd-root-modern--mobile"); + + survey.mode = "display"; + assert.equal(survey.getRootCss(), "sd-root-modern sd-root-modern--mobile sd-root--readonly"); + + survey.mode = "edit"; + survey.setIsMobile(false); + survey["isCompact"] = true; + assert.equal(survey.getRootCss(), "sd-root-modern sd-root--compact"); + + survey.fitToContainer = true; + assert.equal(survey.getRootCss(), "sd-root-modern sd-root--compact sd-root-modern--full-container"); +}); QUnit.test("Set correct activePage on fromSurvey and update buttons visibility", function (assert) { const survey = new SurveyModel({ "elements": [ From f619bc3abcfac2f9fe6a7903515af4cc5dc4c8ef Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Wed, 30 Aug 2023 19:13:36 +0300 Subject: [PATCH 6/7] Adaptive container enhancements (#6833) * adaptive-container-enhancements * add hideFirst option * fixed action item remove priority * adaptivity enhancements need for https://github.com/surveyjs/survey-creator/issues/4354 * fixed markup etalons --------- Co-authored-by: Aleksey Novikov --- src/actions/adaptive-container.ts | 23 ++++++--- src/actions/container.ts | 1 + .../snapshots/file-mob2-zip-png-ro.snap.html | 4 +- .../snapshots/file-mob2-zip-png.snap.html | 4 +- .../paneldynamic-no-footer-1.snap.html | 2 +- .../paneldynamic-no-footer-2.snap.html | 2 +- tests/responsivityTests.ts | 49 +++++++++++++++++++ 7 files changed, 73 insertions(+), 12 deletions(-) diff --git a/src/actions/adaptive-container.ts b/src/actions/adaptive-container.ts index fbe020b1a1..6391c8cc8f 100644 --- a/src/actions/adaptive-container.ts +++ b/src/actions/adaptive-container.ts @@ -11,22 +11,30 @@ export class AdaptiveActionContainer extends ActionCo public isResponsivenessDisabled = false; private hideItemsGreaterN(visibleItemsCount: number) { - const actionsToHide = this.visibleActions.filter(action => !action.disableHide); + const actionsToHide = this.getActionsToHide(); visibleItemsCount = Math.max(visibleItemsCount, this.minVisibleItemsCount - (this.visibleActions.length - actionsToHide.length)); const hiddenItems: IAction[] = []; actionsToHide.forEach((item) => { if (visibleItemsCount <= 0) { - item.mode = "popup"; - hiddenItems.push(item.innerItem); + if(item.removePriority) { + item.mode = "removed"; + } else { + item.mode = "popup"; + hiddenItems.push(item.innerItem); + } } visibleItemsCount--; }); this.hiddenItemsListModel.setItems(hiddenItems); } + private getActionsToHide() { + return this.visibleActions.filter(action => !action.disableHide).sort((a, b) => a.removePriority || 0 - b.removePriority || 0); + } + private getVisibleItemsCount(availableSize: number): number { this.visibleActions.filter((action) => action.disableHide).forEach(action => availableSize -= action.minDimension); - const itemsSizes: number[] = this.visibleActions.filter(action => !action.disableHide).map((item) => item.minDimension); + const itemsSizes: number[] = this.getActionsToHide().map((item) => item.minDimension); let currSize: number = 0; for (var i = 0; i < itemsSizes.length; i++) { currSize += itemsSizes[i]; @@ -127,7 +135,7 @@ export class AdaptiveActionContainer extends ActionCo } else if (dimension < minSize) { this.setActionsMode("small"); this.hideItemsGreaterN(this.getVisibleItemsCount(dimension - dotsItemSize)); - this.dotsItem.visible = true; + this.dotsItem.visible = !!this.hiddenItemsListModel.actions.length; } else { this.updateItemMode(dimension, maxSize); } @@ -145,7 +153,10 @@ export class AdaptiveActionContainer extends ActionCo } } public setActionsMode(mode: actionModeType) { - this.actions.forEach((action) => (action.mode = mode)); + this.actions.forEach((action) => { + if(mode == "small" && action.disableShrink) return; + action.mode = mode; + }); } public dispose(): void { super.dispose(); diff --git a/src/actions/container.ts b/src/actions/container.ts index 4ee745a112..bb7b5c5a69 100644 --- a/src/actions/container.ts +++ b/src/actions/container.ts @@ -10,6 +10,7 @@ export let defaultActionBarCss = { defaultSizeMode: "sv-action-bar--default-size-mode", smallSizeMode: "sv-action-bar--small-size-mode", item: "sv-action-bar-item", + itemAsIcon: "sv-action-bar-item--icon", itemActive: "sv-action-bar-item--active", itemPressed: "sv-action-bar-item--pressed", itemIcon: "sv-action-bar-item__icon", diff --git a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html index 46b172af75..e426bad097 100644 --- a/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html +++ b/tests/markup/snapshots/file-mob2-zip-png-ro.snap.html @@ -30,7 +30,7 @@
-
-
-
-
-