iframe width and tabs

docs/embed.md

@@ -1,3 +1,8 @@
 You can embed the URL using an iframe in your website.
 
 Optionally append `?readonly` to make the editor read-only.
+
+You can specify which tabs are to be active at start, and their width. Tab names are `html`, `css`, `js`, `console`, and `output`. Once specifying a tab to be active, none of defaults tabs will be active. You may specify a tab to be just active with average/standard width by passing `1` or specify custom width with any larger number which be parsed as percentage of window width to take.
+
+For example:
+`<iframe src='/?html=30&js=1&console=10&output=30&css=1' width=100% height=500 frameborder='0'></iframe>`

iFrameTest.html

@@ -0,0 +1,2 @@
+<!-- To test iframes go to localhost:4000/iFrameTest.html -->
+<iframe src='/?html=30&js=10&console=1&output=20&css=20' width=100% height=500 param='one' frameborder='0'></iframe>

src/store/iframe.js

@@ -0,0 +1,48 @@
+// lets you specify what tabs are to be opened on init, and what width they should be
+// 1 is just on of equal/standard width, and 50 is 50% width
+const pans = ['html', 'css', 'js', 'console', 'output']
+const nonembed = window.self === window.top
+const nulify = val => {
+  return nonembed ? null : val
+}
+const params = window.location.search.slice(1).split('&').map(x => x.split('='))
+const paramsO = params.reduce((a, x) => {
+  a[x[0]] = x[1]
+  return a
+}, {})
+
+const selected = pans.filter(x => Boolean(paramsO[x]))
+const visiblePans = nulify(selected.length ? selected : null)
+
+const sorted = pans.map(x => paramsO[x]).filter(x => x)
+const sortedNames = pans.filter(x => paramsO[x])
+const sortLen = sorted.length
+const specified = sorted.filter(x => x > 1)
+const specLen = specified.length
+// width specified
+let mutedStyles
+if (specLen) {
+  const sum = specified.reduce((a, x) => a + Number(x), 0)
+  const average = parseFloat((100 - sum) / (sortLen - specLen))
+  let left = 0
+  mutedStyles = sorted.map(x => {
+    let width
+    if (x > 1) {
+      width = x
+    } else {
+      width = average
+    }
+    const res = { left: per(left) }
+    left += Number(width)
+    res.right = per(100 - left)
+    return res
+  }).reduce((a, x, i) => {
+    a[sortedNames[i]] = x
+    return a
+  }, {})
+}
+const initialStyles = mutedStyles || {}
+function per(x) {
+  return parseFloat(x) + '%'
+}
+export { visiblePans, paramsO, initialStyles }

src/store/index.js

@@ -18,6 +18,7 @@ import progress from 'nprogress'
 import api from '@/utils/github-api'
 import req from 'reqjs'
 import Event from '@/utils/event'
+import { visiblePans } from './iframe'
 
 Vue.use(Vuex)
 
@@ -68,7 +69,7 @@ const store = new Vuex.Store({
   state: {
     ...emptyPans(),
     logs: [],
-    visiblePans: ['html', 'js', 'output'],
+    visiblePans: visiblePans || ['html', 'js', 'output'],
     activePan: 'js',
     autoRun: false,
     githubToken: localStorage.getItem('codepan:gh-token') || '',

src/utils/create-pan.js

@@ -7,6 +7,7 @@ import createEditor from '@/utils/create-editor'
 import Event from '@/utils/event'
 import panPosition from '@/utils/pan-position'
 import { hasNextPan, getHumanlizedTransformerName, getEditorModeByTransfomer } from '@/utils'
+import { initialStyles } from '../store/iframe'
 
 export default ({ name, editor, components } = {}) => {
   return {
@@ -82,6 +83,9 @@ export default ({ name, editor, components } = {}) => {
           ...style
         }
       })
+      if (initialStyles[name]) {
+        this.style = initialStyles[name]
+      }
     },
     methods: {
       ...mapActions(['updateCode', 'updateTransformer', 'setActivePan', 'editorChanged']),