Skip to content

Commit

Permalink
Removes the need for Iframes in quickstart
Browse files Browse the repository at this point in the history
This registers all the components into Vue.  This ia a temp fix until github.com/vuejs/vuepress/issues/1173 is patched
bretterer committed Mar 7, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 00b74b4 commit a2350f7
Showing 2 changed files with 21 additions and 45 deletions.
7 changes: 6 additions & 1 deletion packages/@okta/vuepress-site/.vuepress/enhanceApp.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
var redirectsJson = require('./redirects.json');
import pageComponents from '@internal/page-components'

export default ({ router }) => {
export default ({ router, Vue }) => {
router.addRoutes(redirectsJson)

for (const [name, component] of Object.entries(pageComponents)) {
Vue.component(name, component)
}
}
59 changes: 15 additions & 44 deletions packages/@okta/vuepress-theme-default/layouts/Quickstart.vue
Original file line number Diff line number Diff line change
@@ -28,9 +28,7 @@
</ul>
</div>

<div id="client_content" class="example-content-well">
<div v-html="clientContent"></div>
</div>
<Content :pageKey="activeClientComponent" id="client_content" class="example-content-well"></Content>

<h2 id="server_setup">Server Setup</h2>

@@ -56,9 +54,7 @@
</ul>
</div>

<div id="server_content" class="example-content-well">
<div v-html="serverContent"></div>
</div>
<Content :pageKey="activeServerComponent" id="server_content" class="example-content-well"></Content>
</div>

<div class="TableOfContents TableOfContentsPreload">
@@ -68,8 +64,6 @@
</div>
<!-- END Page Content -->
</section>
<iframe style="display:none;" id="clientContentIframe" :src="clientContentUrl"></iframe>
<iframe style="display:none;" id="serverContentIframe" :src="serverContentUrl"></iframe>
<Footer/>
</div>
</template>
@@ -86,13 +80,7 @@
activeClient: null,
activeServer: null,
activeFramework: null,
activeTab: null,
clientContentUrl: null,
serverContentUrl: null,
clientContentLoading: true,
serverContentLoading: true,
clientContent: "",
serverContent: ""
activeTab: null
}
},
created: function () {
@@ -131,17 +119,28 @@
})
return activeServerFrameworks.frameworks
},
activeClientComponent: function () {
let component = this.$site.pages.find((page) => {
return page.regularPath.startsWith('/quickstart-fragments/'+this.activeClient+'/default-example')
})
return component.key
},
activeServerComponent: function () {
let client = this.$themeConfig.quickstarts.clients.filter((client) => {
return client.name === this.activeClient
})[0];
let component = this.$site.pages.find((page) => {
return page.regularPath.startsWith('/quickstart-fragments/' + this.activeServer + '/' + this.activeFramework + '-' + client.serverExampleType + '/')
})
return component.key
}
},
watch: {
activeClient: function () {
this.loadClientContent()
window.location.hash = '/'+this.activeClient+'/'+this.activeServer+'/'+this.activeFramework
},
activeServer: function () {
@@ -178,11 +177,9 @@
this.activeFramework = frameworkToSet
this.loadServerContent()
window.location.hash = '/'+this.activeClient+'/'+this.activeServer+'/'+this.activeFramework
},
activeFramework: function () {
this.loadServerContent()
window.location.hash = '/'+this.activeClient+'/'+this.activeServer+'/'+this.activeFramework
}
},
@@ -201,32 +198,6 @@
},
scrollTo: function (element) {
window.scrollTo(0, document.querySelectorAll(element)[0].offsetTop - 150)
},
loadClientContent: function () {
this.clientContentLoading = true
this.clientContentUrl = '/quickstart-fragments/' + this.activeClient + '/default-example/'
document.getElementById('clientContentIframe').onload = () => {
this.clientContentLoading = false
this.clientContent = document.getElementById('clientContentIframe').contentDocument.querySelector('.PageContent-main').innerHTML
}
},
loadServerContent: function () {
this.serverContentLoading = true
let client = this.$themeConfig.quickstarts.clients.filter((client) => {
return client.name === this.activeClient
})[0];
this.serverContentUrl = '/quickstart-fragments/' + this.activeServer + '/' + this.activeFramework + '-' + client.serverExampleType + '/'
document.getElementById('serverContentIframe').onload = () => {
this.serverContentLoading = false
this.serverContent = document.getElementById('serverContentIframe').contentDocument.querySelector('.PageContent-main').innerHTML
}
}
}
}

0 comments on commit a2350f7

Please sign in to comment.