Skip to content

Commit

Permalink
work for #6655 add into other platforms
Browse files Browse the repository at this point in the history
  • Loading branch information
OlgaLarina committed Sep 4, 2023
1 parent 926604c commit 93becbd
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 148 deletions.
64 changes: 33 additions & 31 deletions packages/survey-angular-ui/src/survey-content.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@
<ng-template #template>
<div #surveyContainer *ngIf="!!model" [class]="model.getRootCss()" [style]="model.themeVariables">
<div *ngIf="!!model.renderBackgroundImage" [class]="model.css.rootBackgroundImage" [style]="model.backgroundImageStyle"></div>
<form onsubmit="return false;">
<div class="sv_custom_header" [hidden]="model.hasLogo"></div>
<div [class]="model.css.container">
<div *ngIf="model.renderedHasHeader" [class]="model.css.header" [survey]="model" sv-ng-survey-header></div>
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }"></ng-template>
<div *ngIf="model.isShowingPage" [class]="model.bodyContainerCss">
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'left' } }"></ng-template>
<div [class]="model.bodyCss" [style.maxWidth]="model.renderedWidth" [id]="model.activePage ? model.activePage.id : ''">
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }"></ng-template>
<!-- ko if: activePage -->
<ng-container *ngIf="model.activePage">
<sv-ng-page [model]="model.activePage" [survey]="model"></sv-ng-page>
</ng-container>
<!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->
<!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->
<div [class]="model.wrapperFormCss">
<div *ngIf="!!model.renderBackgroundImage" [class]="model.css.rootBackgroundImage" [style]="model.backgroundImageStyle"></div>
<form onsubmit="return false;">
<div class="sv_custom_header" [hidden]="model.hasLogo"></div>
<div [class]="model.css.container">
<div *ngIf="model.renderedHasHeader" [class]="model.css.header" [survey]="model" sv-ng-survey-header></div>
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }"></ng-template>
<div *ngIf="model.isShowingPage" [class]="model.bodyContainerCss">
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'left' } }"></ng-template>
<div [class]="model.bodyCss" [style.maxWidth]="model.renderedWidth" [id]="model.activePage ? model.activePage.id : ''">
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }"></ng-template>
<!-- ko if: activePage -->
<ng-container *ngIf="model.activePage">
<sv-ng-page [model]="model.activePage" [survey]="model"></sv-ng-page>
</ng-container>
<!-- ko if: activePage.rows.length == 0 && $data.emptyPageTemplate -->
<!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }"></ng-template>
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }"></ng-template>
</div>
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'right' } }"></ng-template>
</div>
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'right' } }"></ng-template>
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }"></ng-template>
<div *ngIf="model.state === 'completed' && model.showCompletedPage" [class]="model.completedCss"
[innerHtml]="model.processedCompletedHtml"></div>
<div *ngIf="model.state === 'completedbefore'" [class]="model.completedBeforeCss"
[innerHtml]="model.processedCompletedBeforeHtml"></div>
<div *ngIf="model.state === 'loading'" [class]="model.loadingBodyCss" [innerHtml]="model.processedLoadingHtml"></div>
<div *ngIf="model.state === 'empty'" [class]="model.css.bodyEmpty">{{model.emptySurveyText}}</div>
</div>
<ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }"></ng-template>
<div *ngIf="model.state === 'completed' && model.showCompletedPage" [class]="model.completedCss"
[innerHtml]="model.processedCompletedHtml"></div>
<div *ngIf="model.state === 'completedbefore'" [class]="model.completedBeforeCss"
[innerHtml]="model.processedCompletedBeforeHtml"></div>
<div *ngIf="model.state === 'loading'" [class]="model.loadingBodyCss" [innerHtml]="model.processedLoadingHtml"></div>
<div *ngIf="model.state === 'empty'" [class]="model.css.bodyEmpty">{{model.emptySurveyText}}</div>
</div>
</form>
<sv-brand-info *ngIf="model.showBrandInfo"></sv-brand-info>
<sv-notifier [notifier]="model.notifier"></sv-notifier>
</form>
<sv-brand-info *ngIf="model.showBrandInfo"></sv-brand-info>
<sv-notifier [notifier]="model.notifier"></sv-notifier>
</div>
</div>
</ng-template>
142 changes: 72 additions & 70 deletions packages/survey-vue3-ui/src/Survey.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,91 +4,93 @@
:style="vueSurvey.themeVariables"
ref="root"
>
<survey-popup-modal></survey-popup-modal>
<div
v-if="vueSurvey.renderBackgroundImage"
:class="css.rootBackgroundImage"
:style="vueSurvey.backgroundImageStyle"
></div>
<form onsubmit="return false;">
<div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
<div :class="css.container">
<survey-header :survey="vueSurvey" />
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'header'"
:needRenderWrapper="false"
></component>
<template v-if="vueSurvey.isShowingPage">
<div :class="vueSurvey.bodyContainerCss">
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'left'"
:needRenderWrapper="true"
></component>
<div
:class="vueSurvey.bodyCss"
:style="{ maxWidth: vueSurvey.renderedWidth }"
:id="pageId"
>
<div :class="vueSurvey.wrapperFormCss">
<survey-popup-modal></survey-popup-modal>
<div
v-if="vueSurvey.renderBackgroundImage"
:class="css.rootBackgroundImage"
:style="vueSurvey.backgroundImageStyle"
></div>
<form onsubmit="return false;">
<div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
<div :class="css.container">
<survey-header :survey="vueSurvey" />
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'header'"
:needRenderWrapper="false"
></component>
<template v-if="vueSurvey.isShowingPage">
<div :class="vueSurvey.bodyContainerCss">
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'contentTop'"
:container="'left'"
:needRenderWrapper="true"
></component>
<survey-page
:key="pageKey"
:survey="vueSurvey"
:page="vueSurvey.activePage"
:css="css"
/>
<div
:class="vueSurvey.bodyCss"
:style="{ maxWidth: vueSurvey.renderedWidth }"
:id="pageId"
>
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'contentTop'"
:needRenderWrapper="true"
></component>
<survey-page
:key="pageKey"
:survey="vueSurvey"
:page="vueSurvey.activePage"
:css="css"
/>
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'contentBottom'"
:needRenderWrapper="true"
></component>
</div>
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'contentBottom'"
:container="'right'"
:needRenderWrapper="true"
></component>
</div>
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'right'"
:needRenderWrapper="true"
></component>
</template>
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'footer'"
:needRenderWrapper="false"
></component>
<div v-if="hasCompletedPage">
<div
v-html="getProcessedCompletedHtml()"
:class="vueSurvey.completedCss"
></div>
</div>
</template>
<component
:is="'sv-components-container'"
:survey="vueSurvey"
:container="'footer'"
:needRenderWrapper="false"
></component>
<div v-if="hasCompletedPage">
<div
v-html="getProcessedCompletedHtml()"
:class="vueSurvey.completedCss"
v-if="vueSurvey.state === 'completedbefore'"
:class="vueSurvey.completedBeforeCss"
v-html="vueSurvey.processedCompletedBeforeHtml"
></div>
<div
v-if="vueSurvey.state === 'loading'"
:class="vueSurvey.loadingBodyCss"
v-html="vueSurvey.processedLoadingHtml"
></div>
<div v-if="vueSurvey.state === 'empty'" :class="css.bodyEmpty">
{{ vueSurvey.emptySurveyText }}
</div>
</div>
<div
v-if="vueSurvey.state === 'completedbefore'"
:class="vueSurvey.completedBeforeCss"
v-html="vueSurvey.processedCompletedBeforeHtml"
></div>
<div
v-if="vueSurvey.state === 'loading'"
:class="vueSurvey.loadingBodyCss"
v-html="vueSurvey.processedLoadingHtml"
></div>
<div v-if="vueSurvey.state === 'empty'" :class="css.bodyEmpty">
{{ vueSurvey.emptySurveyText }}
</div>
</div>
</form>
<sv-brand-info v-if="vueSurvey.showBrandInfo"></sv-brand-info>
<sv-notifier :model="vueSurvey.notifier"></sv-notifier>
</form>
<sv-brand-info v-if="vueSurvey.showBrandInfo"></sv-brand-info>
<sv-notifier :model="vueSurvey.notifier"></sv-notifier>
</div>
</div>
</template>

