Add Vimeo provider to video component and update Code Manager

src/code_manager/model/HtmlGenerator.js

@@ -11,42 +11,7 @@ define(['backbone'],
 					code 	= '';
 
 				coll.each(function(m){
-					var tag = m.get('tagName'),			// Tag name
-							attr = '',										// Attributes string
-							attrId = '',
-							strCls = '',
-							cln = m.get('components'),		// Children
-							attrs = m.get('attributes'),
-							sTag = m.get('void'),
-							classes = m.get('classes');
-					_.each(attrs,function(value, prop){
-						if(prop == 'onmousedown')
-							return;
-						attr 	+= value && prop!='style' ? ' ' + prop + '="' + value + '"' : '';
-					});
-
-					if(m.get('type') == 'image'){
-							tag 	= 'img';
-							sTag	= 1;
-							attr 	+= ' src="' + m.get('src') + '"';
-					}
-
-					if(!_.isEmpty(m.get('style')))
-						attrId = ' id="' + m.cid + '" ';
-
-					classes.each(function(m){
-						strCls += ' ' + m.get('name');
-					});
-
-					strCls = strCls !== '' ? ' class="' + strCls.trim() + '"' : '';
-					code += '<' + tag + strCls + attrId + attr + (sTag ? '/' : '') + '>' + m.get('content');
-
-					if(cln.length)
-						code += this.build(cln);
-
-					if(!sTag)
-						code += '</'+tag+'>';
-
+					code += m.toHTML();
 				}, this);
 
 				return code;

src/dom_components/model/ComponentVideo.js

@@ -6,11 +6,16 @@ define(['./ComponentImage'],
 			defaults: _.extend({}, Component.prototype.defaults, {
 					type: 'video',
 					tagName: 'video',
+					videoId: '',
+					void: 0,
 					provider: '', // on change of provider, traits are switched
+					ytUrl: 'http://www.youtube.com/embed/',
+					viUrl: 'http://player.vimeo.com/video/',
 					loop: 0,
 					muted: 0,
 					autoplay: 0,
 					controls: 1,
+					color: '',
 					sources: [],
 			}),
 
@@ -18,6 +23,47 @@ define(['./ComponentImage'],
 				this.set('traits', this.getSourceTraits());
 				Component.prototype.initialize.apply(this, arguments);
 				this.listenTo(this, 'change:provider', this.updateTraits);
+				this.listenTo(this, 'change:videoId', this.updateSrc);
+			},
+
+			/**
+			 * Update src on change of video ID
+			 * @private
+			 */
+			updateSrc: function() {
+				var prov = this.get('provider');
+				switch (prov) {
+					case 'yt':
+						this.set('src',this.getYoutubeSrc());
+						break;
+					case 'vi':
+						this.set('src',this.getVimeoSrc());
+						break;
+				}
+			},
+
+			/**
+			 * Returns attributes string in HTML
+			 * @return {string}
+			 * @private
+			 */
+			toAttrHTML: function() {
+				var attr = Component.prototype.toAttrHTML.apply(this, arguments);
+				var prov = this.get('provider');
+
+				switch (prov) {
+					case 'yt': case 'vi':
+						break;
+					default:
+						if(this.get('loop'))
+							attr += ' loop';
+						if(this.get('autoplay'))
+							attr += ' autoplay';
+						if(this.get('controls'))
+							attr += ' controls';
+				}
+
+				return attr;
 			},
 
 			/**
@@ -29,11 +75,15 @@ define(['./ComponentImage'],
 				var traits = this.getSourceTraits();
 				switch (prov) {
 					case 'yt':
+						this.set('tagName', 'iframe');
 						traits = this.getYoutubeTraits();
 						break;
 					case 'vi':
+						this.set('tagName', 'iframe');
 						traits = this.getVimeoTraits();
 						break;
+					default:
+						this.set('tagName', 'video');
 				}
 				this.loadTraits(traits);
 				this.sm.trigger('change:selectedComponent');
@@ -73,24 +123,11 @@ define(['./ComponentImage'],
 						name: 'src',
 						placeholder: 'eg. ./media/video.mp4',
 						changeProp: 1,
-					},{
-						type: 'checkbox',
-						label: 'Autoplay',
-						name: 'autoplay',
-						changeProp: 1,
-					},{
-						type: 'checkbox',
-						label: 'Loop',
-						name: 'loop',
-						changeProp: 1,
-					},{
-						type: 'checkbox',
-						label: 'Controls',
-						name: 'controls',
-						changeProp: 1,
-					}];
+					},
+					this.getAutoplayTrait(),
+					this.getLoopTrait(),
+					this.getControlsTrait()];
 			},
-
 			/**
 			 * Return traits for the source provider
 			 * @return {Array<Object>}
@@ -100,10 +137,14 @@ define(['./ComponentImage'],
 				return [
 					this.getProviderTrait(), {
 						label: 'Video ID',
-						name: 'src',
+						name: 'videoId',
 						placeholder: 'eg. jNQXAC9IVRw',
 						changeProp: 1,
-					}];
+					},
+					this.getAutoplayTrait(),
+					this.getLoopTrait(),
+					this.getControlsTrait()
+				];
 			},
 
 			/**
@@ -115,10 +156,90 @@ define(['./ComponentImage'],
 				return [
 					this.getProviderTrait(), {
 						label: 'Video ID',
-						name: 'src',
+						name: 'videoId',
 						placeholder: 'eg. 123456789',
 						changeProp: 1,
-					}];
+					},{
+						label: 'Color',
+						name: 'color',
+						placeholder: 'eg. FF0000',
+						changeProp: 1,
+					},
+					this.getAutoplayTrait(),
+					this.getLoopTrait(),
+					this.getControlsTrait()];
+			},
+
+			/**
+			 * Return object trait
+			 * @return {Object}
+			 * @private
+			 */
+			getAutoplayTrait: function(){
+				return {
+					type: 'checkbox',
+					label: 'Autoplay',
+					name: 'autoplay',
+					changeProp: 1,
+				};
+			},
+
+			/**
+			 * Return object trait
+			 * @return {Object}
+			 * @private
+			 */
+			getLoopTrait: function(){
+				return {
+					type: 'checkbox',
+					label: 'Loop',
+					name: 'loop',
+					changeProp: 1,
+				};
+			},
+
+			/**
+			 * Return object trait
+			 * @return {Object}
+			 * @private
+			 */
+			getControlsTrait: function(){
+				return {
+					type: 'checkbox',
+					label: 'Controls',
+					name: 'controls',
+					changeProp: 1,
+				};
+			},
+
+
+			/**
+			 * Returns url to youtube video
+			 * @return {string}
+			 * @private
+			 */
+			getYoutubeSrc: function() {
+				var url = this.get('ytUrl');
+				url += this.get('videoId') + '?';
+				url += this.get('autoplay') ? '&autoplay=1' : '';
+				url += !this.get('controls') ? '&controls=0' : '';
+				url += this.get('loop') ? '&loop=1' : '';
+				return url;
+			},
+
+			/**
+			 * Returns url to vimeo video
+			 * @return {string}
+			 * @private
+			 */
+			getVimeoSrc: function() {
+				var url = this.get('viUrl');
+				url += this.get('videoId') + '?';
+				url += this.get('autoplay') ? '&autoplay=1' : '';
+				url += this.get('loop') ? '&loop=1' : '';
+				url += !this.get('controls') ? '&title=0&portrait=0&badge=0' : '';
+				url += this.get('color') ? '&color=' + this.get('color') : '';
+				return url;
 			},
 
 		});

