Add sticky layout class to make wizard step header sticky

kbss-cvut · May 10, 2021 · 23239a4 · 23239a4
1 parent 9a56893
commit 23239a4
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "s-forms-smart-components",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": true,
   "scripts": {
     "dev": "parcel serve ./test/index.html --port 8080",

diff --git a/src/Constants.js b/src/Constants.js
@@ -12,6 +12,7 @@ export default class Constants {
     static HAS_NON_SELECTABLE_VALUE = 'http://onto.fel.cvut.cz/ontologies/form/has-non-selectable-value';
 
     static LAYOUT_TYPE_QUESTION = 'type-question';
+    static LAYOUT_STICKY = 'sticky';
 
     static BROADER = 'http://www.w3.org/2004/02/skos/core#broader';
     static DISJOINT_WITH = 'http://www.w3.org/2002/07/owl#disjointWith';

diff --git a/src/components/WizardStepComponent.jsx b/src/components/WizardStepComponent.jsx
@@ -12,9 +12,80 @@ export default class WizardStepComponent extends WizardStep {
 
   static mappingRule = q => FormUtils.isWizardStep(q);
 
+  constructor(props) {
+    super(props);
+
+    this.card = React.createRef();
+    this.cardHeader = React.createRef();
+
+    this.state = {
+      headerFloating: false,
+      headerWidth: 0,
+      headerHeight: 0
+    }
+  }
+
+  componentDidMount() {
+    if (this._isSticky()) {
+      window.addEventListener('scroll', this._handleScroll);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this._handleScroll);
+  }
+
+  _isSticky() {
+    const question = this.props.step;
+    return JsonLdUtils.hasValue(question, SConstants.LAYOUT_CLASS, Constants.LAYOUT_STICKY);
+  }
+
+  _handleScroll = () => {
+
+    /**
+     * @type {HTMLDivElement}
+     */
+    const card = this.card.current;
+    /**
+     * @type {HTMLHeadingElement}
+     */
+    const header = this.cardHeader.current;
+    if (!card || !header) {
+      return;
+    }
+
+    const box = card.getBoundingClientRect();
+
+    if (box.top <= 0) {
+
+      if (!this.state.headerFloating) {
+
+        const headerBox = header.getBoundingClientRect();
+
+        this.setState({
+          headerFloating: true,
+          headerWidth: headerBox.width,
+          headerHeight: headerBox.height
+        })
+      }
+
+    } else {
+
+      if (this.state.headerFloating) {
+        this.setState({
+          headerFloating: false,
+          headerWidth: 0,
+          headerHeight: 0
+        })
+      }
+
+    }
+  }
+
+
   _renderIdentifierText() {
     return (
-      <SectionIdentifier question={this.props.step} />
+      <SectionIdentifier question={this.props.step}/>
     );
   }
 
@@ -38,20 +109,36 @@ export default class WizardStepComponent extends WizardStep {
 
     const categoryClass = Question._getQuestionCategoryClass(this.props.step);
 
+    let headerClass = 'bg-primary text-white wizard-step-header';
+    let headerStyle = null;
+
+    if (this.state.headerFloating) {
+      headerClass += ' floating';
+      headerStyle = {
+        width: this.state.headerWidth
+      }
+    }
+
+
     return (
       <div className="wizard-step">
-        <Card className="wizard-step-content">
-          <Card.Header className="bg-primary text-white" as="h6" id={this.props.step['@id']}>
+        <Card ref={this.card} className="wizard-step-content" >
+          <Card.Header ref={this.cardHeader}
+                       className={headerClass}
+                       style={headerStyle}
+                       as="h6"
+                       id={this.props.step['@id']}
+          >
             {JsonLdUtils.getLocalized(this.props.step[JsonLdUtils.RDFS_LABEL], this.props.options.intl)}
             {this._renderHelpIcon()}
 
             {this._renderIdentifierText()}
             {this._renderShowAdvanced()}
 
           </Card.Header>
-          <Card.Body className={categoryClass}>
+          <Card.Body className={categoryClass} style={{marginTop: this.state.headerHeight}}>
             <Question question={this.props.step} onChange={this.onChange} withoutCard={true}
-                                  index={this.props.stepIndex}/>
+                      index={this.props.stepIndex}/>
           </Card.Body>
         </Card>
 

diff --git a/src/styles/components.css b/src/styles/components.css
@@ -111,3 +111,9 @@
 .card-header .answer-content .form-group {
     display: inline-block;
 }
+
+.wizard-step-header.floating {
+    position: fixed;
+    top: 0;
+    z-index: 3;
+}