Fix map component issues

src/dom_components/model/Component.js

@@ -141,11 +141,16 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				var code = '';
 				var m = this;
 				var tag = m.get('tagName'),
-				attrs = m.get('attributes'),
 				sTag = m.get('void'),
 				attrId = '';
 				// Build the string of attributes
-				var attr = this.toAttrHTML();
+				var strAttr = '';
+				var attr = this.getAttrToHTML();
+				for(var prop in attr){
+					var val = attr[prop];
+					strAttr += typeof val !== undefined && val !== '' ?
+						' ' + prop + '="' + val + '"' : '';
+				}
 				// Build the string of classes
 				var strCls = '';
 				m.get('classes').each(function(m){
@@ -158,7 +163,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				if(!_.isEmpty(m.get('style')))
  					attrId = ' id="' + m.cid + '" ';
 
-				code += '<' + tag + strCls + attrId + attr + (sTag ? '/' : '') + '>' + m.get('content');
+				code += '<' + tag + strCls + attrId + strAttr + (sTag ? '/' : '') + '>' + m.get('content');
 
 				m.get('components').each(function(m) {
 					code += m.toHTML();
@@ -171,15 +176,13 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 			},
 
 			/**
-			 * Returns attributes string in HTML
-			 * @return {string}
+			 * Returns object of attributes for HTML
+			 * @return {Object}
 			 * @private
 			 */
-			toAttrHTML: function() {
-				var attr = '';
-				_.each(this.get('attributes'), function(val, prop){
-					attr += (val && prop != 'style') ? ' ' + prop + '="' + val + '"' : '';
-				});
+			getAttrToHTML: function() {
+				var attr = this.get('attributes') || {};
+				delete attr.style;
 				return attr;
 			}
 

src/dom_components/model/ComponentImage.js

@@ -13,22 +13,16 @@ define(['./Component'],
 			}),
 
 			/**
-			 * Returns attributes string in HTML
-			 * @return {string}
+			 * Returns object of attributes for HTML
+			 * @return {Object}
 			 * @private
 			 */
-			toAttrHTML: function() {
-				var attr = '';
-				_.each(this.get('attributes'), function(value, prop){
-					if(prop == 'onmousedown')
-						return;
-					attr += value && prop!='style' ? ' ' + prop + '="' + value + '"' : '';
-				});
-
+			getAttrToHTML: function() {
+				var attr = Component.prototype.getAttrToHTML.apply(this, arguments);
+				delete attr.onmousedown;
 				var src = this.get('src');
 				if(src)
-					attr += ' src="' + src + '"';
-
+					attr.src = src;
 				return attr;
 			},
 

src/dom_components/model/ComponentMap.js

@@ -4,11 +4,14 @@ define(['./ComponentImage'],
 		return Component.extend({
 
 			defaults: _.extend({}, Component.prototype.defaults, {
+					type: 'map',
+					void: 0,
 					mapUrl: 'https://maps.google.com/maps',
 					tagName: 'iframe',
 					mapType: 'q',
 					address: '',
 					zoom: '1',
+					attributes: {frameborder: 0},
 					traits: [{
 						label: 'Address',
 						name: 'address',
@@ -33,14 +36,42 @@ define(['./ComponentImage'],
 					}],
 			}),
 
+
 			initialize: function(o, opt) {
 				if(this.get('src'))
 					this.parseFromSrc();
+				else
+					this.updateSrc();
 				Component.prototype.initialize.apply(this, arguments);
+				this.listenTo(this, 'change:address change:zoom change:mapType', this.updateSrc);
+			},
+
+			updateSrc: function() {
+				this.set('src', this.getMapUrl());
+			},
+
+			/**
+			 * Returns url of the map
+			 * @return {string}
+			 * @private
+			 */
+			getMapUrl: function() {
+				var md = this;
+				var addr = md.get('address');
+				var zoom = md.get('zoom');
+				var type = md.get('mapType');
+				var size = '';
+				addr = addr ? '&q=' + addr : '';
+				zoom = zoom ? '&z=' + zoom : '';
+				type = type ? '&t=' + type : '';
+				var result = md.get('mapUrl')+'?' + addr + zoom + type;
+				result += '&output=embed';
+				return result;
 			},
 
 			/**
 			 * Set attributes by src string
+			 * @private
 			 */
 			parseFromSrc: function() {
 				var uri = this.parseUri(this.get('src'));

src/dom_components/model/ComponentVideo.js

@@ -74,36 +74,34 @@ define(['./ComponentImage'],
 			updateSrc: function() {
 				var prov = this.get('provider');
 				switch (prov) {
-					case 'yt':
+					case yt:
 						this.set('src',this.getYoutubeSrc());
 						break;
-					case 'vi':
+					case vi:
 						this.set('src',this.getVimeoSrc());
 						break;
 				}
 			},
 
 			/**
-			 * Returns attributes string in HTML
-			 * @return {string}
+			 * Returns object of attributes for HTML
+			 * @return {Object}
 			 * @private
 			 */
-			toAttrHTML: function() {
-				var attr = Component.prototype.toAttrHTML.apply(this, arguments);
+			getAttrToHTML: function() {
+				var attr = Component.prototype.getAttrToHTML.apply(this, arguments);
 				var prov = this.get('provider');
-
 				switch (prov) {
-					case 'yt': case 'vi':
+					case yt: case vi:
 						break;
 					default:
 						if(this.get('loop'))
-							attr += ' loop';
+							attr.loop = 'loop';
 						if(this.get('autoplay'))
-							attr += ' autoplay';
+							attr.autoplay = 'autoplay';
 						if(this.get('controls'))
-							attr += ' controls';
+							attr.controls = 'controls';
 				}
-
 				return attr;
 			},
 
@@ -115,11 +113,11 @@ define(['./ComponentImage'],
 				var prov = this.get('provider');
 				var traits = this.getSourceTraits();
 				switch (prov) {
-					case 'yt':
+					case yt:
 						this.set('tagName', 'iframe');
 						traits = this.getYoutubeTraits();
 						break;
-					case 'vi':
+					case vi:
 						this.set('tagName', 'iframe');
 						traits = this.getVimeoTraits();
 						break;
@@ -146,8 +144,8 @@ define(['./ComponentImage'],
 					value: this.get('provider'),
 					options: [
 						{value: 'so', name: 'HTML5 Source'},
-						{value: 'yt', name: 'Youtube'},
-						{value: 'vi', name: 'Vimeo'}
+						{value: yt, name: 'Youtube'},
+						{value: vi, name: 'Vimeo'}
 					]
 				};
 			},
@@ -305,9 +303,9 @@ define(['./ComponentImage'],
 						result.src = el.src;
 					if(isExtProv){
 						if(isYtProv)
-							result.provider = 'yt';
+							result.provider = yt;
 						else if(isViProv)
-							result.provider = 'vi';
+							result.provider = vi;
 					}
 				}
 				return result;

src/dom_components/view/ComponentMapView.js

@@ -9,7 +9,6 @@ define(['backbone', './ComponentImageView'],
 
 		initialize: function(o){
 			ComponentView.prototype.initialize.apply(this, arguments);
-			this.listenTo(this.model, 'change:address change:zoom change:mapType', this.updateMap);
 			this.classEmpty = this.ppfx + 'plh-map';
 		},
 
@@ -17,28 +16,14 @@ define(['backbone', './ComponentImageView'],
 		 * Update the map on the canvas
 		 * @private
 		 */
-		updateMap: function(e, m) {
-			this.getIframe().src = this.getMapUrl();
-		},
-
-		getMapUrl: function() {
-			var md = this.model;
-			var addr = md.get('address');
-			var zoom = md.get('zoom');
-			var type = md.get('mapType');
-			var size = '';
-			addr = addr ? '&q=' + addr : '';
-			zoom = zoom ? '&z=' + zoom : '';
-			type = type ? '&t=' + type : '';
-			var result = md.get('mapUrl')+'?' + addr + zoom + type;
-			result += '&output=embed';
-			return result;
+		updateSrc: function() {
+			this.getIframe().src = this.model.get('src');
 		},
 
 		getIframe: function() {
 			if(!this.iframe){
 				var ifrm = document.createElement("iframe");
-				ifrm.src = this.getMapUrl();
+				ifrm.src = this.model.get('src');
 				ifrm.frameBorder = 0;
 				ifrm.style.height = '100%';
 				ifrm.style.width = '100%';