scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 14:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix repository item sidebar click away [SCI-9904]

Browse source
This commit is contained in:
Andrej 2023-12-22 08:21:37 +01:00
parent 7c0b5d437f
commit c0583343bf
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
View file

@ -2,7 +2,8 @@
<transition enter-from-class="translate-x-full w-0"
enter-active-class="transition-all ease-sharp duration-[588ms]"
leave-active-class="transition-all ease-sharp duration-[588ms]"
leave-to-class="translate-x-full w-0">
leave-to-class="translate-x-full w-0"
v-click-outside="handleOutsideClick">
<div ref="wrapper" v-show="isShowing" id="repository-item-sidebar-wrapper"
class='items-sidebar-wrapper bg-white gap-2.5 self-stretch rounded-tl-4 rounded-bl-4 shadow-lg h-full w-[565px]'>
@ -247,6 +248,7 @@
</template>
<script>
import { vOnClickOutside } from '@vueuse/components';
import InlineEdit from '../shared/inline_edit.vue';
import ScrollSpy from './repository_values/ScrollSpy.vue';
import CustomColumns from './customColumns.vue';
@ -260,6 +262,9 @@ export default {
'inline-edit': InlineEdit,
'scroll-spy': ScrollSpy,
},
directives: {
'click-outside': vOnClickOutside
},
data() {
return {
currentItemUrl: null,
@ -294,22 +299,23 @@ export default {
},
mounted() {
// Add a click event listener to the document
document.addEventListener('mousedown', this.handleOutsideClick);
this.inRepository = $('.assign-items-to-task-modal-container').length > 0;
},
beforeUnmount() {
delete window.repositoryItemSidebarComponent;
document.removeEventListener('mousedown', this.handleOutsideClick);
},
methods: {
handleOutsideClick(event) {
if (!this.isShowing) return
if (!this.isShowing) return;
// Check if the clicked element is not within the sidebar and it's not another item link or belogs to modals
const selectors = ['a', '.modal', '.label-printing-progress-modal', '.atwho-view'];
const allowedSelectors = ['a', '.modal', '.label-printing-progress-modal', '.atwho-view'];
const excludeSelectors = ['#myModuleRepositoryFullViewModal'];
if (!$(event.target).parents('#repository-item-sidebar-wrapper').length &&
!selectors.some(selector => event.target.closest(selector))) {
const isOutsideSidebar = !$(event.target).parents('#repository-item-sidebar-wrapper').length;
const isAllowedClick = !allowedSelectors.some((selector) => event.target.closest(selector));
const isExcludedClick = excludeSelectors.some((selector) => event.target.closest(selector));
if (isOutsideSidebar && (isAllowedClick || isExcludedClick)) {
this.toggleShowHideSidebar(null);
}
},