Add code setting type

bakerkretzmar · May 10, 2019 · 836adaf · 836adaf
1 parent fcae206
commit 836adaf
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,11 @@
 
 All notable changes to `nova-settings-tool` will be documented in this file.
 
-## 0.2.1 – 2019-04-09
+## 0.3.1 – 2019-05-09
+
+- Add `code` setting type
+
+## 0.3.0 – 2019-04-09
 
 - Add `textarea` setting type ([#11](https://github.com/bakerkretzmar/nova-settings-tool/pull/11))
 - Fix bug translating the "Settings saved!" message

diff --git a/config/settings.php b/config/settings.php
@@ -106,6 +106,18 @@
                     ],
                 ],
 
+                [
+                    'key' => 'snippet',
+                    'name' => 'Code Snippet',
+                    'type' => 'code',
+                    'language' => 'javascript',
+                    'description' => 'Code to inject into the homepage.',
+                    'link' => [
+                        'text' => 'Documentation',
+                        'url' => '/documentation#new_feature',
+                    ],
+                ],
+
             ],
 
         ],

diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "codemirror": "^5.46.0",
         "cross-env": "^5.0.0",
         "laravel-mix": "^1.0"
     },

diff --git a/resources/js/components/SettingsTool.vue b/resources/js/components/SettingsTool.vue
@@ -40,6 +40,16 @@
                         @input="handleInput"
                     />
 
+                    <code-setting
+                        v-if="setting.type == 'code'"
+                        :name="setting.name"
+                        :language="setting.language || 'javascript'"
+                        :description="setting.description || ''"
+                        :link="setting.link || {}"
+                        :setting="{ key: setting.key, value: settings[setting.key] }"
+                        @input="handleInput"
+                    />
+
                 </div>
 
                 <div class="bg-30 flex px-8 py-4">
@@ -63,12 +73,14 @@
 import ToggleSetting from './partials/Toggle'
 import TextSetting from './partials/Text'
 import TextAreaSetting from './partials/Textarea'
+import CodeSetting from './partials/Code'
 
 export default {
     components: {
         ToggleSetting,
         TextSetting,
-        TextAreaSetting
+        TextAreaSetting,
+        CodeSetting,
     },
 
     data: () => ({

diff --git a/resources/js/components/partials/Code.vue b/resources/js/components/partials/Code.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="flex border-b border-40">
+
+        <setting-label>
+            {{ __(name) }}
+        </setting-label>
+
+        <div class="w-3/4 py-6 px-8">
+
+            <div class="form-input-bordered px-0 overflow-hidden">
+
+                <textarea ref="textarea"/>
+
+            </div>
+
+            <setting-info
+                v-if="description || link.text"
+                :text="link.text || ''"
+                :url="link.url || ''"
+                class="pt-3"
+            >
+                {{ __(description) }}
+            </setting-info>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import SettingLabel from './Label'
+import SettingInfo from './Info'
+
+import CodeMirror from 'codemirror'
+
+import 'codemirror/mode/php/php'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/css/css'
+import 'codemirror/mode/htmlmixed/htmlmixed'
+import 'codemirror/mode/markdown/markdown'
+import 'codemirror/mode/yaml/yaml'
+import 'codemirror/mode/shell/shell'
+
+export default {
+    props: {
+        name: String,
+        setting: Object,
+        description: String,
+        language: String,
+        link: Object
+    },
+
+    components: {
+        SettingLabel,
+        SettingInfo
+    },
+
+    data: () => ({
+        codemirror: null,
+    }),
+
+    computed: {
+        doc() {
+            return this.codemirror.getDoc()
+        },
+    },
+
+    mounted() {
+        this.codemirror = CodeMirror.fromTextArea(this.$refs.textarea, {
+            indentUnit: 4,
+            lineNumbers: true,
+            mode: this.language,
+            theme: 'solarized light',
+            viewportMargin: Infinity,
+        })
+
+        this.doc.on('change', (cm, change) => {
+            this.$emit('input', {
+                key: this.setting.key,
+                value: cm.getValue(),
+            })
+        })
+
+        this.doc.setValue(this.setting.value || '')
+    },
+}
+</script>
+
+<style src="codemirror/lib/codemirror.css"/>
+<style src="codemirror/theme/solarized.css"/>
+
+<style>
+@import url(https://cdn.jsdelivr.net/gh/tonsky/[email protected]/distr/fira_code.css);
+
+.CodeMirror {
+    font-family: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 15px;
+    line-height: 1.75;
+    font-weight: 500;
+    -moz-box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+}
+</style>
diff --git a/resources/js/components/partials/Textarea.vue b/resources/js/components/partials/Textarea.vue
@@ -9,7 +9,7 @@
                 :value="setting.value"
                 @input="input"
                 class="w-full form-control form-input form-input-bordered py-3 h-auto"
-                rows="5"
+                rows="6"
             />
 
             <setting-info v-if="description || link.text" :text="link.text || ''" :url="link.url || ''" class="pt-3">{{ __(description) }}</setting-info>

diff --git a/tests/stubs/settings.json b/tests/stubs/settings.json
@@ -1,4 +1 @@
-{
-    "facebook_url": "https://facebook.com",
-    "new_feature": true
-}
+{"facebook_url":"https:\/\/facebook.com","new_feature":true,"test":"oh really?","fact":true}