From effe258c58988595f315c64f1ce7fcbcad67acb0 Mon Sep 17 00:00:00 2001
From: Matthew Schranz <schranz.m@gmail.com>
Date: Thu, 28 Mar 2013 11:55:16 -0400
Subject: [PATCH] Bug 857264 - Rewrite publish system to use WebComponents for
 each trackevent and media

---
 .gitmodules                                   |   6 +
 public/external/CustomElements                |   1 +
 public/external/WebComponents                 |   1 +
 public/src/embed.js                           |  13 +-
 public/src/popcorn.js                         |   1 +
 .../web-components/webmaker-components.html   | 753 ++++++++++++++++++
 .../assets/plugins/image/popcorn.image.js     |   7 +-
 .../assets/plugins/text/popcorn.text.js       |   3 +
 .../plugins/wikipedia/popcorn.wikipedia.js    |   7 +-
 server.js                                     |  54 +-
 views/embed.jade                              |   5 +-
 11 files changed, 822 insertions(+), 29 deletions(-)
 create mode 160000 public/external/CustomElements
 create mode 160000 public/external/WebComponents
 create mode 100755 public/src/web-components/webmaker-components.html

diff --git a/.gitmodules b/.gitmodules
index 962c7fabe..6456a362c 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,9 @@
 [submodule "public/external/popcorn-js"]
 	path = public/external/popcorn-js
 	url = git://github.com/mozilla/popcorn-js.git
