separate preview functionality to be standalone.

Polymer · Apr 10, 2014 · 5d68242 · 5d68242
1 parent 93d48e1
commit 5d68242
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 26 deletions.
diff --git a/elements/designer-element/designer-element.html b/elements/designer-element/designer-element.html
@@ -9,7 +9,7 @@
 
 <link rel="import" href="../x-dom-serializer/x-dom-serializer.html">
 <link rel="import" href="../x-inspector/x-inspector.html">
-<link rel="import" href="../x-preview/x-preview.html">
+<link rel="import" href="../x-preview/x-github-info.html">
 <link rel="import" href="../x-file-document/x-file-document.html">
 
 <polymer-element name="designer-element">
@@ -63,8 +63,8 @@
   </core-pages>
 
   <x-dom-serializer id="serializer"></x-dom-serializer>
-  <x-preview-window id="preview"></x-preview-window>
 
+  <x-github-info id="githubInfo" token="{{githubToken}}"></x-github-info>
   <github-element id="github" token="{{githubToken}}" on-files-loaded="{{documentLoaded}}" on-files-saved="{{documentSaved}}" on-token-changed="{{tokenChangeHandler}}"></github-element>
 
 </template>
@@ -73,9 +73,6 @@
   Polymer('designer-element', {
     selected: 'design',
     remoteHtml: '',
-    fileName: 'designer.html',
-    githubUser: 'designer-polymer',
-    githubToken: '77777d8808da580cd6134b7390b5fd306c66d1d6',
 
     ready: function() {
       document.addEventListener('keydown', 
@@ -208,7 +205,7 @@
 
     saveAction: function() {
       var options = {};
-      options[this.fileName] = {content: this.html};
+      options[this.$.githubInfo.fileName] = {content: this.html};
       if (this.fileId) {
         this.$.github.update(this.fileId, 'designer', true, options);
       } else {
@@ -238,7 +235,7 @@
     },
 
     documentLoaded: function(event, detail) {
-      var doc = detail && detail[this.fileName];
+      var doc = detail && detail[this.$.githubInfo.fileName];
       if (doc) {
         this.remoteHtml = doc.content;
       }
@@ -272,15 +269,16 @@
     },
 
     getGistUrl: function() {
-      return 'https://gist.github.com/' + this.githubUser + '/' + this.fileId;
+      return 'https://gist.github.com/' + this.$.githubInfo.user + '/' + this.fileId;
     },
 
     previewAction: function() {
-      var html = this.html;
-      // TODO(sorvell): need a better way to inject the element
-      var name = this.designer.$.canvas.designHost.name;
-      html += '\n\n<' + name + '></' + name + '>\n';
-      this.$.preview.open(html);
+      if (this.fileId) {
+        if (this.previewWindow) {
+          this.previewWindow.close();
+        }
+        this.previewWindow = window.open('preview.html#' + this.fileId, 'preview');
+      }
     }
 
   });

diff --git a/elements/x-preview/x-gist-element-preview.html b/elements/x-preview/x-gist-element-preview.html
@@ -4,9 +4,9 @@
 license that can be found in the LICENSE file.
 -->
 
+<link rel="import" href="../../components/github-elements/github-elements.html">
 <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>

diff --git a/elements/x-preview/x-preview.html b/elements/x-preview/x-preview.html
@@ -50,16 +50,18 @@
 
       outputPreviewHTML: function() {
         var url = new URL(document.baseURI);
-        url.pathname += 'components/element/';
-        url = url.origin + url.pathname;
+        var path = url.pathname.split('/');
+        path.pop();
+        path = path.join('/');
+        path += '/components/element/';
+        url = url.origin + path;
         // put base href in head
         var h = '<base href="' + url + '">\n';
         return this.makeOutputHTML(h, this.htmlContent);
       },
 
-      makeOutputLink: function() {
-        var dataUrl = 'data:text/html;base64,';
-        return dataUrl + btoa(this.outputSource());
+      makeLink: function(html) {
+        return 'data:text/html;base64,' + btoa(html);
       },
 
       makeOutputHTML: function(head, body) {
@@ -72,6 +74,7 @@
         // style
         html += '<style>\n';
         html += '  body {\n';
+        html += '    margin: 0;\n';
         html += '    font-size: 14px;\n';
         html += '    font-family: "Helvetica Neue", "Roboto", "Arial", sans-serif;\n';
         html += '    -webkit-tap-highlight-color: rgba(0,0,0,0);\n';
@@ -91,17 +94,22 @@
 
 <polymer-element name="x-preview-iframe" extends="x-preview">
   <template>
-    <iframe id="output" style="width: 100%; height: 100%; border: 0;"></iframe>
+    <style>
+      #output {
+        display: block; 
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+    </style>
+    <iframe id="output"></iframe>
   </template>
   <script>
 
     Polymer('x-preview-iframe', {
 
       htmlContentChanged: function() {
-        this.$.output.src = '';
-        this.asyncMethod(function() {
-          this.writeToDoc(this.$.output.contentDocument);
-        });
+        this.$.output.src = this.makeLink(this.outputPreviewHTML());
       }
 
     });

diff --git a/elements/x-preview/preview.html → preview.html b/elements/x-preview/preview.html → preview.html
@@ -3,8 +3,8 @@
 <head>
   <title>Element Preview</title>
 
-  <script src="../../components/platform/platform.js"></script>
-  <link rel="import" href="x-gist-element-preview.html">
+  <script src="components/platform/platform.js"></script>
+  <link rel="import" href="elements/x-preview/x-gist-element-preview.html">
 
   <style>