Move title/credit outside of iframe

Big batch of changes toward #48: - Title/credit moved outside of iframe context into static markup (which is now updated to v1.1) - Flexbox reverted - Note repositioning reverted (thank heavens) - Test page enhanced with lots of examples and made wider
documentcloud · Jan 21, 2016 · 95adb70 · 95adb70
1 parent dbd055a
commit 95adb70
Show file tree

Hide file tree

Showing 12 changed files with 154 additions and 135 deletions.
diff --git a/dist/page_embed.css b/dist/page_embed.css
diff --git a/dist/page_embed.js b/dist/page_embed.js
diff --git a/examples/embed.html b/examples/embed.html
@@ -1,31 +1,45 @@
 <!DOCTYPE html>
 <html class="DC-embed-iframe" lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link type="text/css" rel="stylesheet" href="../dist/page_embed.css">
-  </head>
-  <body>
-    <div id="DC-embed-container"></div>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>DocumentCloud</title>
+  <link rel="alternate" type="application/json+oembed" href="https://www.documentcloud.org/api/oembed.json?url=https%3A%2F%2Fwww.documentcloud.org%2Fdocuments%2F282753-lefler-thesis%2Fpages%2F57.html" title="Page 57 of Lefler Thesis">
+  <link type="text/css" rel="stylesheet" href="../dist/page_embed.css">
+</head>
+<body>
 
-    <script src="../dist/page_embed.js"></script>
-    <script>
-      function getParameterByName(name) {
-          name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
-          var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
-              results = regex.exec(location.search);
-          return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
-      }
+  <div id="DC-embed-container">
+    <img src="//www.documentcloud.org/documents/282753/pages/lefler-thesis-p57-normal.gif" alt="Page 57 of Lefler Thesis" style="position:absolute;width:100%;height:auto">
+  </div>
 
-      var url = getParameterByName('url');
-      if (url) {
-        DocumentCloud.embed.load(url, {
-          container: '#DC-embed-container',
-          // pageNavigator: true,
-          // text: true,
-        });
-      }
-    </script>
-  </body>
+<script src="../dist/page_embed.js"></script>
+<script>
+  function getParameterByName(name) {
+      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+          results = regex.exec(location.search);
+      return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+  }
+
+  var unenhanced = !!getParameterByName('unenhanced');
+  if (!unenhanced) {
+    var url = getParameterByName('url');
+    if (url) {
+      DocumentCloud.embed.load(url, {
+        container: '#DC-embed-container',
+        // pageNavigator: true,
+        // text: true,
+      });
+    } else {
+      DocumentCloud.embed.load('https://www.documentcloud.org/documents/282753-lefler-thesis/pages/57.html', {
+        container: '#DC-embed-container',
+        // pageNavigator: true,
+        // text: true,
+      });
+    }
+  }
+</script>
+</body>
 </html>
diff --git a/examples/embed_code.html b/examples/embed_code.html
@@ -1,9 +1,16 @@
-<div class="DC-embed" data-version="1.0" style="font-size:10pt">
-  <p><a class="DC-embed-resource" href="https://www.documentcloud.org/documents/282753-lefler-thesis.html#document/p57" title="View page 57 of Lefler Thesis on DocumentCloud in new window or tab" target="_blank">Page 57 of Lefler Thesis</a></p>
-  <img src="//www.documentcloud.org/documents/282753/pages/lefler-thesis-p57-normal.gif" alt="Page 57 of Lefler Thesis" style="border:1px solid #ccc;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:700px;">
-  <p>
-    Contributed to DocumentCloud by Ted Han of DocumentCloud &bull;
-    <a href="https://www.documentcloud.org/documents/282753/pages/lefler-thesis-p57.txt" title="View text of page 57 of Lefler Thesis in a new window or tab" target="_blank">View page as text</a>
-  </p>
+<div data-version="1.1" style="color:#999">
+  <div style="font-size:10pt;line-height:14pt;">
+    Page 57 of <a class="DC-embed-resource" href="https://www.documentcloud.org/documents/282753-lefler-thesis.html#document/p57" title="View page 57 of Lefler Thesis on DocumentCloud in new window or tab" target="_blank">Lefler Thesis</a>
+  </div>
+  <div style="position:relative;padding-bottom:129.428571428571428571%;height:0;overflow:hidden;max-width:100%;margin:0.5em 0;border:1px solid #ccc;-webkit-box-sizing:border-box;clear:both">
+    <iframe src="embed.html" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>
+  </div>
+  <div style="font-size:8pt;line-height:12pt;text-align:center">
+    Contributed to
+              <a href="https://www.documentcloud.org/" title="Go to DocumentCloud in new window or tab" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAAAQCAYAAACGJ+SRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzY4NjJFQjBCNzJGMTFFNTlFQzVCRjQzQzg1OEM1RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzY4NjJFQjFCNzJGMTFFNTlFQzVCRjQzQzg1OEM1RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEMUJFRjZGRkI3MkUxMUU1OUVDNUJGNDNDODU4QzVGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEMUJFRjcwMEI3MkUxMUU1OUVDNUJGNDNDODU4QzVGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlXvYd8AAAePSURBVHja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" width="85" alt="DocumentCloud"></a> by
+    <a href="https://www.documentcloud.org/public/search/Account:2258-ted-han" title="View all documents contributed to DocumentCloud by Ted Han in new window or tab" target="_blank">Ted Han</a> of
+    <a href="https://www.documentcloud.org/public/search/Group:dcloud" title="View all documents contributed to DocumentCloud by DocumentCloud in new window or tab" target="_blank">DocumentCloud</a> &bull;
+    <a href="https://www.documentcloud.org/documents/282753-lefler-thesis.html#document/p57" title="View page 57 of Lefler Thesis on DocumentCloud in new window or tab" target="_blank">View entire document</a> or
+    <a href="https://www.documentcloud.org/documents/282753/pages/lefler-thesis-p57.txt" title="View text of page 57 of Lefler Thesis on DocumentCloud in new window or tab" target="_blank">read the text</a>
+  </div>
 </div>
-<script src="../dist/enhance.js"></script>
diff --git a/examples/examples.css b/examples/examples.css
@@ -10,9 +10,13 @@ h2 {
   line-height: 1.3em;
 }
 
+h3 {
+  font-size: 1em;
+}
+
 .main {
   margin: 0 auto;
-  max-width: 960px;
+  max-width: 1280px;
 }
 
 nav,

diff --git a/examples/iframe.html b/examples/iframe.html
@@ -27,7 +27,6 @@ <h1>DocumentCloud Page Embed iframe Test</h1>
         </div>
       </section>
 
-
       <div class='embed-container'><iframe src='embed.html?url=https%3A%2F%2Fwww.documentcloud.org%2Fdocuments%2F282753-lefler-thesis.html%23document%2Fp57' frameborder='0' allowfullscreen></iframe></div>
 
     </div>