Expand Down
2 changes: 1 addition & 1 deletion src/defaultCss/defaultV2Css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export var defaultV2Css = {
rootCompact: "sd-root--compact",
rootFitToContainer: "sd-root-modern--full-container",
rootWrapper: "sd-root-modern__wrapper",
rootWrapperAbsolute: "sd-root-modern__wrapper--absolute",
rootWrapperFixed: "sd-root-modern__wrapper--fixed",
rootBackgroundImage: "sd-root_background-image",
rootBackgroundImageFixed: "sd-root_background-image--fixed",
rootForm: "sd-root_form",
Expand Down
2 changes: 1 addition & 1 deletion src/defaultV2-theme/defaultV2.fontless.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ body {
position: relative;
}

.sd-root-modern--full-container .sd-root-modern__wrapper--absolute {
.sd-root-modern--full-container .sd-root-modern__wrapper--fixed {
position: static;
overflow: auto;
width: 100%;
Expand Down
8 changes: 7 additions & 1 deletion src/survey.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2109,7 +2109,7 @@ export class SurveyModel extends SurveyElementCore
public updateWrapperFormCss(): void {
this.wrapperFormCss = new CssClassBuilder()
.append(this.css.rootWrapper)
.append(this.css.rootWrapperAbsolute, this.backgroundImageFixed)
.append(this.css.rootWrapperFixed, this.backgroundImageFixed)
.toString();
}
/**
Expand Down Expand Up @@ -7350,10 +7350,16 @@ export class SurveyModel extends SurveyElementCore
public addScrollEventListener(): void {
this.scrollHandler = () => { this.onScroll(); };
this.rootElement.addEventListener("scroll", this.scrollHandler);
if(!!this.css.rootWrapper) {
this.rootElement.getElementsByClassName(this.css.rootWrapper)[0]?.addEventListener("scroll", this.scrollHandler);
}
}
public removeScrollEventListener(): void {
if (!!this.rootElement && !!this.scrollHandler) {
this.rootElement.removeEventListener("scroll", this.scrollHandler);
if(!!this.css.rootWrapper) {
this.rootElement.getElementsByClassName(this.css.rootWrapper)[0]?.removeEventListener("scroll", this.scrollHandler);
}
}
}
}
Expand Down
88 changes: 45 additions & 43 deletions src/vue/survey.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,56 @@
<div :class="survey.getRootCss()"
:style="vueSurvey.themeVariables"
>
<div v-if="vueSurvey.renderBackgroundImage" :class="css.rootBackgroundImage" :style="vueSurvey.backgroundImageStyle"></div>
<form onsubmit="return false;">
<div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
<div :class="css.container">
<survey-header :survey="vueSurvey" />
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'header'"></component>
<template
v-if="vueSurvey.isShowingPage"
>
<div :class="vueSurvey.bodyContainerCss">
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'left'"></component>
<div :class="vueSurvey.bodyCss" :style="{maxWidth: survey.renderedWidth}" :id="pageId">
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentTop'"></component>
<survey-page
:key="pageKey"
:survey="vueSurvey"
:page="vueSurvey.activePage"
:css="css"
/>
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentBottom'"></component>
<div :class="vueSurvey.wrapperFormCss">
<div v-if="vueSurvey.renderBackgroundImage" :class="css.rootBackgroundImage" :style="vueSurvey.backgroundImageStyle"></div>
<form onsubmit="return false;">
<div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
<div :class="css.container">
<survey-header :survey="vueSurvey" />
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'header'"></component>
<template
v-if="vueSurvey.isShowingPage"
>
<div :class="vueSurvey.bodyContainerCss">
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'left'"></component>
<div :class="vueSurvey.bodyCss" :style="{maxWidth: survey.renderedWidth}" :id="pageId">
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentTop'"></component>
<survey-page
:key="pageKey"
:survey="vueSurvey"
:page="vueSurvey.activePage"
:css="css"
/>
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentBottom'"></component>
</div>
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'right'"></component>
</div>
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'right'"></component>
</template>
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'footer'"></component>
<div v-if="hasCompletedPage">
<div
v-html="getProcessedCompletedHtml()"
:class="vueSurvey.completedCss"
></div>
</div>
</template>
<component :is="'sv-components-container'" :survey="vueSurvey" :container="'footer'"></component>
<div v-if="hasCompletedPage">
<div
v-html="getProcessedCompletedHtml()"
:class="vueSurvey.completedCss"
v-if="vueSurvey.state === 'completedbefore'"
:class="vueSurvey.completedBeforeCss"
v-html="vueSurvey.processedCompletedBeforeHtml"
></div>
<div
v-if="vueSurvey.state === 'loading'"
:class="vueSurvey.loadingBodyCss"
v-html="vueSurvey.processedLoadingHtml"
></div>
<div v-if="vueSurvey.state === 'empty'" :class="css.bodyEmpty">
{{ vueSurvey.emptySurveyText }}
</div>
</div>
<div
v-if="vueSurvey.state === 'completedbefore'"
:class="vueSurvey.completedBeforeCss"
v-html="vueSurvey.processedCompletedBeforeHtml"
></div>
<div
v-if="vueSurvey.state === 'loading'"
:class="vueSurvey.loadingBodyCss"
v-html="vueSurvey.processedLoadingHtml"
></div>
<div v-if="vueSurvey.state === 'empty'" :class="css.bodyEmpty">
{{ vueSurvey.emptySurveyText }}
</div>
</div>
</form>
<sv-brand-info v-if="vueSurvey.showBrandInfo"></sv-brand-info>
<sv-notifier :model="vueSurvey.notifier"></sv-notifier>
</form>
<sv-brand-info v-if="vueSurvey.showBrandInfo"></sv-brand-info>
<sv-notifier :model="vueSurvey.notifier"></sv-notifier>
</div>
</div>
</template>

Expand Down
2 changes: 1 addition & 1 deletion tests/markup/etalon_survey.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ registerMarkupTests(
},
event: "onAfterRenderSurvey",
getSnapshot: el => {
return el.children[0].outerHTML;
return el.children[0].children[0].outerHTML;
},
snapshot: "survey-theme-backgroundImage"
},
Expand Down

0 comments on commit 93becbd

Please sign in to comment.