From ce3ba529caa123cc2e3c39e525cc412ec2929a34 Mon Sep 17 00:00:00 2001 From: janat08 Date: Tue, 18 Jun 2019 18:03:15 +0600 Subject: [PATCH 1/2] iframe width and tabs --- docs/embed.md | 5 +++++ iFrameTest.html | 2 ++ src/store/iframe.js | 48 +++++++++++++++++++++++++++++++++++++++++ src/store/index.js | 3 ++- src/utils/create-pan.js | 4 ++++ 5 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 iFrameTest.html create mode 100644 src/store/iframe.js diff --git a/docs/embed.md b/docs/embed.md index 9b190eda..b3b0b1a9 100644 --- a/docs/embed.md +++ b/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: +`` diff --git a/iFrameTest.html b/iFrameTest.html new file mode 100644 index 00000000..10200c31 --- /dev/null +++ b/iFrameTest.html @@ -0,0 +1,2 @@ + + diff --git a/src/store/iframe.js b/src/store/iframe.js new file mode 100644 index 00000000..8a8062fc --- /dev/null +++ b/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 } diff --git a/src/store/index.js b/src/store/index.js index 07c7241f..0e54770c 100644 --- a/src/store/index.js +++ b/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') || '', diff --git a/src/utils/create-pan.js b/src/utils/create-pan.js index fc74fdad..768a0a2f 100644 --- a/src/utils/create-pan.js +++ b/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']), From 94098d63b960d2558b5951496aad8511feba79e2 Mon Sep 17 00:00:00 2001 From: janat08 Date: Sat, 22 Jun 2019 15:11:21 +0600 Subject: [PATCH 2/2] store use --- src/store/iframe.js | 4 +++- src/store/index.js | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/store/iframe.js b/src/store/iframe.js index 8a8062fc..6bae755a 100644 --- a/src/store/iframe.js +++ b/src/store/iframe.js @@ -1,3 +1,5 @@ +import store from '@/store/index.js' + // 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'] @@ -13,7 +15,7 @@ const paramsO = params.reduce((a, x) => { const selected = pans.filter(x => Boolean(paramsO[x])) const visiblePans = nulify(selected.length ? selected : null) - +store.dispatch('showPans', visiblePans) const sorted = pans.map(x => paramsO[x]).filter(x => x) const sortedNames = pans.filter(x => paramsO[x]) const sortLen = sorted.length diff --git a/src/store/index.js b/src/store/index.js index 0e54770c..b47f3c98 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -18,7 +18,6 @@ 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) @@ -69,7 +68,7 @@ const store = new Vuex.Store({ state: { ...emptyPans(), logs: [], - visiblePans: visiblePans || ['html', 'js', 'output'], + visiblePans: ['html', 'js', 'output'], activePan: 'js', autoRun: false, githubToken: localStorage.getItem('codepan:gh-token') || '', @@ -150,6 +149,7 @@ const store = new Vuex.Store({ commit('TOGGLE_PAN', payload) }, showPans({ commit }, pans) { + if (pans == null) return commit('SHOW_PANS', pans) }, async updateTransformer({ commit }, { type, transformer }) {