Merge pull request #350 from PublicRadioInternational/ENH-348

Updated Video embed modal to support oEmbed data
PublicRadioInternational · Nov 1, 2016 · a6bfd1e · a6bfd1e
2 parents bd5a429 + 6873c01
commit a6bfd1e
Show file tree

Hide file tree

Showing 9 changed files with 673 additions and 66 deletions.
diff --git a/src/contents/less/priEmbeds/videoEmbed.less b/src/contents/less/priEmbeds/videoEmbed.less
@@ -6,17 +6,17 @@
 	{
 		position: relative;
 		width: 100%;
-	    height: 0;
-	    padding-top: 9 / 16 * 100%;
+		height: 0;
+		padding-top: 9 / 16 * 100%;
 	}
 
 	iframe
 	{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
 	}
 }
 
@@ -40,4 +40,175 @@
 	{
 		margin: 0 auto;
 	}
+}
+
+////
+
+@video_editor-toolbar_btn__width: 20px;
+
+.video_editor
+{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+
+	background-color: @gray-lighter;
+}
+
+.video_editor-intro
+{
+	display: block;
+
+	.js-dragover &,
+	.js-dropped &,
+	{
+		z-index: auto;
+	}
+}
+
+.video_editor-intro_inner
+{
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	height: 100%;
+
+	padding: 20px;
+
+	text-align: center;
+
+	&:after
+	{
+		transition: box-shadow 200ms ease-out;
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 8;
+
+		pointer-events: none;
+
+		box-shadow: inset 0 0 0 0 @brand-primary, inset 0 0 0 0 #fff;
+	}
+
+	&.js-dragover
+	{
+		&:after
+		{
+			box-shadow: inset 0 0 0 1px @brand-primary, inset 0 0 0 10px #fff;
+		}
+	}
+
+	&.js-dropped,
+	&.js-loading
+	{
+		&:after
+		{
+			box-shadow: inset 0 0 0 1px @brand-primary, inset 0 0 0 95px #fff;
+		}
+	}
+
+	input[type="file"] {
+		display: inline-block;
+	}
+
+	hr {
+		margin: 10px auto;
+		border-top-color: #cdcdcd;
+	}
+
+	> :last-child {
+		margin-bottom: 0;
+	}
+}
+
+.video_editor-preview
+{
+	display: none;
+	width: 100%;
+	padding: 20px;
+}
+
+.video_editor-preview_inner
+{
+	display: flex;
+	justify-content: center;
+	align-items: stretch;
+	height: 100%;
+
+	> * {
+		& + * {
+			margin-left: 20px;
+		}
+	}
+}
+
+.video_editor-preview_video
+{
+	width: 60%;
+}
+
+.video_editor-preview_info
+{
+
+}
+
+.video_editor-preview_credits
+{
+	> * + *
+	{
+		&:before
+		{
+		}
+	}
+}
+
+.video_editor-toolbar
+{
+	display: block;
+	position: absolute;
+	right: 0;
+	bottom: 100%;
+}
+
+.video_editor-toolbar_list
+{
+	display: flex;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.video_editor-toolbar_item
+{
+	margin: 3px;
+}
+
+.video_editor-tollbar_btn
+{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: @video_editor-toolbar_btn__width;
+	height: @video_editor-toolbar_btn__width;
+
+	background: @btn-primary-color;
+
+	border: 1px solid @btn-primary-border;
+	border-radius: @btn-border-radius-small;
+
+	color: @btn-primary-bg;
+
+	cursor: pointer;
+
+	&:hover
+	{
+		background-color: @btn-primary-bg;
+		color: @btn-primary-color;
+		text-decoration: none;
+	}
 }
diff --git a/src/html/modal/modal_audio.html b/src/html/modal/modal_audio.html
@@ -1,4 +1,4 @@
-<form method="post" enctype="multipart/form-data">
+<form>
 	<div class="embed-modal-row">
 		<div class="embed-modal-full-column">
 			<div class="embed-modal-form">

diff --git a/src/html/modal/modal_video.html b/src/html/modal/modal_video.html
@@ -2,16 +2,54 @@
 	<div class="embed-modal-row">
 		<div class="embed-modal-full-column">
 			<div class="embed-modal-form">
-				<label class="embed-modal-label" for="title">Title</label>
-				<input name="title" type="text" placeholder="Enter a title" class="embed-modal-input embed-modal-form-control" />
-			</div>
-		</div>
-	</div>
-	<div class="embed-modal-row">
-		<div class="embed-modal-full-column">
-			<div class="embed-modal-form">
-				<label class="embed-modal-label" for="url">Video URL</label>
-				<input name="url" type="url" placeholder="Enter URL to video" class="embed-modal-input embed-modal-form-control" />
+				<label class="embed-modal-label" for="url">Video URL Preview</label>
+
+				<div class="video_editor">
+
+					<div class="video_editor-intro">
+						<div class="video_editor-intro_inner">
+							<div>
+								<div class="input-group">
+									<input name="url" type="url" placeholder="Enter URL to video" class="embed-modal-input embed-modal-form-control js-input-url" />
+									<span class="input-group-btn">
+										<button class="btn btn-primary js-btn-preview" type="button">Preview</button>
+									</span>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="video_editor-preview">
+						<div class="video_editor-preview_inner">
+							<div class="video_editor-preview_video">
+								<div class="video-embed">
+									<div class="overlay js-preview-wrapper">
+										<iframe class="js-preview-iframe" src="" frameborder="0"></iframe>
+									</div>
+								</div>
+							</div>
+							<div class="video_editor-preview_info">
+								<h4 class="video_editor-preview_title">Here is a title to test the video editor layout with</h4>
+								<div class="video_editor-preview_credits">
+									<a class="video_editor-preview_author" target="_blank"></a> / <a class="video_editor-preview_provider" target="_blank"></a>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="video_editor-toolbar">
+						<ul class="video_editor-toolbar_list">
+							<li class="video_editor-toolbar_item js-btn-edit">
+								<a class="video_editor-tollbar_btn"><span class="fa fa-pencil" aria-label="Enter Another URL"></span></a>
+							</li>
+							<li class="video_editor-toolbar_item js-btn-cancel">
+								<a class="video_editor-tollbar_btn"><span class="fa fa-arrow-left" aria-label="Cancel URL Editing"></span></a>
+							</li>
+						</ul>
+					</div>
+
+				</div>
+
 			</div>
 		</div>
 	</div>

diff --git a/src/js/demo.js b/src/js/demo.js
@@ -161,7 +161,7 @@ $(document).ready(function(){
 	$openAddSingleEmbedBtn.click(function(){
 		$.embed_modal_open({
 				modalOptions:{
-					embedTypeStr: 'related-link'
+					embedTypeStr: 'video'
 				}
 			})
 			.done(function(scope){

diff --git a/src/js/embedModalDefaults.js b/src/js/embedModalDefaults.js
@@ -97,6 +97,12 @@ var EntityEmbed = EntityEmbed || {};
 				return;
 			}
 
+			scope.isAdd = scope.modalCtrl.isAdd = scope.modalType === EntityEmbed.embedModalTypes.add ||
+						 scope.modalType === EntityEmbed.embedModalTypes.addSingle;
+
+			scope.isSingle = scope.modalCtrl.isSingle = scope.modalType === EntityEmbed.embedModalTypes.addSingle ||
+											scope.modalType === EntityEmbed.embedModalTypes.selectExistingSingle;
+
 			if (!!scope.currentEmbedType)
 			{
 				delete scope.currentEmbedType.model;
@@ -140,6 +146,25 @@ var EntityEmbed = EntityEmbed || {};
 			var isValid = true;
 			var promise = $.Deferred();
 			var respData = {};
+			var modelPromise;
+
+			function doSave() {
+				if(!scope.buffered)
+				{
+
+					scope.currentEmbedType.saveEmbed(isAddModal, scope.currentEmbedType)
+						.done(successFunction)
+						.fail(failFunction)
+						.always(alwaysFunction);
+
+				}
+				else
+				{
+					respData.response = $.extend(true, {} ,scope.currentEmbedType.model)
+					successFunction(respData);
+					alwaysFunction(respData);
+				}
+			}
 
 			for(var i = 0; i < $validator.length; i++)
 			{
@@ -156,22 +181,17 @@ var EntityEmbed = EntityEmbed || {};
 
 			scope.elements.saveSpinner.show();
 
-			scope.currentEmbedType.getModelFromForm(scope.currentEmbedType.$view);
+			modelPromise = scope.currentEmbedType.getModelFromForm(scope.currentEmbedType.$view);
 
-			if(!scope.buffered)
+			if(typeof modelPromise === 'object' && typeof modelPromise.then === 'function')
 			{
-
-				scope.currentEmbedType.saveEmbed(isAddModal)
-					.done(successFunction)
-					.fail(failFunction)
-					.always(alwaysFunction);
-
+				modelPromise.always(function() {
+					doSave();
+				});
 			}
 			else
 			{
-				respData.response = $.extend(true, {} ,scope.currentEmbedType.model)
-				successFunction(respData);
-				alwaysFunction(respData);
+				doSave();
 			}
 
 			////
@@ -610,10 +630,6 @@ var EntityEmbed = EntityEmbed || {};
 		},
 		open: {
 			before: function(scope){
-
-				scope.isSingle = scope.modalType === EntityEmbed.embedModalTypes.addSingle ||
-												scope.modalType === EntityEmbed.embedModalTypes.selectExistingSingle
-
 				toggleEditorTyping(scope, "false");
 				if (!!scope.embedType){
 					setModalView(scope, scope.embedType);
@@ -627,9 +643,16 @@ var EntityEmbed = EntityEmbed || {};
 
 				function applyData(data) {
 					data = data || {};
+
+					// Make sure html_rendered key is not set to normalize stale model to current model comparison
+					if(!!data.html_rendered)
+					{
+						data.html_rendered = null;
+					}
+
 					setModalView(scope, data.object_type);
 					scope.currentEmbedType.model = data;
-					scope.staleModel = $.extend(true, {}, data); // so we can check if the form is dirty later
+					scope.currentEmbedType.staleModel = $.extend(true, {}, data); // so we can check if the form is dirty later
 					scope.currentEmbedType.populateFormWithModel(scope.currentEmbedType.$view);
 				}
 
@@ -713,13 +736,13 @@ var EntityEmbed = EntityEmbed || {};
 
 				if (!scope.confirmedLeave)
 				{
-					if (scope.modalType === EntityEmbed.embedModalTypes.edit && !!scope.staleModel) // this is an edit modal - compare current model to stale model
+					if (scope.modalType === EntityEmbed.embedModalTypes.edit && !!scope.currentEmbedType.staleModel) // this is an edit modal - compare current model to stale model
 					{
 						scope.currentEmbedType.getModelFromForm(scope.currentEmbedType.$view);
 
 						for (var fieldName in scope.currentEmbedType.model)
 						{
-							staleVal = prepVal(scope.staleModel[fieldName]);
+							staleVal = prepVal(scope.currentEmbedType.staleModel[fieldName]);
 							modelVal = prepVal(scope.currentEmbedType.model[fieldName]);
 
 							if (staleVal !== modelVal)