diff options
Diffstat (limited to 'app/assets/javascripts/static_site_editor/rich_content_editor/modals')
3 files changed, 0 insertions, 283 deletions
diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/add_image_modal.vue b/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/add_image_modal.vue deleted file mode 100644 index 82060d2e4ad..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/add_image_modal.vue +++ /dev/null @@ -1,134 +0,0 @@ -<script> -import { GlModal, GlFormGroup, GlFormInput, GlTabs, GlTab } from '@gitlab/ui'; -import { isSafeURL, joinPaths } from '~/lib/utils/url_utility'; -import { __ } from '~/locale'; -import { IMAGE_TABS } from '../../constants'; -import UploadImageTab from './upload_image_tab.vue'; - -export default { - components: { - UploadImageTab, - GlModal, - GlFormGroup, - GlFormInput, - GlTabs, - GlTab, - }, - props: { - imageRoot: { - type: String, - required: true, - }, - }, - data() { - return { - file: null, - urlError: null, - imageUrl: null, - description: null, - tabIndex: IMAGE_TABS.UPLOAD_TAB, - uploadImageTab: null, - }; - }, - modalTitle: __('Image details'), - okTitle: __('Insert image'), - urlTabTitle: __('Link to an image'), - urlLabel: __('Image URL'), - descriptionLabel: __('Description'), - uploadTabTitle: __('Upload an image'), - computed: { - altText() { - return this.description; - }, - }, - methods: { - show() { - this.file = null; - this.urlError = null; - this.imageUrl = null; - this.description = null; - this.tabIndex = IMAGE_TABS.UPLOAD_TAB; - - this.$refs.modal.show(); - }, - onOk(event) { - if (this.tabIndex === IMAGE_TABS.UPLOAD_TAB) { - this.submitFile(event); - return; - } - this.submitURL(event); - }, - setFile(file) { - this.file = file; - }, - submitFile(event) { - const { file, altText } = this; - const { uploadImageTab } = this.$refs; - - uploadImageTab.validateFile(); - - if (uploadImageTab.fileError) { - event.preventDefault(); - return; - } - - const imageUrl = joinPaths(this.imageRoot, file.name); - - this.$emit('addImage', { imageUrl, file, altText: altText || file.name }); - }, - submitURL(event) { - if (!this.validateUrl()) { - event.preventDefault(); - return; - } - - const { imageUrl, altText } = this; - - this.$emit('addImage', { imageUrl, altText: altText || imageUrl }); - }, - validateUrl() { - if (!isSafeURL(this.imageUrl)) { - this.urlError = __('Please provide a valid URL'); - this.$refs.urlInput.$el.focus(); - return false; - } - - return true; - }, - }, -}; -</script> -<template> - <gl-modal - ref="modal" - modal-id="add-image-modal" - :title="$options.modalTitle" - :ok-title="$options.okTitle" - @ok="onOk" - > - <gl-tabs v-model="tabIndex"> - <!-- Upload file Tab --> - <gl-tab :title="$options.uploadTabTitle"> - <upload-image-tab ref="uploadImageTab" @input="setFile" /> - </gl-tab> - - <!-- By URL Tab --> - <gl-tab :title="$options.urlTabTitle"> - <gl-form-group - class="gl-mt-5 gl-mb-3" - :label="$options.urlLabel" - label-for="url-input" - :state="!Boolean(urlError)" - :invalid-feedback="urlError" - > - <gl-form-input id="url-input" ref="urlInput" v-model="imageUrl" /> - </gl-form-group> - </gl-tab> - </gl-tabs> - - <!-- Description Input --> - <gl-form-group :label="$options.descriptionLabel" label-for="description-input"> - <gl-form-input id="description-input" ref="descriptionInput" v-model="description" /> - </gl-form-group> - </gl-modal> -</template> diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/upload_image_tab.vue b/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/upload_image_tab.vue deleted file mode 100644 index 9baa7f286d7..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/upload_image_tab.vue +++ /dev/null @@ -1,56 +0,0 @@ -<script> -import { GlFormGroup } from '@gitlab/ui'; -import { __ } from '~/locale'; -import { MAX_FILE_SIZE } from '../../constants'; - -export default { - components: { - GlFormGroup, - }, - data() { - return { - file: null, - fileError: null, - }; - }, - fileLabel: __('Select file'), - methods: { - onInput(event) { - [this.file] = event.target.files; - - this.validateFile(); - - if (!this.fileError) { - this.$emit('input', this.file); - } - }, - validateFile() { - this.fileError = null; - - if (!this.file) { - this.fileError = __('Please choose a file'); - } else if (this.file.size > MAX_FILE_SIZE) { - this.fileError = __('Maximum file size is 2MB. Please select a smaller file.'); - } - }, - }, -}; -</script> -<template> - <gl-form-group - class="gl-mt-5 gl-mb-3" - :label="$options.fileLabel" - label-for="file-input" - :state="!Boolean(fileError)" - :invalid-feedback="fileError" - > - <input - id="file-input" - ref="fileInput" - class="gl-mt-3 gl-mb-2" - type="file" - accept="image/*" - @input="onInput" - /> - </gl-form-group> -</template> diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue b/app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue deleted file mode 100644 index 5ce2c17f8de..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue +++ /dev/null @@ -1,93 +0,0 @@ -<script> -import { GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui'; -import { isSafeURL } from '~/lib/utils/url_utility'; -import { __ } from '~/locale'; -import { YOUTUBE_URL, YOUTUBE_EMBED_URL } from '../constants'; - -export default { - components: { - GlModal, - GlFormGroup, - GlFormInput, - GlSprintf, - }, - data() { - return { - url: null, - urlError: null, - description: __( - 'If the YouTube URL is https://www.youtube.com/watch?v=0t1DgySidms then the video ID is %{id}', - ), - }; - }, - modalTitle: __('Insert a video'), - okTitle: __('Insert video'), - label: __('YouTube URL or ID'), - methods: { - show() { - this.urlError = null; - this.url = null; - - this.$refs.modal.show(); - }, - onPrimary(event) { - this.submitURL(event); - }, - submitURL(event) { - const url = this.generateUrl(); - - if (!url) { - event.preventDefault(); - return; - } - - this.$emit('insertVideo', url); - }, - generateUrl() { - let { url } = this; - const reYouTubeId = /^[A-z0-9]*$/; - const reYouTubeUrl = RegExp(`${YOUTUBE_URL}/(embed/|watch\\?v=)([A-z0-9]+)`); - - if (reYouTubeId.test(url)) { - url = `${YOUTUBE_EMBED_URL}/${url}`; - } else if (reYouTubeUrl.test(url)) { - url = `${YOUTUBE_EMBED_URL}/${reYouTubeUrl.exec(url)[2]}`; - } - - if (!isSafeURL(url) || !reYouTubeUrl.test(url)) { - this.urlError = __('Please provide a valid YouTube URL or ID'); - this.$refs.urlInput.$el.focus(); - return null; - } - - return url; - }, - }, -}; -</script> -<template> - <gl-modal - ref="modal" - size="sm" - modal-id="insert-video-modal" - :title="$options.modalTitle" - :ok-title="$options.okTitle" - @primary="onPrimary" - > - <gl-form-group - :label="$options.label" - label-for="video-modal-url-input" - :state="!Boolean(urlError)" - :invalid-feedback="urlError" - > - <gl-form-input id="video-modal-url-input" ref="urlInput" v-model="url" /> - <template #description> - <gl-sprintf :message="description" class="text-gl-muted"> - <template #id> - <strong>{{ __('0t1DgySidms') }}</strong> - </template> - </gl-sprintf> - </template> - </gl-form-group> - </gl-modal> -</template> |