Added video links switcher. Revamped video window/frame.

berta-cms · Jul 12, 2012 · 84a93ae · 84a93ae
1 parent f1b8e02
commit 84a93ae
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 8 deletions.
diff --git a/engine/css/editor.css.php b/engine/css/editor.css.php
@@ -38,7 +38,7 @@
 }
 
 #bertaVideos {
-	background-color: #e0e0e0;
+	background-color: #eee;
 	-moz-box-shadow: 0 0 30px 10px #bdbdbd;
 	-webkit-box-shadow: 0 0 30px 10px #bdbdbd;
 	box-shadow: 0 0 30px 10px #bdbdbd;
@@ -53,13 +53,31 @@
 
 	#bertaVideos #videoFrame {
 		border: none;
+		margin-bottom: 12px;
 		height: 300px;
 		width: 528px;
 	}
-
-#bertaVideosFrame html {
-	background-color: red;
-}
+
+	#bertaVideos #videoLinks .title {
+		font-weight: bold;
+		margin-bottom: 3px;
+	}
+
+	#bertaVideos #videoLinks .links a {
+		color: #212121;
+		display: block;
+		float: left;
+		margin-right: 15px;
+		height: 22px;
+		width: 166px;
+	}
+		#bertaVideos #videoLinks .links a.selected {
+			color: #999;
+			text-decoration: underline;
+		}
+		#bertaVideos #videoLinks .links a.row-last {
+			margin-right: 0;
+		}
 
 
 /* middle-align containers ------------------------------------------------------------------------------------------- */	

diff --git a/engine/js/BertaEditor.js b/engine/js/BertaEditor.js
@@ -144,18 +144,48 @@ var BertaEditor = new Class({
 						id: 'bertaVideosWrapper'
 					});
 
+					var links = new Array();
+
+					links.push('<a class="switchVideo selected" href="http://player.vimeo.com/video/29761450">Start making a website</a>'); 
+					links.push('<a class="switchVideo" href="http://player.vimeo.com/video/29761450">Adding video</a>');
+					links.push('<a class="switchVideo row-last" href="http://player.vimeo.com/video/29761450">Add Google analytics</a>');
+					links.push('<a class="switchVideo" href="http://player.vimeo.com/video/29761450">Edit CSS</a>');
+					links.push('<a class="switchVideo" href="http://player.vimeo.com/video/29761450">Add social media buttons</a>');
+					links.push('<a class="switchVideo row-last" href="http://player.vimeo.com/video/29761450">Add social media buttons</a>');
+
+					linksHtml = '<div id="videoLinks"><div class="title"><span>More videos</span></div><div class="links">';
+					linksHtml += links.join('');
+					linksHtml += '<br class="clear" /></div></div>';
+
 					var bertaVideos = new Element('div', {
-						id: 'bertaVideos'
+						html: linksHtml,
+						id: 'bertaVideos',
+						events: {
+							'click:relay(a.switchVideo)': function(event) {
+								event.stop();
+								var iframeEl = $('videoFrame');
+								var videoLinks = $('videoLinks').getElements('a.switchVideo');
+								iframeEl.set('src', this.get('href'));
+								videoLinks.removeClass('selected');
+								event.target.addClass('selected');
+							}
+						}
 					});
 
 					var videoFrame = new IFrame({
-						src: 'http://player.vimeo.com/video/29761450?title=0&amp;byline=0&amp;portrait=0',
+						src: 'http://player.vimeo.com/video/29761450',
 						id: 'videoFrame'
 					});
 
+/*
+					$('suu').addEvent('click', function() {
+						console.log('aa');
+					});
+*/
+
 					bertaVideosWrapper.inject(document.body);
 					bertaVideos.inject(document.body);
-					videoFrame.inject(bertaVideos);
+					videoFrame.inject(bertaVideos, 'top');
 
 					if(this.currentSection) {
 						this.entriesList.getElements('.xEntry .xEntryEditWrap').addEvent('mouseenter', this.entryOnHover.bindWithEvent(this));