Change the order of components rendering

10 years ago · 9ac531382b
9 changed files with 145 additions and 12 deletions
--- a/index.html
+++ b/index.html
@ -14,6 +14,11 @@
 	<body>

 		<div id="gjs" style="height:0px; overflow:hidden">
+			<form action="##">
+				<input name="name" placeholder="Name" class="sub-input">
+				<input name="email" placeholder="Email" class="sub-input" type="email">
+				<button class="sub-btn">Submit</button>
+			</form>
 			<header class="header-banner">
 				<div class="container-width">
 					<!--
--- a/src/demo.js
+++ b/src/demo.js
@ -333,6 +333,9 @@ require(['config/require-config'], function() {

    window.editor = editor;

+		
+
+
 		editor.render();
 	});
 });
--- a/src/dom_components/main.js
+++ b/src/dom_components/main.js
@ -42,6 +42,7 @@ define(function(require) {
 		ComponentView = require('./view/ComponentView');

 		var component, componentView;
+		/*
 		var defaultTypes = {
 			'cell': {
 				model: require('./model/ComponentTableCell'),
@ -84,6 +85,59 @@ define(function(require) {
 				view: ComponentView,
 			},
 		};
+		*/
+		var defaultTypes = [
+			{
+				id: 'cell',
+				model: require('./model/ComponentTableCell'),
+				view: require('./view/ComponentTableCellView'),
+			},
+			{
+				id: 'row',
+				model: require('./model/ComponentTableRow'),
+				view: require('./view/ComponentTableRowView'),
+			},
+			{
+				id: 'table',
+				model: require('./model/ComponentTable'),
+				view: require('./view/ComponentTableView'),
+			},
+			{
+				id: 'map',
+				model: require('./model/ComponentMap'),
+				view: require('./view/ComponentMapView'),
+			},
+			{
+				id: 'link',
+				model: require('./model/ComponentLink'),
+				view: require('./view/ComponentLinkView'),
+			},
+			{
+				id: 'video',
+				model: require('./model/ComponentVideo'),
+				view: require('./view/ComponentVideoView'),
+			},
+			{
+				id: 'image',
+				model: require('./model/ComponentImage'),
+				view: require('./view/ComponentImageView'),
+			},
+			{
+				id: 'textnode',
+				model: require('./model/ComponentTextNode'),
+				view: require('./view/ComponentTextNodeView'),
+			},
+			{
+				id: 'text',
+				model: require('./model/ComponentText'),
+				view: require('./view/ComponentTextView'),
+			},
+			{
+				id: 'default',
+				model: Component,
+				view: ComponentView,
+			},
+		];

 	  return {

@ -96,6 +150,15 @@ define(function(require) {
       */
      name: 'DomComponents',

+			/**
+			 * Returns config
+			 * @return {Object} Config object
+			 * @private
+			 */
+			getConfig: function () {
+					return c;
+			},
+
      /**
       * Mandatory for the storage manager
       * @type {String}
@ -146,7 +209,11 @@ define(function(require) {
 					componentTypes: componentTypes,
 				});
 				component.set({ attributes: {id: 'wrapper'}});
-				component.get('components').add(c.components);
+
+				if(c.em && !c.em.config.loadCompsOnRender) {
+					component.get('components').add(c.components);
+				}
+
 			  componentView = new ComponentView({
 					model: component,
 					config: c,
@ -338,8 +405,14 @@ define(function(require) {
 			 * @private
 			 */
 			addType: function(type, methods) {
-				defaultTypes[type] = methods;
-				return this;
+				var compType = this.getType(type);
+				if(compType) {
+					compType.model = methods.model;
+					compType.view = methods.view;
+				} else {
+					methods.id = type;
+					defaultTypes.unshift(methods);
+				}
 			},

 			/**
@ -348,7 +421,15 @@ define(function(require) {
 			 * @private
 			 */
 			getType: function(type) {
-				return defaultTypes[type];
+				var df = defaultTypes;
+
+				for (var it = 0; it < df.length; it++) {
+					var dfId = df[it].id;
+					if(dfId == type) {
+						return df[it];
+					}
+				}
+				return;
 			},

 		};
--- a/src/dom_components/model/Components.js
+++ b/src/dom_components/model/Components.js
@ -29,13 +29,26 @@ define([ 'backbone', 'require'],
 							options.componentTypes = opt.componentTypes;

 					var df = opt.defaultTypes;
-					var cf = opt.componentTypes;

+					for (var it = 0; it < df.length; it++) {
+						var dfId = df[it].id;
+						if(dfId == attrs.type) {
+							model = df[it].model;
+							break;
+						}
+					}
+
+					if(!model) {
+						// get the last one
+						model = df[df.length - 1].model;
+					}
+
+					/*
 					if(df[attrs.type]){
 						model = df[attrs.type].model;
 					}else{
 						model = df.default.model;
-					}
+					}*/

 					return new model(attrs, options);
 				};
--- a/src/dom_components/view/ComponentsView.js
+++ b/src/dom_components/view/ComponentsView.js
@ -46,7 +46,15 @@ function(Backbone, require) {
 			var ct = this.opts.componentTypes;

 			var type = model.get('type');
-			viewObject = dt[type] ? dt[type].view : dt.default.view;
+
+			for (var it = 0; it < dt.length; it++) {
+				var dtId = dt[it].id;
+				if(dtId == type) {
+					viewObject = dt[it].view;
+					break;
+				}
+			}
+			//viewObject = dt[type] ? dt[type].view : dt.default.view;

 			var view = new viewObject({
 				model: model,
--- a/src/editor/config/config.js
+++ b/src/editor/config/config.js
@ -42,6 +42,10 @@ define(function () {
 		// When enabled, on device change media rules won't be created
 		devicePreviewMode: 0,

+		// This option makes available custom component types also for loaded
+		// elements inside canvas
+		loadCompsOnRender: 1,
+
 		// Dom element
 		el: '',

--- a/src/editor/view/EditorView.js
+++ b/src/editor/view/EditorView.js
@ -15,6 +15,15 @@ function(Backbone){
 		},

 		render: function() {
+			var model = this.model;
+			var dComps = model.get('DomComponents');
+			var config = model.get('Config');
+
+			if(config.loadCompsOnRender) {
+				dComps.getComponents().add(config.components);
+				dComps.onLoad();
+			}
+
 			var conf = this.conf;
 			var contEl = $(conf.el || ('body ' + conf.container));
 			this.$el.empty();
@ -26,7 +35,7 @@ function(Backbone){
 				contEl.css('height', conf.height);

 			// Canvas
-			this.$el.append(this.model.get('Canvas').render());
+			this.$el.append(model.get('Canvas').render());

 			// Panels
 			this.$el.append(this.pn.render());
--- a/src/parser/model/ParserHtml.js
+++ b/src/parser/model/ParserHtml.js
@ -59,7 +59,7 @@ define(function(require) {
       * @param  {HTMLElement} el DOM
       * @return {Array<Object>}
       */
-      parseNode: function(el){
+      parseNode: function(el) {
        var result = [];
        var nodes = el.childNodes;

@ -74,12 +74,20 @@ define(function(require) {

          if(ct){
            var obj = '';
+            /*
            for (var cType in ct) {
              var component = ct[cType].model;
              obj = component.isComponent(node);
              if(obj)
                break;
+            }*/
+            for (var it = 0; it < ct.length; it++) {
+              var component = ct[it].model;
+              obj = component.isComponent(node);
+              if(obj)
+                break;
            }
+
            model = obj;
          }

--- a/src/utils/Sorter.js
+++ b/src/utils/Sorter.js
@ -134,8 +134,10 @@ define(function(require) {
       * @param {String} selector
       * @return {Boolean}
       */
-      matches: function(el, selector){
-        var els = (el.parentNode || document.body).querySelectorAll(selector);
+      matches: function(el, selector, useBody) {
+        var startEl = el.parentNode || document.body;
+        //startEl = useBody ? startEl.ownerDocument.body : startEl;
+        var els = startEl.querySelectorAll(selector);
        var i = 0;
        while (els[i] && els[i] !== el)
          ++i;
@ -611,7 +613,7 @@ define(function(require) {
          draggable = this.matches(dst, toDrag);
        }else if(typeof draggable === 'string') {
          toDrag = draggable;
-          draggable = this.matches(dst, toDrag);
+          draggable = this.matches(dst, toDrag, 1);
        }

        // Check if the target could accept the element to be DROPPED inside