parambox - npm Package Compare versions

Comparing version 1.2.6 to 1.2.7

dist/paramBox-compiled.js

@@ -111,2 +111,5 @@ "use strict";
     });
+
+    /* --- Load the query string if reload and import was used --- */
+    this.queryString = this.getQueryString();
   }
@@ -293,2 +296,10 @@ // destroy
 
+    /**
+     * Add the specified html code to the specified target. 
+     * If wrapInDivClass is set, a div of specified class is created around the html code. This could be usefull to set grid class like 'col-xs-12'.
+     * @param  {string} html           html to append to the target
+     * @param  {String} to             target identifier eg .target-class or #targetID
+     * @param  {String} wrapInDivClass Null by default. If set, creates a div with specified class wrapping the html code.
+     */
+
   }, {
@@ -298,5 +309,10 @@ key: "append",
       var to = arguments.length <= 1 || arguments[1] === undefined ? ".dragbox-content" : arguments[1];
+      var wrapInDivClass = arguments.length <= 2 || arguments[2] === undefined ? null : arguments[2];
 
       // append html to the selected child element of the dragbox
       if (this.boxElement) {
+        if (wrapInDivClass !== null) {
+          html = '<div class="' + wrapInDivClass + '" >' + html + "</div>";
+        }
+
         if (to != "container") {
@@ -313,2 +329,38 @@ this.boxElement.find(to).append(html);
   }, {
+    key: "getQueryString",
+
+
+    /* =============== Helper functions =============== */
+    /**
+     * From http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters?page=1&tab=votes#tab-top
+     * @return {Array} Array containing variables of the location string.
+     */
+    value: function getQueryString() {
+      // This function is anonymous, is executed immediately and
+      // the return value is assigned to QueryString!
+      var query_string = {};
+      var query = window.location.search.substring(1);
+      var vars = query.split("&");
+      for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split("=");
+        // If first entry with this name
+        if (typeof query_string[pair[0]] === "undefined") {
+          query_string[pair[0]] = decodeURIComponent(pair[1]);
+          // If second entry with this name
+        } else if (typeof query_string[pair[0]] === "string") {
+          var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
+          query_string[pair[0]] = arr;
+          // If third or later entry with this name
+        } else {
+          query_string[pair[0]].push(decodeURIComponent(pair[1]));
+        }
+      }
+      return query_string;
+    }
+
+    /* ======== Static ======== */
+    // TODO make non static probably
+    // some static helper functions
+
+  }, {
     key: "width",
@@ -457,5 +509,2 @@ set: function set(width) {
     }
-
-    // some static helper functions
-
   }], [{
@@ -543,3 +592,4 @@ key: "stayInWindow",
       nextbutton: '<button type="button" class="btn btn-secondary smartmodal-nextbutton">Next</button>',
-      blankbutton: '<button type="button" class="btn btn-secondary smartmodal-blankbutton"></button>'
+      blankbutton: '<button type="button" class="btn btn-secondary smartmodal-blankbutton"></button>',
+      sendbutton: '<button type="button" class="btn btn-secondary smartmodal-sendbutton">Send</button>'
     };
@@ -551,3 +601,4 @@ _this.DEFAULT_FORMAT_TYPES = {
       centralLarge: [0.2, 0.7, 0.6],
-      across: [0.3, 1, 0.4]
+      across: [0.3, 1, 0.4],
+      overlay: [0.1, 0.1, 0.8]
     };
@@ -655,2 +706,28 @@
 
+    _this2.PARAMBOX_EMPTY_ROW_HTML = '<div class="col-md-12 dragbox-row parambox-empty"><center>No parameters binded.</center></div>';
+
+    _this2.DEFAULT_BUTTON_ROW_HTML = '<div class="col-xs-12 dragbox-row parambox-buttonrow"></div>';
+    _this2.DEFAULT_BUTTON_HTML = {
+      savebutton: '<button type="button" class="btn btn-secondary btn-block parambox-savebutton">Save</button>',
+      importbutton: '<button type="button" class="btn btn-secondary  btn-block parambox-importbutton">Import</button>',
+      reloadbutton: '<button type="button" class="btn btn-secondary btn-block parambox-reloadbutton">Reload</button>'
+    };
+
+    // setup the buttons
+    _this2.append(_this2.DEFAULT_BUTTON_ROW_HTML, ".dragbox-footer");
+    _this2.append(_this2.DEFAULT_BUTTON_HTML.savebutton, ".parambox-buttonrow", "col-xs-4");
+    _this2.append(_this2.DEFAULT_BUTTON_HTML.importbutton, ".parambox-buttonrow", "col-xs-4");
+    _this2.append(_this2.DEFAULT_BUTTON_HTML.reloadbutton, ".parambox-buttonrow", "col-xs-4");
+
+    var thisObject = _this2;
+    _this2.boxElement[0].getElementsByClassName("parambox-savebutton")[0].addEventListener("click", function (e) {
+      thisObject.save(e);
+    });
+    _this2.boxElement[0].getElementsByClassName("parambox-importbutton")[0].addEventListener("click", function (e) {
+      thisObject.import(e);
+    });
+    _this2.boxElement[0].getElementsByClassName("parambox-reloadbutton")[0].addEventListener("click", function (e) {
+      thisObject.reloadAndImport(e);
+    });
+
     // ui
@@ -668,2 +745,16 @@ _this2.rowHtml = _this2.DEFAULT_ROW_HTML;
 
+    // set prefix for exports TODO: IMPLEMENT IT IN EXPORTS
+    if (typeof window.paramPrefixIncrement === "undefined") {
+      window.paramPrefixIncrement = 0;
+    } else {
+      window.paramPrefixIncrement += 1;
+    }
+
+    _this2.prefix = "paramBox" + window.paramPrefixIncrement;
+
+    // update size and refreshView
+    _this2.updateSize();
+
+    _this2.refreshView();
+
     return _this2;
@@ -685,33 +776,10 @@ }
       var objectHierarchy = null;
-      if (properties.constructor === Array) {
-        for (var i = 0; i < properties.length; i++) {
 
-          objectHierarchy = this.getDescendantProp(object, properties[i]);
-          var objectTemp = objectHierarchy[0];
-          var property = objectHierarchy[1];
+      if (properties.constructor !== Array) {
+        properties = [properties];
+      }
 
-          var rowDom = this.newRowInDom();
-          var bindedField = null;
+      for (var i = 0; i < properties.length; i++) {
 
-          // look for a constrained field
-          if (constraints !== null) {
-            if (typeof constraints[properties[i]] != 'undefined') {
-              var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', constraints[properties[i]]);
-            }
-          }
-
-          // if not constrained field found, create the most relevant type of field
-          if (!bindedField) {
-            if (objectTemp[property].constructor === Boolean) {
-              var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', ["TRUE", "FALSE"]);
-            } else {
-              var bindedField = new BindedField(objectTemp, property, rowDom);
-            }
-          }
-
-          this.rows.push(this.getBindedRow(rowDom, bindedField));
-        }
-      } else {
-
-        objectHierarchy = this.getDescendantProp(object, properties);
+        objectHierarchy = this.getDescendantProp(object, properties[i]); // TODO use lodash ?
         var objectTemp = objectHierarchy[0];
@@ -723,15 +791,35 @@ var property = objectHierarchy[1];
 
+        /* --- look for a value in the query string for this property --- */
+        var initialValue = null;
+        if (typeof this.queryString[property] !== "undefined") {
+          initialValue = this.queryString[property];
+        }
+
         // look for a constrained field
         if (constraints !== null) {
-          if (typeof constraints[properties] !== 'undefined') {
-            var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', constraints[properties]);
+          if (typeof constraints[properties[i]] != 'undefined') {
+            var constraintValues = constraints[properties[i]];
+
+            if (initialValue !== null) {
+              if (constraintValues.indexOf(initialValue) === -1) {
+                throw new Error("ParamBox.bind: cannot set initial value to query string value of " + initialValue + " because it is not in the constraints array.");
+              }
+
+              objectTemp[property] = initialValue;
+            }
+
+            var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', constraintValues);
           }
         }
 
-        // if not constrained field found, create the most relevant type of field
+        // if no constrained field found, create the most relevant type of field
         if (!bindedField) {
+          if (initialValue !== null) {
+            objectTemp[property] = initialValue;
+          }
+
           if (objectTemp[property].constructor === Boolean) {
-            var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', ["TRUE", "FALSE"]);
+            var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', ["TRUE", "FALSE"], initialValue);
           } else {
-            var bindedField = new BindedField(objectTemp, property, rowDom);
+            var bindedField = new BindedField(objectTemp, property, rowDom, 'input', null, initialValue);
           }
@@ -742,2 +830,4 @@ }
       }
+
+      this.refreshView();
     }
@@ -755,2 +845,4 @@ }, {
       }
+
+      this.refreshView();
     }
