Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature #7476 new buttons navigation #7668

Merged
merged 36 commits into from
Jan 29, 2024
Merged
Changes from 1 commit
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
7265ef8
Implemented #7476 - New Buttons Progress Bar for Default V2
Jan 15, 2024
368c1ad
Fixed tests
Jan 15, 2024
fc8a0fd
Merge branch 'master' into feature/7476-new-buttons-nav
Jan 15, 2024
f2e8999
Merge branch 'master' into feature/7476-new-buttons-nav
Jan 15, 2024
01a6037
Merge branch 'master' into feature/7476-new-buttons-nav
Jan 17, 2024
1ffe217
Merge branch 'master' into feature/7476-new-buttons-nav
Jan 17, 2024
5e3a2c4
Work for #7476 - New Buttons Progress Bar for Default V2
Jan 18, 2024
7bc3ce1
Work for #7476 - fixed import
Jan 18, 2024
b2a407f
Merge branch 'master' into feature/7476-new-buttons-nav
Jan 18, 2024
143ce8e
Jan 18, 2024
998b25f
Work for #7476 - New Buttons Progress Bar for Default V2 - supported …
Jan 19, 2024
a1df3ae
Work for #7476 - New Buttons Progress Bar for Default V2 - implemente…
Jan 19, 2024
6325dbc
Work for #7476 - New Buttons Progress Bar for Default V2 - fix tests …
Jan 19, 2024
96860a3
Merge branch 'master' into feature/7476-new-buttons-nav
Jan 19, 2024
c922b40
Work for #7476 - New Buttons Progress Bar for Default V2 - updated et…
Jan 19, 2024
2cef2e7
Work for #7476 - New Buttons Progress Bar for Default V2
Jan 19, 2024
5b0d345
Work for #7476 - New Buttons Progress Bar for Default V2 - implemente…
Jan 19, 2024
b520a33
Work for #7476 - New Buttons Progress Bar for Default V2 - updated et…
Jan 19, 2024
74c92ec
Work for #7476 - New Buttons Progress Bar for Default V2 - renamings
Jan 19, 2024
b2f902c
Work for #7476 - New Buttons Progress Bar for Default V2 - implemente…
Jan 19, 2024
38f3d0a
Merge branch 'master' into feature/7476-new-buttons-nav
Jan 22, 2024
72be247
Work for #7476 - New Buttons Progress Bar for Default V2 - implemente…
Jan 22, 2024
e176c4d
Try to fix Vue3 build
Jan 22, 2024
2a42f69
Work for #7476 - New Buttons Progress Bar for Default V2 - implemente…
Jan 22, 2024
2f34386
Work for #7476 - New Buttons Progress Bar for Default V2 - fixed Vue3…
Jan 22, 2024
105cd27
Merge branch 'master' into feature/7476-new-buttons-nav
Jan 24, 2024
09c8d7f
Work for #7476 - New Buttons Progress Bar for Default V2 - fixed rema…
Jan 24, 2024
a4a7a59
Work for #7476 - New Buttons Progress Bar for Default V2 - updated et…
Jan 24, 2024
6572e2a
Work for #7476 - New Buttons Progress Bar for Default V2 - updated et…
Jan 24, 2024
a5009f0
Work for #7476 - New Buttons Progress Bar for Default V2 - updated et…
Jan 25, 2024
db968c1
Work for #7476 - removed old commented SCSS
Jan 25, 2024
8f58ab0
Add doccomments
RomanTsukanov Jan 29, 2024
f64180d
Merge branch 'master' into feature/7476-new-buttons-nav
tsv2013 Jan 29, 2024
f913d49
Merge branch 'master' into feature/7476-new-buttons-nav
Jan 29, 2024
ba5b622
Updated etalons
Jan 29, 2024
4dabb94
Merge branch 'feature/7476-new-buttons-nav' of https://github.com/sur…
Jan 29, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Work for #7476 - New Buttons Progress Bar for Default V2 - implemente…
…d vue 2 component
tsv2013 committed Jan 19, 2024
commit b2f902cda166cfaa5086bbb530c77f00a182dc5c
4 changes: 2 additions & 2 deletions src/progress-buttons.ts
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ export class ProgressButtons extends Base {
constructor(public survey: SurveyModel) {
super();
}
public isListElementClickable(index: number): boolean {
public isListElementClickable(index: number | any): boolean {
if (!this.survey.onServerValidateQuestions ||
(<EventBase<SurveyModel>>this.survey.onServerValidateQuestions).isEmpty ||
this.survey.checkErrorsMode === "onComplete") {
@@ -27,7 +27,7 @@ export class ProgressButtons extends Base {
}
return result;
}
public getListElementCss(index: number): string {
public getListElementCss(index: number | any): string {
if (index >= this.survey.visiblePages.length) return;
return new CssClassBuilder()
.append(this.survey.css.progressButtonsListElementPassed, this.survey.visiblePages[index].passed)
71 changes: 38 additions & 33 deletions src/vue/progressButtons.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<template>
<div :class="css.progressButtonsContainerCenter">
<div :class="model.getRootCss(container)" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-label="progress">
<div v-if="canShowHeader" :class="survey.css.progressButtonsHeader">
<div :class="survey.css.progressButtonsPageTitle" :title="model.headerText">{{ model.headerText }}</div>
</div>
<div :class="css.progressButtonsContainer">
<div
:class="getScrollButtonCss(hasScroller, true)"
:class="model.getScrollButtonCss(hasScroller, true)"
v-on:click="clickScrollButton(true)"
role="button"
></div>
@@ -14,18 +17,20 @@
<li
v-for="(page, index) in survey.visiblePages"
:key="'listelement' + index"
:class="getListElementCss(index)"
:class="model.getListElementCss(index)"
v-on:click="
isListElementClickable(index) ? clickListElement(index) : null
model.isListElementClickable(index) ? model.clickListElement(page) : null
"
:data-page-number="model.getItemNumber(page)"
>
<div
<div :class="css.progressButtonsConnector"></div>
<div v-if="canShowItemTitles"
:class="css.progressButtonsPageTitle"
:title="page.renderedNavigationTitle"
>
{{ page.renderedNavigationTitle }}
</div>
<div
<div v-if="canShowItemTitles"
:class="css.progressButtonsPageDescription"
:title="page.locNavigationDescription.renderedHtml"
>
@@ -35,60 +40,60 @@
</ul>
</div>
<div
:class="getScrollButtonCss(hasScroller, false)"
:class="model.getScrollButtonCss(hasScroller, false)"
v-on:click="clickScrollButton(false)"
role="button"
></div>
</div>
<div v-if="canShowFooter" :class="survey.css.progressButtonsFooter">
<div :class="survey.css.progressButtonsPageTitle" :title="model.footerText">{{ model.footerText }}</div>
</div>
</div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import { SurveyModel, ProgressButtons } from "survey-core";
import { SurveyModel, ProgressButtons, ProgressButtonsResponsivityManager, IProgressButtonsViewModel } from "survey-core";
@Component
export class ProgressButtonsComponent extends Vue {
export class ProgressButtonsComponent extends Vue implements IProgressButtonsViewModel {
private respManager: ProgressButtonsResponsivityManager;
@Prop() survey: SurveyModel;
@Prop() model: ProgressButtons;
@Prop() container: string;
public hasScroller: boolean = false;
private progressButtonsModel: ProgressButtons;
private updateScroller: any = undefined;
public canShowHeader: boolean = false;
public canShowFooter: boolean = false;
public canShowItemTitles: boolean = true;
constructor() {
super();
this.progressButtonsModel = new ProgressButtons(this.survey);
}
public get css() {
return this.survey.css;
}
mounted() {
const listContainerElement: any = this.$refs["progressButtonsListContainer"];
this.updateScroller = setInterval(() => {
this.hasScroller =
listContainerElement.scrollWidth > listContainerElement.offsetWidth;
}, 100);
onResize(canShowItemTitles: boolean): void {
this.canShowItemTitles = canShowItemTitles;
this.canShowHeader = !this.canShowItemTitles;
}
public isListElementClickable(index: any): boolean {
return this.progressButtonsModel.isListElementClickable(index);
onUpdateScroller(hasScroller: boolean): void {
this.hasScroller = hasScroller;
}
public getListElementCss(index: any): string {
return this.progressButtonsModel.getListElementCss(index);
onUpdateSettings(): void {
this.canShowItemTitles = this.model.showItemTitles;
this.canShowFooter = !this.model.showItemTitles;
}
public clickListElement(index: any): void {
this.progressButtonsModel.clickListElement(index);
public get css() {
return this.survey.css;
}
public getScrollButtonCss(hasScroller: boolean, isLeftScroll: boolean): any {
return this.progressButtonsModel.getScrollButtonCss(hasScroller, isLeftScroll);
mounted() {
const element: any = this.$refs["progressButtonsListContainer"];
this.respManager = new ProgressButtonsResponsivityManager(this.model, element, this);
}
public clickScrollButton(isLeftScroll: boolean): void {
let listContainerElement: any = this.$refs["progressButtonsListContainer"];
listContainerElement.scrollLeft += (isLeftScroll ? -1 : 1) * 70;
}
beforeDestroy() {
if (typeof this.updateScroller !== "undefined") {
clearInterval(this.updateScroller);
this.updateScroller = undefined;
}
this.respManager.dispose();
}
}