Work for #5551 - Implement TOC navigation - reanimated timer panel

surveyjs · Feb 20, 2023 · 3d1f8cd · 3d1f8cd
1 parent 7f1f51f
commit 3d1f8cd
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 37 deletions.
diff --git a/packages/survey-angular-ui/src/components/timer-panel/timer-panel.component.ts b/packages/survey-angular-ui/src/components/timer-panel/timer-panel.component.ts
@@ -4,7 +4,7 @@ import { BaseAngular } from "../../base-angular";
 
 @Component(
   {
-    selector: "sv-timer-panel",
+    selector: "sv-timerpanel",
     templateUrl: "./timer-panel.component.html",
   }
 )

diff --git a/packages/survey-angular-ui/src/survey-content.component.html b/packages/survey-angular-ui/src/survey-content.component.html
@@ -6,7 +6,7 @@
         <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: 'top' } }"></ng-template>
         <!-- <ng-container *ngIf="model.isTimerPanelShowingOnTop && !model.isShowStartingPage">
-          <sv-timer-panel [model]="model.timerModel"></sv-timer-panel>
+          <sv-timerpanel [model]="model.timerModel"></sv-timerpanel>
         </ng-container> -->
         <!-- <ng-container *ngIf="model.isShowProgressBarOnTop && !model.isShowStartingPage">
           <ng-template [component]='{ name: "sv-progress-" + this.model.progressBarType, data: { model } }'></ng-template>
@@ -34,7 +34,7 @@
           <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'right' } }"></ng-template>
         </div>
         <!-- <ng-container *ngIf="model.isTimerPanelShowingOnBottom && !model.isShowStartingPage">
-            <sv-timer-panel [model]="model.timerModel"></sv-timer-panel>
+            <sv-timerpanel [model]="model.timerModel"></sv-timerpanel>
         </ng-container> -->
         <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'bottom' } }"></ng-template>
         <div *ngIf="model.state === 'completed' && model.showCompletedPage" [class]="model.completedCss"

diff --git a/src/knockout/templates/timerpanel.html b/src/knockout/templates/timerpanel.html
@@ -1,20 +1,20 @@
 <script type="text/html" id="survey-timerpanel">
-    <!-- ko if: timerModel.showTimerAsClock -->
-    <div data-bind="css: timerModel.rootCss">
-        <!-- ko if: timerModel.showProgress -->
-        <svg data-bind="css: timerModel.getProgressCss(), style: { strokeDasharray: 440, strokeDashoffset: -440 * timerModel.progress }">
+    <!-- ko if: showTimerAsClock -->
+    <div data-bind="css: rootCss">
+        <!-- ko if: showProgress -->
+        <svg data-bind="css: getProgressCss(), style: { strokeDasharray: 440, strokeDashoffset: -440 * progress }">
             <use data-bind="attr:{'xlink:href': '#icon-timercircle'}" xlink:href=''></use>
         </svg>
         <!-- /ko -->
-        <div data-bind="css: timerModel.textContainerCss">
-            <span data-bind="css: timerModel.majorTextCss, text: timerModel.clockMajorText"></span>
-            <!-- ko if: !!timerModel.minorTextCss -->
-            <span data-bind="css: timerModel.minorTextCss, text: timerModel.clockMinorText"></span>
+        <div data-bind="css: textContainerCss">
+            <span data-bind="css: majorTextCss, text: clockMajorText"></span>
+            <!-- ko if: !!minorTextCss -->
+            <span data-bind="css: minorTextCss, text: clockMinorText"></span>
             <!-- /ko -->
         </div>
     </div>
     <!-- /ko -->
-    <!-- ko if: !timerModel.showTimerAsClock -->
-    <div data-bind="css: timerModel.survey.getCss().timerRoot, text: timerModel.text"></div>
+    <!-- ko if: !showTimerAsClock -->
+    <div data-bind="css: survey.getCss().timerRoot, text: text"></div>
     <!--/ko -->
 </script>
diff --git a/src/react/reactSurvey.tsx b/src/react/reactSurvey.tsx
@@ -115,10 +115,10 @@ export class Survey extends SurveyElementBase<any, any>
           <div className={this.css.container}>
             {header}
             <ComponentsContainer survey={this.survey} container={"top"}></ComponentsContainer>
-            {this.renderTimerPanel("top")}
+            {/* {this.renderTimerPanel("top")} */}
             {/* {topProgress} */}
             {renderResult}
-            {this.renderTimerPanel("bottom")}
+            {/* {this.renderTimerPanel("bottom")} */}
             <ComponentsContainer survey={this.survey} container={"bottom"}></ComponentsContainer>
           </div>
         </form>
