Add tablet frames and rotations

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 *-bundle.js
 .vscode
+
+.idea

README.md

@@ -60,6 +60,8 @@ The `iframe` accepts the following parameters *after the hash* in the url. You m
 - **`width`** - The width of the device. Defaults to `210`.
 - **`scale`** - Zoom the device screen. Defaults to `1`.
 - **`platform`** - One of `ios` or `android`. Defaults to `ios`. Currently this changes the phone image, but may also have an effect on how the code is executed in the future.
+- **`deviceType`** One of `phone` or `tablet`. Defaults to `phone`. This changes the frame image.
+- **`orientation`** One of `portrait` or `landscape`. Defaults to `portrait`. This allows to rotate the frame image.
 - **`entry`** - The filename of the entry file. This is only relevant when showing multiple files with the `files` parameter. Defaults to `index.js`.
 - **`initialTab`** - The filename of the tab to show by default. This is only relevant when showing multiple files with the `files` parameter. Defaults to `index.js`.
 - **`fullscreen`** - Show a button to enable fullscreen editing. Defaults to `false`. Note that the iframe must have the `allowfullscreen` attribute for this to work.

components/workspace/Phone.js → components/workspace/Device.js

@@ -2,32 +2,44 @@ import React, { Component } from 'react'
 import pureRender from 'pure-render-decorator'
 
 import { prefix, prefixObject } from '../../utils/PrefixInlineStyles'
