diff options
Diffstat (limited to 'app/assets/javascripts/static_site_editor/components/edit_area.vue')
-rw-r--r-- | app/assets/javascripts/static_site_editor/components/edit_area.vue | 43 |
1 files changed, 40 insertions, 3 deletions
diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue index 53fbb2a330d..e602f26acdf 100644 --- a/app/assets/javascripts/static_site_editor/components/edit_area.vue +++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue @@ -2,6 +2,7 @@ import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue'; import PublishToolbar from './publish_toolbar.vue'; import EditHeader from './edit_header.vue'; +import EditDrawer from './edit_drawer.vue'; import UnsavedChangesConfirmDialog from './unsaved_changes_confirm_dialog.vue'; import parseSourceFile from '~/static_site_editor/services/parse_source_file'; import { EDITOR_TYPES } from '~/vue_shared/components/rich_content_editor/constants'; @@ -15,6 +16,7 @@ export default { RichContentEditor, PublishToolbar, EditHeader, + EditDrawer, UnsavedChangesConfirmDialog, }, props: { @@ -48,6 +50,8 @@ export default { parsedSource: parseSourceFile(this.preProcess(true, this.content)), editorMode: EDITOR_TYPES.wysiwyg, isModified: false, + hasMatter: false, + isDrawerOpen: false, }; }, imageRepository: imageRepository(), @@ -55,10 +59,19 @@ export default { editableContent() { return this.parsedSource.content(this.isWysiwygMode); }, + editableMatter() { + return this.isDrawerOpen ? this.parsedSource.matter() : {}; + }, + hasSettings() { + return this.hasMatter && this.isWysiwygMode; + }, isWysiwygMode() { return this.editorMode === EDITOR_TYPES.wysiwyg; }, }, + created() { + this.refreshEditHelpers(); + }, methods: { preProcess(isWrap, value) { const formattedContent = formatter(value); @@ -67,9 +80,21 @@ export default { : templater.unwrap(formattedContent); return templatedContent; }, - onInputChange(newVal) { - this.parsedSource.sync(newVal, this.isWysiwygMode); + refreshEditHelpers() { this.isModified = this.parsedSource.isModified(); + this.hasMatter = this.parsedSource.hasMatter(); + }, + onDrawerOpen() { + this.isDrawerOpen = true; + this.refreshEditHelpers(); + }, + onDrawerClose() { + this.isDrawerOpen = false; + this.refreshEditHelpers(); + }, + onInputChange(newVal) { + this.parsedSource.syncContent(newVal, this.isWysiwygMode); + this.refreshEditHelpers(); }, onModeChange(mode) { this.editorMode = mode; @@ -77,6 +102,9 @@ export default { const preProcessedContent = this.preProcess(this.isWysiwygMode, this.editableContent); this.$refs.editor.resetInitialValue(preProcessedContent); }, + onUpdateSettings(settings) { + this.parsedSource.syncMatter(settings); + }, onUploadImage({ file, imageUrl }) { this.$options.imageRepository.add(file, imageUrl); }, @@ -93,12 +121,19 @@ export default { <template> <div class="d-flex flex-grow-1 flex-column h-100"> <edit-header class="py-2" :title="title" /> + <edit-drawer + v-if="hasMatter" + :is-open="isDrawerOpen" + :settings="editableMatter" + @close="onDrawerClose" + @updateSettings="onUpdateSettings" + /> <rich-content-editor ref="editor" :content="editableContent" :initial-edit-type="editorMode" :image-root="imageRoot" - class="mb-9 h-100" + class="mb-9 pb-6 h-100" @modeChange="onModeChange" @input="onInputChange" @uploadImage="onUploadImage" @@ -106,9 +141,11 @@ export default { <unsaved-changes-confirm-dialog :modified="isModified" /> <publish-toolbar class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full" + :has-settings="hasSettings" :return-url="returnUrl" :saveable="isModified" :saving-changes="savingChanges" + @editSettings="onDrawerOpen" @submit="onSubmit" /> </div> |