Updated Opinary embed modal

Issue #367 - Updated Opinary embed modal to fuction similar to social and video embed modals. Provides URL validation, embed preview, and URL duplication checks. - Added `.social_editor-blocker` style to provide element to prevent embed interaction to `.social_editor-preview` as needed. - Fixed social embeds validation error messages to refer to the correct service, not just Facebook.
PublicRadioInternational · Jun 26, 2017 · acdb824 · acdb824
1 parent 553e49f
commit acdb824
Show file tree

Hide file tree

Showing 12 changed files with 326 additions and 57 deletions.
diff --git a/src/contents/less/embed-containers.less b/src/contents/less/embed-containers.less
@@ -32,4 +32,6 @@
 
 @import "priEmbeds/twitterEmbed.less";
 
-@import "priEmbeds/slideshow.less";
+@import "priEmbeds/slideshow.less";
+
+@import "priEmbeds/opinaryEmbed.less";
diff --git a/src/contents/less/priEmbeds/opinaryEmbed.less b/src/contents/less/priEmbeds/opinaryEmbed.less
@@ -0,0 +1,4 @@
+.opinary-widget
+{
+	background-color: @body-bg;
+}
diff --git a/src/contents/less/priEmbeds/priEntityEmbeds.less b/src/contents/less/priEmbeds/priEntityEmbeds.less
@@ -22,4 +22,6 @@
 
 @import "twitterEmbed.less";
 
-@import "slideshow.less";
+@import "slideshow.less";
+
+@import "opinaryEmbed.less";
diff --git a/src/contents/less/social_editor.less b/src/contents/less/social_editor.less
@@ -81,6 +81,8 @@
 
 .social_editor-preview_inner
 {
+  position: relative;
+
   > * {
     & + * {
       margin-left: 20px;
@@ -152,4 +154,14 @@
     color: @btn-primary-color;
     text-decoration: none;
   }
+}
+
+.social_editor-blocker
+{
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
 }
diff --git a/src/html/modal/modal_opinary.html b/src/html/modal/modal_opinary.html
@@ -12,7 +12,42 @@
 		<div class="embed-modal-full-column">
 			<div class="embed-modal-form">
 				<label class="embed-modal-label" for="url">Source</label>
-				<input name="url" type="url" placeholder="Enter the Opinary URL" class="embed-modal-form-control" />
+
+				<div class="social_editor">
+
+					<div class="social_editor-intro">
+						<div class="social_editor-intro_inner">
+							<div>
+								<div class="input-group">
+									<input name="url" type="url" placeholder="Enter URL, or drop link..." 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="social_editor-preview">
+						<div class="social_editor-preview_inner">
+							<div class="social_editor-preview_post"></div>
+							<div class="social_editor-blocker"></div>
+						</div>
+					</div>
+
+					<div class="social_editor-toolbar">
+						<ul class="social_editor-toolbar_list">
+							<li class="social_editor-toolbar_item js-btn-edit">
+								<a class="social_editor-tollbar_btn"><span class="fa fa-pencil" aria-label="Enter Another URL"></span></a>
+							</li>
+							<li class="social_editor-toolbar_item js-btn-cancel">
+								<a class="social_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/html/modal/modal_twitter.html b/src/html/modal/modal_twitter.html
@@ -1,52 +1,52 @@
 <form>
-  <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 js-input-title" />
-      </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">Twitter Status (Tweet)</label>
+	<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 js-input-title" />
+			</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">Twitter Status (Tweet)</label>
 
-        <div class="social_editor">
+				<div class="social_editor">
 
-          <div class="social_editor-intro">
-            <div class="social_editor-intro_inner">
-              <div>
-                <div class="input-group">
-                  <input name="url" type="url" placeholder="Enter URL, or drop link..." 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="social_editor-intro">
+						<div class="social_editor-intro_inner">
+							<div>
+								<div class="input-group">
+									<input name="url" type="url" placeholder="Enter URL, or drop link..." 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="social_editor-preview">
-            <div class="social_editor-preview_inner">
-              <div class="social_editor-preview_post"></div>
-            </div>
-          </div>
+					<div class="social_editor-preview">
+						<div class="social_editor-preview_inner">
+							<div class="social_editor-preview_post"></div>
+						</div>
+					</div>
 
-          <div class="social_editor-toolbar">
-            <ul class="social_editor-toolbar_list">
-              <li class="social_editor-toolbar_item js-btn-edit">
-                <a class="social_editor-tollbar_btn"><span class="fa fa-pencil" aria-label="Enter Another URL"></span></a>
-              </li>
-              <li class="social_editor-toolbar_item js-btn-cancel">
-                <a class="social_editor-tollbar_btn"><span class="fa fa-arrow-left" aria-label="Cancel URL Editing"></span></a>
-              </li>
-            </ul>
-          </div>
+					<div class="social_editor-toolbar">
+						<ul class="social_editor-toolbar_list">
+							<li class="social_editor-toolbar_item js-btn-edit">
+								<a class="social_editor-tollbar_btn"><span class="fa fa-pencil" aria-label="Enter Another URL"></span></a>
+							</li>
+							<li class="social_editor-toolbar_item js-btn-cancel">
+								<a class="social_editor-tollbar_btn"><span class="fa fa-arrow-left" aria-label="Cancel URL Editing"></span></a>
+							</li>
+						</ul>
+					</div>
 
-        </div>
+				</div>
 
-      </div>
-    </div>
-  </div>
+			</div>
+		</div>
+	</div>
 </form>
diff --git a/src/js/embeds/facebookEmbed.js b/src/js/embeds/facebookEmbed.js
@@ -355,7 +355,7 @@ var EntityEmbed = EntityEmbed || {};
 				}
 				else
 				{
-					// Get Video embeds that have matching URL
+					// Get Facebook embeds that have matching URL
 					EntityEmbed.apiService.get({
 						path: self.options.httpPaths.getAll,
 						data: {

diff --git a/src/js/embeds/instagramEmbed.js b/src/js/embeds/instagramEmbed.js
@@ -210,7 +210,7 @@ var EntityEmbed = EntityEmbed || {};
 		$.validator.addMethod('validInstagramUrl', function(value, element, params) {
 			var isValid = isValidUrl(value);
 			return this.optional(element) || isValid;
-		}, 'The URL must be to a valid Facebook post or video.');
+		}, 'The URL must be to a valid Instagram post.');
 
 		$ui.previewBtn.on('click', function(evt) {
 
@@ -320,7 +320,7 @@ var EntityEmbed = EntityEmbed || {};
 				}
 				else
 				{
-					// Get Video embeds that have matching URL
+					// Get Instagram embeds that have matching URL
 					EntityEmbed.apiService.get({
 						path: self.options.httpPaths.getAll,
 						data: {