From 9a35073576349e788e1d56e77bc956417d98a5bd Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Tue, 1 Oct 2024 09:16:26 +0300 Subject: [PATCH] Drop-down list uses the desktop view on the mobile. (#5924) * work for #5922 Drop-down list uses the desktop view on the mobile. * work for #5922 Drop-down list uses the desktop view on the mobile. --------- Co-authored-by: OlgaLarina --- .../src/components/simulator.ts | 4 ++- .../src/components/tabs/preview.ts | 2 +- .../src/components/tabs/test-plugin.ts | 4 +-- .../tests/tabs/test.tests.ts | 31 ++++++++++++++++++- 4 files changed, 36 insertions(+), 5 deletions(-) diff --git a/packages/survey-creator-core/src/components/simulator.ts b/packages/survey-creator-core/src/components/simulator.ts index d41885adba..b926753321 100644 --- a/packages/survey-creator-core/src/components/simulator.ts +++ b/packages/survey-creator-core/src/components/simulator.ts @@ -1,4 +1,5 @@ import { Base, CssClassBuilder, property, SurveyModel } from "survey-core"; +import { SurveyCreatorModel } from "../creator-base"; require("./simulator.scss"); @@ -6,12 +7,13 @@ export class SurveySimulatorModel extends Base { private surveyChanged() { const _this = this; this.survey.onOpenDropdownMenu.add((_, options) => { + if (this.surveyProvider.isTouch) return; const device = simulatorDevices[_this.activeDevice]; options.menuType = device.deviceType === "desktop" ? "dropdown" : (device.deviceType == "tablet" ? "popup" : "overlay"); }); } - constructor() { + constructor(private surveyProvider: SurveyCreatorModel) { super(); // if (!!_toolbarHolder) { // this.simulatorOptions.survey = this._toolbarHolder.koSurvey; diff --git a/packages/survey-creator-core/src/components/tabs/preview.ts b/packages/survey-creator-core/src/components/tabs/preview.ts index 8304c40410..649639839c 100644 --- a/packages/survey-creator-core/src/components/tabs/preview.ts +++ b/packages/survey-creator-core/src/components/tabs/preview.ts @@ -72,7 +72,7 @@ export class PreviewViewModel extends Base { constructor(protected surveyProvider: SurveyCreatorModel, private startThemeClasses: any = defaultV2Css) { super(); - this.simulator = new SurveySimulatorModel(); + this.simulator = new SurveySimulatorModel(surveyProvider); } public get isMobileView() { diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts index d4f1ef9188..cf9f5153f5 100644 --- a/packages/survey-creator-core/src/components/tabs/test-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/test-plugin.ts @@ -151,7 +151,7 @@ export class TabTestPlugin implements ICreatorPlugin { iconName: "icon-device-desktop", mode: "small", visible: new ComputedUpdater(() => { - return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab); + return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch); }), }, { items: deviceSelectorItems, @@ -169,7 +169,7 @@ export class TabTestPlugin implements ICreatorPlugin { iconName: "icon-device-rotate", mode: "small", visible: new ComputedUpdater(() => { - return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab); + return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch); }), action: () => { this.model.simulator.landscape = !this.model.simulator.landscape; diff --git a/packages/survey-creator-core/tests/tabs/test.tests.ts b/packages/survey-creator-core/tests/tabs/test.tests.ts index 83bad85758..bf047d726f 100644 --- a/packages/survey-creator-core/tests/tabs/test.tests.ts +++ b/packages/survey-creator-core/tests/tabs/test.tests.ts @@ -1,7 +1,7 @@ import { CreatorTester } from "../creator-tester"; import { TestSurveyTabViewModel } from "../../src/components/tabs/test"; import { SurveyResultsItemModel, SurveyResultsModel } from "../../src/components/results"; -import { IAction, ListModel, Question, QuestionDropdownModel, SurveyModel, StylesManager } from "survey-core"; +import { IAction, ListModel, Question, QuestionDropdownModel, SurveyModel, StylesManager, _setIsTouch } from "survey-core"; import { TabTestPlugin } from "../../src/components/tabs/test-plugin"; import { SurveySimulatorModel, simulatorDevices } from "../../src/components/simulator"; import { editorLocalization } from "../../src/editorLocalization"; @@ -233,6 +233,35 @@ test("Show/hide device similator", (): any => { similatorAction = creator.toolbar.actions.filter((action) => action.id === "deviceSelector")[0]; expect(similatorAction).toBeFalsy(); }); +test("Hide similatorAction on mobile devices", (): any => { + let creator: CreatorTester = new CreatorTester(); + creator.isTouch = true; + creator.JSON = { questions: [{ type: "text", name: "q1" }] }; + creator.makeNewViewActive("test"); + let similatorAction = creator.toolbar.actions.filter((action) => action.id === "deviceSelector")[0]; + expect(similatorAction).toBeTruthy(); + expect(similatorAction.visible).toBeFalsy(); + + let orientationSelectorAction = creator.toolbar.actions.filter((action) => action.id === "orientationSelector")[0]; + expect(orientationSelectorAction).toBeTruthy(); + expect(orientationSelectorAction.visible).toBeFalsy(); +}); +test("Check popup viewType", (): any => { + _setIsTouch(true); + const creator: CreatorTester = new CreatorTester(); + const testPlugin: TabTestPlugin = creator.getPlugin("test"); + creator.JSON = { elements: [{ type: "dropdown", name: "q1", choices: ["Item1", "Item2", "Item3"] }] }; + creator.makeNewViewActive("test"); + const model: TestSurveyTabViewModel = testPlugin.model; + const question = model.survey.getAllQuestions()[0]; + model.survey.onOpenDropdownMenu.add((_, options) => { + expect(options.menuType).toEqual("popup"); + }); + + question.dropdownListModel.popupModel.toggleVisibility(); + expect(question.dropdownListModel.popupModel.isVisible).toBeTruthy(); + _setIsTouch(false); +}); test("pages, PageListItems, makes items enable/disable and do not touch visibility", (): any => { var creator = new CreatorTester(); creator.JSON = {