Update video and map parsers

index.html

@@ -26,6 +26,8 @@
 							<tr> <td>Row31</td> <td>Row32</td> <td>Row33</td> </tr>
 						</tbody>
 					</table>
+					<iframe class="iframe" src="http://player.vimeo.com/video/2?&controls=0&loop=1&color=ff0000"></iframe>
+					<iframe class="iframe" src="https://maps.google.com/maps?&q=London, UK&z=11&t=q&output=embed"></iframe>
 				-->
 					<div class="logo-container">
 						<div class="logo">GrapesJS</div>
@@ -36,8 +38,6 @@
 						<div class="menu-item">WEB</div>
 					</nav>
 					<div class="clearfix"></div>
-					<iframe class="c3043" src="http://www.youtube.com/embed/jNQXAC9IVRw?"></iframe>
-					<iframe src="https://maps.google.com/maps?&q=London, UK&z=11&t=q&output=embed"></iframe>
 					<div class="lead-title">Build your templates without coding</div>
 					<div class="sub-lead-title">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel</div>
 					<div class="lead-btn">Hover me</div>
@@ -782,6 +782,11 @@
 					margin: 20px 30px;
 				}
 
+				.iframe {
+					height: 300px;
+					width: 500px;
+				}
+
 				@media (max-width: 768px){
 				  .foot-form-cont{
 				    width:400px;

src/dom_components/model/ComponentImage.js

@@ -30,7 +30,35 @@ define(['./Component'],
 					attr += ' src="' + src + '"';
 
 				return attr;
-			}
+			},
+
+			/**
+			 * Parse uri
+			 * @param  {string} uri
+			 * @return {object}
+			 * @private
+			 */
+			parseUri: function(uri) {
+				var el = document.createElement('a');
+				el.href = uri;
+				var query = {};
+				var qrs = el.search.substring(1).split('&');
+				for (var i = 0; i < qrs.length; i++) {
+	        var pair = qrs[i].split('=');
+					var name = decodeURIComponent(pair[0]);
+					if(name)
+						query[name] = decodeURIComponent(pair[1]);
+    		}
+				return {
+					hostname: el.hostname,
+					pathname: el.pathname,
+					protocol: el.protocol,
+					search: el.search,
+					hash: el.hash,
+					port: el.port,
+					query: query,
+				};
+			},
 
 		},{
 
@@ -45,7 +73,7 @@ define(['./Component'],
 			isComponent: function(el) {
 				var result = '';
 				if(el.tagName == 'IMG'){
-					result = {type: 'image', tagName: 'img'};
+					result = {type: 'image'};
 					result.src = el.src;
 				}
 				return result;

src/dom_components/model/ComponentLink.js

@@ -21,7 +21,7 @@ define(['./ComponentText'],
 			isComponent: function(el) {
 				var result = '';
 				if(el.tagName == 'A'){
-					result = {type: 'link', tagName: 'a'};
+					result = {type: 'link'};
 				}
 				return result;
 			},

src/dom_components/model/ComponentMap.js

@@ -33,6 +33,26 @@ define(['./ComponentImage'],
 					}],
 			}),
 
+			initialize: function(o, opt) {
+				if(this.get('src'))
+					this.parseFromSrc();
+				Component.prototype.initialize.apply(this, arguments);
+			},
+
+			/**
+			 * Set attributes by src string
+			 */
+			parseFromSrc: function() {
+				var uri = this.parseUri(this.get('src'));
+				var qr = uri.query;
+				if(qr.q)
+					this.set('address', qr.q);
+				if(qr.z)
+					this.set('zoom', qr.z);
+				if(qr.t)
+					this.set('mapType', qr.t);
+			},
+
 		},{
 
 			/**
@@ -47,7 +67,7 @@ define(['./ComponentImage'],
 				var result = '';
 				if(el.tagName == 'IFRAME' &&
 					/maps\.google\.com/.test(el.src) ){
-					result = {type: 'map', src: el.src, tagName: 'iframe'};
+					result = {type: 'map', src: el.src};
 				}
 				return result;
 			},

src/dom_components/model/ComponentVideo.js

@@ -1,6 +1,9 @@
 define(['./ComponentImage'],
 	function (Component) {
 
+		var yt = 'yt';
+		var vi = 'vi';
+
 		return Component.extend({
 
 			defaults: _.extend({}, Component.prototype.defaults, {
@@ -20,12 +23,50 @@ define(['./ComponentImage'],
 			}),
 
 			initialize: function(o, opt) {
-				this.set('traits', this.getSourceTraits());
+				var traits = [];
+				var prov = this.get('provider');
+				switch (prov) {
+					case yt:
+						traits = this.getYoutubeTraits();
+						break;
+					case vi:
+						traits = this.getVimeoTraits();
+						break;
+					default:
+						traits = this.getSourceTraits();
+				}
+				if(this.get('src'))
+					this.parseFromSrc();
+				this.set('traits', traits);
 				Component.prototype.initialize.apply(this, arguments);
 				this.listenTo(this, 'change:provider', this.updateTraits);
 				this.listenTo(this, 'change:videoId', this.updateSrc);
 			},
 
+			/**
+			 * Set attributes by src string
+			 */
+			parseFromSrc: function() {
+				var prov = this.get('provider');
+				var uri = this.parseUri(this.get('src'));
+				var qr = uri.query;
+				switch (prov) {
+					case yt: case vi:
+						var videoId = uri.pathname.split('/').pop();
+						this.set('videoId', videoId);
+						if(qr.autoplay)
+							this.set('autoplay', 1);
+						if(qr.loop)
+							this.set('loop', 1);
+						if(parseInt(qr.controls) === 0)
+							this.set('controls', 0);
+						if(qr.color)
+							this.set('color', qr.color);
+						break;
+					default:
+				}
+			},
+
 			/**
 			 * Update src on change of video ID
 			 * @private
@@ -259,15 +300,14 @@ define(['./ComponentImage'],
 				var isExtProv = isYtProv || isViProv;
 				if(el.tagName == 'VIDEO' ||
 					(el.tagName == 'IFRAME' && isExtProv) ){
-					result = {type: 'video', tagName: 'video'};
+					result = {type: 'video'};
 					if(el.src)
 						result.src = el.src;
 					if(isExtProv){
-						result.tagName = 'iframe';
 						if(isYtProv)
 							result.provider = 'yt';
 						else if(isViProv)
-								result.provider = 'vi';
+							result.provider = 'vi';
 					}
 				}
 				return result;

src/parser/model/ParserHtml.js

@@ -68,7 +68,6 @@ define(function(require) {
           var attrsLen = attrs.length;
           var prevI = result.length - 1;
           var prevSib = result[prevI];
-          model.tagName = node.tagName ? node.tagName.toLowerCase() : '';
 
           var ct = this.compTypes;
           if(ct){
@@ -82,6 +81,9 @@ define(function(require) {
             model = obj;
           }
 
+          if(!model.tagName)
+            model.tagName = node.tagName ? node.tagName.toLowerCase() : '';
+
           if(attrsLen)
             model.attributes = {};