+[submodule "public/external/WebComponents"]
+	path = public/external/WebComponents
+	url = git://github.com/toolkitchen/WebComponents.git
+[submodule "public/external/CustomElements"]
+	path = public/external/CustomElements
+	url = git://github.com/toolkitchen/CustomElements.git
diff --git a/public/external/CustomElements b/public/external/CustomElements
new file mode 160000
index 000000000..d1f37da2f
--- /dev/null
+++ b/public/external/CustomElements
@@ -0,0 +1 @@
+Subproject commit d1f37da2f2fce3faa47ed3394104ac296b64381b
diff --git a/public/external/WebComponents b/public/external/WebComponents
new file mode 160000
index 000000000..a83133654
--- /dev/null
+++ b/public/external/WebComponents
@@ -0,0 +1 @@
+Subproject commit a83133654378ebdb23c781dc73a109e29e9be77f
diff --git a/public/src/embed.js b/public/src/embed.js
index 2ebca9402..948a88207 100644
--- a/public/src/embed.js
+++ b/public/src/embed.js
@@ -266,8 +266,17 @@ function init() {
       "popcorn"
     ],
     function( URI, Controls, TextboxWrapper ) {
-      // cornfield writes out the Popcorn initialization code as popcornDataFn()
-      window.popcornDataFn();
+
+      // Popcorn loads after our custom elements have been parsed so we need to run through
+      // any popcorn calls they tried to make first.
+      var queuedFunctions = window.popcornFunctionQueue;
+
+      for ( var i = 0; i < queuedFunctions.length; i++ ) {
+        queuedFunctions[ i ]();
+      }
+
+      window.queuedFunctions = null;
+
       /**
        * Expose Butter so we can get version info out of the iframe doc's embed.
        * This "butter" is never meant to live in a page with the full "butter".
diff --git a/public/src/popcorn.js b/public/src/popcorn.js
index d95bfed81..28a4ebddd 100644
--- a/public/src/popcorn.js
+++ b/public/src/popcorn.js
@@ -64,6 +64,7 @@ requirejs.config({
     "popcorn.text": [ "popcorn.core" ],
     "popcorn.twitter": [ "popcorn.core" ],
     "popcorn.wikipedia": [ "popcorn.core" ]
+
   }
 });
 
diff --git a/public/src/web-components/webmaker-components.html b/public/src/web-components/webmaker-components.html
new file mode 100755
index 000000000..09a90de44
--- /dev/null
+++ b/public/src/web-components/webmaker-components.html
@@ -0,0 +1,753 @@
+
+<script>
+  /**
+   * Our "webmaker" object can keep track of all webmaker
+   * elements for the purpose of hooking into them, should
+   * we need to. For instance, a timeline visualizer might
+   * like to ask for "all currently known elements" that
+   * have timeline information, which it can get here.
+   */
+  (function( global ){
+    var components = [];
+    global.WebMaker = {
+      addComponent: function addComponent( c ) {
+        components.push(c);
+      },
+      getComponentList: function getComponentList() {
+        return components;
+      },
+      makeEditable: function makeEditable( c ) {
+        // Click to edit via contentEditable
+        c.addEventListener( "click", function( evt ) {
+          c.contentEditable = true;
+          c.blur();
+          c.focus();
+        }, false );
+
+        // Blur to end edit, and to commit the edits to not
+        // just this element, but also its "real" counterpart.
+        c.addEventListener( "blur", function( evt ) {
+          var e = c;
+          if ( e.webmakerElement ) {
+            e = e.webmakerElement;
+          }
+          c.removeAttribute( "contenteditable" );
+          e.innerHTML = c.innerHTML;
+        }, false );
+      }
+    };
+  }( window ));
+</script>
+
+
+<script>
+  /**
+   * If we do not have Popcorn available, we try to load it.
+   * While it's loading, we keep an object around that has the
+   * same event API for addeding "things" to be popped, but 
+   * rather than doing anything with them, it just queues them
+   * until Popcorn's up and running, at which point we clear
+   * the queue, processing every addition before letting the
+   * real Popcorn take over.
+   */
+  (function( global ){
+    var fnCache = [];
+
+    // load popcorn if we don't have it available already
+    if ( !global.Popcorn ) {
+      // Stub out Popcorn until it loads
+      global.Popcorn = function( fn ) {
+        fnCache.push( fn );      
+      };
+
+      global.popcornFunctionQueue = fnCache;
+    }
+  }( window ));
+</script>
+
+<element name="webmaker-media" attributes="href width height target">
+  <template>
+    <div class="webmaker-media">
+      <div class="media-container"></div>
+      <div id="footnote" class="footnote"></div>
+    </div>
+  </template>
+
+  <script>
+    // A helper function we'll use to track distinct media
+    // elements. All code in <element> -> <script> blocks is
+    // execute once, when the element's definition is read 
+    // by the browser.
+    var getNextCount = (function() {
+      var webmakerVideoElementCount = 0;
+      return function() {
+        return webmakerVideoElementCount++;
+      };
+    }());
+
+    // Then, specify what should happen when an element gets built,
+    // by extending its prototype with a readyCallback function.
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          if ( !window.pop ) {
+            Popcorn(function() {
+              window.pop = Popcorn.smart( self.attributes.getNamedItem( "target" ).nodeValue,
+                                          self.attributes.getNamedItem( "href" ).nodeValue, { id: "Butter-Generated" } );
+            });
+          } else {
+            var trackEvents = window.pop.getTrackEvents(),
+                trackEvent;
+
+            window.pop = Popcorn.smart( self.attributes.getNamedItem( "target" ).nodeValue,
+                                        self.attributes.getNamedItem( "href" ).nodeValue, { id: "Butter-Generated" } );
+
+            for ( var i = 0; i < trackEvents.length; i++ ) {
+              trackEvent = trackEvents[ i ];
+              window.pop[ trackEvent._natives.type ]( trackEvent );
+            }
+          }
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-text"
+  attributes="start end transition position alignment linkUrl fontSize fontColor fontDecorations backgroundColor shadowColor fontFamily top left width target shadow background">
+  <template>
+    <!-- Eventually we can have actual plugin content layouts here and pass this to the plugins themselves -->
+    <p><content></content></p>
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+          
+          function initText() {
+
+            if ( !window.pop ) {
+              Popcorn( initText );
+            } else {
+              var text = self.innerHTML,
+                  defaultDecorations = { bold: false, italics: false },
+                  start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  fontSize = self.attributes.getNamedItem( "fontSize" ) ? self.attributes.getNamedItem( "fontSize" ).nodeValue : 4,
+                  top = self.attributes.getNamedItem( "top" ) ? self.attributes.getNamedItem( "top" ).nodeValue : 0,
+                  left = self.attributes.getNamedItem( "left" ) ? self.attributes.getNamedItem( "left" ).nodeValue : 0,
+                  zindex = self.attributes.getNamedItem( "zindex" ) ? self.attributes.getNamedItem( "zindex" ).nodeValue : 1000,
+                  fontFamily =  self.attributes.getNamedItem( "fontFamily" ) ? self.attributes.getNamedItem( "fontFamily" ).nodeValue: "Vollkorn",
+                  fontColor = self.attributes.getNamedItem( "fontColor" ) ? self.attributes.getNamedItem( "fontColor" ).nodeValue : "#000000",
+                  position = self.attributes.getNamedItem( "position" ) ? self.attributes.getNamedItem( "position" ).nodeValue : "middle",
+                  alignment = self.attributes.getNamedItem( "alignment" ) ? self.attributes.getNamedItem( "alignment" ).nodeValue : "center",
+                  shadowColor = self.attributes.getNamedItem( "shadowColor" ) ? self.attributes.getNamedItem( "shadowColor" ).nodeValue : "",
+                  backgroundColor = self.attributes.getNamedItem( "backgroundColor" ) ? self.attributes.getNamedItem( "backgroundColor" ).nodeValue : "",
+                  width = self.attributes.getNamedItem( "width" ) ? self.attributes.getNamedItem( "width" ).nodeValue : 50,
+                  transition = self.attributes.getNamedItem( "transition" ) ? self.attributes.getNamedItem( "transition" ).nodeValue : "popcorn-fade",
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : window.pop.media.parentNode,
+                  linkUrl = self.attributes.getNamedItem( "linkUrl" ) ? self.attributes.getNamedItem( "linkUrl" ).nodeValue : "",
+                  fontDecorations = self.attributes.getNamedItem( "fontDecorations" ) ? self.attributes.getNamedItem( "fontDecorations" ).nodeValue : "",
+                  background = self.attributes.getNamedItem( "background" ) ? self.attributes.getNamedItem( "background" ).nodeValue : false,
+                  shadow = self.attributes.getNamedItem( "shadow" ) ? self.attributes.getNamedItem( "shadow" ).nodeValue : false;
+
+              if ( fontDecorations ) {
+                var decorations = fontDecorations.split( " " );
+
+                fontDecorations = {};
+
+                for ( var i = 0; i < decorations.length; i++ ) {
+                  fontDecorations[ decorations[ i ] ] = true;
+                }
+
+              } else {
+                fontDecorations = defaultDecorations;
+              }
+
+              if ( shadow === "true" ) {
+                shadow = true
+              } else {
+                shadow = false;
+              }
+
+              if ( background === "true" ) {
+                background = true;
+              } else {
+                background = false;
+              }
+
+              self.innerHTML = "";
+
+              window.pop.text({
+                start: start,
+                end: end,
+                text: text,
+                fontSize: fontSize,
+                target: target,
+                top: top,
+                left: left,
+                zindex: zindex,
+                fontFamily: fontFamily,
+                fontColor: fontColor,
+                position: position,
+                alignment: alignment,
+                backgroundColor: backgroundColor,
+                background: background,
+                shadow: shadow,
+                shadowColor: shadowColor,
+                linkUrl: linkUrl,
+                fontDecorations: fontDecorations,
+                transition: transition
+              });
+            }
+          }
+
+          initText();
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-image"
+  attributes="start end src transition left top height width count photosetId tags linkSrc zindex target">
+  <!-- Eventually we can have actual plugin content layouts here and pass this to the plugins themselves -->
+  <template>
+    <img src="">
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          function initImage() {
+
+            if ( !window.pop ) {
+              Popcorn( initImage );
+            } else {
+              var start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  src = self.attributes.getNamedItem( "src" ) ? self.attributes.getNamedItem( "src" ).nodeValue : "",
+                  top = self.attributes.getNamedItem( "top" ) ? self.attributes.getNamedItem( "top" ).nodeValue : 0,
+                  left = self.attributes.getNamedItem( "left" ) ? self.attributes.getNamedItem( "left" ).nodeValue : 0,
+                  zindex = self.attributes.getNamedItem( "zindex" ) ? self.attributes.getNamedItem( "zindex" ).nodeValue : 1000,
+                  linkSrc = self.attributes.getNamedItem( "linkSrc" ) ? self.attributes.getNamedItem( "linkSrc" ).nodeValue : "",
+                  tags = self.attributes.getNamedItem( "tags" ) ? self.attributes.getNamedItem( "tags" ).nodeValue : "",
+                  photosetId = self.attributes.getNamedItem( "photosetId" ) ? self.attributes.getNamedItem( "photosetId" ).nodeValue : "",
+                  count = self.attributes.getNamedItem( "count" ) ? self.attributes.getNamedItem( "count" ).nodeValue : 3,
+                  height = self.attributes.getNamedItem( "height" ) ? self.attributes.getNamedItem( "height" ).nodeValue : 100,
+                  width = self.attributes.getNamedItem( "width" ) ? self.attributes.getNamedItem( "width" ).nodeValue : 100,
+                  transition = self.attributes.getNamedItem( "transition" ) ? self.attributes.getNamedItem( "transition" ).nodeValue : "popcorn-fade",
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : window.pop.media.parentNode;
+
+              self.innerHTML = "";
+
+              window.pop.image({
+                start: start,
+                end: end,
+                src: src,
+                top: top,
+                left: left,
+                height: height,
+                width: width,
+                zindex: zindex,
+                linkSrc: linkSrc,
+                tags: tags,
+                photosetId: photosetId,
+                count: count,
+                transition: transition,
+                target: target
+              });
+            }
+          }
+
+          initImage();
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-wikipedia"
+  attributes="start end transition zindex top left width height target src lang">
+
+  <template>
+    <content></content>
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          function initWiki() {
+            
+            if ( !window.pop ) {
+              Popcorn( initWiki );
+            } else {
+              var start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  top = self.attributes.getNamedItem( "top" ) ? self.attributes.getNamedItem( "top" ).nodeValue : 25,
+                  left = self.attributes.getNamedItem( "left" ) ? self.attributes.getNamedItem( "left" ).nodeValue : 30,
+                  zindex = self.attributes.getNamedItem( "zindex" ) ? self.attributes.getNamedItem( "zindex" ).nodeValue : 1000,
+                  height = self.attributes.getNamedItem( "height" ) ? self.attributes.getNamedItem( "height" ).nodeValue : 50,
+                  width = self.attributes.getNamedItem( "width" ) ? self.attributes.getNamedItem( "width" ).nodeValue : 40,
+                  transition = self.attributes.getNamedItem( "transition" ) ? self.attributes.getNamedItem( "transition" ).nodeValue : "popcorn-fade",
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : window.pop.media.parentNode,
+                  lang = self.attributes.getNamedItem( "lang" ) ? self.attributes.getNamedItem( "lang" ).nodeValue : "en",
+                  src = self.attributes.getNamedItem( "src" ) ? self.attributes.getNamedItem( "src" ).nodeValue : "Popcorn.js";
+
+              self.innerHTML = "";
+
+              window.pop.wikipedia({
+                start: start,
+                end: end,
+                top: top,
+                left: left,
+                height: height,
+                width: width,
+                zindex: zindex,
+                transition: transition,
+                target: target,
+                src: src,
+                lang: lang
+              });
+            }
+          }
+
+          initWiki();
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-twitter"
+  attributes="start end transition zindex left width target layout numberOfTweets searchType search username">
+
+  <template>
+    <content></content>
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          function initTwitter() {
+            
+            if ( !window.pop ) {
+              Popcorn( initTwitter );
+            } else {
+              var start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  left = self.attributes.getNamedItem( "left" ) ? self.attributes.getNamedItem( "left" ).nodeValue : 0,
+                  zindex = self.attributes.getNamedItem( "zindex" ) ? self.attributes.getNamedItem( "zindex" ).nodeValue : 1000,
+                  width = self.attributes.getNamedItem( "width" ) ? self.attributes.getNamedItem( "width" ).nodeValue : 35,
+                  transition = self.attributes.getNamedItem( "transition" ) ? self.attributes.getNamedItem( "transition" ).nodeValue : "popcorn-fade",
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : window.pop.media.parentNode,
+                  layout = self.attributes.getNamedItem( "layout" ) ? self.attributes.getNamedItem( "layout" ).nodeValue : "feed",
+                  numberOfTweets = self.attributes.getNamedItem( "numberOfTweets" ) ? self.attributes.getNamedItem( "numberOfTweets" ).nodeValue : 10,
+                  searchType = self.attributes.getNamedItem( "searchType" ) ? self.attributes.getNamedItem( "searchType" ).nodeValue : "mixed",
+                  search = self.attributes.getNamedItem( "search" ) ? self.attributes.getNamedItem( "search" ).nodeValue : "",
+                  username = self.attributes.getNamedItem( "username" ) ? self.attributes.getNamedItem( "username" ).nodeValue : "";
+
+              self.innerHTML = "";
+
+              window.pop.twitter({
+                start: start,
+                end: end,
+                left: left,
+                width: width,
+                zindex: zindex,
+                transition: transition,
+                target: target,
+                layout: layout,
+                numberOfTweets: numberOfTweets,
+                search: search,
+                searchType: searchType,
+                username: username
+              });
+            }
+          }
+
+          initTwitter();
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-pause"
+  attributes="start end target duration">
+
+  <template>
+    <content></content>
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          function initPause() {
+            
+            if ( !window.pop ) {
+              Popcorn( initPause );
+            } else {
+              var start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : window.pop.media.parentNode,
+                  duration = self.attributes.getNamedItem( "duration" ) ? self.attributes.getNamedItem( "duration" ).nodeValue : 0;
+
+              self.innerHTML = "";
+
+              window.pop.pausePlugin({
+                start: start,
+                end: end,
+                duration: duration,
+                target: target
+              });
+            }
+          }
+
+          initPause();
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-skip"
+  attributes="start end target">
+
+  <template>
+    <content></content>
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          function initSkip() {
+
+            if ( !window.pop ) {
+              Popcorn( initSkip );
+            } else {
+              var start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : window.pop.media.parentNode;
+
+              window.pop.skip({
+                start: start,
+                end: end,
+                target: target
+              });
+            }
+          }
+
+          initSkip();
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-loop"
+  attributes="start end target loop">
+
+  <template>
+    <content></content>
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          function initLoop() {
+
+            if ( !window.pop ) {
+              Popcorn( initLoop );
+            } else {
+              var start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : window.pop.media.parentNode,
+                  loop = self.attributes.getNamedItem( "loop" ) ? self.attributes.getNamedItem( "loop" ).nodeValue : 0;
+
+              window.pop.loopPlugin({
+                start: start,
+                end: end,
+                target: target,
+                loop: loop
+              });
+            }
+          }
+
+          initLoop();
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-sequencer"
+  attributes="start end target source fallback width height top left from volume hidden mute zindex duration">
+
+  <template>
+    <content></content>
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          function initSequencer() {
+
+            if ( !window.pop ) {
+              Popcorn( initSequencer );
+            } else {
+              var start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : window.pop.media.parentNode,
+                  zindex = self.attributes.getNamedItem( "zindex" ) ? self.attributes.getNamedItem( "zindex" ).nodeValue : 1000,
+                  source = self.attributes.getNamedItem( "source" ) ? self.attributes.getNamedItem( "source" ).nodeValue : "",
+                  fallback = self.attributes.getNamedItem( "fallback" ) ? self.attributes.getNamedItem( "fallback" ).nodeValue : "",
+                  width = self.attributes.getNamedItem( "width" ) ? self.attributes.getNamedItem( "width" ).nodeValue : 100,
+                  height = self.attributes.getNamedItem( "height" ) ? self.attributes.getNamedItem( "height" ).nodeValue : 100,
+                  top = self.attributes.getNamedItem( "top" ) ? self.attributes.getNamedItem( "top" ).nodeValue : 0,
+                  left = self.attributes.getNamedItem( "left" ) ? self.attributes.getNamedItem( "left" ).nodeValue : 0,
+                  from = self.attributes.getNamedItem( "from" ) ? self.attributes.getNamedItem( "from" ).nodeValue : 0,
+                  volume = self.attributes.getNamedItem( "volume" ) ? self.attributes.getNamedItem( "volume" ).nodeValue : 100,
+                  hidden = self.attributes.getNamedItem( "hidden" ) ? self.attributes.getNamedItem( "hidden" ).nodeValue : false,
+                  mute = self.attributes.getNamedItem( "mute" ) ? self.attributes.getNamedItem( "mute" ).nodeValue : false,
+                  duration = self.attributes.getNamedItem( "duration" ) ? self.attributes.getNamedItem( "duration" ).nodeValue : "";
+
+              window.pop.sequencer({
+                start: start,
+                end: end,
+                target: target,
+                zindex: zindex,
+                source: source,
+                fallback: fallback,
+                width: width,
+                height: height,
+                top: top,
+                left: left,
+                from: from,
+                volume: volume,
+                hidden: hidden,
+                mute: mute,
+                duration: duration
+              });
+            }
+          }
+
+          initSequencer();
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-popup"
+  attributes="start end transition linkUrl fontPercentage fontColor fontDecorations fontFamily top left width target type triangle sound icon flip">
+  <template>
+    <!-- Eventually we can have actual plugin content layouts here and pass this to the plugins themselves -->
+    <p><content></content></p>
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          function initPopup() {
+
+            if ( !window.pop ) {
+              Popcorn( initPopup );
+            } else {
+              var text = self.innerHTML,
+                  defaultDecorations = { bold: false, italics: false },
+                  start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  fontPercentage = self.attributes.getNamedItem( "fontPercentage" ) ? self.attributes.getNamedItem( "fontPercentage" ).nodeValue : 4,
+                  top = self.attributes.getNamedItem( "top" ) ? self.attributes.getNamedItem( "top" ).nodeValue : 0,
+                  left = self.attributes.getNamedItem( "left" ) ? self.attributes.getNamedItem( "left" ).nodeValue : 0,
+                  zindex = self.attributes.getNamedItem( "zindex" ) ? self.attributes.getNamedItem( "zindex" ).nodeValue : 1000,
+                  fontFamily =  self.attributes.getNamedItem( "fontFamily" ) ? self.attributes.getNamedItem( "fontFamily" ).nodeValue: "Vollkorn",
+                  width = self.attributes.getNamedItem( "width" ) ? self.attributes.getNamedItem( "width" ).nodeValue : 50,
+                  transition = self.attributes.getNamedItem( "transition" ) ? self.attributes.getNamedItem( "transition" ).nodeValue : "popcorn-fade",
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : window.pop.media.parentNode,
+                  linkUrl = self.attributes.getNamedItem( "linkUrl" ) ? self.attributes.getNamedItem( "linkUrl" ).nodeValue : "",
+                  fontDecorations = self.attributes.getNamedItem( "fontDecorations" ) ? self.attributes.getNamedItem( "fontDecorations" ).nodeValue : "",
+                  type = self.attributes.getNamedItem( "type" ) ? self.attributes.getNamedItem( "type" ).nodeValue : "popup",
+                  triangle = self.attributes.getNamedItem( "triangle" ) ? self.attributes.getNamedItem( "triangle" ).nodeValue : "bottom left",
+                  sound = self.attributes.getNamedItem( "sound" ) ? self.attributes.getNamedItem( "sound" ).nodeValue : false,
+                  icon = self.attributes.getNamedItem( "icon" ) ? self.attributes.getNamedItem( "icon" ).nodeValue : "error",
+                  flip = self.attributes.getNamedItem( "flip" ) ? self.attributes.getNamedItem( "flip" ).nodeValue : false,
+                  fontColor = self.attributes.getNamedItem( "fontColor" ) ? self.attributes.getNamedItem( "fontColor" ).nodeValue : "#000000";
+
+              if ( fontDecorations ) {
+                var decorations = fontDecorations.split( " " );
+
+                fontDecorations = {};
+
+                for ( var i = 0; i < decorations.length; i++ ) {
+                  fontDecorations[ decorations[ i ] ] = true;
+                }
+
+              } else {
+                fontDecorations = defaultDecorations;
+              }
+
+              window.pop.popup({
+                start: start,
+                end: end,
+                text: text,
+                fontPercentage: fontPercentage,
+                target: target,
+                top: top,
+                left: left,
+                zindex: zindex,
+                fontFamily: fontFamily,
+                fontColor: fontColor,
+                linkUrl: linkUrl,
+                fontDecorations: fontDecorations,
+                type: type,
+                triangle: triangle,
+                sound: sound,
+                icon: icon,
+                flip: flip,
+                transition: transition,
+                width: width
+              });
+            }
+          }
+
+          initPopup();
+        }
+      }
+    });
+  </script>
+</element>
+
+<element name="webmaker-googlemap"
+  attributes="start end location width height lat lng top left zoom pitch heading fullscreen type transition zindex target">
+  <template>
+    <content></content>
+  </template>
+
+  <script>
+    // our element template:
+    var template = this.querySelector( "template" );
+
+    // our "what to do when this element is built" code:
+    this.register({
+      prototype: {
+        readyCallback: function() {
+          var self = this;
+
+          function initGoogleMaps() {
+
+            if ( !window.pop ) {
+              Popcorn( initGoogleMaps );
+            } else {
+              var start = self.attributes.getNamedItem( "start" ) ? self.attributes.getNamedItem( "start" ).nodeValue : 0,
+                  end = self.attributes.getNamedItem( "end" ) ? self.attributes.getNamedItem( "end" ).nodeValue : 5,
+                  top = self.attributes.getNamedItem( "top" ) ? self.attributes.getNamedItem( "top" ).nodeValue : 15,
+                  left = self.attributes.getNamedItem( "left" ) ? self.attributes.getNamedItem( "left" ).nodeValue : 15,
+                  zindex = self.attributes.getNamedItem( "zindex" ) ? self.attributes.getNamedItem( "zindex" ).nodeValue : 1000,
+                  height = self.attributes.getNamedItem( "height" ) ? self.attributes.getNamedItem( "height" ).nodeValue : 70,
+                  width = self.attributes.getNamedItem( "width" ) ? self.attributes.getNamedItem( "width" ).nodeValue : 70,
+                  transition = self.attributes.getNamedItem( "transition" ) ? self.attributes.getNamedItem( "transition" ).nodeValue : "popcorn-fade",
+                  target = self.attributes.getNamedItem( "target" ) ? self.attributes.getNamedItem( "target" ).nodeValue : "video-container",
+                  location = self.attributes.getNamedItem( "location" ) ? self.attributes.getNamedItem( "location" ).nodeValue : "",
+                  lat = self.attributes.getNamedItem( "lat" ) ? self.attributes.getNamedItem( "lat" ).nodeValue : "",
+                  lng = self.attributes.getNamedItem( "lng" ) ? self.attributes.getNamedItem( "lng" ).nodeValue : "",
+                  fullscreen = self.attributes.getNamedItem( "fullscreen" ) ? self.attributes.getNamedItem( "fullscreen" ).nodeValue : false,
+                  zoom = self.attributes.getNamedItem( "zoom" ) ? self.attributes.getNamedItem( "zoom" ).nodeValue : 10,
+                  pitch = self.attributes.getNamedItem( "pitch" ) ? self.attributes.getNamedItem( "pitch" ).nodeValue : 0,
+                  heading = self.attributes.getNamedItem( "heading" ) ? self.attributes.getNamedItem( "heading" ).nodeValue : 0,
+                  type = self.attributes.getNamedItem( "type" ) ? self.attributes.getNamedItem( "type" ).nodeValue : "ROADMAP";
+
+              window.pop.googlemap({
+                start: start,
+                end: end,
+                top: top,
+                left: left,
+                height: height,
+                width: width,
+                zindex: zindex,
+                transition: transition,
+                target: target,
+                location: location,
+                lat: lat,
+                lng: lng,
+                fullscreen: fullscreen,
+                zoom: zoom,
+                pitch: pitch,
+                heading: heading,
+                type: type
+              });
+            }
+          }
+
+          initGoogleMaps();
+        }
+      }
+    });
+  </script>
+</element>
+
diff --git a/public/templates/assets/plugins/image/popcorn.image.js b/public/templates/assets/plugins/image/popcorn.image.js
index 5e25c70e1..b0b64ec09 100644
--- a/public/templates/assets/plugins/image/popcorn.image.js
+++ b/public/templates/assets/plugins/image/popcorn.image.js
@@ -78,10 +78,11 @@
   }
 
   function validateDimension( value, fallback ) {
-    if ( typeof value === "number" ) {
-      return value;
+    value = parseFloat( value );
+    if ( value < 0 || value > 100 ) {
+      return fallback;
     }
-    return fallback;
+    return value;
   }
 
   function createImageDiv( imageUrl, linkUrl, instance ) {
diff --git a/public/templates/assets/plugins/text/popcorn.text.js b/public/templates/assets/plugins/text/popcorn.text.js
index 1c8060e67..9a276ac96 100644
--- a/public/templates/assets/plugins/text/popcorn.text.js
+++ b/public/templates/assets/plugins/text/popcorn.text.js
@@ -157,6 +157,9 @@
         },
         zindex: {
           hidden: true
+        },
+        target: {
+          hidden: true
         }
       }
     },
