Updated iframe properties dialog

packages/app/obojobo-document-engine/__tests__/common/components/__snapshots__/switch.test.js.snap

@@ -4,11 +4,17 @@ exports[`Switch Switch renders correctly with all options set 1`] = `
 <div
   className="obojobo-draft--components--switch"
 >
-  <span
-    contentEditable={false}
+  <div
+    className="text-content"
   >
-    mocktitle
-  </span>
+    <span
+      contentEditable={false}
+    >
+      mocktitle
+    </span>
+    <br />
+    <small />
+  </div>
   <label
     className="switch"
   >
@@ -29,6 +35,12 @@ exports[`Switch Switch renders correctly with no options set 1`] = `
 <div
   className="obojobo-draft--components--switch"
 >
+  <div
+    className="text-content"
+  >
+    <br />
+    <small />
+  </div>
   <label
     className="switch"
   >

packages/app/obojobo-document-engine/__tests__/common/components/modal/__snapshots__/simple-dialog.test.js.snap

@@ -76,6 +76,82 @@ exports[`SimpleDialog SimpleDialog cancelOk 1`] = `
 </div>
 `;
 
+exports[`SimpleDialog SimpleDialog cancelOrCustomYes 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Content
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`SimpleDialog SimpleDialog no type 1`] = `
 <div
   className="obojobo-draft--components--modal--simple-dialog"

packages/app/obojobo-document-engine/__tests__/common/components/modal/simple-dialog.test.js

@@ -52,6 +52,17 @@ describe('SimpleDialog', () => {
 		expect(tree).toMatchSnapshot()
 	})
 
+	test('SimpleDialog cancelOrCustomYes', () => {
+		const component = renderer.create(
+			<SimpleDialog cancelOrCustomYes onCancel={jest.fn()} onConfirm={jest.fn()}>
+				Content
+			</SimpleDialog>
+		)
+		const tree = component.toJSON()
+
+		expect(tree).toMatchSnapshot()
+	})
+
 	test('SimpleDialog no type', () => {
 		const component = renderer.create(
 			<SimpleDialog onCancel={jest.fn()} onConfirm={jest.fn()}>

packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js

@@ -25,6 +25,15 @@ describe('Switch', () => {
 		expect(checkbox.children).toEqual(['mocktitle'])
 	})
 
+	test('Switch renders correctly with a description', () => {
+		const testRenderer = TestRenderer.create(
+			<Switch title="mocktitle" description="mockDescription" />
+		)
+		const testInstance = testRenderer.root
+		const small = testInstance.findByType('small')
+		expect(small.children).toEqual(['mockDescription'])
+	})
+
 	test('Switch renders when unchecked', () => {
 		const testRenderer = TestRenderer.create(<Switch checked={false} />)
 		const testInstance = testRenderer.root

packages/app/obojobo-document-engine/src/scripts/common/components/modal/simple-dialog.js

@@ -54,6 +54,19 @@ class SimpleDialog extends React.Component {
 					default: true
 				}
 			]
+		} else if (this.props.cancelOrCustomYes) {
+			buttons = [
+				{
+					value: 'Cancel',
+					altAction: true,
+					onClick: this.props.onCancel
+				},
+				{
+					value: this.props.customYes || 'OK',
+					onClick: this.props.onConfirm,
+					default: true
+				}
+			]
 		} else {
 			buttons = [
 				{

packages/app/obojobo-document-engine/src/scripts/common/components/switch.js

@@ -4,9 +4,13 @@ import './switch.scss'
 /* istanbul ignore next */
 const noOp = () => {}
 
-const SwitchCore = ({ checked = false, onChange = noOp, title, forwardedRef }) => (
+const SwitchCore = ({ checked = false, onChange = noOp, title, description, forwardedRef }) => (
 	<div className="obojobo-draft--components--switch">
-		{title ? <span contentEditable={false}>{title}</span> : null}
+		<div className="text-content">
+			{title ? <span contentEditable={false}>{title}</span> : null}
+			<br />
+			<small>{description && description}</small>
+		</div>
 		<label className="switch">
 			<input
 				className="switch-slider"

packages/app/obojobo-document-engine/src/scripts/common/components/switch.scss

@@ -2,7 +2,14 @@
 
 .obojobo-draft--components--switch {
 	position: relative;
-	height: 1.3em;
+
+	//@HACK: Fixes the .info dialog being blurry sometimes in CHROME
+	transform: translate3d(0, 0, 0);
+	z-index: 1;
+
+	.text-content {
+		width: 85%;
+	}
 
 	> span {
 		padding-right: 0.5em;
@@ -11,6 +18,7 @@
 
 	.switch {
 		position: absolute;
+		right: 0;
 		display: inline-block;
 		width: 2.6em;
 		height: 1em;
@@ -86,4 +94,10 @@
 			left: 37%;
 		}
 	}
+
+	small {
+		font-size: 0.8em;
+		color: $color-neutral-text;
+		margin-top: 0;
+	}
 }

packages/obonode/obojobo-chunks-youtube/parse-youtube-url.js → packages/app/obojobo-document-engine/src/scripts/oboeditor/util/url-embed-code-check.js

@@ -3,6 +3,8 @@ const MIN_SEC_TIME_REGEX = /([0-9]+)m([0-9]+)s$/
 const MIN_TIME_REGEX = /([0-9]+)m$/
 const SEC_TIME_REGEX = /([0-9]+)s$/
 
+const IFRAME_NODE = 'ObojoboDraft.Chunks.IFrame'
+
 const minSecFormatToSeconds = timeString => {
 	if (timeString === null) {
 		return null
@@ -37,7 +39,7 @@ const getStandardizedURLFromVideoId = videoId => {
 	return `${document.location.protocol}//youtu.be/${videoId}`
 }
 
-const parseYouTubeURL = videoIdOrUrlOrEmbedCode => {
+const parseURLOrEmbedCode = (videoIdOrUrlOrEmbedCode, nodeType) => {
 	videoIdOrUrlOrEmbedCode = videoIdOrUrlOrEmbedCode.trim()
 
 	let videoId
@@ -61,12 +63,22 @@ const parseYouTubeURL = videoIdOrUrlOrEmbedCode => {
 		videoIdOrUrlOrEmbedCode = document.location.protocol + videoIdOrUrlOrEmbedCode
 	}
 
-	// Try to parse as a URL
+	// Try to parse as a URL (IFrame checks should stop here)
 	try {
 		url = new URL(videoIdOrUrlOrEmbedCode)
+		if (
+			nodeType === IFRAME_NODE &&
+			url &&
+			(url.protocol === 'http:' || url.protocol === 'https:')
+		) {
+			return url
+		} else if (nodeType === IFRAME_NODE) {
+			return false
+		}
 	} catch (e) {
 		// Assume the user may have pasted a video ID
 		videoId = videoIdOrUrlOrEmbedCode
+		if (nodeType === IFRAME_NODE) return false
 	}
 
 	if (url) {
@@ -105,4 +117,4 @@ const parseYouTubeURL = videoIdOrUrlOrEmbedCode => {
 	}
 }
 
-export { parseYouTubeURL, getStandardizedURLFromVideoId }
+export { parseURLOrEmbedCode, getStandardizedURLFromVideoId }

packages/app/obojobo-document-engine/src/scss/_includes.scss

@@ -1,6 +1,7 @@
 $color-action: #6714bd;
 $color-button-bg: lighten($color-action, 9%);
 $color-action-minor: desaturate(lighten($color-action, 30%), 40%);
+$color-action-hover: #f7e9f5;
 $color-error: #990000;
 $color-dangerous: #d40000;
 $color-dangerous-minor: desaturate($color-dangerous, 20%);
@@ -27,6 +28,8 @@ $color-reward: #ffe65d;
 $color-reward-text: #947d00;
 $color-obojobo-blue: #0d4fa7;
 $color-preview: #af1b5c;
+$color-neutral: #f3f3f3;
+$color-neutral-text: #b4b3b4;
 
 $box-shadow-focus: 0 0 3px 3px $color-browser-focus;
 $box-shadow-overlay: 0 2px 2px $color-shadow;