-import PHONES from '../../constants/Phones'
+import DEVICES from '../../constants/Devices'
 
 @pureRender
 export default class extends Component {
 
   static defaultProps = {
     width: 500,
-    device: 'ios',
+    platform: 'ios',
+    deviceType: 'phone',
+    orientation: 'portrait',
     scale: 1,
   }
 
   render() {
-    const {children, width, device, scale} = this.props
-    const {deviceImageUrl, deviceImageWidth, deviceImageHeight, screenWidth, screenHeight} = PHONES[device]
+    const {children, width, platform, deviceType, orientation, scale} = this.props
 
+    const {deviceImageUrl, deviceImageWidth, deviceImageHeight, screenWidth, screenHeight} = DEVICES[deviceType][platform]
+    const isLandscape = orientation === 'landscape';
     const imageScale = width / deviceImageWidth
     const height = imageScale * deviceImageHeight
 
+    const screenOrientedWidth = isLandscape ? screenHeight : screenWidth;
+    const screenOrientedHeight = isLandscape ? screenWidth : screenHeight;
+
     const styles = prefixObject({
       container: {
+        width: isLandscape ? height : width,
+        height: isLandscape ? width : height,
+        margin: '0 auto',
+      },
+      frame: {
         width,
         height,
         margin: '0 auto',
         position: 'relative',
         backgroundImage: `url(${deviceImageUrl})`,
         backgroundSize: 'cover',
+        transform: isLandscape && `rotate(-90deg) translateX(${(height - width) / 2}px)`,
       },
       screen: {
         position: 'absolute',
@@ -39,10 +51,11 @@ export default class extends Component {
       },
       overlay: {
         position: 'absolute',
-        top: (deviceImageHeight - screenHeight) / 2 * imageScale,
-        left: (deviceImageWidth - screenWidth) / 2 * imageScale,
-        width: screenWidth * imageScale / scale,
-        height: screenHeight * imageScale / scale,
+        top: ((isLandscape ? deviceImageWidth : deviceImageHeight) - screenOrientedHeight) / 2 * imageScale,
+        left: ((isLandscape ? deviceImageHeight : deviceImageWidth) - screenOrientedWidth) / 2 * imageScale,
+        width: screenOrientedWidth * imageScale / scale,
+        height: screenOrientedHeight * imageScale / scale,
+
         transform: `scale(${scale}, ${scale})`,
         transformOrigin: '0 0 0px',
         display: 'flex',
@@ -51,7 +64,9 @@ export default class extends Component {
 
     return (
       <div style={styles.container}>
-        <div style={styles.screen} />
+        <div style={styles.frame}>
+          <div style={styles.screen} />
+        </div>
         <div style={styles.overlay}>
           {children}
         </div>

components/workspace/PlayerFrame.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import pureRender from 'pure-render-decorator'
 
-import Phone from './Phone'
+import Device from './Device'
 import { prefixObject } from '../../utils/PrefixInlineStyles'
 
 const styles = prefixObject({
@@ -17,6 +17,8 @@ export default class extends Component {
 
   static defaultProps = {
     platform: 'ios',
+    deviceType: 'phone',
+    orientation: 'portrait',
     width: 300,
     scale: 1,
     assetRoot: '',
@@ -111,20 +113,22 @@ export default class extends Component {
   }
 
   render() {
-    const {width, scale, platform} = this.props
+    const {width, scale, platform, deviceType, orientation} = this.props
 
     if (platform === 'web') {
       return this.renderFrame()
     }
 
     return (
-      <Phone
+      <Device
         width={width}
-        device={platform}
+        platform={platform}
+        deviceType={deviceType}
+        orientation={orientation}
         scale={scale}
       >
         {this.renderFrame()}
-      </Phone>
+      </Device>
     )
   }
 }

components/workspace/Workspace.js

@@ -117,6 +117,8 @@ export default class extends Component {
     initialTab: 'index.js',
     onChange: () => {},
     platform: null,
+    deviceType: null,
+    orientation: null,
     scale: null,
     width: null,
     assetRoot: null,
@@ -406,7 +408,7 @@ export default class extends Component {
   }
 
   renderPlayer = (key) => {
-    const {width, scale, platform, assetRoot, vendorComponents, externalStyles, playerStyleSheet, playerCSS, playerTitle, consoleOptions} = this.props
+    const {width, scale, platform, deviceType, orientation, assetRoot, vendorComponents, externalStyles, playerStyleSheet, playerCSS, playerTitle, consoleOptions} = this.props
     const {showLogs, logs} = this.state
 
     const style = externalStyles.playerPane
@@ -432,6 +434,8 @@ export default class extends Component {
               width={width}
               scale={scale}
               platform={platform}
+              deviceType={deviceType}
+              orientation={orientation}
               assetRoot={assetRoot}
               vendorComponents={vendorComponents}
               playerStyleSheet={playerStyleSheet}

constants/Phones.js → constants/Devices.js

@@ -23,18 +23,36 @@
 // Devices, taken from the framerjs codebase
 // Devices have pixel density of 2, but we also zoom in for visibility at small sizes.
 export default {
-  ios: {
-    deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/iphone-6-silver.png',
-    deviceImageWidth: 870,
-    deviceImageHeight: 1738,
-    screenWidth: 750,
-    screenHeight: 1334,
+  phone: {
+    ios: {
+      deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/iphone-6-silver.png',
+      deviceImageWidth: 870,
+      deviceImageHeight: 1738,
+      screenWidth: 750,
+      screenHeight: 1334,
+    },
+    android: {
+      deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/google-nexus-5x.png',
+      deviceImageWidth: 1204,
+      deviceImageHeight: 2432,
+      screenWidth: 1080,
+      screenHeight: 1920,
+    },
   },
-  android: {
-    deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/google-nexus-5x.png',
-    deviceImageWidth: 1204,
-    deviceImageHeight: 2432,
-    screenWidth: 1080,
-    screenHeight: 1920,
+  tablet: {
+    ios: {
+      deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/apple-ipad-pro-silver.png',
+      deviceImageWidth: 2448,
+      deviceImageHeight: 3432,
+      screenWidth: 2048,
+      screenHeight: 2732,
+    },
+    android: {
+      deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/google-nexus-9.png',
+      deviceImageWidth: 1896,
+      deviceImageHeight: 2648,
+      screenWidth: 1536,
+      screenHeight: 2048,
+    }
   },
 }

index.js

@@ -27,6 +27,8 @@ let {
   entry = 'index.js',
   initialTab = 'index.js',
   platform = 'ios',
+  deviceType = 'phone',
+  orientation = 'portrait',
   width = '210',
   scale = '1',
   assetRoot = '',
@@ -78,6 +80,8 @@ const root = (
       entry={entry}
       initialTab={initialTab}
       platform={platform}
+      deviceType={deviceType}
+      orientation={orientation}
       assetRoot={assetRoot}
       scale={parseFloat(scale)}
       width={parseFloat(width)}