feat: added sticky function to controls container

Draggable · May 29, 2019 · b8ddfd3 · b8ddfd3
1 parent 49e84b2
commit b8ddfd3
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -2,6 +2,12 @@
   width: 26%;
   overflow: hidden;
 
+  &.formeo-sticky {
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+  }
+
   &.pull-left {
     .form-actions {
       float: left;