@@ -761,2 +853,5 @@
   }, {
+    key: "addExportButton",
+    value: function addExportButton() {}
+  }, {
     key: "newRowInDom",
@@ -782,5 +877,19 @@ value: function newRowInDom() {
     value: function refreshView() {
-      // check if all binded field are displayed in the paramBox
-      // if not add them
-      // get rid of unbinded field
+      // TODO: maybe check if all binded field are displayed in the paramBox. if not add them. get rid of unbinded field
+
+      /* --- Add an export button if there is at least one binded property --- */
+      if (this.rows.length) {
+        this.boxElement[0].getElementsByClassName("parambox-buttonrow")[0].style.visibility = "visible";
+      } else {
+        this.boxElement[0].getElementsByClassName("parambox-buttonrow")[0].style.visibility = "hidden";
+        //TODO: add empty message
+      }
+
+      /* --- Adapt the box's height to the number of parameters --- */
+      var height = 80 + this.rows.length * 75;
+      if (height > 600) {
+        height = 600;
+      }
+
+      this.height = height;
     }
@@ -807,2 +916,90 @@ }, {
 
+    /* ======== Import/Export functions ======== */
+
+  }, {
+    key: "getSummaryArray",
+    value: function getSummaryArray() {
+      var summaryArray = [];
+      for (var i = 0; i < this.rows.length; i++) {
+        var bindedField = this.rows[i].bindedField;
+        summaryArray.push({
+          property: bindedField.property,
+          value: bindedField.value
+        });
+      }
+
+      return summaryArray;
+    }
+  }, {
+    key: "import",
+    value: function _import(event) {
+      // make it a smart form
+      // but while smart forms are finished use a simple prompt
+      var importedString = prompt("Enter a JSON string:");
+      var importedJSON = null;
+      try {
+        importedJSON = JSON.parse(importedString);
+      } catch (e) {
+        console.error("ParamBox.import: Invalid JSON string - Parsing error:", e);
+      }
+
+      if (importedJSON !== null) {
+        if (importedJSON.constructor !== Array) {
+          console.error("ParamBox.import: Invalid JSON string - the parent object needs to be of the same structure as the summaryArray");
+        }
+
+        for (var i = 0; i < importedJSON.length; i++) {
+          if (typeof importedJSON[i].property === "undefined") {
+            console.error("ParamBox.import: importedJSON[" + i + "].property is undefined. Invalid JSON string - the parent object needs to be of the same structure as the summaryArray.");
+          }
+          if (typeof importedJSON[i].value === "undefined") {
+            console.error("ParamBox.import: importedJSON[" + i + "].value is undefined. Invalid JSON string - the parent object needs to be of the same structure as the summaryArray.");
+          }
+
+          this.setProperty(importedJSON[i].property, importedJSON[i].value);
+        }
+      }
+    }
+  }, {
+    key: "save",
+    value: function save(event) {
+      // get summary array
+      var summaryArray = this.getSummaryArray();
+
+      // stringify summary object
+      var stringified = JSON.stringify(summaryArray, null, 2);
+
+      // opens a new window with the stringified json
+      var height = 30 + summaryArray.length * 70;
+      if (height > 500) {
+        height = 500;
+      }
+      window.open('data:application/json;' + (window.btoa ? 'base64,' + btoa(stringified) : stringified), "ParamBox.save", "width=400,height=" + height);
+    }
+  }, {
+    key: "reloadAndImport",
+    value: function reloadAndImport(event) {
+      /* --- Serialize the parameters in URL format --- */
+
+      var summaryArray = this.getSummaryArray();
+      var str = "";
+      for (var i = 0; i < summaryArray.length; i++) {
+        if (str !== "") {
+          str += "&";
+        }
+        str += summaryArray[i].property + "=" + encodeURIComponent(summaryArray[i].value);
+      }
+
+      /* --- Append the parameters and reload the page --- */
+
+      var url = window.location.href;
+      var questionPosition = url.indexOf("?");
+      if (questionPosition !== -1) {
+        // delete arguments from the URL
+        url = url.substring(0, questionPosition);
+      }
+      url += "?" + str;
+      window.location.href = url;
+    }
+
     /**
@@ -838,2 +1035,21 @@ * Gets the last object and property from a string description of object hierachy
     }
+  }, {
+    key: "setProperty",
+    value: function setProperty(property, value) {
+      if (property.constructor !== String) {
+        throw new Error("ParamBox.setProperty: property needs to be a string.");
+      }
+
+      var found = false;
+      for (var i = 0; i < this.rows.length; i++) {
+        if (this.rows[i].bindedField.property === property) {
+          this.rows[i].bindedField.value = value;
+          found = true;
+        }
+      }
+
+      if (found === false) {
+        console.warn("ParamBox.setProperty: did not find property " + property);
+      }
+    }
   }]);
@@ -844,2 +1060,43 @@
 
+/** TODO: Class generating a form based on preset fields and managing */
+// class SmartForm extends SmartModal {
+//   constructor(fields = mandatory(), callback = null, url = null, boxElement = null) {
+//     if (fields.constructor !== Object) {
+//       throw new Error("SmartForm: fields is not an object.");
+//     }
+
+//     /* --- Create the modal for the form --- */
+//     super("overlay", callback, "sendbutton", boxElement);
+
+//     // TODO Create the form element IF url !== null, else only use the callback to handle data.
+
+//     // constraints can be functions like checkPassword(x) { return (bool) }
+//     this.fields = {};
+//     var keys = _.keys(fields);
+//     for (var i = 0; i < keys.length; i++) {
+//       var key = keys[i];
+//       // fields needs to have a name and type property
+//       if (typeof fields[key].type === "undefined") {
+//         throw new Error("SmartForm: field[" + i + "].type is undefinned");
+//       }
+
+//       var baseField = {
+//         type: null,
+//         constraints: null,
+//         value: "",
+//         bindedField: null
+//       };
+
+//       fields[key] = _.extends(baseField, fields[key]); // TODO Either migrate to lodash or rewrite an extend function as well a a keys function
+
+//       this.fields[key] = fields[key];
+
+//       // TODO Create a form row
+//       this.fields[key].bindedField = new BindedField(this.fields, key, this.content, this.fields[key].type, this.fields[key].constraints);
+
+//     }
+
+//   }
+// }
+
 var BindedProperty = function () {
@@ -866,3 +1123,3 @@ function BindedProperty() {
 
-    if (property) {
+    if (property !== null) {
       this.bind(object, property);
@@ -1026,3 +1283,7 @@ }
         if (this.allowedValues.constructor === Array) {
-          this.field.val(this.allowedValues[0]);
+          if (this.allowedValues.indexOf(this.value) !== -1) {
+            this.field.val(this.value);
+          } else {
+            this.field.val(this.allowedValues[0]);
+          }
         } else {
@@ -1029,0 +1290,0 @@ this.field.val(this.value);

dist/paramBox.js

@@ -45,3 +45,3 @@ class DragBox {
 
-      $(document).mousemove(function(event) {
+      $(document).mousemove(function (event) {
         thisObject.currentMousePos.x = event.pageX;
@@ -79,13 +79,13 @@ thisObject.currentMousePos.y = event.pageY;
       // keyboard show hide hotkeys events
-      $(document.body).keydown(function(e) {
+      $(document.body).keydown(function (e) {
         thisObject.keyfunction(e);
       });
-      $(document.body).keyup(function(e) {
+      $(document.body).keyup(function (e) {
         thisObject.keyfunction(e);
       });
 
-      $(this.boxElement).find(".dragbox-title").mousedown(function(e) {
+      $(this.boxElement).find(".dragbox-title").mousedown(function (e) {
         thisObject.startDrag(e);
       });
-      $(this.boxElement).find(".dragbox-title").mouseup(function(e) {
+      $(this.boxElement).find(".dragbox-title").mouseup(function (e) {
         thisObject.stopDrag(e);
@@ -95,6 +95,9 @@ });
       // draggin cleanUp event
-      $(document).click(function(e) {
+      $(document).click(function (e) {
         thisObject.stopDrag(e);
       });
 
+      /* --- Load the query string if reload and import was used --- */
+      this.queryString = this.getQueryString();
+
     }
@@ -107,3 +110,3 @@ // destroy
       opacity: 0.0
-    }, 25, function() {
+    }, 25, function () {
       $(thisObject.boxElement).remove();
@@ -127,9 +130,9 @@ });
       width: thisObject.width
-    }, 25, function() {});
+    }, 25, function () {});
     $(this.boxElement).find(".dragbox-container").animate({
       height: thisObject.height
-    }, 25, function() {});
+    }, 25, function () {});
     $(this.boxElement).find(".dragbox-content").animate({
       height: contentHeight
-    }, 25, function() {});
+    }, 25, function () {});
   }
@@ -233,3 +236,3 @@
         top: constrainedPositionY
-      }, 25, function() {
+      }, 25, function () {
         thisObject.loopDrag(offset);
@@ -267,5 +270,17 @@ });
   // content function
-  append(html, to = ".dragbox-content") {
+
+  /**
+   * Add the specified html code to the specified target. 
+   * If wrapInDivClass is set, a div of specified class is created around the html code. This could be usefull to set grid class like 'col-xs-12'.
+   * @param  {string} html           html to append to the target
+   * @param  {String} to             target identifier eg .target-class or #targetID
+   * @param  {String} wrapInDivClass Null by default. If set, creates a div with specified class wrapping the html code.
+   */
+  append(html, to = ".dragbox-content", wrapInDivClass = null) {
     // append html to the selected child element of the dragbox
     if (this.boxElement) {
+      if (wrapInDivClass !== null) {
+        html = '<div class="' + wrapInDivClass + '" >' + html + "</div>";
+      }
+
       if (to != "container") {
@@ -374,19 +389,19 @@ this.boxElement.find(to).append(html);
     switch (type) {
-      case "none":
-        this.shouldMagnetize = false;
-        this.shouldStick = false;
-        console.log("Parambox: stickiness set to none");
-        break;
-      case "glue":
-        this.shouldStick = true;
-        this.shouldMagnetize = false;
-        console.log("stickiness set to glue");
-        break;
-      case "magnetized":
-        this.shouldStick = false;
-        this.shouldMagnetize = true;
-        console.log("stickiness set to magnetized");
-        break;
-      default:
-        throw new Error("this sticky type does not exist. Types are : none, glue, or magnetized.");
+    case "none":
+      this.shouldMagnetize = false;
+      this.shouldStick = false;
+      console.log("Parambox: stickiness set to none");
+      break;
+    case "glue":
+      this.shouldStick = true;
+      this.shouldMagnetize = false;
+      console.log("stickiness set to glue");
+      break;
+    case "magnetized":
+      this.shouldStick = false;
+      this.shouldMagnetize = true;
+      console.log("stickiness set to magnetized");
+      break;
+    default:
+      throw new Error("this sticky type does not exist. Types are : none, glue, or magnetized.");
 
@@ -429,2 +444,32 @@ }
 
+  /* =============== Helper functions =============== */
+  /**
+   * From http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters?page=1&tab=votes#tab-top
+   * @return {Array} Array containing variables of the location string.
+   */
+  getQueryString() {
+    // This function is anonymous, is executed immediately and 
+    // the return value is assigned to QueryString!
+    var query_string = {};
+    var query = window.location.search.substring(1);
+    var vars = query.split("&");
+    for (var i = 0; i < vars.length; i++) {
+      var pair = vars[i].split("=");
+      // If first entry with this name
+      if (typeof query_string[pair[0]] === "undefined") {
+        query_string[pair[0]] = decodeURIComponent(pair[1]);
+        // If second entry with this name
+      } else if (typeof query_string[pair[0]] === "string") {
+        var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
+        query_string[pair[0]] = arr;
+        // If third or later entry with this name
+      } else {
+        query_string[pair[0]].push(decodeURIComponent(pair[1]));
+      }
+    }
+    return query_string;
+  }
+
+  /* ======== Static ======== */
+  // TODO make non static probably
   // some static helper functions
@@ -490,3 +535,4 @@ static stayInWindow(element) {
       nextbutton: '<button type="button" class="btn btn-secondary smartmodal-nextbutton">Next</button>',
-      blankbutton: '<button type="button" class="btn btn-secondary smartmodal-blankbutton"></button>'
+      blankbutton: '<button type="button" class="btn btn-secondary smartmodal-blankbutton"></button>',
+      sendbutton: '<button type="button" class="btn btn-secondary smartmodal-sendbutton">Send</button>',
     };
@@ -498,3 +544,4 @@ this.DEFAULT_FORMAT_TYPES = {
       centralLarge: [0.2, 0.7, 0.6],
-      across: [0.3, 1, 0.4]
+      across: [0.3, 1, 0.4],
+      overlay: [0.1, 0.1, 0.8]
     };
@@ -533,3 +580,3 @@
     var smartModalObject = this;
-    $(window).resize(function() {
+    $(window).resize(function () {
       smartModalObject.updatePosition();
@@ -539,3 +586,3 @@ });
     // event listener on the button
-    $(this.button).click(function() {
+    $(this.button).click(function () {
       smartModalObject.callThenDestroy();
@@ -572,3 +619,3 @@ });
       top: topPos
-    }, 25, function() {});
+    }, 25, function () {});
     return false;
@@ -586,2 +633,28 @@ }
 
+    this.PARAMBOX_EMPTY_ROW_HTML = '<div class="col-md-12 dragbox-row parambox-empty"><center>No parameters binded.</center></div>';
+
+    this.DEFAULT_BUTTON_ROW_HTML = '<div class="col-xs-12 dragbox-row parambox-buttonrow"></div>';
+    this.DEFAULT_BUTTON_HTML = {
+      savebutton: '<button type="button" class="btn btn-secondary btn-block parambox-savebutton">Save</button>',
+      importbutton: '<button type="button" class="btn btn-secondary  btn-block parambox-importbutton">Import</button>',
+      reloadbutton: '<button type="button" class="btn btn-secondary btn-block parambox-reloadbutton">Reload</button>'
+    };
+
+    // setup the buttons
+    this.append(this.DEFAULT_BUTTON_ROW_HTML, ".dragbox-footer");
+    this.append(this.DEFAULT_BUTTON_HTML.savebutton, ".parambox-buttonrow", "col-xs-4");
+    this.append(this.DEFAULT_BUTTON_HTML.importbutton, ".parambox-buttonrow", "col-xs-4");
+    this.append(this.DEFAULT_BUTTON_HTML.reloadbutton, ".parambox-buttonrow", "col-xs-4");
+
+    var thisObject = this;
+    this.boxElement[0].getElementsByClassName("parambox-savebutton")[0].addEventListener("click", function (e) {
+      thisObject.save(e);
+    });
+    this.boxElement[0].getElementsByClassName("parambox-importbutton")[0].addEventListener("click", function (e) {
+      thisObject.import(e);
+    });
+    this.boxElement[0].getElementsByClassName("parambox-reloadbutton")[0].addEventListener("click", function (e) {
+      thisObject.reloadAndImport(e);
+    });
+
     // ui
@@ -599,2 +672,16 @@ this.rowHtml = this.DEFAULT_ROW_HTML;
 
+    // set prefix for exports TODO: IMPLEMENT IT IN EXPORTS
+    if (typeof window.paramPrefixIncrement === "undefined") {
+      window.paramPrefixIncrement = 0;
+    } else {
+      window.paramPrefixIncrement += 1;
+    }
+
+    this.prefix = "paramBox" + window.paramPrefixIncrement;
+
+    // update size and refreshView
+    this.updateSize();
+
+    this.refreshView();
+
   }
@@ -609,33 +696,10 @@
     var objectHierarchy = null;
-    if (properties.constructor === Array) {
-      for (var i = 0; i < properties.length; i++) {
 
-        objectHierarchy = this.getDescendantProp(object, properties[i]);
-        var objectTemp = objectHierarchy[0];
-        var property = objectHierarchy[1];
+    if (properties.constructor !== Array) {
+      properties = [properties];
+    }
 
-        var rowDom = this.newRowInDom();
-        var bindedField = null;
+    for (var i = 0; i < properties.length; i++) {
 
-        // look for a constrained field
-        if (constraints !== null) {
-          if (typeof constraints[properties[i]] != 'undefined') {
-            var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', constraints[properties[i]]);
-          }
-        }
-
-        // if not constrained field found, create the most relevant type of field
-        if (!bindedField) {
-          if (objectTemp[property].constructor === Boolean) {
-            var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', ["TRUE", "FALSE"]);
-          } else {
-            var bindedField = new BindedField(objectTemp, property, rowDom);
-          }
-        }
-
-        this.rows.push(this.getBindedRow(rowDom, bindedField));
-      }
-    } else {
-
-      objectHierarchy = this.getDescendantProp(object, properties);
+      objectHierarchy = this.getDescendantProp(object, properties[i]); // TODO use lodash ?
       var objectTemp = objectHierarchy[0];
@@ -647,15 +711,35 @@ var property = objectHierarchy[1];
 
+      /* --- look for a value in the query string for this property --- */
+      var initialValue = null;
+      if (typeof this.queryString[property] !== "undefined") {
+        initialValue = this.queryString[property];
+      }
+
       // look for a constrained field
       if (constraints !== null) {
-        if (typeof constraints[properties] !== 'undefined') {
-          var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', constraints[properties]);
+        if (typeof constraints[properties[i]] != 'undefined') {
+          var constraintValues = constraints[properties[i]];
+
+          if (initialValue !== null) {
+            if (constraintValues.indexOf(initialValue) === -1) {
+              throw new Error("ParamBox.bind: cannot set initial value to query string value of " + initialValue + " because it is not in the constraints array.");
+            }
+
+            objectTemp[property] = initialValue;
+          }
+
+          var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', constraintValues);
         }
       }
 
-      // if not constrained field found, create the most relevant type of field
+      // if no constrained field found, create the most relevant type of field
       if (!bindedField) {
+        if (initialValue !== null) {
+          objectTemp[property] = initialValue;
+        }
+
         if (objectTemp[property].constructor === Boolean) {
-          var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', ["TRUE", "FALSE"]);
+          var bindedField = new BindedField(objectTemp, property, rowDom, 'selector', ["TRUE", "FALSE"], initialValue);
         } else {
-          var bindedField = new BindedField(objectTemp, property, rowDom);
+          var bindedField = new BindedField(objectTemp, property, rowDom, 'input', null, initialValue);
         }
@@ -667,2 +751,4 @@ }
 
+    this.refreshView();
+
   }
@@ -679,5 +765,11 @@
     }
+
+    this.refreshView();
   }
 
   // ui methods
+  addExportButton() {
+
+  }
+
   newRowInDom() {
@@ -700,5 +792,20 @@ var row = null;
   refreshView() {
-    // check if all binded field are displayed in the paramBox
-    // if not add them
-    // get rid of unbinded field
+    // TODO: maybe check if all binded field are displayed in the paramBox. if not add them. get rid of unbinded field
+
+    /* --- Add an export button if there is at least one binded property --- */
+    if (this.rows.length) {
+      this.boxElement[0].getElementsByClassName("parambox-buttonrow")[0].style.visibility = "visible";
+    } else {
+      this.boxElement[0].getElementsByClassName("parambox-buttonrow")[0].style.visibility = "hidden";
+      //TODO: add empty message
+    }
+
+    /* --- Adapt the box's height to the number of parameters --- */
+    var height = 80 + this.rows.length * 75;
+    if (height > 600) {
+      height = 600;
+    }
+
+    this.height = height;
+
   }
@@ -725,2 +832,86 @@
 
+  /* ======== Import/Export functions ======== */
+  getSummaryArray() {
+    var summaryArray = [];
+    for (var i = 0; i < this.rows.length; i++) {
+      var bindedField = this.rows[i].bindedField;
+      summaryArray.push({
+        property: bindedField.property,
+        value: bindedField.value
+      });
+    }
+
+    return (summaryArray);
+  }
+
+  import (event) {
+    // make it a smart form 
+    // but while smart forms are finished use a simple prompt
+    var importedString = prompt("Enter a JSON string:");
+    var importedJSON = null;
+    try {
+      importedJSON = JSON.parse(importedString);
+    } catch (e) {
+      console.error("ParamBox.import: Invalid JSON string - Parsing error:", e);
+    }
+
+    if (importedJSON !== null) {
+      if (importedJSON.constructor !== Array) {
+        console.error("ParamBox.import: Invalid JSON string - the parent object needs to be of the same structure as the summaryArray");
+      }
+
+      for (var i = 0; i < importedJSON.length; i++) {
+        if (typeof importedJSON[i].property === "undefined") {
+          console.error("ParamBox.import: importedJSON[" + i + "].property is undefined. Invalid JSON string - the parent object needs to be of the same structure as the summaryArray.");
+        }
+        if (typeof importedJSON[i].value === "undefined") {
+          console.error("ParamBox.import: importedJSON[" + i + "].value is undefined. Invalid JSON string - the parent object needs to be of the same structure as the summaryArray.");
+        }
+
+        this.setProperty(importedJSON[i].property, importedJSON[i].value);
+      }
+    }
+  }
+
+  save(event) {
+    // get summary array
+    var summaryArray = this.getSummaryArray();
+
+    // stringify summary object
+    var stringified = JSON.stringify(summaryArray, null, 2);
+
+    // opens a new window with the stringified json
+    var height = 30 + summaryArray.length * 70;
+    if (height > 500) {
+      height = 500;
+    }
+    window.open('data:application/json;' + (window.btoa ? 'base64,' + btoa(stringified) : stringified), "ParamBox.save", "width=400,height=" + height);
+
+  }
+
+  reloadAndImport(event) {
+    /* --- Serialize the parameters in URL format --- */
+
+    var summaryArray = this.getSummaryArray();
+    var str = "";
+    for (var i = 0; i < summaryArray.length; i++) {
+      if (str !== "") {
+        str += "&";
+      }
+      str += summaryArray[i].property + "=" + encodeURIComponent(summaryArray[i].value);
+    }
+
+    /* --- Append the parameters and reload the page --- */
+
+    var url = window.location.href;
+    var questionPosition = url.indexOf("?");
+    if (questionPosition !== -1) {
+      // delete arguments from the URL 
+      url = url.substring(0, questionPosition);
+    }
+    url += "?" + str;
+    window.location.href = url;
+
+  }
+
   /**
@@ -754,4 +945,63 @@ * Gets the last object and property from a string description of object hierachy
 
+  setProperty(property, value) {
+    if (property.constructor !== String) {
+      throw new Error("ParamBox.setProperty: property needs to be a string.");
+    }
+
+    var found = false;
+    for (var i = 0; i < this.rows.length; i++) {
+      if (this.rows[i].bindedField.property === property) {
+        this.rows[i].bindedField.value = value;
+        found = true;
+      }
+    }
+
+    if (found === false) {
+      console.warn("ParamBox.setProperty: did not find property " + property);
+    }
+  }
+
 }
 
+/** TODO: Class generating a form based on preset fields and managing */
+// class SmartForm extends SmartModal {
+//   constructor(fields = mandatory(), callback = null, url = null, boxElement = null) {
+//     if (fields.constructor !== Object) {
+//       throw new Error("SmartForm: fields is not an object.");
+//     }
+
+//     /* --- Create the modal for the form --- */
+//     super("overlay", callback, "sendbutton", boxElement);
+
+//     // TODO Create the form element IF url !== null, else only use the callback to handle data. 
+
+//     // constraints can be functions like checkPassword(x) { return (bool) }
+//     this.fields = {};
+//     var keys = _.keys(fields);
+//     for (var i = 0; i < keys.length; i++) {
+//       var key = keys[i];
+//       // fields needs to have a name and type property
+//       if (typeof fields[key].type === "undefined") {
+//         throw new Error("SmartForm: field[" + i + "].type is undefinned");
+//       }
+
+//       var baseField = {
+//         type: null,
+//         constraints: null,
+//         value: "",
+//         bindedField: null
+//       };
+
+//       fields[key] = _.extends(baseField, fields[key]); // TODO Either migrate to lodash or rewrite an extend function as well a a keys function 
+
+//       this.fields[key] = fields[key];
+
+//       // TODO Create a form row
+//       this.fields[key].bindedField = new BindedField(this.fields, key, this.content, this.fields[key].type, this.fields[key].constraints);
+
+//     }
+
+//   }
+// }
+
 class BindedProperty {
@@ -773,3 +1023,3 @@ constructor(object = null, property = null) {
 
-    if (property) {
+    if (property !== null) {
       this.bind(object, property);
@@ -816,10 +1066,10 @@ }
           switch (String(value).toUpperCase()) {
-            case "0":
-              return (false);
-            case "1":
-              return (true);
-            case "FALSE":
-              return (false);
-            case "TRUE":
-              return (true);
+          case "0":
+            return (false);
+          case "1":
+            return (true);
+          case "FALSE":
+            return (false);
+          case "TRUE":
+            return (true);
           }
@@ -876,27 +1126,27 @@ }
     switch (this.fieldType) {
-      case 'input':
-        this.fieldHTML = '<fieldset class="form-group">' +
-          '<label>' + property + '</label>' +
-          '<input type="text" class="form-control ' + this.tempClass + '" data-binded="' + property + '">' +
-          '</fieldset>';
-        break;
-      case 'selector':
-        if (!allowedValues) {
-          throw new Error("fieldType selector needs at least one allowedValues");
-        }
+    case 'input':
+      this.fieldHTML = '<fieldset class="form-group">' +
+        '<label>' + property + '</label>' +
+        '<input type="text" class="form-control ' + this.tempClass + '" data-binded="' + property + '">' +
+        '</fieldset>';
+      break;
+    case 'selector':
+      if (!allowedValues) {
+        throw new Error("fieldType selector needs at least one allowedValues");
+      }
 
-        this.fieldHTML = '<fieldset class="form-group">' +
-          '<label>' + property + '</label>' +
-          '<select class="form-control ' + this.tempClass + '" data-binded="' + property + '">';
+      this.fieldHTML = '<fieldset class="form-group">' +
+        '<label>' + property + '</label>' +
+        '<select class="form-control ' + this.tempClass + '" data-binded="' + property + '">';
 
-        for (var i = 0; i < this.allowedValues.length; i++) {
-          this.fieldHTML = this.fieldHTML +
-            '<option value="' + this.allowedValues[i] + '">' + this.allowedValues[i] + '</option>';
-        }
-        this.fieldHTML = this.fieldHTML + '</select></fieldset>';
-        break;
-      case 'slider':
-        break;
-      default:
-        throw new Error("fieldType is invalid : input, selector and slider are the only valid type for now");
+      for (var i = 0; i < this.allowedValues.length; i++) {
+        this.fieldHTML = this.fieldHTML +
+          '<option value="' + this.allowedValues[i] + '">' + this.allowedValues[i] + '</option>';
+      }
+      this.fieldHTML = this.fieldHTML + '</select></fieldset>';
+      break;
+    case 'slider':
+      break;
+    default:
+      throw new Error("fieldType is invalid : input, selector and slider are the only valid type for now");
     }
@@ -921,3 +1171,7 @@
       if (this.allowedValues.constructor === Array) {
-        this.field.val(this.allowedValues[0]);
+        if (this.allowedValues.indexOf(this.value) !== -1) {
+          this.field.val(this.value);
+        } else {
+          this.field.val(this.allowedValues[0]);
+        }
       } else {
@@ -933,11 +1187,11 @@ this.field.val(this.value);
     // add event listener on change
-    this.field.change(function(e) {
+    this.field.change(function (e) {
       thisObject.update("field");
     });
-    this.field.keydown(function(e) {
+    this.field.keydown(function (e) {
       switch (e.keyCode) {
-        case 13:
-          /* Pressed enter */
-          thisObject.update("field");
-          break;
+      case 13:
+        /* Pressed enter */
+        thisObject.update("field");
+        break;
       }
@@ -944,0 +1198,0 @@

dist/paramBox.min.js

@@ -1,1 +0,1 @@
-"use strict";function _possibleConstructorReturn(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function mandatory(){var t=arguments.length<=0||void 0===arguments[0]?"":arguments[0];throw new Error("Missing parameter "+t)}var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},_createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),DragBox=function(){function t(){var e=arguments.length<=0||void 0===arguments[0]?null:arguments[0],i=arguments.length<=1||void 0===arguments[1]?null:arguments[1],n=arguments.length<=2||void 0===arguments[2]?null:arguments[2];_classCallCheck(this,t),this.MAX_BINDED_PROPERTIES=15,this.INIT_WIDTH=i?i:400,this.INIT_HEIGHT=n?n:300,this.DEFAULT_BOX_CLASS="dragbox",this.DEFAULT_DRAGGABLE=!0,this.DEFAULT_STICKINESS_TYPE="magnetized",this.boxId=null,this.boxElement=e,this.draggable=this.DEFAULT_DRAGGABLE,this.boxHTML=null,this.shouldStick=null,this.shouldMagnetize=null,this.isStickingX=null,this.isStickingY=null,this.stickiness=this.DEFAULT_STICKINESS_TYPE,this._beingDragged=!1,this._visibility="hidden",this._overflow="hidden",this._boxClass=this.DEFAULT_BOX_CLASS,this._width=this.INIT_WIDTH,this._height=this.INIT_HEIGHT,this.map=[],this.currentMousePos={x:-1,y:-1};var o=this;$(document).mousemove(function(t){o.currentMousePos.x=t.pageX,o.currentMousePos.y=t.pageY}),this.boxElement?this.boxId=$(this.boxElement).attr("id"):(this.boxId="dragbox"+($("."+this._boxClass).length+1),this.boxHTML='<div id="'+this.boxId+'" class="'+this._boxClass+'" style="opacity:0.0;" draggable="true"><div class="col-xs-12 dragbox-container"><div class="col-xs-12 dragbox-title"><center><h3>Dragbox</h3></center></div><div class="col-xs-12 dragbox-content"></div><div class="col-xs-12 dragbox-footer"></div></div></div>',$(document.body).append(this.boxHTML),this.boxElement=$("#"+this.boxId)),this.boxClass=$(this.boxElement).attr("class"),this.width=this._width,this.height=this._height,this.overflow="hidden",$(document.body).keydown(function(t){o.keyfunction(t)}),$(document.body).keyup(function(t){o.keyfunction(t)}),$(this.boxElement).find(".dragbox-title").mousedown(function(t){o.startDrag(t)}),$(this.boxElement).find(".dragbox-title").mouseup(function(t){o.stopDrag(t)}),$(document).click(function(t){o.stopDrag(t)})}return _createClass(t,[{key:"destroy",value:function(){var t=this;$(this.boxElement).animate({opacity:0},25,function(){$(t.boxElement).remove()})}},{key:"updateSize",value:function(){$(this.boxElement).width(this.width),$(this.boxElement).height(this.height);var t=this.height-$(this.boxElement).find(".dragbox-title").height()-$(this.boxElement).find(".dragbox-footer").height(),e=this;$(this.boxElement).animate({height:e.height,width:e.width},25,function(){}),$(this.boxElement).find(".dragbox-container").animate({height:e.height},25,function(){}),$(this.boxElement).find(".dragbox-content").animate({height:t},25,function(){})}},{key:"startDrag",value:function(t){if(t.preventDefault(),"true"==this.beingDragged)return void(this.beingDragged=!1);if(this.draggable){var e={x:t.clientX-$(this.boxElement).offset().left,y:t.clientY-$(this.boxElement).offset().top};return this.beingDragged=!0,this.loopDrag(e),!1}}},{key:"stopDrag",value:function(){this.beingDragged=!1}},{key:"loopDrag",value:function(t){if(this.beingDragged===!0){var e=this.currentMousePos.x-t.x,i=this.currentMousePos.y-t.y,n={offsetLeft:e,offsetTop:i,offsetWidth:$(this.boxElement).width(),offsetHeigth:$(this.boxElement).height()},o=ParamBox.stayInWindow(n),s=o.x,r=o.y;this.shouldStick&&(o.stickyX!=-2&&2!=o.stickyX||(this.isStickingX=!0),this.isStickingX&&0!==o.stickyX&&(s=o.leftSticky),0===o.stickyX&&(this.isStickingX=!1),o.stickyY!=-2&&2!=o.stickyY||(this.isStickingY=!0),this.isStickingY&&0!==o.stickyY&&(r=o.topSticky),0===o.stickyY&&(this.isStickingY=!1)),this.shouldMagnetize&&(s=o.leftSticky,r=o.topSticky);var l=this;return $(this.boxElement).animate({left:s,top:r},25,function(){l.loopDrag(t)}),!1}}},{key:"keyfunction",value:function(t){console.log("keyEvent dragbox method")}},{key:"toggle",value:function(){"hidden"==this.visibility?this.visibility="visible":this.visibility="hidden"}},{key:"show",value:function(){this.visibility="visible"}},{key:"hide",value:function(){this.visibility="hidden"}},{key:"append",value:function(t){var e=arguments.length<=1||void 0===arguments[1]?".dragbox-content":arguments[1];this.boxElement&&("container"!=e?this.boxElement.find(e).append(t):this.boxElement.append(t))}},{key:"width",set:function(t){this._width=t,this.updateSize()},get:function(){return this._width}},{key:"height",set:function(t){this._height=t,this.updateSize()},get:function(){return this._height}},{key:"beingDragged",set:function(t){this._beingDragged=t,$(this.boxElement).attr("beingDragged",t)},get:function(){return this._beingDragged}},{key:"boxClass",set:function(t){if(this.boxElement){if("string"!=typeof t)throw new Error("newClass must be a string");var e=t.indexOf(" ");e!=-1&&(t=t.substr(0,e)),this.boxElement.removeClass(this.boxClass).addClass(t),this._boxClass=t}},get:function(){if(this.boxElement)return this._boxClass}},{key:"visibility",set:function(t){this._visibility=t,"visible"==t?$(this.boxElement).animate({opacity:1},150):$(this.boxElement).animate({opacity:0},150)},get:function(){return this._visibility}},{key:"overflow",set:function(t){this._overflow=t,$(this.boxElement).find(".dragbox-content").css("overflow-y",t)},get:function(){return this._overflow}},{key:"stickiness",get:function(){return this._stickiness},set:function(t){switch(t){case"none":this.shouldMagnetize=!1,this.shouldStick=!1,console.log("Parambox: stickiness set to none");break;case"glue":this.shouldStick=!0,this.shouldMagnetize=!1,console.log("stickiness set to glue");break;case"magnetized":this.shouldStick=!1,this.shouldMagnetize=!0,console.log("stickiness set to magnetized");break;default:throw new Error("this sticky type does not exist. Types are : none, glue, or magnetized.")}this._stickiness=t}},{key:"title",get:function(){this.boxElement&&$(this.boxElement).find(".dragbox-title").html()},set:function(t){this.boxElement&&$(this.boxElement).find(".dragbox-title").html(t)}},{key:"content",set:function(t){this.boxElement&&this.contentDiv.html(t)},get:function(){if(this.boxElement)return this.contentDiv.html()}},{key:"contentDiv",get:function(){if(this.boxElement)return $(this.boxElement).find(".dragbox-content")}}],[{key:"stayInWindow",value:function(t){if("undefined"==typeof t)throw new Error("element is undefined");var e=.15,i=t.offsetLeft,n=t.offsetLeft+t.offsetWidth,o=t.offsetTop,s=t.offsetTop+t.offsetHeigth,r=window.innerWidth-t.offsetWidth,l=window.innerHeight-t.offsetHeigth;return{x:i<0?0:n>window.innerWidth?r:i,y:o<0?0:s>window.innerHeight?l:o,stickyX:i<=0?-2:i<=e*t.offsetWidth?-1:n>=window.innerWidth?2:n>=window.innerWidth-e*t.offsetWidth?1:0,stickyY:o<=0?-2:o<=e*t.offsetHeigth?-1:s>=window.innerHeight?2:s>=window.innerHeight-e*t.offsetHeigth?1:0,leftSticky:i<=0?0:i<=e*t.offsetWidth?0:n>=window.innerWidth?window.innerWidth-t.offsetWidth:n>=window.innerWidth-e*t.offsetWidth?window.innerWidth-t.offsetWidth:i,topSticky:o<=0?0:o<=e*t.offsetHeigth?0:s>=window.innerHeight?window.innerHeight-t.offsetHeigth:s>=window.innerHeight-e*t.offsetHeigth?window.innerHeight-t.offsetHeigth:o}}},{key:"getCoordinateInWindow",value:function(t){var e=t.offsetLeft,i=t.offsetLeft+t.offsetWidth,n=t.offsetTop,o=t.offsetTop+t.offsetHeigth,s=window.innerWidth-t.offsetWidth,r=window.innerHeight-t.offsetHeigth;return{left:e,right:i,top:n,bottom:o,maxLeft:s,maxTop:r}}},{key:"stickiness",get:function(){}},{key:"title",get:function(){}}]),t}(),SmartModal=function(t){function e(){var t=arguments.length<=0||void 0===arguments[0]?"across":arguments[0],i=arguments.length<=1||void 0===arguments[1]?null:arguments[1],n=arguments.length<=2||void 0===arguments[2]?"closebutton":arguments[2],o=arguments.length<=3||void 0===arguments[3]?null:arguments[3];_classCallCheck(this,e);var s=_possibleConstructorReturn(this,Object.getPrototypeOf(e).call(this,o));if(s.DEFAULT_BUTTON_ROW_HTML='<div class="col-xs-12 dragbox-row smartmodal-buttonrow"></div>',s.DEFAULT_BUTTON_HTML={closebutton:'<button type="button" class="btn btn-secondary smartmodal-closebutton">Close</button>',nextbutton:'<button type="button" class="btn btn-secondary smartmodal-nextbutton">Next</button>',blankbutton:'<button type="button" class="btn btn-secondary smartmodal-blankbutton"></button>'},s.DEFAULT_FORMAT_TYPES={centralSmall:[.2,.4,.3],centralLarge:[.2,.7,.6],across:[.3,1,.4]},s.callback=i,s.draggable=!1,s.formatType=t,s.buttonRowHtml=s.DEFAULT_BUTTON_ROW_HTML,!(n in s.DEFAULT_BUTTON_HTML))throw new Error("buttonType invalid");s.buttonType=n,s.rows=[],s.title="<center><h5>Smart Modal</h5></center>",s.append(s.buttonRowHtml,".dragbox-footer"),s.append(s.DEFAULT_BUTTON_HTML[s.buttonType],".smartmodal-buttonrow"),s.button=$(s.boxElement).find(".smartmodal-"+s.buttonType),s.updatePosition(),s.show();var r=s;return $(window).resize(function(){r.updatePosition()}),$(s.button).click(function(){r.callThenDestroy()}),s}return _inherits(e,t),_createClass(e,[{key:"callThenDestroy",value:function(){this.callback&&this.callback(),this.destroy()}},{key:"updatePosition",value:function(){var t=window.innerHeight,e=window.innerWidth,i=this.DEFAULT_FORMAT_TYPES[this.formatType],n=i[0]*t,o=e*(1-i[1])/2,s=e*i[1],r=t*i[2];return this.width=s,this.height=r,$(this.boxElement).animate({left:o,top:n},25,function(){}),!1}}]),e}(DragBox),ParamBox=function(t){function e(){var t=arguments.length<=0||void 0===arguments[0]?null:arguments[0];_classCallCheck(this,e);var i=_possibleConstructorReturn(this,Object.getPrototypeOf(e).call(this,t));return i.DEFAULT_ROW_HTML='<div class="col-md-12 dragbox-row paramboxtmprow"></div>',i.rowHtml=i.DEFAULT_ROW_HTML,i.rows=[],i.title='<h5><i class="fa fa-cog fa-1x"></i> Parameter Box</h5>',i.overflow="scroll",i}return _inherits(e,t),_createClass(e,[{key:"bind",value:function(t,e){var i=arguments.length<=2||void 0===arguments[2]?null:arguments[2];if("undefined"==typeof t)throw new Error("object is undefined");var n=null;if(e.constructor===Array)for(var o=0;o<e.length;o++){n=this.getDescendantProp(t,e[o]);var s=n[0],r=n[1],l=this.newRowInDom(),a=null;if(null!==i&&"undefined"!=typeof i[e[o]])var a=new BindedField(s,r,l,"selector",i[e[o]]);if(!a)if(s[r].constructor===Boolean)var a=new BindedField(s,r,l,"selector",["TRUE","FALSE"]);else var a=new BindedField(s,r,l);this.rows.push(this.getBindedRow(l,a))}else{n=this.getDescendantProp(t,e);var s=n[0],r=n[1],l=this.newRowInDom(),a=null;if(null!==i&&"undefined"!=typeof i[e])var a=new BindedField(s,r,l,"selector",i[e]);if(!a)if(s[r].constructor===Boolean)var a=new BindedField(s,r,l,"selector",["TRUE","FALSE"]);else var a=new BindedField(s,r,l);this.rows.push(this.getBindedRow(l,a))}}},{key:"unbind",value:function(t,e){for(var i=0;i<this.rows.length;i++){var n=this.rows[i].bindedField;n.object===t&&n.property==e&&(this.rows.splice(i,1),n.delete())}}},{key:"newRowInDom",value:function(){var t=null;return $(this.boxElement).find(".dragbox-content").append(this.rowHtml),t=this.boxElement.find(".paramboxtmprow"),$(t).removeClass("paramboxtmprow"),t}},{key:"getBindedRow",value:function(t,e){return{rowDom:t,bindedField:e}}},{key:"refreshView",value:function(){}},{key:"keyfunction",value:function(t){this.map[t.keyCode]="keydown"==t.type,this.map[16]&&this.map[80]&&(this.map[80]=!1,this.toggle(),t.preventDefault())}},{key:"getDescendantProp",value:function(t,e){for(var i=e.split("."),n=null,o=null;i.length;){if(n=t,o=i.shift(),"undefined"==typeof t[o])throw new Error("object property "+o+" is undefined");t=t[o]}var s=t;return[n,o,s]}}]),e}(DragBox),BindedProperty=function(){function t(){var e=arguments.length<=0||void 0===arguments[0]?null:arguments[0],i=arguments.length<=1||void 0===arguments[1]?null:arguments[1];_classCallCheck(this,t),this.HANDLED_VARIABLE_TYPES=["number","string","boolean"],this.property=i,this.object=e,this.propagate=!1,this.type=null,this.object||(this.object=window),i&&this.bind(e,i)}return _createClass(t,[{key:"bind",value:function(t,e){var i=_typeof(this.object[this.property]);if("undefined"===i)throw new Error("Parambox: The variable '"+e+"' you are trying to bind is undefined - either this object or the property is not defined");if(this.HANDLED_VARIABLE_TYPES.indexOf(i)==-1)throw new Error("The variable you are trying to bind is of a non-handled type (string, number or boolean");this.property=e,this.object=t,this.type=this.object[this.property].constructor}},{key:"convertToType",value:function(t){if(this.type){if(this.type===Boolean)switch(String(t).toUpperCase()){case"0":return!1;case"1":return!0;case"FALSE":return!1;case"TRUE":return!0}return this.type(t)}throw new Error("You are trying to convert a value to a the type of the binded property but the object has no property binded to it (or no type)")}},{key:"value",set:function(t){if("undefined"==typeof this.object[this.property])throw new Error("The variable you are trying to bind is undefined - either this object or the property is incorrect");this.object[this.property]=this.convertToType(t)},get:function(){if("undefined"==typeof this.object[this.property])throw new Error("The variable you are trying to bind is undefined - either this object or the property is incorrect");return this.object[this.property]}}]),t}(),BindedField=function(t){function e(){var t=arguments.length<=0||void 0===arguments[0]?mandatory("object"):arguments[0],i=arguments.length<=1||void 0===arguments[1]?mandatory("property"):arguments[1],n=arguments.length<=2||void 0===arguments[2]?null:arguments[2],o=arguments.length<=3||void 0===arguments[3]?"input":arguments[3],s=arguments.length<=4||void 0===arguments[4]?null:arguments[4];_classCallCheck(this,e);var r=_possibleConstructorReturn(this,Object.getPrototypeOf(e).call(this,t,i));switch(r.VALID_FIELD_TYPE=["input","selector","slider"],r.field=null,r.fieldType=o,r.fieldHTML=null,r.allowedValues=s,r.tempClass="binded-"+("undefined"==typeof t?"undefined":_typeof(t))+i,r.parent=n,r.fieldType){case"input":r.fieldHTML='<fieldset class="form-group"><label>'+i+'</label><input type="text" class="form-control '+r.tempClass+'" data-binded="'+i+'"></fieldset>';break;case"selector":if(!s)throw new Error("fieldType selector needs at least one allowedValues");r.fieldHTML='<fieldset class="form-group"><label>'+i+'</label><select class="form-control '+r.tempClass+'" data-binded="'+i+'">';for(var l=0;l<r.allowedValues.length;l++)r.fieldHTML=r.fieldHTML+'<option value="'+r.allowedValues[l]+'">'+r.allowedValues[l]+"</option>";r.fieldHTML=r.fieldHTML+"</select></fieldset>";break;case"slider":break;default:throw new Error("fieldType is invalid : input, selector and slider are the only valid type for now")}return n&&r.placeInParent(),r}return _inherits(e,t),_createClass(e,[{key:"placeInParent",value:function(){var t=arguments.length<=0||void 0===arguments[0]?null:arguments[0];t&&(this.parent=t),$(this.parent).append(this.fieldHTML),this.field=$("."+this.tempClass),this.field.removeClass(this.tempClass),this.allowedValues&&this.allowedValues.constructor===Array?this.field.val(this.allowedValues[0]):this.field.val(this.value);var e=this;this.field.change(function(t){e.update("field")}),this.field.keydown(function(t){switch(t.keyCode){case 13:e.update("field")}})}},{key:"delete",value:function(){this.field.parent().remove(),this.property=null,this.object=null}},{key:"update",value:function(){var t=arguments.length<=0||void 0===arguments[0]?"field":arguments[0];"field"==t?(this.value=$(this.field).val(),$(this.field).get(0).blur()):$(this.field).val().toUpperCase()!=String(this.value).toUpperCase()&&$(this.field).val(this.value)}},{key:"value",set:function(t){if("undefined"==typeof this.object[this.property])throw new Error("The variable you are trying to bind is undefined - either this object or the property is incorrect");this.object[this.property]=this.convertToType(t),this.update("setter")},get:function(){if("undefined"==typeof this.object[this.property])throw new Error("The variable you are trying to bind is undefined - either this object or the property is incorrect");return this.object[this.property]}}]),e}(BindedProperty);
+"use strict";function _possibleConstructorReturn(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function mandatory(){var t=arguments.length<=0||void 0===arguments[0]?"":arguments[0];throw new Error("Missing parameter "+t)}var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},_createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),DragBox=function(){function t(){var e=arguments.length<=0||void 0===arguments[0]?null:arguments[0],i=arguments.length<=1||void 0===arguments[1]?null:arguments[1],n=arguments.length<=2||void 0===arguments[2]?null:arguments[2];_classCallCheck(this,t),this.MAX_BINDED_PROPERTIES=15,this.INIT_WIDTH=i?i:400,this.INIT_HEIGHT=n?n:300,this.DEFAULT_BOX_CLASS="dragbox",this.DEFAULT_DRAGGABLE=!0,this.DEFAULT_STICKINESS_TYPE="magnetized",this.boxId=null,this.boxElement=e,this.draggable=this.DEFAULT_DRAGGABLE,this.boxHTML=null,this.shouldStick=null,this.shouldMagnetize=null,this.isStickingX=null,this.isStickingY=null,this.stickiness=this.DEFAULT_STICKINESS_TYPE,this._beingDragged=!1,this._visibility="hidden",this._overflow="hidden",this._boxClass=this.DEFAULT_BOX_CLASS,this._width=this.INIT_WIDTH,this._height=this.INIT_HEIGHT,this.map=[],this.currentMousePos={x:-1,y:-1};var o=this;$(document).mousemove(function(t){o.currentMousePos.x=t.pageX,o.currentMousePos.y=t.pageY}),this.boxElement?this.boxId=$(this.boxElement).attr("id"):(this.boxId="dragbox"+($("."+this._boxClass).length+1),this.boxHTML='<div id="'+this.boxId+'" class="'+this._boxClass+'" style="opacity:0.0;" draggable="true"><div class="col-xs-12 dragbox-container"><div class="col-xs-12 dragbox-title"><center><h3>Dragbox</h3></center></div><div class="col-xs-12 dragbox-content"></div><div class="col-xs-12 dragbox-footer"></div></div></div>',$(document.body).append(this.boxHTML),this.boxElement=$("#"+this.boxId)),this.boxClass=$(this.boxElement).attr("class"),this.width=this._width,this.height=this._height,this.overflow="hidden",$(document.body).keydown(function(t){o.keyfunction(t)}),$(document.body).keyup(function(t){o.keyfunction(t)}),$(this.boxElement).find(".dragbox-title").mousedown(function(t){o.startDrag(t)}),$(this.boxElement).find(".dragbox-title").mouseup(function(t){o.stopDrag(t)}),$(document).click(function(t){o.stopDrag(t)}),this.queryString=this.getQueryString()}return _createClass(t,[{key:"destroy",value:function(){var t=this;$(this.boxElement).animate({opacity:0},25,function(){$(t.boxElement).remove()})}},{key:"updateSize",value:function(){$(this.boxElement).width(this.width),$(this.boxElement).height(this.height);var t=this.height-$(this.boxElement).find(".dragbox-title").height()-$(this.boxElement).find(".dragbox-footer").height(),e=this;$(this.boxElement).animate({height:e.height,width:e.width},25,function(){}),$(this.boxElement).find(".dragbox-container").animate({height:e.height},25,function(){}),$(this.boxElement).find(".dragbox-content").animate({height:t},25,function(){})}},{key:"startDrag",value:function(t){if(t.preventDefault(),"true"==this.beingDragged)return void(this.beingDragged=!1);if(this.draggable){var e={x:t.clientX-$(this.boxElement).offset().left,y:t.clientY-$(this.boxElement).offset().top};return this.beingDragged=!0,this.loopDrag(e),!1}}},{key:"stopDrag",value:function(){this.beingDragged=!1}},{key:"loopDrag",value:function(t){if(this.beingDragged===!0){var e=this.currentMousePos.x-t.x,i=this.currentMousePos.y-t.y,n={offsetLeft:e,offsetTop:i,offsetWidth:$(this.boxElement).width(),offsetHeigth:$(this.boxElement).height()},o=ParamBox.stayInWindow(n),r=o.x,s=o.y;this.shouldStick&&(o.stickyX!=-2&&2!=o.stickyX||(this.isStickingX=!0),this.isStickingX&&0!==o.stickyX&&(r=o.leftSticky),0===o.stickyX&&(this.isStickingX=!1),o.stickyY!=-2&&2!=o.stickyY||(this.isStickingY=!0),this.isStickingY&&0!==o.stickyY&&(s=o.topSticky),0===o.stickyY&&(this.isStickingY=!1)),this.shouldMagnetize&&(r=o.leftSticky,s=o.topSticky);var a=this;return $(this.boxElement).animate({left:r,top:s},25,function(){a.loopDrag(t)}),!1}}},{key:"keyfunction",value:function(t){console.log("keyEvent dragbox method")}},{key:"toggle",value:function(){"hidden"==this.visibility?this.visibility="visible":this.visibility="hidden"}},{key:"show",value:function(){this.visibility="visible"}},{key:"hide",value:function(){this.visibility="hidden"}},{key:"append",value:function(t){var e=arguments.length<=1||void 0===arguments[1]?".dragbox-content":arguments[1],i=arguments.length<=2||void 0===arguments[2]?null:arguments[2];this.boxElement&&(null!==i&&(t='<div class="'+i+'" >'+t+"</div>"),"container"!=e?this.boxElement.find(e).append(t):this.boxElement.append(t))}},{key:"getQueryString",value:function(){for(var t={},e=window.location.search.substring(1),i=e.split("&"),n=0;n<i.length;n++){var o=i[n].split("=");if("undefined"==typeof t[o[0]])t[o[0]]=decodeURIComponent(o[1]);else if("string"==typeof t[o[0]]){var r=[t[o[0]],decodeURIComponent(o[1])];t[o[0]]=r}else t[o[0]].push(decodeURIComponent(o[1]))}return t}},{key:"width",set:function(t){this._width=t,this.updateSize()},get:function(){return this._width}},{key:"height",set:function(t){this._height=t,this.updateSize()},get:function(){return this._height}},{key:"beingDragged",set:function(t){this._beingDragged=t,$(this.boxElement).attr("beingDragged",t)},get:function(){return this._beingDragged}},{key:"boxClass",set:function(t){if(this.boxElement){if("string"!=typeof t)throw new Error("newClass must be a string");var e=t.indexOf(" ");e!=-1&&(t=t.substr(0,e)),this.boxElement.removeClass(this.boxClass).addClass(t),this._boxClass=t}},get:function(){if(this.boxElement)return this._boxClass}},{key:"visibility",set:function(t){this._visibility=t,"visible"==t?$(this.boxElement).animate({opacity:1},150):$(this.boxElement).animate({opacity:0},150)},get:function(){return this._visibility}},{key:"overflow",set:function(t){this._overflow=t,$(this.boxElement).find(".dragbox-content").css("overflow-y",t)},get:function(){return this._overflow}},{key:"stickiness",get:function(){return this._stickiness},set:function(t){switch(t){case"none":this.shouldMagnetize=!1,this.shouldStick=!1,console.log("Parambox: stickiness set to none");break;case"glue":this.shouldStick=!0,this.shouldMagnetize=!1,console.log("stickiness set to glue");break;case"magnetized":this.shouldStick=!1,this.shouldMagnetize=!0,console.log("stickiness set to magnetized");break;default:throw new Error("this sticky type does not exist. Types are : none, glue, or magnetized.")}this._stickiness=t}},{key:"title",get:function(){this.boxElement&&$(this.boxElement).find(".dragbox-title").html()},set:function(t){this.boxElement&&$(this.boxElement).find(".dragbox-title").html(t)}},{key:"content",set:function(t){this.boxElement&&this.contentDiv.html(t)},get:function(){if(this.boxElement)return this.contentDiv.html()}},{key:"contentDiv",get:function(){if(this.boxElement)return $(this.boxElement).find(".dragbox-content")}}],[{key:"stayInWindow",value:function(t){if("undefined"==typeof t)throw new Error("element is undefined");var e=.15,i=t.offsetLeft,n=t.offsetLeft+t.offsetWidth,o=t.offsetTop,r=t.offsetTop+t.offsetHeigth,s=window.innerWidth-t.offsetWidth,a=window.innerHeight-t.offsetHeigth;return{x:i<0?0:n>window.innerWidth?s:i,y:o<0?0:r>window.innerHeight?a:o,stickyX:i<=0?-2:i<=e*t.offsetWidth?-1:n>=window.innerWidth?2:n>=window.innerWidth-e*t.offsetWidth?1:0,stickyY:o<=0?-2:o<=e*t.offsetHeigth?-1:r>=window.innerHeight?2:r>=window.innerHeight-e*t.offsetHeigth?1:0,leftSticky:i<=0?0:i<=e*t.offsetWidth?0:n>=window.innerWidth?window.innerWidth-t.offsetWidth:n>=window.innerWidth-e*t.offsetWidth?window.innerWidth-t.offsetWidth:i,topSticky:o<=0?0:o<=e*t.offsetHeigth?0:r>=window.innerHeight?window.innerHeight-t.offsetHeigth:r>=window.innerHeight-e*t.offsetHeigth?window.innerHeight-t.offsetHeigth:o}}},{key:"getCoordinateInWindow",value:function(t){var e=t.offsetLeft,i=t.offsetLeft+t.offsetWidth,n=t.offsetTop,o=t.offsetTop+t.offsetHeigth,r=window.innerWidth-t.offsetWidth,s=window.innerHeight-t.offsetHeigth;return{left:e,right:i,top:n,bottom:o,maxLeft:r,maxTop:s}}},{key:"stickiness",get:function(){}},{key:"title",get:function(){}}]),t}(),SmartModal=function(t){function e(){var t=arguments.length<=0||void 0===arguments[0]?"across":arguments[0],i=arguments.length<=1||void 0===arguments[1]?null:arguments[1],n=arguments.length<=2||void 0===arguments[2]?"closebutton":arguments[2],o=arguments.length<=3||void 0===arguments[3]?null:arguments[3];_classCallCheck(this,e);var r=_possibleConstructorReturn(this,Object.getPrototypeOf(e).call(this,o));if(r.DEFAULT_BUTTON_ROW_HTML='<div class="col-xs-12 dragbox-row smartmodal-buttonrow"></div>',r.DEFAULT_BUTTON_HTML={closebutton:'<button type="button" class="btn btn-secondary smartmodal-closebutton">Close</button>',nextbutton:'<button type="button" class="btn btn-secondary smartmodal-nextbutton">Next</button>',blankbutton:'<button type="button" class="btn btn-secondary smartmodal-blankbutton"></button>',sendbutton:'<button type="button" class="btn btn-secondary smartmodal-sendbutton">Send</button>'},r.DEFAULT_FORMAT_TYPES={centralSmall:[.2,.4,.3],centralLarge:[.2,.7,.6],across:[.3,1,.4],overlay:[.1,.1,.8]},r.callback=i,r.draggable=!1,r.formatType=t,r.buttonRowHtml=r.DEFAULT_BUTTON_ROW_HTML,!(n in r.DEFAULT_BUTTON_HTML))throw new Error("buttonType invalid");r.buttonType=n,r.rows=[],r.title="<center><h5>Smart Modal</h5></center>",r.append(r.buttonRowHtml,".dragbox-footer"),r.append(r.DEFAULT_BUTTON_HTML[r.buttonType],".smartmodal-buttonrow"),r.button=$(r.boxElement).find(".smartmodal-"+r.buttonType),r.updatePosition(),r.show();var s=r;return $(window).resize(function(){s.updatePosition()}),$(r.button).click(function(){s.callThenDestroy()}),r}return _inherits(e,t),_createClass(e,[{key:"callThenDestroy",value:function(){this.callback&&this.callback(),this.destroy()}},{key:"updatePosition",value:function(){var t=window.innerHeight,e=window.innerWidth,i=this.DEFAULT_FORMAT_TYPES[this.formatType],n=i[0]*t,o=e*(1-i[1])/2,r=e*i[1],s=t*i[2];return this.width=r,this.height=s,$(this.boxElement).animate({left:o,top:n},25,function(){}),!1}}]),e}(DragBox),ParamBox=function(t){function e(){var t=arguments.length<=0||void 0===arguments[0]?null:arguments[0];_classCallCheck(this,e);var i=_possibleConstructorReturn(this,Object.getPrototypeOf(e).call(this,t));i.DEFAULT_ROW_HTML='<div class="col-md-12 dragbox-row paramboxtmprow"></div>',i.PARAMBOX_EMPTY_ROW_HTML='<div class="col-md-12 dragbox-row parambox-empty"><center>No parameters binded.</center></div>',i.DEFAULT_BUTTON_ROW_HTML='<div class="col-xs-12 dragbox-row parambox-buttonrow"></div>',i.DEFAULT_BUTTON_HTML={savebutton:'<button type="button" class="btn btn-secondary btn-block parambox-savebutton">Save</button>',importbutton:'<button type="button" class="btn btn-secondary  btn-block parambox-importbutton">Import</button>',reloadbutton:'<button type="button" class="btn btn-secondary btn-block parambox-reloadbutton">Reload</button>'},i.append(i.DEFAULT_BUTTON_ROW_HTML,".dragbox-footer"),i.append(i.DEFAULT_BUTTON_HTML.savebutton,".parambox-buttonrow","col-xs-4"),i.append(i.DEFAULT_BUTTON_HTML.importbutton,".parambox-buttonrow","col-xs-4"),i.append(i.DEFAULT_BUTTON_HTML.reloadbutton,".parambox-buttonrow","col-xs-4");var n=i;return i.boxElement[0].getElementsByClassName("parambox-savebutton")[0].addEventListener("click",function(t){n.save(t)}),i.boxElement[0].getElementsByClassName("parambox-importbutton")[0].addEventListener("click",function(t){n.import(t)}),i.boxElement[0].getElementsByClassName("parambox-reloadbutton")[0].addEventListener("click",function(t){n.reloadAndImport(t)}),i.rowHtml=i.DEFAULT_ROW_HTML,i.rows=[],i.title='<h5><i class="fa fa-cog fa-1x"></i> Parameter Box</h5>',i.overflow="scroll","undefined"==typeof window.paramPrefixIncrement?window.paramPrefixIncrement=0:window.paramPrefixIncrement+=1,i.prefix="paramBox"+window.paramPrefixIncrement,i.updateSize(),i.refreshView(),i}return _inherits(e,t),_createClass(e,[{key:"bind",value:function(t,e){var i=arguments.length<=2||void 0===arguments[2]?null:arguments[2];if("undefined"==typeof t)throw new Error("object is undefined");var n=null;e.constructor!==Array&&(e=[e]);for(var o=0;o<e.length;o++){n=this.getDescendantProp(t,e[o]);var r=n[0],s=n[1],a=this.newRowInDom(),l=null,h=null;if("undefined"!=typeof this.queryString[s]&&(h=this.queryString[s]),null!==i&&"undefined"!=typeof i[e[o]]){var d=i[e[o]];if(null!==h){if(d.indexOf(h)===-1)throw new Error("ParamBox.bind: cannot set initial value to query string value of "+h+" because it is not in the constraints array.");r[s]=h}var l=new BindedField(r,s,a,"selector",d)}if(!l)if(null!==h&&(r[s]=h),r[s].constructor===Boolean)var l=new BindedField(r,s,a,"selector",["TRUE","FALSE"],h);else var l=new BindedField(r,s,a,"input",null,h);this.rows.push(this.getBindedRow(a,l))}this.refreshView()}},{key:"unbind",value:function(t,e){for(var i=0;i<this.rows.length;i++){var n=this.rows[i].bindedField;n.object===t&&n.property==e&&(this.rows.splice(i,1),n.delete())}this.refreshView()}},{key:"addExportButton",value:function(){}},{key:"newRowInDom",value:function(){var t=null;return $(this.boxElement).find(".dragbox-content").append(this.rowHtml),t=this.boxElement.find(".paramboxtmprow"),$(t).removeClass("paramboxtmprow"),t}},{key:"getBindedRow",value:function(t,e){return{rowDom:t,bindedField:e}}},{key:"refreshView",value:function(){this.rows.length?this.boxElement[0].getElementsByClassName("parambox-buttonrow")[0].style.visibility="visible":this.boxElement[0].getElementsByClassName("parambox-buttonrow")[0].style.visibility="hidden";var t=80+75*this.rows.length;t>600&&(t=600),this.height=t}},{key:"keyfunction",value:function(t){this.map[t.keyCode]="keydown"==t.type,this.map[16]&&this.map[80]&&(this.map[80]=!1,this.toggle(),t.preventDefault())}},{key:"getSummaryArray",value:function(){for(var t=[],e=0;e<this.rows.length;e++){var i=this.rows[e].bindedField;t.push({property:i.property,value:i.value})}return t}},{key:"import",value:function(t){var e=prompt("Enter a JSON string:"),i=null;try{i=JSON.parse(e)}catch(t){console.error("ParamBox.import: Invalid JSON string - Parsing error:",t)}if(null!==i){i.constructor!==Array&&console.error("ParamBox.import: Invalid JSON string - the parent object needs to be of the same structure as the summaryArray");for(var n=0;n<i.length;n++)"undefined"==typeof i[n].property&&console.error("ParamBox.import: importedJSON["+n+"].property is undefined. Invalid JSON string - the parent object needs to be of the same structure as the summaryArray."),"undefined"==typeof i[n].value&&console.error("ParamBox.import: importedJSON["+n+"].value is undefined. Invalid JSON string - the parent object needs to be of the same structure as the summaryArray."),this.setProperty(i[n].property,i[n].value)}}},{key:"save",value:function(t){var e=this.getSummaryArray(),i=JSON.stringify(e,null,2),n=30+70*e.length;n>500&&(n=500),window.open("data:application/json;"+(window.btoa?"base64,"+btoa(i):i),"ParamBox.save","width=400,height="+n)}},{key:"reloadAndImport",value:function(t){for(var e=this.getSummaryArray(),i="",n=0;n<e.length;n++)""!==i&&(i+="&"),i+=e[n].property+"="+encodeURIComponent(e[n].value);var o=window.location.href,r=o.indexOf("?");r!==-1&&(o=o.substring(0,r)),o+="?"+i,window.location.href=o}},{key:"getDescendantProp",value:function(t,e){for(var i=e.split("."),n=null,o=null;i.length;){if(n=t,o=i.shift(),"undefined"==typeof t[o])throw new Error("object property "+o+" is undefined");t=t[o]}var r=t;return[n,o,r]}},{key:"setProperty",value:function(t,e){if(t.constructor!==String)throw new Error("ParamBox.setProperty: property needs to be a string.");for(var i=!1,n=0;n<this.rows.length;n++)this.rows[n].bindedField.property===t&&(this.rows[n].bindedField.value=e,i=!0);i===!1&&console.warn("ParamBox.setProperty: did not find property "+t)}}]),e}(DragBox),BindedProperty=function(){function t(){var e=arguments.length<=0||void 0===arguments[0]?null:arguments[0],i=arguments.length<=1||void 0===arguments[1]?null:arguments[1];_classCallCheck(this,t),this.HANDLED_VARIABLE_TYPES=["number","string","boolean"],this.property=i,this.object=e,this.propagate=!1,this.type=null,this.object||(this.object=window),null!==i&&this.bind(e,i)}return _createClass(t,[{key:"bind",value:function(t,e){var i=_typeof(this.object[this.property]);if("undefined"===i)throw new Error("Parambox: The variable '"+e+"' you are trying to bind is undefined - either this object or the property is not defined");if(this.HANDLED_VARIABLE_TYPES.indexOf(i)==-1)throw new Error("The variable you are trying to bind is of a non-handled type (string, number or boolean");this.property=e,this.object=t,this.type=this.object[this.property].constructor}},{key:"convertToType",value:function(t){if(this.type){if(this.type===Boolean)switch(String(t).toUpperCase()){case"0":return!1;case"1":return!0;case"FALSE":return!1;case"TRUE":return!0}return this.type(t)}throw new Error("You are trying to convert a value to a the type of the binded property but the object has no property binded to it (or no type)")}},{key:"value",set:function(t){if("undefined"==typeof this.object[this.property])throw new Error("The variable you are trying to bind is undefined - either this object or the property is incorrect");this.object[this.property]=this.convertToType(t)},get:function(){if("undefined"==typeof this.object[this.property])throw new Error("The variable you are trying to bind is undefined - either this object or the property is incorrect");return this.object[this.property]}}]),t}(),BindedField=function(t){function e(){var t=arguments.length<=0||void 0===arguments[0]?mandatory("object"):arguments[0],i=arguments.length<=1||void 0===arguments[1]?mandatory("property"):arguments[1],n=arguments.length<=2||void 0===arguments[2]?null:arguments[2],o=arguments.length<=3||void 0===arguments[3]?"input":arguments[3],r=arguments.length<=4||void 0===arguments[4]?null:arguments[4];_classCallCheck(this,e);var s=_possibleConstructorReturn(this,Object.getPrototypeOf(e).call(this,t,i));switch(s.VALID_FIELD_TYPE=["input","selector","slider"],s.field=null,s.fieldType=o,s.fieldHTML=null,s.allowedValues=r,s.tempClass="binded-"+("undefined"==typeof t?"undefined":_typeof(t))+i,s.parent=n,s.fieldType){case"input":s.fieldHTML='<fieldset class="form-group"><label>'+i+'</label><input type="text" class="form-control '+s.tempClass+'" data-binded="'+i+'"></fieldset>';break;case"selector":if(!r)throw new Error("fieldType selector needs at least one allowedValues");s.fieldHTML='<fieldset class="form-group"><label>'+i+'</label><select class="form-control '+s.tempClass+'" data-binded="'+i+'">';for(var a=0;a<s.allowedValues.length;a++)s.fieldHTML=s.fieldHTML+'<option value="'+s.allowedValues[a]+'">'+s.allowedValues[a]+"</option>";s.fieldHTML=s.fieldHTML+"</select></fieldset>";break;case"slider":break;default:throw new Error("fieldType is invalid : input, selector and slider are the only valid type for now")}return n&&s.placeInParent(),s}return _inherits(e,t),_createClass(e,[{key:"placeInParent",value:function(){var t=arguments.length<=0||void 0===arguments[0]?null:arguments[0];t&&(this.parent=t),$(this.parent).append(this.fieldHTML),this.field=$("."+this.tempClass),this.field.removeClass(this.tempClass),this.allowedValues&&this.allowedValues.constructor===Array?this.allowedValues.indexOf(this.value)!==-1?this.field.val(this.value):this.field.val(this.allowedValues[0]):this.field.val(this.value);var e=this;this.field.change(function(t){e.update("field")}),this.field.keydown(function(t){switch(t.keyCode){case 13:e.update("field")}})}},{key:"delete",value:function(){this.field.parent().remove(),this.property=null,this.object=null}},{key:"update",value:function(){var t=arguments.length<=0||void 0===arguments[0]?"field":arguments[0];"field"==t?(this.value=$(this.field).val(),$(this.field).get(0).blur()):$(this.field).val().toUpperCase()!=String(this.value).toUpperCase()&&$(this.field).val(this.value)}},{key:"value",set:function(t){if("undefined"==typeof this.object[this.property])throw new Error("The variable you are trying to bind is undefined - either this object or the property is incorrect");this.object[this.property]=this.convertToType(t),this.update("setter")},get:function(){if("undefined"==typeof this.object[this.property])throw new Error("The variable you are trying to bind is undefined - either this object or the property is incorrect");return this.object[this.property]}}]),e}(BindedProperty);

package.json

 {
   "name": "parambox",
-  "version": "1.2.6",
-  "description": "Too much parameters to handle ? paramBox is a collection of smart plug and play tools to facilitate the design of javascript games and cognitive tasks.",
+  "version": "1.2.7",
+  "description": "Too much parameters to handle ? paramBox is a collection of smart plug and play tools to facilitate the design of javascript projects such as games and cognitive tasks. ParamBox is one of the helper class and allows to modify key variable on the fly without having to modify the code or reload the page.",
   "main": "lib/paramBox-transpiled-0.2.js",
@@ -35,4 +35,5 @@ "repository": {
     "bootstrap": "^3.3.6",
-    "jquery": "^3.0.0"
+    "jquery": "^3.0.0",
+    "lodash": "^4.15.0"
   }
 }

README.md

@@ -26,3 +26,3 @@ # paramBox
 Then, to install a paramBox :
-
+```
 	<link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"></link>
@@ -49,4 +49,4 @@ <link rel="stylesheet" type="text/css" href="/dist/paramBox.css"></link>
 	</script>
+```
 
-
 A div containing the ParamBox is automatically added to the document's body, to show/hide it, press Shift + P. You ight want to change the url of your imports.
@@ -119,7 +119,8 @@
 
+## Developped in the Bavelier Lab by
+* Albert Buchard
 
-
-## PS
-
-A lot remains to be done! (i'll work on the docs... it takes time sorry !)
+## Contribute
+A lot remains to be done! 
+I'll work on the docs in the next months, JSDOC might help a lot in that regard !
 You are most welcome to land a hand :)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

531208

increased by33.22%

Number of package files

15

increased by7.14%

Lines of code

13610

increased by35.9%

Number of lines in readme file

124

increased by0.81%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedlodash@^4.15.0

• + Addedlodash@4.17.21(transitive)