@@ -34,6 +39,7 @@ const props = defineProps<{
survey: SurveyModel;
isExpanded: boolean;
allowClose: boolean;
+ allowFullScreen: boolean;
closeOnCompleteTimeout: number;
}>();
const surveyWindow =
@@ -56,6 +62,9 @@ const doExpand = () => {
const doHide = () => {
surveyWindow.value.hide();
};
+const doToggleFullScreen = () => {
+ surveyWindow.value.toggleFullScreen();
+};
const getSurveyComponentName = () => {
return "SurveyComponent";
};
@@ -86,6 +95,9 @@ const stopWatch = watch(
if (props.allowClose !== undefined) {
model.allowClose = props.allowClose;
}
+ if (props.allowFullScreen !== undefined) {
+ model.allowFullScreen = props.allowFullScreen;
+ }
model.isShowing = true;
surveyWindow.value = model;
},
diff --git a/src/common-styles/window.scss b/src/common-styles/window.scss
index 487d4ab5e3..2dff4a4e4a 100644
--- a/src/common-styles/window.scss
+++ b/src/common-styles/window.scss
@@ -1,5 +1,6 @@
@import "../defaultV2-theme/variables.scss";
@import "../defaultV2-theme/mixins.scss";
+@import "../defaultV2-theme/blocks/mixins.scss";
.sv_window {
position: fixed;
@@ -10,17 +11,39 @@
box-shadow: $shadow-large, $shadow-medium;
background-clip: padding-box;
z-index: 100;
- max-height: 90vh;
+ max-height: 50vh;
overflow: auto;
+ @include scrollRules;
box-sizing: border-box;
+ background: $background-dim;
+}
+
+.sv_window_root-content {
+ height: 100%;
+}
+
+.sv_window--full-screen {
+ top: calcSize(2);
+ left: calcSize(2);
+ right: calcSize(2);
+ bottom: calcSize(2);
+ max-height: 100%;
+ width: initial !important;
+ max-width: initial!important;
+}
+
+.sv_window_header {
+ display: flex;
+ justify-content: flex-end;
}
.sv_window_content {
- border-radius: calcSize(1);
overflow: hidden;
}
.sv_window--collapsed {
+ height: initial;
+
.sv_window_header {
height: calcSize(4);
padding: calcSize(1) calcSize(1) calcSize(1) calcSize(2);
@@ -32,6 +55,11 @@
.sv_window_content {
display: none;
}
+
+ .sv_window_buttons_container {
+ margin-top: 0;
+ margin-right: 0;
+ }
}
.sv_window_header_title_collapsed {
@@ -53,9 +81,9 @@
}
.sv_window_buttons_container {
- position: absolute;
- top: calcSize(1);
- right: calcSize(1);
+ position: fixed;
+ margin-top: calcSize(1);;
+ margin-right: calcSize(1);;
display: flex;
gap: calcSize(1);
z-index: 1;
diff --git a/src/defaultCss/cssmodern.ts b/src/defaultCss/cssmodern.ts
index 86cd636347..2d84618a14 100644
--- a/src/defaultCss/cssmodern.ts
+++ b/src/defaultCss/cssmodern.ts
@@ -431,6 +431,7 @@ export var modernCss = {
window: {
root: "sv_window",
rootCollapsedMod: "sv_window--collapsed",
+ rootFullScreenMode: "sv_window--full-screen",
rootContent: "sv_window_root-content",
body: "sv_window_content",
header: {
@@ -441,7 +442,8 @@ export var modernCss = {
buttonExpanded: "",
buttonCollapsed: "",
collapseButton: "sv_window_button sv_window_button_collapse",
- closeButton: "sv_window_button sv_window_button_close"
+ closeButton: "sv_window_button sv_window_button_close",
+ fullScreenButton: "sv_window_button sv_window_button_full_screen"
}
},
variables: {
diff --git a/src/defaultCss/cssstandard.ts b/src/defaultCss/cssstandard.ts
index e4d2878543..0513d067c1 100644
--- a/src/defaultCss/cssstandard.ts
+++ b/src/defaultCss/cssstandard.ts
@@ -366,6 +366,7 @@ export var defaultStandardCss = {
window: {
root: "sv_window",
rootCollapsedMod: "sv_window--collapsed",
+ rootFullScreenMode: "sv_window--full-screen",
rootContent: "sv_window_root-content",
body: "sv_window_content",
header: {
@@ -376,7 +377,8 @@ export var defaultStandardCss = {
buttonExpanded: "",
buttonCollapsed: "",
collapseButton: "sv_window_button sv_window_button_collapse",
- closeButton: "sv_window_button sv_window_button_close"
+ closeButton: "sv_window_button sv_window_button_close",
+ fullScreenButton: "sv_window_button sv_window_button_full_screen"
}
},
variables: {
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
index 8433ba3d79..d1149b5041 100644
--- a/src/defaultCss/defaultV2Css.ts
+++ b/src/defaultCss/defaultV2Css.ts
@@ -659,6 +659,7 @@ export var defaultV2Css = {
window: {
root: "sv_window",
rootCollapsedMod: "sv_window--collapsed",
+ rootFullScreenMode: "sv_window--full-screen",
rootContent: "sv_window_root-content",
body: "sv_window_content",
header: {
@@ -669,7 +670,8 @@ export var defaultV2Css = {
buttonExpanded: "",
buttonCollapsed: "",
collapseButton: "sv_window_button sv_window_button_collapse",
- closeButton: "sv_window_button sv_window_button_close"
+ closeButton: "sv_window_button sv_window_button_close",
+ fullScreenButton: "sv_window_button sv_window_button_full_screen"
}
},
ranking: {
diff --git a/src/defaultV2-theme/blocks/mixins.scss b/src/defaultV2-theme/blocks/mixins.scss
index d8fd18f50d..5663824cc3 100644
--- a/src/defaultV2-theme/blocks/mixins.scss
+++ b/src/defaultV2-theme/blocks/mixins.scss
@@ -86,4 +86,4 @@
background-color: $foreground-light;
}
}
-}
+}
\ No newline at end of file
diff --git a/src/entries/angular.ts b/src/entries/angular.ts
index 963546d97d..5d85c97990 100644
--- a/src/entries/angular.ts
+++ b/src/entries/angular.ts
@@ -59,6 +59,9 @@ export class PopupSurveyNG {
if (props.closeOnCompleteTimeout !== undefined) {
survey.closeOnCompleteTimeout = props.closeOnCompleteTimeout;
}
+ if (props.allowFullScreen !== undefined) {
+ survey.allowFullScreen = props.allowFullScreen;
+ }
survey.show();
}
}
diff --git a/src/entries/jquery.ts b/src/entries/jquery.ts
index d11ed2d90f..4cc72601ef 100644
--- a/src/entries/jquery.ts
+++ b/src/entries/jquery.ts
@@ -32,20 +32,25 @@ function doPopupSurvey(props: any): void {
return this.each(function () {
var model: Survey = props.model;
model.updateSurvey(props);
- var survey = new PopupSurvey(null, model);
+
+ var popupSurvey = props.popupModel || new PopupSurvey(null, model);
+
if (props.expanded !== undefined) {
- survey.isExpanded = props.expanded;
+ popupSurvey.isExpanded = props.expanded;
}
if (props.isExpanded !== undefined) {
- survey.isExpanded = props.isExpanded;
+ popupSurvey.isExpanded = props.isExpanded;
}
if (props.allowClose !== undefined) {
- survey.allowClose = props.allowClose;
+ popupSurvey.allowClose = props.allowClose;
+ }
+ if (props.allowFullScreen !== undefined) {
+ popupSurvey.allowFullScreen = props.allowFullScreen;
}
if (props.closeOnCompleteTimeout !== undefined) {
- survey.closeOnCompleteTimeout = props.closeOnCompleteTimeout;
+ popupSurvey.closeOnCompleteTimeout = props.closeOnCompleteTimeout;
}
- survey.show();
+ popupSurvey.show();
});
}
diff --git a/src/images/back-to-panel_16x16.svg b/src/images/back-to-panel_16x16.svg
new file mode 100644
index 0000000000..679da0be2b
--- /dev/null
+++ b/src/images/back-to-panel_16x16.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/images/full-screen_16x16.svg b/src/images/full-screen_16x16.svg
new file mode 100644
index 0000000000..db44f407cc
--- /dev/null
+++ b/src/images/full-screen_16x16.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/knockout/koPopupSurvey.ts b/src/knockout/koPopupSurvey.ts
index 33c0fced4e..9320f0abff 100644
--- a/src/knockout/koPopupSurvey.ts
+++ b/src/knockout/koPopupSurvey.ts
@@ -15,6 +15,9 @@ export class PopupSurveyImplementor extends ImplementorBase {
(
this.window)["doHide"] = () => {
this.window.hide();
};
+ (this.window)["doToggleFullScreen"] = () => {
+ this.window.toggleFullScreen();
+ };
}
private doShowingChanged() {
const windowElement = this.window.windowElement;
diff --git a/src/knockout/templates/window.html b/src/knockout/templates/window.html
index e2a88563a3..0fedeca6a5 100644
--- a/src/knockout/templates/window.html
+++ b/src/knockout/templates/window.html
@@ -7,6 +7,17 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/popup-survey.ts b/src/popup-survey.ts
index aacbea21dc..5fea9c2794 100644
--- a/src/popup-survey.ts
+++ b/src/popup-survey.ts
@@ -23,7 +23,7 @@ export class PopupSurveyModel extends Base {
} else {
this.surveyValue = this.createSurvey(jsonObj);
}
- //this.surveyValue.showTitle = false;
+ this.surveyValue.fitToContainer = true;
if ("undefined" !== typeof document) {
this.windowElement =
document.createElement("div");
}
@@ -70,6 +70,17 @@ export class PopupSurveyModel extends Base {
public set isShowing(val: boolean) {
this.setPropertyValue("isShowing", val);
}
+
+ public get isFullScreen(): boolean {
+ return this.getPropertyValue("isFullScreen", false);
+ }
+ public set isFullScreen(val: boolean) {
+ if (!this.isExpanded && !!val) {
+ this.isExpanded = true;
+ }
+ this.setPropertyValue("isFullScreen", val);
+ this.setCssRoot();
+ }
/**
* Shows the pop-up survey. The survey may appear [expanded or collapsed](#isExpanded).
*
@@ -90,6 +101,9 @@ export class PopupSurveyModel extends Base {
public hide(): void {
this.isShowing = false;
}
+ public toggleFullScreen(): void {
+ this.isFullScreen = !this.isFullScreen;
+ }
/**
* Indicates whether the pop-up window is expanded or collapsed.
*
@@ -99,6 +113,9 @@ export class PopupSurveyModel extends Base {
return this.getPropertyValue("isExpanded", false);
}
public set isExpanded(val: boolean) {
+ if (!!this.isFullScreen && !val) {
+ this.isFullScreen = false;
+ }
this.setPropertyValue("isExpanded", val);
}
public get isCollapsed(): boolean {
@@ -164,6 +181,18 @@ export class PopupSurveyModel extends Base {
public set allowClose(val: boolean) {
this.setPropertyValue("allowClose", val);
}
+ /**
+ * Specifies whether to display a button that allow showing pop-up in full-screen mode.
+ *
+ * Default value: `false`
+ *
+ */
+ public get allowFullScreen(): boolean {
+ return this.getPropertyValue("allowFullScreen", false);
+ }
+ public set allowFullScreen(val: boolean) {
+ this.setPropertyValue("allowFullScreen", val);
+ }
public get css(): any {
return this.survey.css;
}
@@ -199,6 +228,9 @@ export class PopupSurveyModel extends Base {
public get cssHeaderCloseButton(): string {
return this.getPropertyValue("cssHeaderCloseButton", "");
}
+ public get cssHeaderFullScreenButton(): string {
+ return this.getPropertyValue("cssHeaderFullScreenButton", "");
+ }
public get renderedWidth(): string {
let width = this.getPropertyValue("width", "60%");
if (width && !isNaN(width)) width = width + "px";
@@ -209,7 +241,7 @@ export class PopupSurveyModel extends Base {
private updateCss() {
if (!this.css || !this.css.window) return;
const cssWindow = this.css.window;
- this.setPropertyValue("cssRoot", cssWindow.root);
+ this.setCssRoot();
this.setPropertyValue("cssRootCollapsedMod", cssWindow.rootCollapsedMod);
this.setPropertyValue("cssRootContent", cssWindow.rootContent);
this.setPropertyValue("cssBody", cssWindow.body);
@@ -220,8 +252,17 @@ export class PopupSurveyModel extends Base {
this.setPropertyValue("cssHeaderButtonsContainer", cssHeader.buttonsContainer);
this.setPropertyValue("cssHeaderCollapseButton", cssHeader.collapseButton);
this.setPropertyValue("cssHeaderCloseButton", cssHeader.closeButton);
+ this.setPropertyValue("cssHeaderFullScreenButton", cssHeader.fullScreenButton);
this.updateCssButton();
}
+ private setCssRoot() {
+ const cssWindow = this.css.window;
+ if (this.isFullScreen) {
+ this.setPropertyValue("cssRoot", cssWindow.root + " " + cssWindow.rootFullScreenMode);
+ } else {
+ this.setPropertyValue("cssRoot", cssWindow.root);
+ }
+ }
private updateCssButton() {
const cssHeader = !!this.css.window ? this.css.window.header : null;
if (!cssHeader) return;
diff --git a/src/react/react-popup-survey.tsx b/src/react/react-popup-survey.tsx
index 82a7170319..2475f68c9f 100644
--- a/src/react/react-popup-survey.tsx
+++ b/src/react/react-popup-survey.tsx
@@ -41,6 +41,7 @@ export class PopupSurvey extends Survey {
var titleCollapsed: JSX.Element | null = null;
var expandCollapseIcon;
var closeButton: JSX.Element | null = null;
+ var allowFullScreenButon: JSX.Element | null = null;
if (popup.isCollapsed) {
headerCss += " " + popup.cssRootCollapsedMod;
@@ -54,10 +55,15 @@ export class PopupSurvey extends Survey {
closeButton = this.renderCloseButton(this.popup);
}
+ if (popup.allowFullScreen) {
+ allowFullScreenButon = this.renderAllowFullScreenButon(this.popup);
+ }
+
return (
{titleCollapsed}
+ {allowFullScreenButon}
{expandCollapseIcon}
@@ -83,6 +89,21 @@ export class PopupSurvey extends Survey {
);
}
+ protected renderAllowFullScreenButon(popup: PopupSurveyModel): JSX.Element {
+ let Icon;
+
+ if (popup.isFullScreen) {
+ Icon =
;
+ } else {
+ Icon =
;
+ }
+
+ return (
+
{ popup.toggleFullScreen(); }}>
+ {Icon}
+
+ );
+ }
protected renderBody(): JSX.Element {
return
{this.doRender()}
;
}
@@ -94,6 +115,7 @@ export class PopupSurvey extends Survey {
this.popup.closeOnCompleteTimeout = newProps.closeOnCompleteTimeout;
}
this.popup.allowClose = newProps.allowClose;
+ this.popup.allowFullScreen = newProps.allowFullScreen;
this.popup.isShowing = true;
if (!this.popup.isExpanded && (newProps.expanded || newProps.isExpanded))
this.popup.expand();
diff --git a/src/vue/popup-survey.vue b/src/vue/popup-survey.vue
index b1d49060c9..34d827b516 100644
--- a/src/vue/popup-survey.vue
+++ b/src/vue/popup-survey.vue
@@ -8,6 +8,11 @@
+
+
+
+
+
@@ -39,7 +44,10 @@ export class PopupSurvey extends BaseVue {
@Prop() isexpanded: boolean;
@Prop() allowClose: boolean;
@Prop() allowclose: boolean;
+ @Prop() allowFullScreen: boolean;
+ @Prop() allowfullscreen: boolean;
@Prop() closeOnCompleteTimeout: number;
+
surveyWindow: PopupSurveyModel;
constructor() {
@@ -64,6 +72,12 @@ export class PopupSurvey extends BaseVue {
if (this.allowClose !== undefined) {
this.surveyWindow.allowClose = this.allowClose;
}
+ if (this.allowfullscreen !== undefined) {
+ this.surveyWindow.allowFullScreen = this.allowfullscreen;
+ }
+ if (this.allowFullScreen !== undefined) {
+ this.surveyWindow.allowFullScreen = this.allowFullScreen;
+ }
this.surveyWindow.isShowing = true;
}
protected getModel(): Base {
@@ -101,6 +115,9 @@ export class PopupSurvey extends BaseVue {
doHide() {
this.surveyWindow.hide();
}
+ doToggleFullScreen() {
+ this.surveyWindow.toggleFullScreen();
+ }
getSurveyComponentName() {
return "survey";
}
diff --git a/testCafe/helper.js b/testCafe/helper.js
index af5ee1017c..a246567e50 100644
--- a/testCafe/helper.js
+++ b/testCafe/helper.js
@@ -84,7 +84,7 @@ export const initSurvey = ClientFunction(
);
export const initSurveyPopup = ClientFunction(
- (framework, json, events, isDesignMode, props) => {
+ (framework, json, isDesignMode) => {
// eslint-disable-next-line no-console
console.error = (msg) => {
throw new Error(msg);
@@ -106,6 +106,7 @@ export const initSurveyPopup = ClientFunction(
popupSurvey.isExpanded = true;
popupSurvey.allowClose = true;
popupSurvey.closeOnCompleteTimeout = -1;
+ popupSurvey.allowFullScreen = true;
popupSurvey.show();
} else if (framework === "react") {
document.getElementById("surveyElement").innerHTML = "";
@@ -116,12 +117,12 @@ export const initSurveyPopup = ClientFunction(
model: model,
isExpanded: true,
allowClose: true,
- closeOnCompleteTimeout: -1
+ allowFullScreen: true
}),
);
} else if (framework === "vue") {
document.getElementById("surveyElement").innerHTML =
- "
";
+ "
";
!!window["vueApp"] && window["vueApp"].$destroy();
window["vueApp"] = new window["Vue"]({
el: "#surveyElement",
diff --git a/tests/surveyWindowTests.ts b/tests/surveyWindowTests.ts
index 29b693e387..371a2be67b 100644
--- a/tests/surveyWindowTests.ts
+++ b/tests/surveyWindowTests.ts
@@ -100,4 +100,21 @@ QUnit.test("Check that popups inside survey are closed when scrolling container"
assert.notOk(question.dropdownListModel.popupModel.isVisible);
assert.notOk(model.survey["onScrollCallback"]);
model.onScroll();
+});
+
+QUnit.test("toggleFullScreen", function (assert) {
+ const popup = new PopupSurveyModel({ elements: [{ type: "text", name: "q1" }] });
+ popup.show();
+ assert.equal(popup.isExpanded, false, "It is not expanded by default");
+
+ popup.toggleFullScreen();
+ assert.equal(popup.isExpanded, true, "expanded if full screen on");
+
+ popup.isExpanded = false;
+ assert.equal(popup.isFullScreen, false, "fullScreen is off after collapsed");
+
+ popup.isExpanded = true;
+ popup.toggleFullScreen();
+ popup.toggleFullScreen();
+ assert.equal(popup.isExpanded, true, "expanded after full screen off");
});
\ No newline at end of file
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-popup--collapsed.png b/visualRegressionTests/tests/defaultV2/etalons/survey-popup--collapsed.png
index 22e7d4b61c..3e6f7cd2e0 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/survey-popup--collapsed.png and b/visualRegressionTests/tests/defaultV2/etalons/survey-popup--collapsed.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-popup--full-screen.png b/visualRegressionTests/tests/defaultV2/etalons/survey-popup--full-screen.png
new file mode 100644
index 0000000000..542d9f085c
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-popup--full-screen.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-popup.png b/visualRegressionTests/tests/defaultV2/etalons/survey-popup.png
index 3ecf099bbb..3c2359ab43 100644
Binary files a/visualRegressionTests/tests/defaultV2/etalons/survey-popup.png and b/visualRegressionTests/tests/defaultV2/etalons/survey-popup.png differ
diff --git a/visualRegressionTests/tests/defaultV2/survey-popup.ts b/visualRegressionTests/tests/defaultV2/survey-popup.ts
index 592830bb8e..3f15c01b07 100644
--- a/visualRegressionTests/tests/defaultV2/survey-popup.ts
+++ b/visualRegressionTests/tests/defaultV2/survey-popup.ts
@@ -39,11 +39,20 @@ frameworks.forEach(framework => {
test("Check Survey-Popup", async (t) => {
await wrapVisualTest(t, async (t, comparer) => {
- await t.resizeWindow(800, 600);
+ await t.resizeWindow(1920, 1080);
await initSurveyPopup(framework, json);
await takeElementScreenshot("survey-popup.png", Selector(".sv_window"), t, comparer);
await t.click(".sv_window_button_collapse");
await takeElementScreenshot("survey-popup--collapsed.png", Selector(".sv_window"), t, comparer);
});
});
+
+ test("Check Survey-Popup Full Screen Mode", async (t) => {
+ await wrapVisualTest(t, async (t, comparer) => {
+ await t.resizeWindow(1920, 1080);
+ await initSurveyPopup(framework, json);
+ await t.click(".sv_window_button_full_screen");
+ await takeElementScreenshot("survey-popup--full-screen.png", Selector(".sv_window"), t, comparer);
+ });
+ });
});
\ No newline at end of file