Add the possibility to specify position on sector add via API. Closes #2094

src/style_manager/index.js

@@ -105,19 +105,21 @@ export default () => {
      * @param  {string} [sector.name='']  Sector's label
      * @param  {Boolean} [sector.open=true] Indicates if the sector should be opened
      * @param  {Array<Object>} [sector.properties=[]] Array of properties
+     * @param  {Object} [options={}] Options
      * @return {Sector} Added Sector
      * @example
      * var sector = styleManager.addSector('mySector',{
      *   name: 'My sector',
      *   open: true,
      *   properties: [{ name: 'My property'}]
-     * });
+     * }, { at: 0 });
+     * // With `at: 0` we place the new sector at the beginning of the collection
      * */
-    addSector(id, sector) {
+    addSector(id, sector, opts = {}) {
       var result = this.getSector(id);
       if (!result) {
         sector.id = id;
-        result = sectors.add(sector);
+        result = sectors.add(sector, opts);
       }
       return result;
     },

src/style_manager/view/SectorsView.js

@@ -1,6 +1,7 @@
 import Backbone from 'backbone';
 import { extend, isString } from 'underscore';
 import { isTaggableNode } from 'utils/mixins';
+import { appendAtIndex } from 'utils/dom';
 import SectorView from './SectorView';
 
 export default Backbone.View.extend({
@@ -34,8 +35,8 @@ export default Backbone.View.extend({
    * @return {Object}
    * @private
    * */
-  addTo(model) {
-    this.addToCollection(model);
+  addTo(model, coll, opts = {}) {
+    this.addToCollection(model, null, opts);
   },
 
   /**
@@ -133,10 +134,10 @@ export default Backbone.View.extend({
    * @return {Object} Object created
    * @private
    * */
-  addToCollection(model, fragmentEl) {
-    const { pfx, target, propTarget, config } = this;
-    var fragment = fragmentEl || null;
-    var view = new SectorView({
+  addToCollection(model, fragmentEl, opts = {}) {
+    const { pfx, target, propTarget, config, el } = this;
+    const appendTo = fragmentEl || el;
+    const rendered = new SectorView({
       model,
       id: `${pfx}${model.get('id')}`,
       name: model.get('name'),
@@ -144,14 +145,8 @@ export default Backbone.View.extend({
       target,
       propTarget,
       config
-    });
-    var rendered = view.render().el;
-
-    if (fragment) {
-      fragment.appendChild(rendered);
-    } else {
-      this.$el.append(rendered);
-    }
+    }).render().el;
+    appendAtIndex(appendTo, rendered, opts.at);
 
     return rendered;
   },

src/utils/dom.js

@@ -1,5 +1,5 @@
 // DOM helpers
-import { each } from 'underscore';
+import { each, isUndefined } from 'underscore';
 
 const KEY_TAG = 'tag';
 const KEY_ATTR = 'attributes';
@@ -9,6 +9,18 @@ export const empty = node => {
   while (node.firstChild) node.removeChild(node.firstChild);
 };
 
+export const appendAtIndex = (parent, child, index) => {
+  const { childNodes } = parent;
+  const total = childNodes.length;
+  const at = isUndefined(index) ? total : index;
+
+  if (at >= total) {
+    parent.appendChild(child);
+  } else {
+    parent.insertBefore(child, childNodes[at]);
+  }
+};
+
 /**
  * Append an array of vNodes to an element
  * @param {HTMLElement} node HTML element