Media Previewer

api/tasks/4.json

@@ -38,7 +38,7 @@
           {
             "id": "876",
             "formats": ["multiple-choice","free-response"],
-            "stem_html":"Is the glass half full or half empty?",
+            "stem_html":"Is the glass half full or half empty in this <a href='#figure-from-another-step'>figure</a>?",
             "answers":[
               {"id":"id3","content_html":"Half Full"},
               {"id":"id4","content_html":"Half Empty"}
@@ -55,7 +55,7 @@
     { "id": "step-id-4-3",
       "type": "reading",
       "content_url": "http://archive.cnx.org/contents/3e1fc4c6-b090-47c1-8170-8578198cc3f0@8.html",
-      "content_html": "<p>MathML rendered by MathJax: <math xmlns='http://www.w3.org/1998/Math/MathML'><mfrac><mi>x</mi><mn>2</mn></math></p><div class='note links-to-physics'><div class='title'>Links to Physics</div><div class='para'><div class='title'>Astrology: Galileo’s Ship</div><figure id='fig25-3'><img src='http://placekitten.com/g/500/300'><figcaption>Galileo Galilei (1564-1642)</figcaption></figure><div class='note grasp-check'><div class='title'>Grasp Check</div><div class='para'>Why did the tennis ball appear to be going straight up and down at the same time that it moved along a curved path?</div></div></div><p>The idea that a description of motion depends on the reference frame of the observer has been known for hundreds of years. The 17th-century astronomer Galileo Galilei <a href='#fig25-3'>[link]</a> was one o</p></div><div class='note tips-for-success'><div class='title'>Tips for Success!</div><div class='para'>In some books x or s is used instead of d to describe position. In addition, a subscript is sometimes used to describe horizontal position, dx, or vertical position, dy.<a href='http://rice.edu'>Rice Link</a></div></div>"
+      "content_html": "<figure id='figure-from-another-step'><img src='http://placekitten.com/g/200/300'></figure><p>MathML rendered by MathJax: <math xmlns='http://www.w3.org/1998/Math/MathML'><mfrac><mi>x</mi><mn>2</mn></math></p><div class='note links-to-physics'><div class='title'>Links to Physics</div><div class='para'><div class='title'>Astrology: Galileo’s Ship</div><figure id='fig25-3'><img src='http://placekitten.com/g/500/300'><figcaption>Galileo Galilei (1564-1642)</figcaption></figure><div class='note grasp-check'><div class='title'>Grasp Check</div><div class='para'>Why did the tennis ball appear to be going straight up and down at the same time that it moved along a curved path?</div></div></div><p>The idea that a description of motion depends on the reference frame of the observer has been known for hundreds of years. The 17th-century astronomer Galileo Galilei <a href='#fig25-3'>[link]</a> was one o</p></div><div class='note tips-for-success'><div class='title'>Tips for Success!</div><div class='para'>In some books x or s is used instead of d to describe position. In addition, a subscript is sometimes used to describe horizontal position, dx, or vertical position, dy.<a href='http://rice.edu'>Rice Link</a></div></div>"
     },
     { "id": "step-id-4-4",
       "type": "interactive",

package.json

@@ -25,6 +25,7 @@
     "es6-promise": "^2.3",
     "flux-react": "~2.6.4",
     "font-awesome": "~4.3.0",
+    "htmlparser2": "^3.8.3",
     "jquery": "^2.1.4",
     "markdown-it": "^4.1.1",
     "mime-types": "^2.1.3",

resources/styles/book-content/base.less

@@ -47,19 +47,11 @@ div[data-type="document-title"] ~ p:first-of-type {
   .tutor-reading-first-letter();
 }
 
+.tutor-figure();
 figure {
-  display: table;
-  text-align: left;
   margin-right: 30px;
   margin-bottom: 20px;
-  padding: 0;
-  float: left;
-  img {
-    max-width: 100%;
-    border: 1px solid @border-color;
-    margin: 10px 0 0 0;
-    padding: 0;
-  }
+
   &.full-width:not(.splash) {
     width: 100%;
   }
@@ -74,18 +66,13 @@ figure {
       img { width: 100%; }
     }
   }
+
   figcaption {
-    display: table-caption;
-    caption-side: bottom;
-    color: @caption-font-color;
-    padding: 10px 0;
-    font-weight: 300;
-    font-style: italic;
-    line-height: 150%;
     border-bottom: 1px solid;
     border-color: @border-color;
   }
 }
+
 // images inside a figure that occurs right after a title are full-width
 .title + figure {
   width: 100%;

resources/styles/book-content/target.less

@@ -7,46 +7,71 @@
   background-color: @tutor-highlight;
 }
 
-.highlight-target(transition) {
-  .highlight-target();
-  .transition(background-color .1s ease-out);
+.highlight-target(will-transition) {
+  .transition(background-color .5s ease-out);
 }
 
 a[target=_blank] { .tutor-external-link-indicator(); }
 
 figure {
-  &:target, .target {
+  .highlight-target(will-transition);
+
+  &:target, &.target, &.target-scroll {
     img {
       mix-blend-mode: multiply;
     }
   }
-  &:target, .target {
+
+
+  &:target, &.target {
     .highlight-animation();
 
     > * {
       .highlight-animation();
     }
   }
-  .target {
-    .highlight-target(transition);
+
+  &.target-scroll {
+    .highlight-target();
 
     > * {
-      .highlight-target(transition);
+      .highlight-target();
     }
   }
+
 }
 
 section, div, span, table {
-  &:target, .target {
+
+  &::after {
+    .highlight-target(will-transition);
+  }
+
+  &:target, &.target, &.target-scroll {
+    position: relative;
+
     img {
       mix-blend-mode: multiply;
     }
+
+    &::after {
+      content: ' ';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      mix-blend-mode: multiply;
+    }
   }
-  &:target {
-    .highlight-animation();
+
+  &:target, &.target {
+    &::after {
+      .highlight-animation();
+    }
   }
-  .target {
-    .highlight-target(transition);
+
+  &.target-scroll::after {
+    .highlight-target();
   }
 }
 

resources/styles/components/media-preview.less

@@ -0,0 +1,47 @@
+.media-preview {
+  max-width: 50%;
+
+  &.scrollable {
+    .popover-content {
+      overflow: auto;
+      width: 100%;
+      height: inherit;
+    }
+  }
+
+  .tutor-figure();
+  .tutor-tables(@tutor-neutral-light, @tutor-neutral-light);
+
+  table {
+    text-align: left;
+
+    td {
+      padding: 4px;
+    }
+  }
+
+  figure span {
+    min-height: 1.75rem;
+    min-width: 100%;
+    position: relative;
+    .tutor-subtle-load(will-load; 'Loading...');
+
+    &::after {
+      font-size: 1.75rem;
+      line-height: 1em;
+    }
+  }
+
+  .image-loading {
+    figure {
+      min-width: 300px;
+      span {
+        .tutor-subtle-load(loading);
+      }
+    }
+  }
+}
+
+.media-preview-link {
+  display: inline-block;
+}

resources/styles/mixins.less

@@ -200,6 +200,31 @@
   }
 }
 
+.tutor-figure(){
+  figure {
+    display: table;
+    text-align: left;
+    padding: 0;
+    float: left;
+    img {
+      max-width: 100%;
+      border: 1px solid @border-color;
+      margin: 10px 0 0 0;
+      padding: 0;
+    }
+
+    figcaption {
+      display: table-caption;
+      caption-side: bottom;
+      color: @caption-font-color;
+      padding: 10px 0;
+      font-weight: 300;
+      font-style: italic;
+      line-height: 150%;
+    }
+  }
+}
+
 .tutor-tables() {
   table {
     width: 100%;

resources/styles/tutor.less

@@ -58,6 +58,7 @@
 @import './components/tutor-input';
 @import './components/reference-book/index';
 @import './components/tutor-input';
+@import './components/media-preview';
 
 // OLD Global
 @import './old/global/buttons';

resources/styles/variables/tutor-bootstrap.less

@@ -25,6 +25,8 @@
 
 @link-hover-color:      darken(@link-color, 5%);
 
+
+@popover-max-width:                   none;
 // //== Scaffolding
 // //
 // //## Settings for some of the most global styles.

src/components/book-content-mixin.cjsx

@@ -2,8 +2,11 @@ React = require 'react'
 _ = require 'underscore'
 S = require '../helpers/string'
 dom = require '../helpers/dom'
+
+{MediaPreview} = require './media-preview'
 {CourseStore} = require '../flux/course'
 {TaskStepStore} = require '../flux/task-step'
+{MediaStore} = require '../flux/media'
 ScrollTo = require './scroll-to'
 
 # According to the tagging legend exercises with a link should have `a.os-embed`
@@ -28,18 +31,16 @@ LinkContentMixin =
   componentDidUpdate: ->
     @processLinks()
 
+  componentWillUnmount: ->
+    @cleanUpLinks()
+
   contextTypes:
     router: React.PropTypes.func
 
   getCnxIdOfHref: (href) ->
     beforeHash = _.first(href.split('#'))
     _.last(beforeHash.split('/'))
 
-  getMediaTag: (media) ->
-    # form media tag text based on data-type or tag name
-    tag = media.getAttribute('data-type') or media.tagName
-    S.capitalize(tag)
-
   buildReferenceBookLink: (cnxId) ->
     {courseId} = @context.router.getCurrentParams()
     {query} = @props
@@ -61,44 +62,47 @@ LinkContentMixin =
     trueHref = link.getAttribute('href')
     link.hash.length > 0 and trueHref.substr(0, 1) isnt '#'
 
-  linkMediaElsewhere: (mediaCNXId, mediaLink) ->
-    pageUrl = @buildReferenceBookLink(mediaCNXId)
-    mediaLink.href = pageUrl + mediaLink.hash
-    mediaLink.target = '_blank' if @shouldOpenNewTab?()
-    # do this to ignore this link once adjusted
-    mediaLink.dataset.targeted = 'media'
+  getMedia: (mediaId) ->
+    root = @getDOMNode()
+    root.querySelector("##{mediaId}")
 
-  isMediaOnPage: (link) ->
+  cleanUpLinks: ->
     root = @getDOMNode()
-    try
-      media = root.querySelector(link.hash)
+    previewNodes = root.getElementsByClassName('media-preview-wrapper')
+
+    _.each(previewNodes, (previewNode) ->
+      React.unmountComponentAtNode(previewNode)
+    )
+
+  linkPreview: (link) ->
+    mediaId = link.hash.replace('#', '')
+    mediaDOM = @getMedia(mediaId) if mediaId
+    mediaCNXId = @getCnxIdOfHref(link.getAttribute('href')) or @props.cnxId or @getCnxId?()
+
+    previewNode = document.createElement('span')
+    previewNode.classList.add('media-preview-wrapper')
+    link.parentNode.replaceChild(previewNode, link)
 
-    media?
+    mediaProps =
+      mediaId: mediaId
+      cnxId: mediaCNXId
+      bookHref: @buildReferenceBookLink(mediaCNXId)
+      mediaDOMOnParent: mediaDOM
+      shouldLinkOut: @shouldOpenNewTab?()
+
+    mediaPreview = <MediaPreview {...mediaProps}>
+        {link.innerText}
+      </MediaPreview>
+
+    React.render(mediaPreview, previewNode)
 
   processLink: (link) ->
     if @isMediaLink(link)
-      if not @hasCNXId(link) and @isMediaOnPage(link)
-        @linkToThisPage(link)
-        return null
-      else
-        @linkToAnotherPage(link)
-        return null
+      @linkPreview(link)
+      return null
     else
       return link
 
-  linkToAnotherPage: (link) ->
-    mediaCNXId = @getCnxIdOfHref(link.getAttribute('href')) or @props.cnxId or @getCnxId?()
-    @linkMediaElsewhere(mediaCNXId, link)
-
-  linkToThisPage: (link) ->
-    root = @getDOMNode()
-    media = root.querySelector(link.hash)
-    tag = @getMediaTag(media)
-    link.innerText = tag if link.innerText is '[link]' and tag?
-    link.target = '_self'
-    # do this to ignore this link once adjusted
-    link.dataset.targeted = 'media'
-
   processLinks: ->
     _.defer(@_processLinks)