Merge branch 'refactor-panels'

src/asset_manager/view/AssetsView.js

@@ -20,10 +20,6 @@ module.exports = Backbone.View.extend({
           <button class="${ppfx}btn-prim">${view.config.addBtnText}</button>
           <div style="clear:both"></div>
         </form>
-        <div class="${pfx}dips" style="display:none">
-          <button class="fa fa-th <%${ppfx}btnt"></button>
-          <button class="fa fa-th-list <%${ppfx}btnt"></button>
-        </div>
       </div>
       <div class="${pfx}assets" data-el="assets"></div>
       <div style="clear:both"></div>

src/block_manager/config/config.js

@@ -1,4 +1,8 @@
 module.exports = {
+  // Specify the element to use as a container, string (query) or HTMLElement
+  // With the empty value, nothing will be rendered
+  appendTo: '',
+
   blocks: [],
 
   appendTo: ''

src/block_manager/index.js

@@ -28,6 +28,8 @@
  * }
  * ...
  */
+import { isElement } from 'underscore';
+
 module.exports = () => {
   var c = {},
     defaults = require('./config/config'),
@@ -108,6 +110,15 @@ module.exports = () => {
       !blocks.length && blocks.reset(c.blocks);
     },
 
+    postRender() {
+      const elTo = this.getConfig().appendTo;
+
+      if (elTo) {
+        const el = isElement(elTo) ? elTo : document.querySelector(elTo);
+        el.appendChild(this.render());
+      }
+    },
+
     /**
      * Add new block to the collection.
      * @param {string} id Block id
@@ -199,6 +210,7 @@ module.exports = () => {
      * Render blocks
      * @param  {Array} blocks Blocks to render, without the argument will render
      *                        all global blocks
+     * @return {HTMLElement} Rendered element
      * @example
      * // Render all blocks (inside the global collection)
      * blockManager.render();
@@ -225,6 +237,7 @@ module.exports = () => {
       }
 
       blocksView.collection.reset(toRender);
+      return this.getContainer();
     }
   };
 };

src/block_manager/view/BlocksView.js

@@ -174,6 +174,7 @@ module.exports = require('backbone').View.extend({
   },
 
   render() {
+    const ppfx = this.ppfx;
     const frag = document.createDocumentFragment();
     this.catsEl = null;
     this.blocksEl = null;
@@ -187,7 +188,8 @@ module.exports = require('backbone').View.extend({
 
     this.collection.each(model => this.add(model, frag));
     this.append(frag);
-    this.$el.addClass(this.blockContClass + 's');
+    const cls = `${this.blockContClass}s ${ppfx}one-bg ${ppfx}two-color`;
+    this.$el.addClass(cls);
     return this;
   }
 });

src/canvas/view/CanvasView.js

@@ -128,11 +128,12 @@ module.exports = Backbone.View.extend({
 
         .${ppfx}dashed *[data-highlightable] {
           outline: 1px dashed rgba(170,170,170,0.7);
-          outline-offset: -3px
+          outline-offset: -2px;
         }
 
         .${ppfx}comp-selected {
           outline: 3px solid #3b97e3 !important;
+          outline-offset: -3px;
         }
 
         .${ppfx}comp-selected-parent {
@@ -206,8 +207,8 @@ module.exports = Backbone.View.extend({
       // the keyCode/which will be always `0`. Even if it's an old/deprecated
       // property keymaster (and many others) still use it... using `defineProperty`
       // hack seems the only way
-      const createCustomEvent = e => {
-        var oEvent = new KeyboardEvent(e.type, e);
+      const createCustomEvent = (e, cls) => {
+        var oEvent = new window[cls](e.type, e);
         oEvent.keyCodeVal = e.keyCode;
         ['keyCode', 'which'].forEach(prop => {
           Object.defineProperty(oEvent, prop, {
@@ -218,12 +219,17 @@ module.exports = Backbone.View.extend({
         });
         return oEvent;
       };
-      fdoc.addEventListener('keydown', e => {
-        doc.dispatchEvent(createCustomEvent(e));
-      });
-      fdoc.addEventListener('keyup', e => {
-        doc.dispatchEvent(createCustomEvent(e));
-      });
+
+      [
+        { event: 'keydown keyup', class: 'KeyboardEvent' }
+        //{ event: 'mousedown mousemove mouseup', class: 'MouseEvent' },
+      ].forEach(obj =>
+        obj.event.split(' ').forEach(event => {
+          fdoc.addEventListener(event, e =>
+            doc.dispatchEvent(createCustomEvent(e, obj.class))
+          );
+        })
+      );
     }
   },
 

src/commands/index.js

@@ -204,7 +204,7 @@ module.exports = () => {
             cmdMove.initSorterFromModel(sel);
           }
 
-          sel.set('status', 'selected');
+          sel.set('status', 'freezed-selected');
         }
       };
 

src/commands/view/OpenLayers.js

@@ -2,37 +2,24 @@ const Layers = require('navigator');
 const $ = Backbone.$;
 
 module.exports = {
-  run(em, sender) {
-    if (!this.toAppend) {
-      var collection = em.DomComponents.getComponent().get('components');
-      var config = em.getConfig();
-      var pfx = config.stylePrefix;
-      var panels = em.Panels;
-      const cLayers = { ...config.layers };
-      var lyStylePfx = cLayers.stylePrefix || 'nv-';
+  run(editor) {
+    const lm = editor.LayerManager;
+    const pn = editor.Panels;
 
-      cLayers.stylePrefix = config.stylePrefix + lyStylePfx;
-      cLayers.pStylePrefix = config.stylePrefix;
-      cLayers.em = em.editor;
-      cLayers.opened = em.editor.get('opened');
-
-      // Check if panel exists otherwise crate it
-      if (!panels.getPanel('views-container'))
-        this.panel = panels.addPanel({ id: 'views-container' });
-      else this.panel = panels.getPanel('views-container');
-
-      const toAppend = $(`<div class="${pfx}layers"></div>`);
-      this.panel.set('appendContent', toAppend).trigger('change:appendContent');
-      cLayers.sortContainer = toAppend.get(0);
-      const layers = new Layers().init(collection, cLayers);
-      this.$layers = layers.render();
-      toAppend.append(this.$layers);
-      this.toAppend = toAppend;
+    if (!this.layers) {
+      const id = 'views-container';
+      const layers = document.createElement('div');
+      const panels = pn.getPanel(id) || pn.addPanel({ id });
+      layers.appendChild(lm.render());
+      panels.set('appendContent', layers).trigger('change:appendContent');
+      this.layers = layers;
     }
-    this.toAppend.show();
+
+    this.layers.style.display = 'block';
   },
 
   stop() {
-    this.toAppend && this.toAppend.hide();
+    const layers = this.layers;
+    layers && (layers.style.display = 'none');
   }
 };

src/commands/view/SelectPosition.js

@@ -23,7 +23,7 @@ module.exports = {
         em: this.editorModel,
         canvasRelative: 1
       });
-    this.sorter.startSort(trg);
+    trg && this.sorter.startSort(trg);
   },
 
   /**

src/dom_components/index.js

@@ -513,12 +513,11 @@ module.exports = () => {
       const previousModel = em.previous('selectedComponent');
 
       // Deselect the previous component
-      if (previousModel) {
+      previousModel &&
         previousModel.set({
           status: '',
           state: ''
         });
-      }
 
       model && model.set('status', 'selected');
     }

src/dom_components/view/ComponentView.js

@@ -106,6 +106,7 @@ module.exports = Backbone.View.extend({
     var selectedCls = pfx + 'selected';
     var selectedParentCls = selectedCls + '-parent';
     var freezedCls = `${ppfx}freezed`;
+    this.$el.removeClass(`${selectedCls} ${selectedParentCls} ${freezedCls}`);
     var actualCls = el.getAttribute('class') || '';
     var cls = '';
 
@@ -119,10 +120,9 @@ module.exports = Backbone.View.extend({
       case 'freezed':
         cls = `${actualCls} ${freezedCls}`;
         break;
-      default:
-        this.$el.removeClass(
-          `${selectedCls} ${selectedParentCls} ${freezedCls}`
-        );
+      case 'freezed-selected':
+        cls = `${actualCls} ${freezedCls} ${selectedCls}`;
+        break;
     }
 
     cls = cls.trim();

src/editor/config/config.js

@@ -230,9 +230,12 @@ module.exports = {
     ]
   },
 
-  //Configurations for Block Manager
+  // Configurations for Block Manager
   blockManager: {},
 
+  // Configurations for Trait Manager
+  traitManager: {},
+
   // Texts
 
   textViewCode: 'Code'

src/editor/index.js

@@ -124,6 +124,12 @@ module.exports = config => {
      */
     DomComponents: em.get('DomComponents'),
 
+    /**
+     * @property {LayerManager}
+     * @private
+     */
+    LayerManager: em.get('LayerManager'),
+
     /**
      * @property {CssComposer}
      * @private

src/editor/model/Editor.js

@@ -1,4 +1,4 @@
-import { isUndefined, defaults } from 'underscore';
+import { isUndefined, isElement, defaults } from 'underscore';
 
 const deps = [
   require('utils'),
@@ -17,6 +17,7 @@ const deps = [
   require('css_composer'),
   require('trait_manager'),
   require('dom_components'),
+  require('navigator'),
   require('canvas'),
   require('commands'),
   require('block_manager')
@@ -216,20 +217,14 @@ module.exports = Backbone.Model.extend({
   /**
    * Select a component
    * @param  {Component|HTMLElement} el Component to select
-   * @param  {Object} opts Options, optional
+   * @param  {Object} [opts={}] Options, optional
    * @private
    */
   setSelected(el, opts = {}) {
     let model = el;
-
-    if (el instanceof window.HTMLElement) {
-      model = $(el).data('model');
-    }
-
-    if (model && !model.get('selectable')) {
-      return;
-    }
-
+    isElement(el) && (model = $(el).data('model'));
+    if (model && !model.get('selectable')) return;
+    opts.forceChange && this.set('selectedComponent', '');
     this.set('selectedComponent', model, opts);
   },
 

src/index.js

@@ -1,7 +1,8 @@
 import $ from 'cash-dom';
 import Editor from './editor';
-import PluginManager from './plugin_manager';
+import { isElement } from 'underscore';
 import polyfills from 'utils/polyfills';
+import PluginManager from './plugin_manager';
 
 polyfills();
 
@@ -48,8 +49,7 @@ module.exports = (() => {
       const els = config.container;
       if (!els) throw new Error("'container' is required");
       config = { ...defaultConfig, ...config };
-      const ilEl = els instanceof window.HTMLElement;
-      config.el = ilEl ? els : document.querySelector(els);
+      config.el = isElement(els) ? els : document.querySelector(els);
       const editor = new Editor(config).init();
 
       // Load plugins

src/modal_dialog/index.js

@@ -52,9 +52,9 @@ module.exports = () => {
       return this;
     },
 
-    postRender(editorView) {
-      // c.em.config.el || 'body'
-      this.render().appendTo(editorView.el);
+    postRender(view) {
+      const el = view.model.getConfig().el || view.el;
+      this.render().appendTo(el);
     },
 
     /**

src/modal_dialog/view/ModalView.js

@@ -1,6 +1,6 @@
 module.exports = require('backbone').View.extend({
   template({ pfx, ppfx, content, title }) {
-    return `<div class="${pfx}dialog ${ppfx}one-bg">
+    return `<div class="${pfx}dialog ${ppfx}one-bg ${ppfx}two-color">
       <div class="${pfx}header">
         <div class="${pfx}title">${title}</div>
         <div class="${pfx}btn-close">&Cross;</div>

src/navigator/config/config.js

@@ -1,5 +1,9 @@
 module.exports = {
-  stylePrefix: 'nv-',
+  stylePrefix: '',
+
+  // Specify the element to use as a container, string (query) or HTMLElement
+  // With the empty value, nothing will be rendered
+  appendTo: '',
 
   // Enable/Disable globally the possibility to sort layers
   sortable: 1,