@@ -199,14 +199,14 @@ export class Survey extends SurveyElementBase<any, any>
       </div>
     );
   }
-  protected renderTimerPanel(location: string) {
-    if(this.survey.isShowStartingPage) return null;
-    if (location === "top" && !this.survey.isTimerPanelShowingOnTop)
-      return null;
-    if (location === "bottom" && !this.survey.isTimerPanelShowingOnBottom)
-      return null;
-    return <SurveyTimerPanel timerModel={this.survey.timerModel} />;
-  }
+  // protected renderTimerPanel(location: string) {
+  //   if(this.survey.isShowStartingPage) return null;
+  //   if (location === "top" && !this.survey.isTimerPanelShowingOnTop)
+  //     return null;
+  //   if (location === "bottom" && !this.survey.isTimerPanelShowingOnBottom)
+  //     return null;
+  //   return <SurveyTimerPanel timerModel={this.survey.timerModel} />;
+  // }
   protected renderPage(page: PageModel): JSX.Element {
     return (
       <SurveyPage

diff --git a/src/react/reacttimerpanel.tsx b/src/react/reacttimerpanel.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Base, SurveyTimerModel } from "survey-core";
 import { SvgIcon } from "./components/svg-icon/svg-icon";
+import { ReactElementFactory } from "./element-factory";
 import { ReactSurveyElement } from "./reactquestion_element";
 
 export class SurveyTimerPanel extends ReactSurveyElement {
@@ -11,7 +12,7 @@ export class SurveyTimerPanel extends ReactSurveyElement {
     return this.timerModel;
   }
   protected get timerModel(): SurveyTimerModel {
-    return this.props.timerModel;
+    return this.props.model;
   }
   private readonly circleLength = 440;
   private get progress(): number {
@@ -34,3 +35,7 @@ export class SurveyTimerPanel extends ReactSurveyElement {
     return result;
   }
 }
+
+ReactElementFactory.Instance.registerElement("sv-timerpanel", (props) => {
+  return React.createElement(SurveyTimerPanel, props);
+});
diff --git a/src/survey.ts b/src/survey.ts
@@ -1466,7 +1466,8 @@ export class SurveyModel extends SurveyElementCore
     this.addons.push({
       id: "timerpanel",
       template: "survey-timerpanel",
-      data: this
+      component: "sv-timerpanel",
+      data: this.timerModel
     });
     this.addons.push({
       id: "progress-buttons",

diff --git a/src/vue/timerpanel.vue b/src/vue/timerpanel.vue
@@ -1,18 +1,18 @@
 <template>
-  <div v-if="timerModel.showTimerAsClock" :class="timerModel.rootCss">
+  <div v-if="model.showTimerAsClock" :class="model.rootCss">
     <svg
-      v-if="timerModel.showProgress"
-      :class="timerModel.getProgressCss()"
+      v-if="model.showProgress"
+      :class="model.getProgressCss()"
       :style="{ strokeDasharray: circleRadius, strokeDashoffset: progress }"
     >
       <use :xlink:href="'#icon-timercircle'"></use>
     </svg>
-    <div :class="timerModel.textContainerCss">
-      <span :class="timerModel.majorTextCss">{{ timerModel.clockMajorText }}</span>
-      <span v-if="!!timerModel.clockMinorText" :class="timerModel.minorTextCss">{{ timerModel.clockMinorText }}</span>
+    <div :class="model.textContainerCss">
+      <span :class="model.majorTextCss">{{ model.clockMajorText }}</span>
+      <span v-if="!!model.clockMinorText" :class="model.minorTextCss">{{ model.clockMinorText }}</span>
     </div>
   </div>
-  <div v-else :class="timerModel.survey.getCss().timerRoot">
+  <div v-else :class="model.survey.getCss().timerRoot">
     {{ text }}
   </div>
 </template>
@@ -25,19 +25,19 @@ import { BaseVue } from "./base";
 
 @Component
 export class TimerPanel extends BaseVue {
-  @Prop() timerModel: SurveyTimerModel;
+  @Prop() model: SurveyTimerModel;
   @Prop() css: any;
   public readonly circleRadius: number = 440;
   public get progress(): number {
-    return -this.circleRadius * this.timerModel.progress;
+    return -this.circleRadius * this.model.progress;
   }
   get text() {
-    return this.timerModel.text;
+    return this.model.text;
   }
   protected getModel(): Base {
-    return this.timerModel;
+    return this.model;
   }
 }
-Vue.component("survey-timerpanel", TimerPanel);
+Vue.component("sv-timerpanel", TimerPanel);
 export default TimerPanel;
 </script>