diff --git a/public/templates/assets/plugins/wikipedia/popcorn.wikipedia.js b/public/templates/assets/plugins/wikipedia/popcorn.wikipedia.js
index cd68a24cf..f8488dea1 100644
--- a/public/templates/assets/plugins/wikipedia/popcorn.wikipedia.js
+++ b/public/templates/assets/plugins/wikipedia/popcorn.wikipedia.js
@@ -28,10 +28,11 @@
   }
 
   function validateDimension( value, fallback ) {
-    if ( typeof value === "number" ) {
-      return value;
+    value = parseFloat( value );
+    if ( value < 0 || value > 100 ) {
+      return fallback;
     }
-    return fallback;
+    return value;
   }
 
   function sanitize( text ) {
diff --git a/server.js b/server.js
index babcbf403..e17016bb5 100644
--- a/server.js
+++ b/server.js
@@ -172,6 +172,7 @@ app.post( '/api/publish/:id',
           externalAssetsString = '',
           popcornString = '',
           currentMedia,
+          popcornElements = [],
           currentTrack,
           currentTrackEvent,
           mediaPopcornOptions,
@@ -181,7 +182,7 @@ app.post( '/api/publish/:id',
           templateScripts,
           startString,
           numSources,
-          j, k, len;
+          j, k, len, option;
 
       templateURL = templateFile.substring( templateFile.indexOf( '/templates' ), templateFile.lastIndexOf( '/' ) );
       baseHref = APP_HOSTNAME + templateURL + "/";
@@ -208,11 +209,10 @@ app.post( '/api/publish/:id',
         externalAssetsString += '\n';
       }
 
-      popcornString += '<script>';
-
       for ( i = 0; i < projectData.media.length; ++i ) {
         var mediaUrls,
-            mediaUrlsString = '[ "';
+            mediaUrlsString = '',
+            popcornEvent;
 
         currentMedia = projectData.media[ i ];
         // We expect a string (one url) or an array of url strings.
@@ -224,31 +224,45 @@ app.post( '/api/publish/:id',
 
         numSources = mediaUrls.length;
 
-        for ( k = 0; k < numSources - 1; k++ ) {
-          mediaUrlsString += mediaUrls[ k ] + '" , "';
+        for ( k = 0; k < numSources; k++ ) {
+          popcornString += '\n<webmaker-media href="' + mediaUrls[ k ] + '" target="' + currentMedia.target + '" ></webmaker-media>\n'
         }
-        mediaUrlsString += mediaUrls[ numSources - 1 ] + '" ]';
 
-        // src/embed.js initializes Popcorn by executing the global popcornDataFn()
-        popcornString += '\nvar popcornDataFn = function(){';
-        popcornString += '\nvar popcorn = Popcorn.smart("#' + currentMedia.target + '", ' +
-                         mediaUrlsString + ', ' + JSON.stringify( mediaPopcornOptions ) + ');';
         for ( j = 0; j < currentMedia.tracks.length; ++ j ) {
           currentTrack = currentMedia.tracks[ j ];
           for ( k = 0; k < currentTrack.trackEvents.length; ++k ) {
             currentTrackEvent = currentTrack.trackEvents[ k ];
-            popcornString += '\npopcorn.' + currentTrackEvent.type + '(';
-            popcornString += JSON.stringify( currentTrackEvent.popcornOptions, null, 2 );
-            popcornString += ');';
+            popcornString += '\n<webmaker-' + currentTrackEvent.type + ' ';
+
+            for ( var key in currentTrackEvent.popcornOptions ) {
+              if ( currentTrackEvent.popcornOptions.hasOwnProperty( key ) ) {
+                option = currentTrackEvent.popcornOptions[ key ];
+
+                if ( option !== "text" ) {
+
+                  if ( typeof option !== "object" ) {
+                    popcornString += key + '="' + option + '" ';
+                  } else {
+                    popcornString += key + '="';
+                    for ( var item in option ) {
+                      if ( option.hasOwnProperty( item ) && option[ item ] ) {
+                        popcornString += item + ' ';
+                      }
+                    }
+                    popcornString += '" ';
+                  }
+                }
+              }
+            }
+
+            if ( currentTrackEvent.popcornOptions.text ) {
+              popcornString += '>' + currentTrackEvent.popcornOptions.text + '</webmaker-' + currentTrackEvent.type + '>\n';
+            } else {
+              popcornString += '></webmaker-' + currentTrackEvent.type + '>\n';
+            }
           }
         }
-        popcornString += '};\n';
       }
-      popcornString += '</script>\n';
-
-      data = startString + baseString + templateScripts + externalAssetsString +
-             data.substring( headEndTagIndex, bodyEndTagIndex ) +
-             popcornString + data.substring( bodyEndTagIndex );
 
       // Convert 1234567890 => "kf12oi"
       var idBase36 = utils.generateIdString( id ),
diff --git a/views/embed.jade b/views/embed.jade
index 27a7c3d60..c38fc298a 100644
--- a/views/embed.jade
+++ b/views/embed.jade
@@ -4,7 +4,6 @@ html(lang='en')
     base(href='#{baseHref}')
     !{templateScripts}
     !{externalAssets}
-    !{popcorn}
     link(rel='stylesheet', href='/css/embed.css')
     link(rel='stylesheet', href="/css/controls.css")
     // This is the embed, the actual content is at the following URL
@@ -15,12 +14,16 @@ html(lang='en')
       @-ms-viewport { width: device-width; }
       @-webkit-viewport { width: device-width; }
       @viewport { width: device-width; }
+    script(src='/external/WebComponents/web-components.js')
+    script(src='/external/CustomElements/custom-elements.js')
+    link(href='/src/web-components/webmaker-components.html', rel='component')
     script(src='/src/embed.js')
   body.embed
     #container.container
       #video-container.video.video-container
         #video.video
       .loading-message
+      !{popcorn}
     #controls-big-play-button
     #post-roll-container
       #post-roll.embed-overlay