diff --git a/packages/survey-creator-core/src/components/simulator.ts b/packages/survey-creator-core/src/components/simulator.ts index b926753321..b1c1551270 100644 --- a/packages/survey-creator-core/src/components/simulator.ts +++ b/packages/survey-creator-core/src/components/simulator.ts @@ -372,13 +372,13 @@ export var simulatorDevices: { // title: "Windows 10 Phone", // cssClass: "svd-simulator-win10phone", // }, - msSurface: { + microsoftSurface: { cssPixelRatio: 1, ppi: 148, width: 768, height: 1366, deviceType: "tablet", - title: "MS Surface", + title: "Microsoft Surface", cssClass: "svd-simulator-mssurface", }, genericPhone: { 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 5bcb7d5f80..0a85acdfca 100644 --- a/packages/survey-creator-core/src/components/tabs/test-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/test-plugin.ts @@ -22,14 +22,28 @@ export class TabTestPlugin implements ICreatorPlugin { private simulatorTheme: any = surveyCss[defaultV2ThemeName]; public model: TestSurveyTabViewModel; + private _previewDevice: string = ""; + public get previewDevice(): string { + if (!!this.model) { + this._previewDevice = this.model.simulator.device; + } + return this._previewDevice; + } + public set previewDevice(newValue: string) { + this.setDevice(newValue); + } - private setDevice(newVal: string) { - this.model.simulator.device = newVal; - this.model.simulator.resetZoomParameters(); - let currentType = simulatorDevices[this.model.simulator.device].deviceType; + private setDevice(newValue: string) { + this._previewDevice = newValue || "desktop"; + if (!!this.model) { + this.model.simulator.device = newValue; + this.model.simulator.resetZoomParameters(); + } + let currentType = simulatorDevices[this._previewDevice].deviceType; this.orientationSelectorAction.enabled = currentType != "desktop"; this.deviceSelectorAction.iconName = "icon-device-" + currentType; this.deviceSelectorAction.title = getLocString("pe.simulator"); + this.deviceSelectorAction.data.selectedItem = { id: this._previewDevice }; } private setDefaultLanguageOption(opt: boolean | string) { const vis: boolean = opt === true || opt === "all" || (opt === "auto" && this.model.survey.getUsedLocales().length > 1); @@ -81,8 +95,10 @@ export class TabTestPlugin implements ICreatorPlugin { this.createActions().forEach(action => creator.toolbar.actions.push(action)); } public activate(): void { - this.model = new TestSurveyTabViewModel(this.creator, this.simulatorTheme); - this.model.simulator.landscape = this.creator.previewOrientation != "portrait"; + const tabModel = new TestSurveyTabViewModel(this.creator, this.simulatorTheme); + tabModel.simulator.device = this.previewDevice || this.creator.previewDevice || "desktop"; + tabModel.simulator.landscape = this.creator.previewOrientation != "portrait"; + this.model = tabModel; this.update(); } public update(): void { @@ -108,6 +124,7 @@ export class TabTestPlugin implements ICreatorPlugin { } public deactivate(): boolean { if (this.model) { + this._previewDevice = this.model.simulator.device; this.simulatorTheme = this.model.simulator.survey.css; this.model.onSurveyCreatedCallback = undefined; this.model.dispose(); diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts index f3afe2d7b4..e49e45f88e 100644 --- a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts +++ b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts @@ -275,8 +275,12 @@ export class ThemeTabPlugin implements ICreatorPlugin { creator.onPropertyChanged.add(this.creatorPropertyChanged); } + + private previewDevice: string = "desktop"; + public activate(): void { this.model = new ThemeTabViewModel(this.creator, this.simulatorCssClasses); + this.model.simulator.device = this.previewDevice; this.themeModel.initialize(this.creator.theme, this.creator.survey); this.creator.sidebar.hideSideBarVisibilityControlActions = this.showOneCategoryInPropertyGrid; this.update(); @@ -453,6 +457,7 @@ export class ThemeTabPlugin implements ICreatorPlugin { } public deactivate(): boolean { if (this.model) { + this.previewDevice = this.model.simulator.device; this.simulatorCssClasses = this.model.survey.css; this.model.onPropertyChanged.clear(); this.themeModel.onThemeSelected.clear(); diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts index d606ce0243..0681198bac 100644 --- a/packages/survey-creator-core/src/creator-base.ts +++ b/packages/survey-creator-core/src/creator-base.ts @@ -239,10 +239,27 @@ export class SurveyCreatorModel extends Base @property({ defaultValue: false }) showSearch: boolean; @property({ defaultValue: true }) generateValidJSON: boolean; @property({ defaultValue: "" }) currentAddQuestionType: string; + /** + * Specifies a default device for survey preview in the Preview tab. + * + * Possible values: + * + * - `"desktop"` (default) + * - `"iPhoneSE"` + * - `"iPhone15"` + * - `"iPhone15Plus"` + * - `"iPad"` + * - `"iPadMini"` + * - `"androidPhone"` + * - `"androidTablet"` + * - `"microsoftSurface"` + */ + previewDevice: string; /** * Specifies the orientation of the selected device in the Preview tab. * * Possible values: + * * - `"landscape"` (default) * - `"portrait"` */ @@ -1245,6 +1262,7 @@ export class SurveyCreatorModel extends Base this.options = !!options2 ? options2 : {}; SurveyHelper.warnText("Creator constructor has one parameter, as creator options, in V2."); } + this.previewDevice = options.previewDevice ?? "desktop"; this.previewOrientation = options.previewOrientation; this.toolbarValue = new ToolbarActionContainer(this); this.toolbarValue.locOwner = this; diff --git a/packages/survey-creator-core/src/creator-options.ts b/packages/survey-creator-core/src/creator-options.ts index 37d6a9d189..192e28f072 100644 --- a/packages/survey-creator-core/src/creator-options.ts +++ b/packages/survey-creator-core/src/creator-options.ts @@ -230,6 +230,22 @@ export interface ICreatorOptions { * [View Demo](https://surveyjs.io/Examples/Creator?id=theme-switcher (linkStyle)) */ allowChangeThemeInPreview?: boolean; + /** + * Specifies a default device for survey preview in the Preview tab. + * + * Possible values: + * + * - `"desktop"` (default) + * - `"iPhoneSE"` + * - `"iPhone15"` + * - `"iPhone15Plus"` + * - `"iPad"` + * - `"iPadMini"` + * - `"androidPhone"` + * - `"androidTablet"` + * - `"microsoftSurface"` + */ + previewDevice?: string; /** * Specifies the orientation of the selected device in the Preview tab. * diff --git a/packages/survey-creator-core/tests/tabs/test.tests.ts b/packages/survey-creator-core/tests/tabs/test.tests.ts index b1a6526b3e..d4a230913b 100644 --- a/packages/survey-creator-core/tests/tabs/test.tests.ts +++ b/packages/survey-creator-core/tests/tabs/test.tests.ts @@ -946,12 +946,12 @@ test("devices selector dropdown items default order", (): any => { expect(dropdownDeviceActions[0].visibleIndex).toBe(Number.MAX_VALUE); expect(dropdownDeviceActions[7].id).toBe("androidTablet"); expect(dropdownDeviceActions[7].visibleIndex).toBe(Number.MAX_VALUE); - expect(dropdownDeviceActions[8].id).toBe("msSurface"); + expect(dropdownDeviceActions[8].id).toBe("microsoftSurface"); expect(dropdownDeviceActions[8].visibleIndex).toBe(Number.MAX_VALUE); }); test("change devices selector dropdown items order", (): any => { try { - simulatorDevices.msSurface.visibleIndex = 0; + simulatorDevices.microsoftSurface.visibleIndex = 0; simulatorDevices.androidTablet.visibleIndex = 1; const creator: CreatorTester = new CreatorTester({ previewShowResults: false }); @@ -969,7 +969,7 @@ test("change devices selector dropdown items order", (): any => { const deviceSelectorAction = testPlugin["deviceSelectorAction"]; const dropdownDeviceActions = deviceSelectorAction.data.actions as IAction[]; expect(dropdownDeviceActions.length).toBe(9); - expect(dropdownDeviceActions[0].id).toBe("msSurface"); + expect(dropdownDeviceActions[0].id).toBe("microsoftSurface"); expect(dropdownDeviceActions[0].visibleIndex).toBe(0); expect(dropdownDeviceActions[1].id).toBe("androidTablet"); expect(dropdownDeviceActions[1].visibleIndex).toBe(1); @@ -979,7 +979,7 @@ test("change devices selector dropdown items order", (): any => { expect(dropdownDeviceActions[8].visibleIndex).toBe(Number.MAX_VALUE); } finally { - simulatorDevices.msSurface.visibleIndex = undefined; + simulatorDevices.microsoftSurface.visibleIndex = undefined; simulatorDevices.androidTablet.visibleIndex = undefined; } }); @@ -1102,7 +1102,7 @@ test("The Preview Survey button text is not translated Bug#6016", (): any => { const deText = "Testumfrage wiederholen"; const loc: any = editorLocalization.getLocale("de"); expect(loc).toBeTruthy(); - if(!loc.ed) loc.ed = {}; + if (!loc.ed) loc.ed = {}; loc.ed.testSurveyAgain = deText; editorLocalization.currentLocale = "en"; const creator: CreatorTester = new CreatorTester(); @@ -1116,4 +1116,32 @@ test("The Preview Survey button text is not translated Bug#6016", (): any => { expect(getLocString("ed.testSurveyAgain")).toBe(deText); expect(testPlugin.model.testAgainAction.title).toBe(deText); creator.locale = ""; +}); +test("Preview tab: default device and save current device", (): any => { + const creator: CreatorTester = new CreatorTester({ showThemeTab: true }); + creator.JSON = { questions: [{ type: "text", name: "q1" }] }; + const testPlugin: TabTestPlugin = creator.getPlugin("test"); + + expect(creator.previewDevice).toBe("desktop"); + expect(testPlugin.previewDevice).toBe(""); + + testPlugin.activate(); + expect(testPlugin.previewDevice).toBe("desktop"); + expect(testPlugin.model.simulator.device).toBe("desktop"); + + testPlugin.model.simulator.device = "iPhone15"; + expect(testPlugin.previewDevice).toBe("iPhone15"); + + testPlugin.deactivate(); + expect(testPlugin.previewDevice).toBe("iPhone15"); + + testPlugin.activate(); + expect(testPlugin.model.simulator.device).toBe("iPhone15"); + expect(testPlugin.previewDevice).toBe("iPhone15"); + + testPlugin.deactivate(); + testPlugin.previewDevice = "iPhone15Plus"; + + testPlugin.activate(); + expect(testPlugin.model.simulator.device).toBe("iPhone15Plus"); }); \ No newline at end of file diff --git a/packages/survey-creator-core/tests/tabs/theme-tab-plugin.tests.ts b/packages/survey-creator-core/tests/tabs/theme-tab-plugin.tests.ts index 1ebba168aa..f279d0a1d4 100644 --- a/packages/survey-creator-core/tests/tabs/theme-tab-plugin.tests.ts +++ b/packages/survey-creator-core/tests/tabs/theme-tab-plugin.tests.ts @@ -1384,3 +1384,30 @@ test("onThemePropertyChanged event for a custom property", (): any => { Serializer.removeProperty("theme", "paddingTopScale"); }); + +test("Theme tab: default device and save current device", (): any => { + const creator: CreatorTester = new CreatorTester({ showThemeTab: true }); + creator.JSON = { questions: [{ type: "text", name: "q1" }] }; + const themePlugin: ThemeTabPlugin = creator.getPlugin("theme"); + + expect(themePlugin.previewDevice).toBe("desktop"); + + themePlugin.activate(); + expect(themePlugin.model.simulator.device).toBe("desktop"); + + themePlugin.model.simulator.device = "iPhone15"; + expect(themePlugin.previewDevice).toBe("desktop"); + + themePlugin.deactivate(); + expect(themePlugin.previewDevice).toBe("iPhone15"); + + themePlugin.activate(); + expect(themePlugin.model.simulator.device).toBe("iPhone15"); + expect(themePlugin.previewDevice).toBe("iPhone15"); + + themePlugin.deactivate(); + themePlugin.previewDevice = "iPhone15Plus"; + + themePlugin.activate(); + expect(themePlugin.model.simulator.device).toBe("iPhone15Plus"); +});