preview, in progress

Polymer · Apr 9, 2014 · 470d675 · 470d675
1 parent 4bf3964
commit 470d675
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 8 deletions.
diff --git a/elements/x-preview/preview.html b/elements/x-preview/preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<head>
+  <title>Element Preview</title>
+
+  <script src="../../components/platform/platform.js"></script>
+  <link rel="import" href="x-gist-element-preview.html">
+
+  <style>
+
+    body, html {
+      margin: 0;
+      height: 100%;
+    }
+
+    x-gist-element-preview {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <x-gist-element-preview id="preview"></x-gist-element-preview>
+  <script>
+    addEventListener('polymer-ready', function() {
+      var fileId = window.location.hash.replace('#', '')
+      document.getElementById('preview').open(fileId);
+    })
+
+  </script>
+
+</body>
+</html>
diff --git a/elements/x-preview/x-gist-element-preview.html b/elements/x-preview/x-gist-element-preview.html
@@ -0,0 +1,42 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+
+<link rel="import" href="x-preview.html">
+<link rel="import" href="x-github-info.html">
+<link rel="import" href="../../components/github-elements/github-elements.html">
+
+<polymer-element name="x-gist-element-preview" extends="x-preview-iframe">
+  <template>
+    <github-element id="github" token="{{token}}" on-files-loaded="{{documentLoaded}}" on-token-changed="{{tokenChangeHandler}}"></github-element>
+    <x-github-info id="info" token="{{token}}"></x-github-info>
+    <shadow></shadow>
+  </template>
+  <script>
+
+  (function() {
+
+    Polymer('x-gist-element-preview', {
+
+      open: function(id) {
+        this.$.github.load(id);
+      },
+
+      documentLoaded: function(e, detail) {
+        var doc = detail && detail[this.$.info.fileName];
+        var re = /<polymer-element[^>]*name=(?:'|")([^'"]*)(?:'|")/;
+        var match = doc && doc.content && doc.content.match(re);
+        if (match) {
+          var name = match[1];
+          this.htmlContent = doc.content + '\n\n<' + name +'></' + name + '>';
+        }
+      }
+
+    });
+
+  })();
+
+  </script>
+</polymer-element>
diff --git a/elements/x-preview/x-github-info.html b/elements/x-preview/x-github-info.html
@@ -0,0 +1,19 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+
+<polymer-element name="x-github-info" attributes="fileName user token">
+  <script>
+
+    Polymer('x-github-info', {
+
+      fileName: 'designer.html',
+      user: 'designer-polymer',
+      token: '77777d8808da580cd6134b7390b5fd306c66d1d6'
+
+    });
+
+  </script>
+</polymer-element>
diff --git a/elements/x-preview/x-preview.html b/elements/x-preview/x-preview.html
@@ -91,7 +91,7 @@
 
 <polymer-element name="x-preview-iframe" extends="x-preview">
   <template>
-    <iframe id="output" style="width: 100%; height: 100%;"></iframe>
+    <iframe id="output" style="width: 100%; height: 100%; border: 0;"></iframe>
   </template>
   <script>
 
@@ -114,27 +114,27 @@
 
   (function() {
 
-    var previewWindow;
-
     Polymer('x-preview-window', {
 
+      windowName: 'preview', 
+
       prepareWindow: function() {
-        if (previewWindow) {
-          previewWindow.close();
+        if (this.previewWindow) {
+          this.previewWindow.close();
         }
-        previewWindow = window.open('', '', null, false);
+        this.previewWindow = window.open(this.windowName, '', null, false);
       },
 
       open: function(source) {
         this.htmlContent = source;
         this.prepareWindow();
-        this.writeToDoc(previewWindow.document);
+        this.writeToDoc(this.previewWindow.document);
       },
 
       openSource: function(source) {
         this.htmlContent = source;
         this.prepareWindow();
-        this.writeSourceToDoc(previewWindow.document);
+        this.writeSourceToDoc(this.previewWindow.document);
       }
     });