mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-03-27 15:55:55 +00:00
No more need old copy paste
This commit is contained in:
AlphaX-Projects
parent
d3ff7f72ba
commit
f44b952dde
@ -1,241 +0,0 @@
|
|||||||
import { LitElement, html, css } from 'lit'
|
|
||||||
import { connect } from 'pwa-helpers'
|
|
||||||
import { store } from '../store';
|
|
||||||
|
|
||||||
import { doCopyMenuSwitch } from '../redux/app/app-actions';
|
|
||||||
|
|
||||||
|
|
||||||
let copyTextMenuElement
|
|
||||||
|
|
||||||
class CopyTextMenu extends connect(store)(LitElement) {
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
selectedText: {
|
|
||||||
type: String,
|
|
||||||
attribute: 'selected-text',
|
|
||||||
reflectToAttribute: true
|
|
||||||
},
|
|
||||||
eventObject: {
|
|
||||||
type: Object,
|
|
||||||
attribute: 'event-object',
|
|
||||||
reflectToAttribute: true
|
|
||||||
},
|
|
||||||
isCopyMenuOpen: {
|
|
||||||
type: Boolean
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.selectedText = ''
|
|
||||||
this.eventObject = {}
|
|
||||||
this.isCopyMenuOpen = false
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styles() {
|
|
||||||
return css`
|
|
||||||
.context-menu{
|
|
||||||
display: block;
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
padding: 5px, 0;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
min-width: 150px;
|
|
||||||
max-width: 300px;
|
|
||||||
background: #F9F9F9;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-open {
|
|
||||||
pointer-events: all;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 120;
|
|
||||||
}
|
|
||||||
|
|
||||||
#items {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
hr {
|
|
||||||
width: 85%;
|
|
||||||
background-color: #E4E4E4;
|
|
||||||
border-color: #E4E4E4;
|
|
||||||
color: #E4E4E4;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
padding: 3px;
|
|
||||||
padding-left:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#items :hover{
|
|
||||||
color: white;
|
|
||||||
background: #6a6c75;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div class='context-menu'>
|
|
||||||
<ul id='items'>
|
|
||||||
<li @click=${() => this.saveToClipboard(this.selectedText)} >Copy</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
firstUpdated() {
|
|
||||||
this.contextElement = this.shadowRoot.querySelector('.context-menu')
|
|
||||||
}
|
|
||||||
|
|
||||||
saveToClipboard(text) {
|
|
||||||
|
|
||||||
try {
|
|
||||||
|
|
||||||
navigator.clipboard.writeText(text).then(() => {
|
|
||||||
|
|
||||||
window.getSelection().removeAllRanges()
|
|
||||||
window.parent.getSelection().removeAllRanges()
|
|
||||||
|
|
||||||
store.dispatch(doCopyMenuSwitch(false))
|
|
||||||
|
|
||||||
// ...
|
|
||||||
}).catch((err) => {
|
|
||||||
console.log('failed: ', err)
|
|
||||||
})
|
|
||||||
} catch (err) {
|
|
||||||
|
|
||||||
// Fallback, if all fails
|
|
||||||
document.execCommand('copy');
|
|
||||||
|
|
||||||
window.getSelection().removeAllRanges()
|
|
||||||
window.parent.getSelection().removeAllRanges()
|
|
||||||
|
|
||||||
store.dispatch(doCopyMenuSwitch(false))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
textMenu(selectedText, eventObject, isFrame) {
|
|
||||||
|
|
||||||
this.selectedText = selectedText
|
|
||||||
|
|
||||||
const getPosition = (isFrame, event) => {
|
|
||||||
let posx = 0
|
|
||||||
let posy = 0
|
|
||||||
|
|
||||||
if (isFrame) {
|
|
||||||
|
|
||||||
const p = document.querySelector('main')
|
|
||||||
const d = document.getElementById('main-app').shadowRoot.querySelector('app-view').shadowRoot.querySelector('app-drawer-layout').children[1].querySelector('show-plugin').shadowRoot.querySelector('iframe')
|
|
||||||
|
|
||||||
posx = p.offsetWidth - d.offsetWidth + event.pageX
|
|
||||||
posy = d.offsetTop + event.pageY
|
|
||||||
} else {
|
|
||||||
if (event.pageX || event.pageY) {
|
|
||||||
|
|
||||||
posx = event.pageX
|
|
||||||
posy = event.pageY
|
|
||||||
} else if (event.clientX || event.clientY) {
|
|
||||||
|
|
||||||
posx = event.clientX + document.body.scrollLeft +
|
|
||||||
document.documentElement.scrollLeft
|
|
||||||
posy = event.clientY + document.body.scrollTop +
|
|
||||||
document.documentElement.scrollTop
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
x: posx,
|
|
||||||
y: posy
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const positionMenu = (isFrame, event) => {
|
|
||||||
|
|
||||||
const newPosition = {
|
|
||||||
left: '0px',
|
|
||||||
top: '0px'
|
|
||||||
}
|
|
||||||
|
|
||||||
const clickCoords = getPosition(isFrame, event)
|
|
||||||
|
|
||||||
const clickCoordsX = clickCoords.x
|
|
||||||
const clickCoordsY = clickCoords.y
|
|
||||||
|
|
||||||
const menuWidth = this.contextElement.offsetWidth + 4
|
|
||||||
const menuHeight = this.contextElement.offsetHeight + 4
|
|
||||||
|
|
||||||
const windowWidth = window.innerWidth
|
|
||||||
const windowHeight = window.innerHeight
|
|
||||||
|
|
||||||
if ((windowWidth - clickCoordsX) < menuWidth) {
|
|
||||||
|
|
||||||
newPosition.left = windowWidth - menuWidth + 'px'
|
|
||||||
} else {
|
|
||||||
|
|
||||||
newPosition.left = clickCoordsX + 'px'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((windowHeight - clickCoordsY) < menuHeight) {
|
|
||||||
|
|
||||||
newPosition.top = windowHeight - menuHeight + 'px'
|
|
||||||
} else {
|
|
||||||
|
|
||||||
newPosition.top = clickCoordsY + 'px'
|
|
||||||
}
|
|
||||||
|
|
||||||
return newPosition
|
|
||||||
}
|
|
||||||
|
|
||||||
const pos = positionMenu(isFrame, eventObject)
|
|
||||||
this.contextElement.style.top = pos.top
|
|
||||||
this.contextElement.style.left = pos.left
|
|
||||||
this.contextElement.style.opacity = '1'
|
|
||||||
this.contextElement.releasePointerCapture = true
|
|
||||||
this.contextElement.classList.add('c-open')
|
|
||||||
document.getElementById('main-app').shadowRoot.querySelector('copy-text-menu').inert = false
|
|
||||||
}
|
|
||||||
|
|
||||||
open(textMenuObject) {
|
|
||||||
|
|
||||||
const selectedText = textMenuObject.selectedText
|
|
||||||
const eventObject = textMenuObject.eventObject
|
|
||||||
const isFrame = textMenuObject.isFrame
|
|
||||||
this.textMenu(selectedText, eventObject, isFrame)
|
|
||||||
store.dispatch(doCopyMenuSwitch(true))
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
this.contextElement.style.opacity = '0'
|
|
||||||
this.contextElement.classList.remove('c-open')
|
|
||||||
}
|
|
||||||
|
|
||||||
stateChanged(state) {
|
|
||||||
|
|
||||||
this.isCopyMenuOpen = state.app.copyMenuSwitch
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.customElements.define('copy-text-menu', CopyTextMenu)
|
|
||||||
|
|
||||||
const copyTextMenuNode = document.createElement('copy-text-menu')
|
|
||||||
copyTextMenuNode.id = 'copy-text-menu-node'
|
|
||||||
copyTextMenuNode.inert = false
|
|
||||||
copyTextMenuNode.eventObject = {}
|
|
||||||
copyTextMenuElement = document.body.appendChild(copyTextMenuNode)
|
|
||||||
setTimeout(() => {
|
|
||||||
const menuNode = document.getElementById('copy-text-menu-node')
|
|
||||||
const mainApp = document.getElementById('main-app').shadowRoot
|
|
||||||
const shadow = mainApp
|
|
||||||
copyTextMenuElement = shadow.appendChild(menuNode)
|
|
||||||
}, 500)
|
|
||||||
export default copyTextMenuElement
|
|
||||||
@ -1,203 +0,0 @@
|
|||||||
import { LitElement, html, css } from 'lit'
|
|
||||||
import { connect } from 'pwa-helpers'
|
|
||||||
import { store } from '../store';
|
|
||||||
|
|
||||||
import { doFramePasteMenuSwitch } from '../redux/app/app-actions';
|
|
||||||
|
|
||||||
|
|
||||||
let framePasteMenuElement
|
|
||||||
|
|
||||||
class FramePasteMenu extends connect(store)(LitElement) {
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
eventObject: {
|
|
||||||
type: Object,
|
|
||||||
attribute: 'event-object',
|
|
||||||
reflectToAttribute: true
|
|
||||||
},
|
|
||||||
framePasteMenuOpen: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
elementId: {
|
|
||||||
type: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.eventObject = {}
|
|
||||||
this.framePasteMenuOpen = {
|
|
||||||
isOpen: false,
|
|
||||||
elementId: ''
|
|
||||||
}
|
|
||||||
this.elementId = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styles() {
|
|
||||||
return css`
|
|
||||||
.frame-paste-context-menu{
|
|
||||||
display: block;
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
padding: 5px, 0;
|
|
||||||
border: 1px solid #B2B2B2;
|
|
||||||
min-width: 150px;
|
|
||||||
max-width: 300px;
|
|
||||||
background: #F9F9F9;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-open {
|
|
||||||
pointer-events: all;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 120;
|
|
||||||
}
|
|
||||||
|
|
||||||
#items {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
hr {
|
|
||||||
width: 85%;
|
|
||||||
background-color: #E4E4E4;
|
|
||||||
border-color: #E4E4E4;
|
|
||||||
color: #E4E4E4;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
padding: 3px;
|
|
||||||
padding-left:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#items :hover{
|
|
||||||
color: white;
|
|
||||||
background: #6a6c75;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div class='frame-paste-context-menu'>
|
|
||||||
<ul id='items'>
|
|
||||||
<li @click=${() => this.paste()} >Paste</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
firstUpdated() {
|
|
||||||
this.contextElement = this.shadowRoot.querySelector('.frame-paste-context-menu')
|
|
||||||
}
|
|
||||||
|
|
||||||
paste() {
|
|
||||||
|
|
||||||
store.dispatch(doFramePasteMenuSwitch({ isOpen: false, elementId: this.elementId }))
|
|
||||||
}
|
|
||||||
|
|
||||||
positionMenu(eventObject) {
|
|
||||||
|
|
||||||
|
|
||||||
const getPosition = (event) => {
|
|
||||||
let posx = 0
|
|
||||||
let posy = 0
|
|
||||||
|
|
||||||
const p = document.querySelector('main')
|
|
||||||
const d = document.getElementById('main-app').shadowRoot.querySelector('app-view').shadowRoot.querySelector('app-drawer-layout').children[1].querySelector('show-plugin').shadowRoot.querySelector('iframe')
|
|
||||||
|
|
||||||
posx = p.offsetWidth - d.offsetWidth + event.pageX
|
|
||||||
posy = d.offsetTop + event.pageY
|
|
||||||
|
|
||||||
return {
|
|
||||||
x: posx,
|
|
||||||
y: posy
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const positionMenu = (event) => {
|
|
||||||
|
|
||||||
const newPosition = {
|
|
||||||
left: '0px',
|
|
||||||
top: '0px'
|
|
||||||
}
|
|
||||||
|
|
||||||
const clickCoords = getPosition(event)
|
|
||||||
|
|
||||||
const clickCoordsX = clickCoords.x
|
|
||||||
const clickCoordsY = clickCoords.y
|
|
||||||
|
|
||||||
const menuWidth = this.contextElement.offsetWidth + 4
|
|
||||||
const menuHeight = this.contextElement.offsetHeight + 4
|
|
||||||
|
|
||||||
const windowWidth = window.innerWidth
|
|
||||||
const windowHeight = window.innerHeight
|
|
||||||
|
|
||||||
if ((windowWidth - clickCoordsX) < menuWidth) {
|
|
||||||
|
|
||||||
newPosition.left = windowWidth - menuWidth + 'px'
|
|
||||||
} else {
|
|
||||||
|
|
||||||
newPosition.left = clickCoordsX + 'px'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((windowHeight - clickCoordsY) < menuHeight) {
|
|
||||||
|
|
||||||
newPosition.top = windowHeight - menuHeight + 'px'
|
|
||||||
} else {
|
|
||||||
|
|
||||||
newPosition.top = clickCoordsY + 'px'
|
|
||||||
}
|
|
||||||
|
|
||||||
return newPosition
|
|
||||||
}
|
|
||||||
|
|
||||||
const pos = positionMenu(eventObject)
|
|
||||||
this.contextElement.style.top = pos.top
|
|
||||||
this.contextElement.style.left = pos.left
|
|
||||||
this.contextElement.style.opacity = '1'
|
|
||||||
this.contextElement.releasePointerCapture = true
|
|
||||||
this.contextElement.classList.add('p-open')
|
|
||||||
document.getElementById('main-app').shadowRoot.querySelector('frame-paste-menu').inert = false
|
|
||||||
}
|
|
||||||
|
|
||||||
open(eventObject) {
|
|
||||||
|
|
||||||
this.elementId = eventObject.elementId
|
|
||||||
this.positionMenu(eventObject)
|
|
||||||
store.dispatch(doFramePasteMenuSwitch({ isOpen: true, elementId: eventObject.elementId }))
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
this.contextElement.style.opacity = '0'
|
|
||||||
this.contextElement.classList.remove('p-open')
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
stateChanged(state) {
|
|
||||||
|
|
||||||
this.framePasteMenuOpen = state.app.framePasteMenuSwitch
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.customElements.define('frame-paste-menu', FramePasteMenu)
|
|
||||||
|
|
||||||
const framePasteMenuNode = document.createElement('frame-paste-menu')
|
|
||||||
framePasteMenuNode.id = 'frame-paste-menu-node'
|
|
||||||
framePasteMenuNode.inert = false
|
|
||||||
framePasteMenuNode.eventObject = {}
|
|
||||||
framePasteMenuElement = document.body.appendChild(framePasteMenuNode)
|
|
||||||
setTimeout(() => {
|
|
||||||
const menuNode = document.getElementById('frame-paste-menu-node')
|
|
||||||
const mainApp = document.getElementById('main-app').shadowRoot
|
|
||||||
const shadow = mainApp
|
|
||||||
framePasteMenuElement = shadow.appendChild(menuNode)
|
|
||||||
}, 500)
|
|
||||||
export default framePasteMenuElement
|
|
||||||
@ -1,201 +0,0 @@
|
|||||||
import { LitElement, html, css } from 'lit'
|
|
||||||
import { connect } from 'pwa-helpers'
|
|
||||||
import { store } from '../store';
|
|
||||||
|
|
||||||
import { doPasteMenuSwitch } from '../redux/app/app-actions';
|
|
||||||
|
|
||||||
|
|
||||||
let pasteMenuElement
|
|
||||||
|
|
||||||
class FramePasteMenu extends connect(store)(LitElement) {
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
eventObject: {
|
|
||||||
type: Object,
|
|
||||||
attribute: 'event-object',
|
|
||||||
reflectToAttribute: true
|
|
||||||
},
|
|
||||||
isPasteMenuOpen: {
|
|
||||||
type: Boolean
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.eventObject = {}
|
|
||||||
this.isPasteMenuOpen = false
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styles() {
|
|
||||||
return css`
|
|
||||||
.paste-context-menu{
|
|
||||||
display: block;
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
padding: 5px, 0;
|
|
||||||
border: 1px solid #B2B2B2;
|
|
||||||
min-width: 150px;
|
|
||||||
max-width: 300px;
|
|
||||||
background: #F9F9F9;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-open {
|
|
||||||
pointer-events: all;
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 120;
|
|
||||||
}
|
|
||||||
|
|
||||||
#items {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
hr {
|
|
||||||
width: 85%;
|
|
||||||
background-color: #E4E4E4;
|
|
||||||
border-color: #E4E4E4;
|
|
||||||
color: #E4E4E4;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
padding: 3px;
|
|
||||||
padding-left:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#items :hover{
|
|
||||||
color: white;
|
|
||||||
background: #6a6c75;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div class='paste-context-menu'>
|
|
||||||
<ul id='items'>
|
|
||||||
<li @click=${() => this.paste()} >Paste</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
firstUpdated() {
|
|
||||||
this.contextElement = this.shadowRoot.querySelector('.paste-context-menu')
|
|
||||||
}
|
|
||||||
|
|
||||||
paste() {
|
|
||||||
|
|
||||||
store.dispatch(doPasteMenuSwitch(false))
|
|
||||||
}
|
|
||||||
|
|
||||||
positionMenu(eventObject) {
|
|
||||||
|
|
||||||
|
|
||||||
const getPosition = (event) => {
|
|
||||||
let posx = 0
|
|
||||||
let posy = 0
|
|
||||||
|
|
||||||
if (event.pageX || event.pageY) {
|
|
||||||
|
|
||||||
posx = event.pageX
|
|
||||||
posy = event.pageY
|
|
||||||
} else if (event.clientX || event.clientY) {
|
|
||||||
|
|
||||||
posx = event.clientX + document.body.scrollLeft +
|
|
||||||
document.documentElement.scrollLeft
|
|
||||||
posy = event.clientY + document.body.scrollTop +
|
|
||||||
document.documentElement.scrollTop
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
x: posx,
|
|
||||||
y: posy
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const positionMenu = (event) => {
|
|
||||||
|
|
||||||
const newPosition = {
|
|
||||||
left: '0px',
|
|
||||||
top: '0px'
|
|
||||||
}
|
|
||||||
|
|
||||||
const clickCoords = getPosition(event)
|
|
||||||
|
|
||||||
const clickCoordsX = clickCoords.x
|
|
||||||
const clickCoordsY = clickCoords.y
|
|
||||||
|
|
||||||
const menuWidth = this.contextElement.offsetWidth + 4
|
|
||||||
const menuHeight = this.contextElement.offsetHeight + 4
|
|
||||||
|
|
||||||
const windowWidth = window.innerWidth
|
|
||||||
const windowHeight = window.innerHeight
|
|
||||||
|
|
||||||
if ((windowWidth - clickCoordsX) < menuWidth) {
|
|
||||||
|
|
||||||
newPosition.left = windowWidth - menuWidth + 'px'
|
|
||||||
} else {
|
|
||||||
|
|
||||||
newPosition.left = clickCoordsX + 'px'
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((windowHeight - clickCoordsY) < menuHeight) {
|
|
||||||
|
|
||||||
newPosition.top = windowHeight - menuHeight + 'px'
|
|
||||||
} else {
|
|
||||||
|
|
||||||
newPosition.top = clickCoordsY + 'px'
|
|
||||||
}
|
|
||||||
|
|
||||||
return newPosition
|
|
||||||
}
|
|
||||||
|
|
||||||
const pos = positionMenu(eventObject)
|
|
||||||
this.contextElement.style.top = pos.top
|
|
||||||
this.contextElement.style.left = pos.left
|
|
||||||
this.contextElement.style.opacity = '1'
|
|
||||||
this.contextElement.releasePointerCapture = true
|
|
||||||
this.contextElement.classList.add('p-open')
|
|
||||||
document.getElementById('main-app').shadowRoot.querySelector('paste-menu').inert = false
|
|
||||||
}
|
|
||||||
|
|
||||||
open(eventObject) {
|
|
||||||
|
|
||||||
this.positionMenu(eventObject)
|
|
||||||
store.dispatch(doPasteMenuSwitch(true))
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
this.contextElement.style.opacity = '0'
|
|
||||||
this.contextElement.classList.remove('p-open')
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
stateChanged(state) {
|
|
||||||
|
|
||||||
this.isPasteMenuOpen = state.app.pasteMenuSwitch
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.customElements.define('paste-menu', FramePasteMenu)
|
|
||||||
|
|
||||||
const pasteMenuNode = document.createElement('paste-menu')
|
|
||||||
pasteMenuNode.id = 'paste-menu-node'
|
|
||||||
pasteMenuNode.inert = false
|
|
||||||
pasteMenuNode.eventObject = {}
|
|
||||||
pasteMenuElement = document.body.appendChild(pasteMenuNode)
|
|
||||||
setTimeout(() => {
|
|
||||||
const menuNode = document.getElementById('paste-menu-node')
|
|
||||||
const mainApp = document.getElementById('main-app').shadowRoot
|
|
||||||
const shadow = mainApp
|
|
||||||
pasteMenuElement = shadow.appendChild(menuNode)
|
|
||||||
}, 500)
|
|
||||||
export default pasteMenuElement
|
|
||||||
Loading…
x
Reference in New Issue
Block a user