Commit a8866696 authored by Jörg Richter's avatar Jörg Richter

Fix: suppress Windows contextmenu on delete warning (#295)

parent 26c44f4c
Pipeline #8156 passed with stages
in 5 minutes and 41 seconds
......@@ -8,7 +8,7 @@
</div>
<div class="field">
<div class="field-label">Released</div>
Oct 4, 2019
Oct 5, 2019
</div>
<div class="field">
<div class="field-label">License</div>
......
<template>
<router-view @contextmenu.capture.native="contextmenu"></router-view>
<router-view></router-view>
<!--
Note: the Vue template compiler is not available as we use the Vue runtime.
So we can't put <router-view> in index.html but must render the root component
......@@ -7,28 +7,6 @@
-->
</template>
<script>
export default {
methods: {
contextmenu (e) {
// Windows workaround to suppress the browser context menu when right-clicking the canvas (in order to open the
// search/create dialog). Note: on Windows the target of the "contextmenu" event is not the canvas then (as it is
// on other platforms) but a direct child element of the search/create dialog (sometimes it's el-dialog__body,
// sometimes el-dialog__header). This event target says: the dialog is the cause for the event; but in reality the
// event is the cause for displaying the dialog in the first place. This makes no sense. I don't understand
// Windows browser.
// Note: on Windows we must prevent default only at (or near to) body element. Preventing directly at canvas
// element (or its parent) has no effect. Note also: preventing already in capture phase makes no difference.
// Also all of this makes no sense to me.
// console.log('contextmenu', e.target.tagName, e.target.classList, e.target.parentNode.classList)
/* if (e.target.tagName === 'CANVAS' || e.target.parentNode.classList.contains('el-dialog')) {
e.preventDefault()
} */
}
}
}
</script>
<style>
:root {
/*
......
......@@ -9,7 +9,7 @@ import 'font-awesome/css/font-awesome.css'
import './element-ui'
import './websocket'
console.log('[DMX] 2019/10/04')
console.log('[DMX] 2019/10/05')
// 1) Init dm5 library
// The dm5 library must be inited *before* the dm5-webclient component is instantiated.
......@@ -72,19 +72,20 @@ Promise.all([
store.dispatch('initialNavigation')
})
// Windows workaround to suppress the browser context menu on right-click.
// Note: on Windows the target of the "contextmenu" event is not the canvas then (as it is on other platforms) but
// - the search dialog
// - the delete message box
// - the delete message box wrapper
// Note: in contrast to the search dialog the latter 2 are not childs of <dm5-webclient> component, so we must attach
// 7) Windows workaround to suppress the browser's native context menu on
// - right-clicking the canvas (to invoke search/create dialog)
// - right-clicking a topic/assoc (to invoke Cytoscape context menu command)
// Note: in contrast to other platforms on Windows the target of the "contextmenu" event is not the canvas but
// - the search/create dialog
// - the message box wrapper of the delete warning
// Note: in contrast to the dialog the message box is not a child of <dm5-webclient> component, so we attach
// the listener directly to <body>.
document.body.addEventListener('contextmenu', e => {
console.log('body', e.target.tagName, e.target.classList, e.target.parentNode.classList)
// console.log('body', e.target.tagName, e.target.classList, e.target.parentNode.classList)
const inSearchDialog = e.target.parentNode.classList.contains('el-dialog')
const messageBoxWrapper = document.querySelector('.el-message-box__wrapper')
const inMessageBox = messageBoxWrapper && messageBoxWrapper.contains(e.target)
console.log(inSearchDialog, inMessageBox)
// console.log(inSearchDialog, inMessageBox)
if (inSearchDialog || inMessageBox) {
e.preventDefault()
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment