diff options
Diffstat (limited to 'app/assets/javascripts/pages/shared')
3 files changed, 215 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue new file mode 100644 index 00000000000..580cca49b5e --- /dev/null +++ b/app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue @@ -0,0 +1,74 @@ +<script> +import { escape } from 'lodash'; +import { GlModal, GlModalDirective } from '@gitlab/ui'; +import { s__, sprintf } from '~/locale'; + +export default { + components: { + GlModal, + }, + directives: { + 'gl-modal': GlModalDirective, + }, + props: { + deleteWikiUrl: { + type: String, + required: true, + default: '', + }, + pageTitle: { + type: String, + required: true, + default: '', + }, + csrfToken: { + type: String, + required: true, + default: '', + }, + }, + computed: { + modalId() { + return 'delete-wiki-modal'; + }, + message() { + return s__('WikiPageConfirmDelete|Are you sure you want to delete this page?'); + }, + title() { + return sprintf( + s__('WikiPageConfirmDelete|Delete page %{pageTitle}?'), + { + pageTitle: escape(this.pageTitle), + }, + false, + ); + }, + }, + methods: { + onSubmit() { + window.onbeforeunload = null; + this.$refs.form.submit(); + }, + }, +}; +</script> + +<template> + <div class="d-inline-block"> + <button v-gl-modal="modalId" type="button" class="btn btn-danger">{{ __('Delete') }}</button> + <gl-modal + :title="title" + :ok-title="s__('WikiPageConfirmDelete|Delete page')" + :modal-id="modalId" + title-tag="h4" + ok-variant="danger" + @ok="onSubmit" + > + {{ message }} + <form ref="form" :action="deleteWikiUrl" method="post" class="js-requires-input"> + <input ref="method" type="hidden" name="_method" value="delete" /> + <input :value="csrfToken" type="hidden" name="authenticity_token" /> + </form> + </gl-modal> + </div> +</template> diff --git a/app/assets/javascripts/pages/shared/wikis/index.js b/app/assets/javascripts/pages/shared/wikis/index.js new file mode 100644 index 00000000000..5e23b9bab4e --- /dev/null +++ b/app/assets/javascripts/pages/shared/wikis/index.js @@ -0,0 +1,41 @@ +import $ from 'jquery'; +import Vue from 'vue'; +import Translate from '~/vue_shared/translate'; +import csrf from '~/lib/utils/csrf'; +import ShortcutsWiki from '~/behaviors/shortcuts/shortcuts_wiki'; +import Wikis from './wikis'; +import ZenMode from '../../../zen_mode'; +import GLForm from '../../../gl_form'; +import deleteWikiModal from './components/delete_wiki_modal.vue'; + +export default () => { + new Wikis(); // eslint-disable-line no-new + new ShortcutsWiki(); // eslint-disable-line no-new + new ZenMode(); // eslint-disable-line no-new + new GLForm($('.wiki-form')); // eslint-disable-line no-new + + const deleteWikiModalWrapperEl = document.getElementById('delete-wiki-modal-wrapper'); + + if (deleteWikiModalWrapperEl) { + Vue.use(Translate); + + const { deleteWikiUrl, pageTitle } = deleteWikiModalWrapperEl.dataset; + + // eslint-disable-next-line no-new + new Vue({ + el: deleteWikiModalWrapperEl, + data: { + deleteWikiUrl: '', + }, + render(createElement) { + return createElement(deleteWikiModal, { + props: { + pageTitle, + deleteWikiUrl, + csrfToken: csrf.token, + }, + }); + }, + }); + } +}; diff --git a/app/assets/javascripts/pages/shared/wikis/wikis.js b/app/assets/javascripts/pages/shared/wikis/wikis.js new file mode 100644 index 00000000000..ed67219383b --- /dev/null +++ b/app/assets/javascripts/pages/shared/wikis/wikis.js @@ -0,0 +1,100 @@ +import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; +import { s__, sprintf } from '~/locale'; + +const MARKDOWN_LINK_TEXT = { + markdown: '[Link Title](page-slug)', + rdoc: '{Link title}[link:page-slug]', + asciidoc: 'link:page-slug[Link title]', + org: '[[page-slug]]', +}; + +export default class Wikis { + constructor() { + this.sidebarEl = document.querySelector('.js-wiki-sidebar'); + this.sidebarExpanded = false; + + const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle'); + for (let i = 0; i < sidebarToggles.length; i += 1) { + sidebarToggles[i].addEventListener('click', e => this.handleToggleSidebar(e)); + } + + this.isNewWikiPage = Boolean(document.querySelector('.js-new-wiki-page')); + this.editTitleInput = document.querySelector('form.wiki-form #wiki_title'); + this.commitMessageInput = document.querySelector('form.wiki-form #wiki_message'); + this.commitMessageI18n = this.isNewWikiPage + ? s__('WikiPageCreate|Create %{pageTitle}') + : s__('WikiPageEdit|Update %{pageTitle}'); + + if (this.editTitleInput) { + // Initialize the commit message on load + if (this.editTitleInput.value) this.setWikiCommitMessage(this.editTitleInput.value); + + // Set the commit message as the page title is changed + this.editTitleInput.addEventListener('keyup', e => this.handleWikiTitleChange(e)); + } + + window.addEventListener('resize', () => this.renderSidebar()); + this.renderSidebar(); + + const changeFormatSelect = document.querySelector('#wiki_format'); + const linkExample = document.querySelector('.js-markup-link-example'); + + if (changeFormatSelect) { + changeFormatSelect.addEventListener('change', e => { + linkExample.innerHTML = MARKDOWN_LINK_TEXT[e.target.value]; + }); + } + + const wikiTextarea = document.querySelector('form.wiki-form #wiki_content'); + const wikiForm = document.querySelector('form.wiki-form'); + + if (wikiTextarea) { + wikiTextarea.addEventListener('input', () => { + window.onbeforeunload = () => ''; + }); + + wikiForm.addEventListener('submit', () => { + window.onbeforeunload = null; + }); + } + } + + handleWikiTitleChange(e) { + this.setWikiCommitMessage(e.target.value); + } + + setWikiCommitMessage(rawTitle) { + let title = rawTitle; + + // Replace hyphens with spaces + if (title) title = title.replace(/-+/g, ' '); + + const newCommitMessage = sprintf(this.commitMessageI18n, { pageTitle: title }, false); + this.commitMessageInput.value = newCommitMessage; + } + + handleToggleSidebar(e) { + e.preventDefault(); + this.sidebarExpanded = !this.sidebarExpanded; + this.renderSidebar(); + } + + static sidebarCanCollapse() { + const bootstrapBreakpoint = bp.getBreakpointSize(); + return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm'; + } + + renderSidebar() { + if (!this.sidebarEl) return; + const { classList } = this.sidebarEl; + if (this.sidebarExpanded || !Wikis.sidebarCanCollapse()) { + if (!classList.contains('right-sidebar-expanded')) { + classList.remove('right-sidebar-collapsed'); + classList.add('right-sidebar-expanded'); + } + } else if (classList.contains('right-sidebar-expanded')) { + classList.add('right-sidebar-collapsed'); + classList.remove('right-sidebar-expanded'); + } + } +} |