mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +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