demo-tabs can detect whether stackblitz or plunkr

Polymer · Apr 25, 2018 · 8e1c4e9 · 8e1c4e9
1 parent 9e12e9d
commit 8e1c4e9
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 27 deletions.
diff --git a/app/elements/demo-tabs.html b/app/elements/demo-tabs.html
@@ -11,6 +11,7 @@
 <link rel="import" href="../bower_components/paper-tabs/paper-tab.html">
 <link rel="import" href="../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../bower_components/iron-selector/iron-selector.html">
+<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
 
 <dom-module id='demo-tabs'>
   <template>
@@ -58,27 +59,45 @@
       .tabstrip a {
         text-decoration: none;
       }
-    </style>
 
-    <div class="tabstrip layout horizontal center">
-      <paper-tabs selected="{{_selected}}" class="flex">
-        <slot name="tabs"></slot>
-      </paper-tabs>
-      <a href="[[src]]" target="_blank" hidden$="[[_hidePlunkrButton(src)]]">
-        <paper-button on-click="_plunkerLaunched" raised>
-          <iron-icon icon="pw-icons:exit-to-app"></iron-icon>
-          Edit on Plunker
-        </paper-button>
-      </a>
-    </div>
-
-    <iron-selector selected="[[_selected]]">
-      <slot></slot>
-    </iron-selector>
-
-    <div class="results">
-      <slot name="results"></slot>
-    </div>
+      [display="loading"] {
+        width: 100%;
+        height: 500px;
+        line-height: 500px;
+        background-color: #f5f5f5;
+        font-size: 2em;
+        text-align: center;
+        vertical-align: middle;
+      }
+    </style>
+    <iron-pages selected="{{_displaySelected}}" attr-for-selected="display">
+      <div display="static">
+        <div class="tabstrip layout horizontal center">
+          <paper-tabs selected="{{_selected}}" class="flex">
+            <slot name="tabs"></slot>
+          </paper-tabs>
+          <a href="[[src]]" target="_blank" hidden$="[[_hideEditorButton(_srcDefined,_projectPathDefined)]]">
+            <paper-button id="editButton" on-tap="_launchEditor" raised>
+              Edit and Preview
+            </paper-button>
+          </a>
+        </div>
+
+        <iron-selector selected="[[_selected]]">
+          <slot></slot>
+        </iron-selector>
+      </div>
+      <div display="loading">
+        Loading...
+      </div>
+      <stack-blitz
+          id="editor"
+          display="editor"
+          no-auto-embed
+          open-file="[[editorOpenFile]]"
+          project-path="[[projectPath]]">
+      </stack-blitz>
+    </iron-pages>
   </template>
 
   <script>
@@ -97,22 +116,88 @@
        */
       name: {
         type: String
-      }
+      },
+
+      editorOpenFile: {
+        type: String,
+        value: 'index.html',
+      },
+
+      /**
+       * absolute path to the project directory
+       *
+       * e.g. /3.0/start/samples/custom-element
+       *     or /3.0/start/samples/employee-list
+       */
+        projectPath: {
+        type: String,
+      },
+
+      _displaySelected: {
+        type: String,
+        value: 'static',
+      },
+
+      _isPlunkr: {
+        type: Boolean,
+      },
+
+      _isStackBlitz: {
+        type: Boolean,
+      },
     },
 
+    observers: ['_srcProjectPathChanged(src, projectPath)'],
+
     attached: function() {
       this._selected = 0;
     },
 
-    _hidePlunkrButton: function(src) {
-      return (!src || src === '');
+    _srcProjectPathChanged: function(src, projectPath) {
+      this._srcDefined = !!this.src;
+      this._projectPathDefined = !!this.projectPath;
+
+      if (!this._srcDefined && !this._projectPathDefined) {
+        this._hideEditorButton = true;
+      }
     },
 
-    // Call out to a global method defined by app.js
-    _plunkerLaunched: function() {
+    _hideEditorButton: function(srcDefined, prjoectPathDefined) {
+      return !srcDefined && !prjoectPathDefined;
+    },
+
+    _launchEditor() {
+      if (this._projectPathDefined) {
+        this._launchInlineEditor();
+      } else if (this._srcDefined) {
+        this._launchPlunkr();
+      }
+    },
+
+    _launchPlunkr: function() {
       if (window.recordPlunker) {
         window.recordPlunker(this.name);
       }
+    },
+
+    // Call out to a global method defined by app.js
+    _launchInlineEditor: function() {
+      this._displaySelected = 'loading';
+
+      const onError = function() {
+        this.$.editButton.disabled = true;
+        this.$.editButton.innerText = 'Error loading editor';
+        this._displaySelected = 'static';
+      }.bind(this);
+
+      const onLoad = function() {
+        this.$.editor.embed()
+            .then(function(){
+          this._displaySelected = 'editor';
+        }.bind(this)).catch(onError);
+      }.bind(this);
+
+      this.importHref('/elements/stack-blitz.html', onLoad, onError, true);
     }
   });
   </script>

diff --git a/bower.json b/bower.json
@@ -30,6 +30,7 @@
     "paper-toast": "PolymerElements/paper-toast#2",
     "google-youtube": "GoogleWebComponents/google-youtube#2",
     "google-map": "GoogleWebComponents/google-map#2",
-    "web-animations-js": "web-animations/web-animations-js#^2.2.5"
+    "web-animations-js": "web-animations/web-animations-js#^2.2.5",
+    "iron-pages": "PolymerElements/iron-pages#^2.1.1"
   }
 }
diff --git a/polymer.json b/polymer.json
@@ -2,7 +2,8 @@
   "entrypoint": "app/index.html",
   "shell": "app/elements/pw-shell.html",
   "fragments": [
-    "app/elements/lazy-elements.html"
+    "app/elements/lazy-elements.html",
+    "app/elements/stack-blitz.html"
   ],
   "builds": [{
     "bundle": true,