src/dom_components/view/ComponentVideoView.js

@@ -9,7 +9,18 @@ define(['backbone', './ComponentImageView'],
 
 		initialize: function(o){
 			ComponentView.prototype.initialize.apply(this, arguments);
-			this.listenTo(this.model, 'change:loop change:autoplay change:controls', this.updateVideo);
+			this.listenTo(this.model, 'change:loop change:autoplay change:controls change:color', this.updateVideo);
+			this.listenTo(this.model, 'change:provider', this.updateProvider);
+		},
+
+		/**
+		 * Rerender on update of the provider
+		 * @private
+		 */
+		updateProvider: function() {
+			var prov = this.model.get('provider');
+			this.el.innerHTML = '';
+			this.el.appendChild(this.renderByProvider(prov));
 		},
 
 		/**
@@ -17,8 +28,17 @@ define(['backbone', './ComponentImageView'],
 		 * @private
 		 */
 		updateSrc: function() {
-			this.videoEl.src = this.model.get('src');
-			console.log('update source');
+			var prov = this.model.get('provider');
+			var src = this.model.get('src');
+			switch (prov) {
+				case 'yt':
+					src = this.model.getYoutubeSrc();
+					break;
+				case 'vi':
+					src = this.model.getVimeoSrc();
+					break;
+			}
+			this.videoEl.src = src;
 		},
 
 		/**
@@ -26,18 +46,28 @@ define(['backbone', './ComponentImageView'],
 		 * @private
 		 */
 		updateVideo: function() {
+			var prov = this.model.get('provider');
 			var videoEl = this.videoEl;
 			var md = this.model;
-			videoEl.loop = md.get('loop');
-			videoEl.autoplay = md.get('autoplay');
-			videoEl.controls = md.get('controls');
+			switch (prov) {
+				case 'yt': case 'vi':
+					this.model.trigger('change:videoId');
+					break;
+				default:
+					videoEl.loop = md.get('loop');
+					videoEl.autoplay = md.get('autoplay');
+					videoEl.controls = md.get('controls');
+			}
 		},
 
 		renderByProvider: function(prov) {
 			var videoEl;
 			switch (prov) {
 				case 'yt':
-
+					videoEl = this.renderYoutube();
+					break;
+				case 'vi':
+					videoEl = this.renderVimeo();
 					break;
 				default:
 					videoEl = this.renderSource();
@@ -55,6 +85,26 @@ define(['backbone', './ComponentImageView'],
 			return el;
 		},
 
+		renderYoutube: function() {
+			var el = document.createElement('iframe');
+			el.src = this.model.getYoutubeSrc();
+			el.frameBorder = 0;
+			el.style.pointerEvents = 'none';
+			el.style.height = '100%';
+			el.style.width = '100%';
+			return el;
+		},
+
+		renderVimeo: function() {
+			var el = document.createElement('iframe');
+			el.src = this.model.getVimeoSrc();
+			el.frameBorder = 0;
+			el.style.pointerEvents = 'none';
+			el.style.height = '100%';
+			el.style.width = '100%';
+			return el;
+		},
+
 		render: function() {
 			ComponentView.prototype.render.apply(this, arguments);
 			this.updateClasses();