|
1 | 1 | <template> |
2 | | - <div class="snip"> |
3 | | - <q-editor |
4 | | - v-model="editor" |
5 | | - :definitions="{ |
6 | | - bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'} |
7 | | - }" |
| 2 | + <div> |
| 3 | + <!-- <input type="checkbox" v-model="lineNumbers"> Linenumbers --> |
| 4 | + {{ `${activeComponent}.vue` }} |
| 5 | + <prism-editor |
| 6 | + v-model="code" |
| 7 | + language="js" |
| 8 | + :line-numbers="lineNumbers" |
| 9 | + class="code-editor" |
| 10 | + :style="{ height: `${height}vh` }" |
8 | 11 | /> |
9 | 12 | </div> |
10 | 13 | </template> |
11 | 14 |
|
12 | 15 | <script> |
| 16 | +import { mapState } from 'vuex' |
| 17 | +import PrismEditor from 'vue-prism-editor' |
| 18 | +import 'prismjs' |
| 19 | +import 'prismjs/themes/prism-okaidia.css' |
| 20 | +import 'vue-prism-editor/dist/VuePrismEditor.css' |
| 21 | +
|
13 | 22 | export default { |
14 | 23 | data () { |
15 | 24 | return { |
16 | | - editor: 'Here we are overriding the <b>bold</b> command to include a label instead of an icon and also changing its tooltip.' |
| 25 | + code: `Select a component`, |
| 26 | + lineNumbers: true, |
| 27 | + height: null |
| 28 | + } |
| 29 | + }, |
| 30 | + components: { |
| 31 | + PrismEditor |
| 32 | + }, |
| 33 | + computed: { |
| 34 | + // needs access to current component aka activeComponent |
| 35 | + ...mapState(['componentMap', 'activeComponent']) |
| 36 | + }, |
| 37 | + methods: { |
| 38 | + getWindowHeight (e) { |
| 39 | + let minHeight = |
| 40 | + window.outerHeight < 900 ? 22 : window.outerHeight < 1035 ? 24 : 27.5 |
| 41 | + this.height = minHeight |
| 42 | + }, |
| 43 | + // calls createTemplate and createBoiler to generate snippet |
| 44 | + createCodeSnippet (componentName, children) { |
| 45 | + let result = `${this.createTemplate(componentName, children)}${this.createBoiler(componentName, children)}` |
| 46 | + console.log(`createCodeSnippet result: ${result}`) |
| 47 | + return result |
| 48 | + }, |
| 49 | + createTemplate (componentName, children) { |
| 50 | + let output = `` |
| 51 | + // let htmlArr = this.componentMap[compName].htmlList; |
| 52 | + output += ` <div>\n` |
| 53 | + children.forEach(name => { |
| 54 | + output += ` <${name}>\n </${name}>\n` |
| 55 | + }) |
| 56 | + let templateTagStr = this.writeTemplateTag(componentName) |
| 57 | + return `<template>\n ${output}${templateTagStr} </div>\n</template>` |
| 58 | + }, |
| 59 | + writeTemplateTag (componentName) { |
| 60 | + console.log('writeTemplateTag invoked!') |
| 61 | + // create reference object |
| 62 | + const htmlElementMap = { |
| 63 | + div: ['<div>', '</div>'], |
| 64 | + button: ['<button>', '</button>'], |
| 65 | + form: ['<form>', '</form>'], |
| 66 | + img: ['<img>', ''], |
| 67 | + link: ['<a href="#"/>', ''], |
| 68 | + list: ['<li>', '</li>'], |
| 69 | + paragraph: ['<p>', '</p>'], |
| 70 | + 'list-ol': ['<ol>', '</ol>'], |
| 71 | + 'list-ul': ['<ul>', '</ul>'], |
| 72 | + input: ['<input />', ''], |
| 73 | + navbar: ['<nav>', '</nav>'] |
| 74 | + } |
| 75 | + // loop to iterate through compName arr |
| 76 | + let htmlArr = this.componentMap[componentName].htmlList |
| 77 | + let outputStr = `` |
| 78 | + for (let el of htmlArr) { |
| 79 | + outputStr += ` ` |
| 80 | + outputStr += htmlElementMap[el.text][0] |
| 81 | + outputStr += htmlElementMap[el.text][1] |
| 82 | + outputStr += ` \n` |
| 83 | + } |
| 84 | + console.log(`outputStr from writeTemplateTag: ${outputStr}`) |
| 85 | + return outputStr |
| 86 | + }, |
| 87 | + createBoiler (componentName, children) { |
| 88 | + let str = '' |
| 89 | + children.forEach(name => { |
| 90 | + str += `import ${name} from '@/components/${name}.vue';\n` |
| 91 | + }) |
| 92 | + let childrenComponentNames = '' |
| 93 | + children.forEach(name => { |
| 94 | + childrenComponentNames += ` ${name},\n` |
| 95 | + }) |
| 96 | + return `\n\n<script>\n${str}\nexport default {\n name: '${componentName}',\n components: {\n${childrenComponentNames} }\n};\n<\/script>\n\n<style scoped>\n</style>` |
17 | 97 | } |
| 98 | + }, |
| 99 | + mounted () { |
| 100 | + // https://vuejs.org/v2/api/#Vue-nextTick |
| 101 | + // kinda like a promise, used for the window resize |
| 102 | + this.$nextTick(() => { |
| 103 | + window.addEventListener('resize', this.getWindowHeight) |
| 104 | +
|
| 105 | + this.getWindowHeight() |
| 106 | + }) |
| 107 | + // set code to this new string literal mofo |
| 108 | + // this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}` |
| 109 | + }, |
| 110 | + // updates code snippet, but broken cause children undefined, shows `function () { [native code] }` |
| 111 | + updated () { |
| 112 | + console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`) |
| 113 | + this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}` |
| 114 | + }, |
| 115 | + beforeDestroy () { |
| 116 | + window.removeEventListener('resize', this.getWindowHeight) |
18 | 117 | } |
19 | 118 | } |
20 | 119 | </script> |
21 | 120 |
|
22 | | -<style> |
23 | | -.snip{ |
24 | | - height: 150px; |
| 121 | +<style lang="stylus" scoped> |
| 122 | +// resize handled by vue lifecycle methods |
| 123 | +.code-editor { |
25 | 124 | } |
26 | 125 | </style> |
0 commit comments