From 87e780bea7e509f256795afc32ea2779f4187c3a Mon Sep 17 00:00:00 2001 From: NGPixel Date: Sun, 28 May 2017 20:30:58 -0400 Subject: [PATCH] refactor: editor-video -> vue component + localization --- client/js/app.js | 2 + client/js/components/editor-codeblock.vue | 4 +- client/js/components/editor-video.js | 55 ------------- client/js/components/editor-video.vue | 94 +++++++++++++++++++++++ client/js/components/editor.component.js | 4 +- client/js/store/index.js | 2 + client/js/store/modules/editor-video.js | 19 +++++ server/locales/en/browser.json | 11 ++- server/views/modals/editor-video.pug | 28 ------- server/views/pages/create.pug | 2 + server/views/pages/edit.pug | 1 + 11 files changed, 133 insertions(+), 89 deletions(-) delete mode 100644 client/js/components/editor-video.js create mode 100644 client/js/components/editor-video.vue create mode 100644 client/js/store/modules/editor-video.js delete mode 100644 server/views/modals/editor-video.pug diff --git a/client/js/app.js b/client/js/app.js index 00edceb6..f2678332 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -56,6 +56,7 @@ import alertComponent from './components/alert.vue' import anchorComponent from './components/anchor.vue' import colorPickerComponent from './components/color-picker.vue' import editorCodeblockComponent from './components/editor-codeblock.vue' +import editorVideoComponent from './components/editor-video.vue' import loadingSpinnerComponent from './components/loading-spinner.vue' import modalCreatePageComponent from './components/modal-create-page.vue' import modalCreateUserComponent from './components/modal-create-user.vue' @@ -157,6 +158,7 @@ $(() => { contentView: contentViewComponent, editor: editorComponent, editorCodeblock: editorCodeblockComponent, + editorVideo: editorVideoComponent, loadingSpinner: loadingSpinnerComponent, modalCreatePage: modalCreatePageComponent, modalCreateUser: modalCreateUserComponent, diff --git a/client/js/components/editor-codeblock.vue b/client/js/components/editor-codeblock.vue index 63bfac5e..ad13224d 100644 --- a/client/js/components/editor-codeblock.vue +++ b/client/js/components/editor-codeblock.vue @@ -88,7 +88,7 @@ this.$store.dispatch('alert', { style: 'red', icon: 'square-cross', - msg: 'Error: Unable to load language syntax.' + msg: self.$t('editor.codeblockloadingerror') }) } }).catch(err => { @@ -110,7 +110,7 @@ this.$store.dispatch('alert', { style: 'blue', icon: 'inbox', - msg: 'Your code block has been inserted.' + msg: self.$t('editor.codeblocksuccess') }) this.cancel() } diff --git a/client/js/components/editor-video.js b/client/js/components/editor-video.js deleted file mode 100644 index 6c1d961a..00000000 --- a/client/js/components/editor-video.js +++ /dev/null @@ -1,55 +0,0 @@ -'use strict' - -import $ from 'jquery' -import Vue from 'vue' -import _ from 'lodash' - -const videoRules = { - 'youtube': new RegExp(/(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|&v(?:i)?=))([^#&?]*).*/, 'i'), - 'vimeo': new RegExp(/vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^/]*)\/videos\/|album\/(?:\d+)\/video\/|)(\d+)(?:$|\/|\?)/, 'i'), - 'dailymotion': new RegExp(/(?:dailymotion\.com(?:\/embed)?(?:\/video|\/hub)|dai\.ly)\/([0-9a-z]+)(?:[-_0-9a-zA-Z]+(?:#video=)?([a-z0-9]+)?)?/, 'i') -} - -module.exports = (mde, mdeModalOpenState) => { - // Vue Video instance - - let vueVideo = new Vue({ - el: '#modal-editor-video', - data: { - link: '' - }, - methods: { - open: (ev) => { - $('#modal-editor-video').addClass('is-active') - $('#modal-editor-video input').focus() - }, - cancel: (ev) => { - mdeModalOpenState = false // eslint-disable-line no-undef - $('#modal-editor-video').removeClass('is-active') - vueVideo.link = '' - }, - insertVideo: (ev) => { - if (mde.codemirror.doc.somethingSelected()) { - mde.codemirror.execCommand('singleSelection') - } - - // Guess video type - - let videoType = _.findKey(videoRules, (vr) => { - return vr.test(vueVideo.link) - }) - if (_.isNil(videoType)) { - videoType = 'video' - } - - // Insert video tag - - let videoText = '[video](' + vueVideo.link + '){.' + videoType + '}\n' - - mde.codemirror.doc.replaceSelection(videoText) - vueVideo.cancel() - } - } - }) - return vueVideo -} diff --git a/client/js/components/editor-video.vue b/client/js/components/editor-video.vue new file mode 100644 index 00000000..6a2b2ba3 --- /dev/null +++ b/client/js/components/editor-video.vue @@ -0,0 +1,94 @@ + + + diff --git a/client/js/components/editor.component.js b/client/js/components/editor.component.js index 9def31ea..1ffea4ad 100644 --- a/client/js/components/editor.component.js +++ b/client/js/components/editor.component.js @@ -156,9 +156,7 @@ export default { { name: 'video', action: (editor) => { - // if (!mdeModalOpenState) { - // vueVideo.open() - // } + self.$store.dispatch('editorVideo/open') }, className: 'icon-video-camera2', title: 'Insert Video Player' diff --git a/client/js/store/index.js b/client/js/store/index.js index 1e346d8f..93bcfc32 100644 --- a/client/js/store/index.js +++ b/client/js/store/index.js @@ -5,6 +5,7 @@ import alert from './modules/alert' import anchor from './modules/anchor' import editor from './modules/editor' import editorCodeblock from './modules/editor-codeblock' +import editorVideo from './modules/editor-video' import modalCreatePage from './modules/modal-create-page' import modalCreateUser from './modules/modal-create-user' import modalDiscardPage from './modules/modal-discard-page' @@ -30,6 +31,7 @@ export default new Vuex.Store({ anchor, editor, editorCodeblock, + editorVideo, modalCreatePage, modalCreateUser, modalDiscardPage, diff --git a/client/js/store/modules/editor-video.js b/client/js/store/modules/editor-video.js new file mode 100644 index 00000000..75c8754c --- /dev/null +++ b/client/js/store/modules/editor-video.js @@ -0,0 +1,19 @@ +'use strict' + +export default { + namespaced: true, + state: { + shown: false + }, + getters: {}, + mutations: { + shownChange: (state, shownState) => { state.shown = shownState } + }, + actions: { + open({ commit }) { + commit('shownChange', true) + wikijs.$emit('editorVideo/init') + }, + close({ commit }) { commit('shownChange', false) } + } +} diff --git a/server/locales/en/browser.json b/server/locales/en/browser.json index eae81794..ecf31e43 100644 --- a/server/locales/en/browser.json +++ b/server/locales/en/browser.json @@ -4,7 +4,16 @@ "codeblocktitle": "Insert Code Block", "codeblockinsert": "Insert Code Block", "codeblocklanguage": "Language", - "codeblockloading": "Loading code syntax for {{name}}" + "codeblockloading": "Loading code syntax for {{name}}", + "codeblockloadingerror": "Error: Unable to load language syntax.", + "codeblocksuccess": "Your code block has been inserted.", + "videotitle": "Insert Video", + "videolinktitle": "Enter the link to the video to be embedded:", + "videoinsert": "Insert Video", + "videonotsupported": "This URL is invalid or not supported!", + "videosupportedtitle": "The following are supported:", + "videoanymp4file": "Any standard MP4 file", + "videosuccess": "The video code has been inserted." }, "nav": { "home": "Home" diff --git a/server/views/modals/editor-video.pug b/server/views/modals/editor-video.pug deleted file mode 100644 index fc0bff3b..00000000 --- a/server/views/modals/editor-video.pug +++ /dev/null @@ -1,28 +0,0 @@ - -.modal#modal-editor-video - .modal-background - .modal-container - .modal-content - header.is-green Insert Video Player - section - label.label Enter the link to the video to be embedded: - p.control.is-fullwidth - input.input(type='text', placeholder='https://www.youtube.com/watch?v=xxxxxxxxxxx', v-model='link') - span.help.is-red.is-hidden This URL is invalid or not supported! - .note The following are supported: - ul - li - i.icon-youtube-play - span Youtube - li - i.icon-vimeo - span Vimeo - li - i.icon-film - span Dailymotion - li - i.icon-video - span Any standard MP4 file - footer - a.button.is-grey.is-outlined(v-on:click='cancel') Discard - a.button.is-green(v-on:click='insertVideo') Insert Video diff --git a/server/views/pages/create.pug b/server/views/pages/create.pug index a26c83bf..35fe41ca 100644 --- a/server/views/pages/create.pug +++ b/server/views/pages/create.pug @@ -18,5 +18,7 @@ block content .editor-area textarea(ref='editorTextArea')= pageData.markdown + editor-video + editor-codeblock modal-discard-page(mode='create', current-path=pageData.meta.path) page-loader(text=t('loading.editor')) diff --git a/server/views/pages/edit.pug b/server/views/pages/edit.pug index 64766694..63a12139 100644 --- a/server/views/pages/edit.pug +++ b/server/views/pages/edit.pug @@ -18,6 +18,7 @@ block content .editor-area textarea(ref='editorTextArea')= pageData.markdown + editor-video editor-codeblock modal-discard-page(mode='edit', current-path=pageData.meta.path) page-loader(text=t('loading.editor'))