feat(mdjs-preview): Move platform and sizes settings above preview

Author: daKmoR

.changeset/funny-news-rhyme.md

@@ -0,0 +1,24 @@
+---
+'@mdjs/mdjs-preview': patch
+---
+
+The Platform and Size controls are now moved above the preview.
+For the web platform we added a special "inline" size.
+Only when platform=web & size=webInline it will render to dom.
+On all other selections it will render the preview via an iframe.
+
+```js
+sizes: [
+  {
+    key: 'webInline',
+    name: 'Inline',
+    platform: 'web',
+    width: 360,
+    height: 640,
+    dpr: 1,
+  },
+  {
+    // ...
+  },
+];
+```

docs/docs/markdown-javascript/overview.md

@@ -123,6 +123,14 @@ export const header = () => {
 };
 ```
 
+```js story-code
+// not defined for android
+```
+
+```js story-code
+// not defined for ios
+```
+
 #### Story Code
 
 If your preview is followed by a code blocks marked as `story-code` then those will be shown when switching between multiple platforms

docs/docs/markdown-javascript/preview.md

@@ -40,6 +40,14 @@ will result in
 export const foo = () => html` <demo-element></demo-element> `;
 ```
 
+```js story-code
+// not defined for android
+```
+
+```js story-code
+// not defined for ios
+```
+
 #### Story Code
 
 If your preview is followed by a code blocks marked as `story-code` then those will be shown when switching between multiple platforms

packages/mdjs-preview/src/MdJsPreview.js

@@ -107,8 +107,16 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
       // { key: 'ios', name: 'iOS' },
     ];
 
-    this.size = 'webSmall';
+    this.size = 'webInline';
     this.sizes = [
+      {
+        key: 'webInline',
+        name: 'Inline',
+        platform: 'web',
+        width: 360,
+        height: 640,
+        dpr: 1,
+      },
       {
         key: 'webSmall',
         name: 'Small',
@@ -241,6 +249,10 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
     if (this.lightDomRenderTarget && changeProps.has('story')) {
       render(this.story({ shadowRoot: this }), this.lightDomRenderTarget);
     }
+
+    if (changeProps.has('platform') || changeProps.has('size')) {
+      this.deviceMode = this.platform === 'web' && this.size === 'webInline' ? false : true;
+    }
   }
 
   disconnectedCallback() {
@@ -311,7 +323,6 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
   renderPlatforms() {
     if (this.platforms.length) {
       return html`
-        <h4>Platform</h4>
         <div
           class="segmented-control"
           @change=${
@@ -344,17 +355,27 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
     if (this.platforms.length) {
       return html`
         <div>
-          <h3>Platform</h3>
+          <h4>Platform</h4>
           ${this.renderPlatforms()}
         </div>
       `;
     }
   }
 
+  renderSize() {
+    if (this.sizes.length) {
+      return html`
+        <div>
+          <h4>Size</h4>
+          ${this.renderSizes()}
+        </div>
+      `;
+    }
+  }
+
   renderSizes() {
     if (this.sizes.length) {
       return html`
-        <h4>Size</h4>
         <div
           class="segmented-control"
           @change=${
@@ -387,7 +408,7 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
     return html`
       <div>
         <h3>Viewport</h3>
-        ${this.renderSizes()} ${this.renderAutoHeight()}
+        ${this.renderAutoHeight()}
       </div>
     `;
   }
@@ -571,6 +592,11 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
 
   render() {
     return html`
+      ${this.simulatorUrl
+        ? html`
+            <div class="platform-size-controls">${this.renderPlatform()} ${this.renderSize()}</div>
+          `
+        : ``}
       <div id="wrapper">
         <slot name="story"></slot>
         ${this.deviceMode === true
@@ -588,19 +614,28 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
           : nothing}
       </div>
       <lion-accordion class="options">
-        ${this.deviceMode
+        ${this.simulatorUrl
           ? html`
               <h3 slot="invoker">
                 <button>Settings</button>
               </h3>
               <div slot="content">
+                ${this.deviceMode
+                  ? ``
+                  : html`<div>
+                      Note: Additional settings become available when not in web inline mode
+                    </div>`}
                 <div class="settings-wrapper">
-                  ${this.renderPlatform()} ${this.renderViewport()} ${this.renderVisual()}
-                  ${this.renderLocalization()} ${this.renderSyncSettings()}
+                  ${this.deviceMode
+                    ? html`
+                        ${this.renderViewport()} ${this.renderVisual()} ${this.renderLocalization()}
+                        ${this.renderSyncSettings()}
+                      `
+                    : html` ${this.renderSyncSettings()} `}
                 </div>
               </div>
             `
-          : ''}
+          : ``}
         <h3 slot="invoker">
           <button>Code</button>
         </h3>
@@ -615,12 +650,6 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
         ? html`
             <div class="controls">
               <a href=${this.iframeUrl} target="_blank">Open simulation in new window</a>
-              <button
-                @click=${() => (this.deviceMode = !this.deviceMode)}
-                class="simulation-toggle"
-              >
-                ${this.deviceMode ? html`Disable` : html`Enable`} device simulation
-              </button>
             </div>
           `
         : ''}
@@ -638,6 +667,10 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
         display: none;
       }
 
+      :host(:not([device-mode])) #wrapper {
+        border: 2px solid #4caf50;
+      }
+
       iframe {
         border: 2px solid #4caf50;
         background: #fff;
@@ -732,6 +765,15 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) {
         padding: 15px 0;
       }
 
+      .platform-size-controls {
+        display: flex;
+        justify-content: flex-start;
+      }
+
+      .platform-size-controls > * {
+        margin-right: 25px;
+      }
+
       .controls {
         display: flex;
         justify-content: space-between;

packages/mdjs-preview/test-web/mdjs-preview.test.js

@@ -28,11 +28,8 @@ describe('mdjs-preview', () => {
     expect(preview1.edgeDistance).to.be.true;
     expect(preview2.edgeDistance).to.be.true;
 
-    preview1.platform = 'android';
     preview1.edgeDistance = false;
     await preview1.updateComplete;
-    expect(preview1.platform).to.equal('android');
-    expect(preview2.platform).to.equal('android');
     expect(preview1.edgeDistance).to.be.false;
     expect(preview2.edgeDistance).to.be.false;
   });