From b8ddfd3834c6b73001a16fca11ec900b9309cb6f Mon Sep 17 00:00:00 2001
From: Mark <markandrewkato@gmail.com>
Date: Thu, 30 May 2019 03:44:50 +0800
Subject: [PATCH] feat: added sticky function to controls container

---
 src/js/components/controls/index.js | 13 +++++++++----
 src/js/config.js                    |  1 +
 src/js/editor.js                    |  2 +-
 src/sass/components/_controls.scss  |  6 ++++++
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/js/components/controls/index.js b/src/js/components/controls/index.js
index f3def280..e464dde6 100644
--- a/src/js/components/controls/index.js
+++ b/src/js/components/controls/index.js
@@ -67,10 +67,10 @@ export class Controls {
    * Methods to be called on initialization
    * @param {Object} controlOptions
    */
-  init(controlOptions) {
+  init(controlOptions, sticky = false) {
     this.applyOptions(controlOptions)
     this.registerControls()
-    this.buildDOM()
+    this.buildDOM(sticky)
     return this
   }
 
@@ -265,7 +265,7 @@ export class Controls {
    * Returns the markup for the form controls/fields
    * @return {DOM}
    */
-  buildDOM() {
+  buildDOM(sticky) {
     const _this = this
     const groupedFields = this.groupElements()
     const formActions = this.formActions()
@@ -276,8 +276,13 @@ export class Controls {
       content: _this.panels.children,
     })
 
+    let controlClass = 'formeo-controls'
+    if (sticky) {
+      controlClass += ' formeo-sticky'
+    }
+
     const element = dom.create({
-      className: 'formeo-controls',
+      className: controlClass,
       content: [groupsWrap, formActions],
     })
     const groups = element.getElementsByClassName('control-group')
diff --git a/src/js/config.js b/src/js/config.js
index 84cb3621..f5c59c12 100644
--- a/src/js/config.js
+++ b/src/js/config.js
@@ -7,6 +7,7 @@ mi18n.addLanguage('en-US', EN_US)
 export const defaults = {
   get editor() {
     return {
+      stickyControls: false,
       allowEdit: true,
       dataType: 'json',
       debug: false,
diff --git a/src/js/editor.js b/src/js/editor.js
index 995973fa..acbca59e 100644
--- a/src/js/editor.js
+++ b/src/js/editor.js
@@ -91,7 +91,7 @@ export class FormeoEditor {
   init() {
     const _this = this
     this.load(this.userFormData, _this.opts)
-    this.controls = Controls.init(_this.opts.controls)
+    this.controls = Controls.init(_this.opts.controls, _this.opts.stickyControls)
     _this.formId = Components.get('id')
     this.i18n = {
       setLang: formeoLocale => {
diff --git a/src/sass/components/_controls.scss b/src/sass/components/_controls.scss
index 4a92757c..447da8c2 100644
--- a/src/sass/components/_controls.scss
+++ b/src/sass/components/_controls.scss
@@ -2,6 +2,12 @@
   width: 26%;
   overflow: hidden;
 
+  &.formeo-sticky {
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+  }
+
   &.pull-left {
     .form-actions {
       float: left;