Moved all embed rendering to EntityEmbedAddon

Issue #349 - Updated embed rendering to add object_type as a class to embed container element for embed type layout styling. - Added min-widths to Facebook, Twitter, and Instagram embed container styling. - Social post embeds should no longer run title generation when title is already provided. - Updated embed container positioning styles to not float embed on screens smaller than a tablet.
PublicRadioInternational · Nov 3, 2016 · 381edc4 · 381edc4
1 parent 5295dfa
commit 381edc4
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 70 deletions.
diff --git a/src/contents/less/embeds.less b/src/contents/less/embeds.less
@@ -65,3 +65,12 @@
 	margin-right: -1.5em;
 	text-align: center;
 }
+
+@media (max-width: 767px) {
+	.entity-embed-left,
+	.entity-embed-right {
+		float: none;
+		width: auto;
+		margin: auto;
+	}
+}
diff --git a/src/contents/less/priEmbeds/facebookEmbed.less b/src/contents/less/priEmbeds/facebookEmbed.less
@@ -1,3 +1,8 @@
+.entity-embed-facebook
+{
+	min-width: 350px;
+}
+
 .facebook-embed
 {
 	.fb_iframe_widget {

diff --git a/src/contents/less/priEmbeds/instagramEmbed.less b/src/contents/less/priEmbeds/instagramEmbed.less
@@ -1,3 +1,8 @@
+.entity-embed-instagram
+{
+	min-width: 280px;
+}
+
 .instagram-embed
 {
 }

diff --git a/src/contents/less/priEmbeds/twitterEmbed.less b/src/contents/less/priEmbeds/twitterEmbed.less
@@ -1,3 +1,8 @@
+.entity-embed-twitter
+{
+	min-width: 240px;
+}
+
 .twitter-embed
 {
 }

diff --git a/src/js/embedModalDefaults.js b/src/js/embedModalDefaults.js
@@ -326,26 +326,6 @@ var EntityEmbed = EntityEmbed || {};
 
 			return embedType && $.extend(true, {}, embedType);
 		},
-		generateEmbedHtmlInternal = function(embedType, includeWrapper){
-			var $embed = $('<div>').html(embedType.parseForEditor());
-
-			$embed.children().first().addClass('entity-embed');
-
-			var ret = '<figure contenteditable="false" ' +
-							'id="' + embedType.model.object_id	+ '" ' +
-							'data-embed-type="' + embedType.options.object_type + '" >' +
-							$embed.html() +
-							'<div class="entity-embed-blocker"></div>' +
-						'</figure>';
-
-			if (includeWrapper)
-			{
-				return	'<div class="entity-embed-container">' +
-							ret +
-						'</div>';
-			}
-			return ret;
-		},
 		//	This provides the functionality/styling for the type-ahead feature, allowing the user to only
 		//	begin typing the title of an embed and have a dropdown list of embeds displayed to them
 		initAutoComplete = function (embedType, scope){
@@ -441,7 +421,7 @@ var EntityEmbed = EntityEmbed || {};
 				.closest('.easy-autocomplete')
 				.removeAttr('style');
 		},
-		generateSelExInputHtml = function(embedType) { // SelEx -> SelectExisting
+		generateSelectExistingInputHtml = function(embedType) {
 			return	'<div class="embed-modal-row ' + embedType.options.object_type + '-query-container query-container">' +
 						'<div class="embed-modal-full-column">' +
 							'<label class="embed-modal-label" for="query">Search for ' + embedType.options.displayName + '</label>' +
@@ -453,8 +433,6 @@ var EntityEmbed = EntityEmbed || {};
 
 	function embedModalDefaults(){};
 
-	embedModalDefaults.prototype.generateEmbedHtml = generateEmbedHtmlInternal;
-
 	embedModalDefaults.prototype.functions = {
 		init:{
 			before: function(scope){
@@ -531,7 +509,7 @@ var EntityEmbed = EntityEmbed || {};
 				{
 					embedObject = scope.embedTypes[i];
 
-					scope.containers.selectExistingEmbed.append(generateSelExInputHtml(embedObject));
+					scope.containers.selectExistingEmbed.append(generateSelectExistingInputHtml(embedObject));
 
 					$selExInput = scope.containers.selectExistingEmbed
 											.find('input[name="' + embedObject.options.object_type + '-query"]');
@@ -777,27 +755,10 @@ var EntityEmbed = EntityEmbed || {};
 
 				toggleEditorTyping(scope, 'true');
 
-				if (scope.$currentEditorLocation.length > 0)
-				{
-					classes = scope.$currentEditorLocation.attr('class').split(' ');
-					classes.push(scope.currentEmbedType.defaultStyle);
-					$embedTemp = $( generateEmbedHtmlInternal(scope.currentEmbedType, true) );
-
-					for(i = 0, m = classes.length; i < m; i++)
-					{
-						$embedTemp.addClass(classes[i]);
-					}
-
-					scope.$currentEditorLocation.after( $embedTemp );
-					scope.$currentEditorLocation.remove();
-					scope.$currentEditorLocation = $embedTemp;
-				}
-
 				// return only necessary information to anyone interested in promise resolution
 				scope.modalCtrl.promise.resolve({
 					data: $.extend(true, {}, scope.currentEmbedType.model),
-					embedType: scope.currentEmbedType,
-					$embed: scope.$currentEditorLocation
+					embedType: scope.currentEmbedType
 				});
 
 				scope.currentEmbedType.clearForm(scope.currentEmbedType.$view);

diff --git a/src/js/embeds/facebookEmbed.js b/src/js/embeds/facebookEmbed.js
@@ -207,7 +207,11 @@ var EntityEmbed = EntityEmbed || {};
 
 	function applyOembedToModel(scope, oembed) {
 		// Set title to oEmbed title
-		scope.model.title = scope.model.title || scope.$ui.titleInput.val() || getOembedTitle(oembed);
+		scope.model.title = scope.model.title || scope.$ui.titleInput.val();
+		if(!scope.model.title)
+		{
+			scope.model.title = getOembedTitle(oembed);
+		}
 
 		// Set embedCode
 		scope.model.embedCode = oembed.html;

diff --git a/src/js/embeds/instagramEmbed.js b/src/js/embeds/instagramEmbed.js
@@ -166,7 +166,11 @@ var EntityEmbed = EntityEmbed || {};
 
 	function applyOembedToModel(scope, oembed) {
 		// Set title to oEmbed title
-		scope.model.title = scope.model.title || scope.$ui.titleInput.val() || getOembedTitle(oembed);
+		scope.model.title = scope.model.title || scope.$ui.titleInput.val();
+		if(!scope.model.title)
+		{
+			scope.model.title = getOembedTitle(oembed);
+		}
 
 		// Set embedCode
 		scope.model.embedCode = oembed.html;

diff --git a/src/js/embeds/twitterEmbed.js b/src/js/embeds/twitterEmbed.js
@@ -155,7 +155,11 @@ var EntityEmbed = EntityEmbed || {};
 
 	function applyOembedToModel(scope, oembed) {
 		// Set title to oEmbed title
-		scope.model.title = scope.model.title || scope.$ui.titleInput.val() || getOembedTitle(oembed);
+		scope.model.title = scope.model.title || scope.$ui.titleInput.val();
+		if(!scope.model.title)
+		{
+			scope.model.title = getOembedTitle(oembed);
+		}
 
 		// Set embedCode
 		scope.model.embedCode = oembed.html;

diff --git a/src/js/entityEmbedAddon.js b/src/js/entityEmbedAddon.js
@@ -8,7 +8,7 @@ var EntityEmbed = EntityEmbed || {};
 	var pluginName = 'mediumInsert',
 		addonName = 'EntityEmbeds', // name of the Medium Editor Insert Plugin
 		activeEmbedClass = 'entity-embed-active',	// class name given to active (selected) embeds
-		embedDragHandle = '',
+		embedClassPrefix = 'entity-embed-',
 		mediumEditorActiveSelector = '.medium-insert-active', // selector for the medium editor active class
 		activeEmbedClass = 'entity-embed-active',	// class name given to active (selected) embeds
 		entityEmbedEditorLineClass = 'entity-embed-editor-line', // class name given to a line (<p> element) in the editor on which an entity is embedded
@@ -240,19 +240,16 @@ var EntityEmbed = EntityEmbed || {};
 				self.toolbarManager.hideToolbar();
 			},
 			stop: function(event, ui) {
-				var $fig = ui.item.find('figure');
-				var embed = $fig.data('embed');
-				var embedHtml = EntityEmbed.embedModalDefaults.prototype.generateEmbedHtml(embed);
-				var $embed = $(embedHtml);
-
+				// Lock item height to placeholder height
 				ui.item.height(ui.placeholder.height());
-				$fig.html($embed.html());
 
-				self.activateEmbed(embed);
+				// Rerender embed
+				self.renderEmbed(ui.item, true);
 
 				// Let listeners know content has changed
 				self.core.triggerInput();
 
+				// Unlock item height after giving embed time to render
 				window.setTimeout(function() {
 					ui.item.removeAttr('style');
 				}, 2000);
@@ -654,7 +651,7 @@ var EntityEmbed = EntityEmbed || {};
 							placeholder = generatePlaceholderString(embed);
 
 							// Generate the embed HTML
-							embedHtml = EntityEmbed.embedModalDefaults.prototype.generateEmbedHtml(embed.embedType, false);
+							embedHtml = self.generateEmbedHtml(embed.embedType);
 
 							// Replace placeholder string in full story HTML with the embed HTML
 							// A quick split and join should work since our placeholder string is unique to:
@@ -760,12 +757,11 @@ var EntityEmbed = EntityEmbed || {};
 		var self = this;
 		var addToScope = {
 			modalOptions: {
-				$currentEditorLocation: $(mediumEditorActiveSelector)
 			}
 		};
 		$.embed_modal_open(addToScope)
 			.done(function(respData) {
-				self.addEmbed(respData.$embed, respData.embedType);
+				self.addEmbed(null, respData.embedType);
 			});
 	};
 
@@ -777,11 +773,12 @@ var EntityEmbed = EntityEmbed || {};
 
 	EntityEmbeds.prototype.editEmbed = function ($embed) {
 		var self = this;
-		var embedId = $embed.find('figure').attr('id');
+		var $figure = $embed.find('figure');
+		var embed = $figure.data('embed');
+
 		var scope = {
 			modalOptions: {
-				$currentEditorLocation: $('.' + activeEmbedClass),
-				id: embedId,
+				id: embed.model.object_id,
 				embedTypeStr: $embed.find('[data-embed-type]').attr('data-embed-type')
 			}
 		};
@@ -790,18 +787,18 @@ var EntityEmbed = EntityEmbed || {};
 
 		$.embed_modal_open(scope)
 			.done(function(respData) {
-				var $embeds = $('[id=' + embedId + ']', self.$el);
-				var embed = $.extend(true, {}, respData.embedType);
+				var embedType = $.extend(true, {}, respData.embedType);
+				var $embeds = $('[id=' + embedType.model.object_id + ']', self.$el);
 
 				$embeds.each(function() {
 					var $this = $(this);
 
-					$this.data('embed', embed);
+					$this.data('embed', embedType);
 
 					self.renderEmbed($this.closest('.' + entityEmbedContainerClass));
 				});
 
-				self.activateEmbed(embed);
+				self.activateEmbed(embedType);
 
 				self.core.triggerInput();
 			});
@@ -811,9 +808,11 @@ var EntityEmbed = EntityEmbed || {};
 		var self = this;
 		var $figure = $embed.find('> figure');
 		var embed = $figure.data('embed');
-		var embedHtml = EntityEmbed.embedModalDefaults.prototype.generateEmbedHtml(embed);
+		var embedHtml = self.generateEmbedHtml(embed);
 		var $embedTemp = $(embedHtml);
 
+		$embed.addClass(embedClassPrefix + embed.options.object_type);
+
 		// Replace figure's inner HTML with new embed's inner Html.
 		$figure.html( $embedTemp.html() );
 
@@ -889,6 +888,21 @@ var EntityEmbed = EntityEmbed || {};
 		}
 	};
 
+	EntityEmbeds.prototype.generateEmbedHtml = function(embedType){
+		var $embed = $('<div>').html(embedType.parseForEditor());
+
+		$embed.children().first().addClass('entity-embed');
+
+		var ret = '<figure contenteditable="false" ' +
+						'id="' + embedType.model.object_id	+ '" ' +
+						'data-embed-type="' + embedType.options.object_type + '" >' +
+						$embed.html() +
+						'<div class="entity-embed-blocker"></div>' +
+					'</figure>';
+
+		return ret;
+	};
+
 	/**
 	 * Add custom content
 	 *
@@ -900,21 +914,35 @@ var EntityEmbed = EntityEmbed || {};
 	EntityEmbeds.prototype.addEmbed = function ($embedContainer, embed, skipInputEvent) {
 		var self = this;
 		var buttonAction = embed.defaultStyle.replace('entity-embed-', '');
-		var $embed;
+		var $embed, $figure, $activeElement;
+
+		if(!$embedContainer)
+		{
+			// Find currently acive element
+			$activeElement = $(mediumEditorActiveSelector, self.$el);
+
+			// Generate embed HTML
+			$embedContainer = $('<div>').addClass(entityEmbedContainerClass);
+			$embedContainer.html(self.generateEmbedHtml(embed));
+
+			// Replace active element with embed elment
+			$activeElement.replaceWith($embedContainer);
+		}
 
 		if($embedContainer.is('figure'))
 		{
 			$embedContainer = $embedContainer.closest('.' + entityEmbedContainerClass);
 		}
 
-		$embed = $embedContainer.find('figure');
+		$embedContainer.addClass(embedClassPrefix + embed.options.object_type);
 
 		// apply the default styling to the embed that was just added
 		self.toolbarManager.addStyle($embedContainer, embed.defaultStyle, buttonAction, false);
 
-		$('[id="' + embed.model.object_id + '"]', self.$el).data('embed', $.extend(true, {}, embed));
+		$figure = $embedContainer.find('figure');
+		$figure.data('embed', $.extend(true, {}, embed));
 
-		self.activateEmbed(embed);
+		self.renderEmbed($embedContainer, true);
 
 		self.$el.sortable('refresh');
 

diff --git a/src/js/entityEmbedToolbar.js b/src/js/entityEmbedToolbar.js
@@ -236,6 +236,8 @@ var EntityEmbed = EntityEmbed || {};
 		var PrevHeight = $activeLine.height();
 		var count = 0;
 
+		window.clearTimeout(self.positionToolbarsTimeout);
+
 		function repositionToolbars() {
 			var w = $activeLine.width();
 			var h = $activeLine.height();
@@ -295,14 +297,15 @@ var EntityEmbed = EntityEmbed || {};
 
 		if(self.positionToolbarsTimeout)
 		{
-			window.clearInterval(self.positionToolbarsTimeout);
+			window.clearTimeout(self.positionToolbarsTimeout);
 			delete self.positionToolbarsTimeout;
 		}
 	};
 
 	toolbarManager.prototype.positionToolbars = function($embed) {
 		var self = this;
-		var embedType = self.embedTypes[self.currentToolbarEmbedType];
+		var $figure = $embed.find('> figure');
+		var embedType = $figure.data('embed');
 		var toolbarLocatorClass = embedType.options.actionToolbarLocatorClass || actionToolbarLocatorClass;
 
 		if(!$embed.length)