Move code from popupjs and paste it into main JS file.
This commit is contained in:
parent
fbb9a06a10
commit
a6130c39ce
@ -6,7 +6,6 @@
|
|||||||
<title>Editor</title>
|
<title>Editor</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
<script src="online-editor.js"></script>
|
<script src="online-editor.js"></script>
|
||||||
<script src="popup.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!--<div class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
|
<!--<div class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
|
||||||
|
|||||||
126
online-editor.js
126
online-editor.js
@ -413,3 +413,129 @@ window.onresize = () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// This is popup element
|
||||||
|
class BesPopupEl extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.attachShadow({ mode: 'open' })
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this.render()
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
this.shadowRoot.innerHTML = `
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
z-index: -1
|
||||||
|
}
|
||||||
|
:host(.show){
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.popup-text {
|
||||||
|
max-width: 160px;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.bes-popup-container {
|
||||||
|
visibility: hidden;
|
||||||
|
max-width: 300px;
|
||||||
|
background-color: rgb(241, 243, 249);
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 8px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.bes-toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
padding: 5px 2px;
|
||||||
|
}
|
||||||
|
.bes-toolbar button {
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
.bes-text-div{
|
||||||
|
background-color: white;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.bes-replacement-btn{
|
||||||
|
margin: 5px 0;
|
||||||
|
padding: 5px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #239aff;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.bes-replacement-btn:hover{
|
||||||
|
background-color: #1976f0;
|
||||||
|
}
|
||||||
|
:host(.show) .bes-popup-container {
|
||||||
|
visibility: visible;
|
||||||
|
animation: fadeIn 1s;
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {opacity: 0;}
|
||||||
|
to {opacity:1 ;}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="bes-popup-container">
|
||||||
|
<div class="bes-toolbar">
|
||||||
|
<button class="bes-close-btn">X</button>
|
||||||
|
</div>
|
||||||
|
<div class="bes-text-div">
|
||||||
|
<span class="popup-text">
|
||||||
|
</span>
|
||||||
|
<div class="bes-replacement-div">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
show(x, y) {
|
||||||
|
y = y + 20
|
||||||
|
this.style.position = 'fixed'
|
||||||
|
this.style.left = `${x}px`
|
||||||
|
this.style.top = `${y}px`
|
||||||
|
this.clear()
|
||||||
|
this.classList.add('show')
|
||||||
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
|
||||||
|
const replacements = replacementDiv.childNodes
|
||||||
|
if (!replacements.length) return
|
||||||
|
replacements.forEach(replacement => {
|
||||||
|
replacementDiv.removeChild(replacement)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.classList.remove('show')
|
||||||
|
}
|
||||||
|
|
||||||
|
changeText(text) {
|
||||||
|
this.shadowRoot.querySelector('.popup-text').textContent = text
|
||||||
|
}
|
||||||
|
|
||||||
|
appendReplacements(replacement, offset, length) {
|
||||||
|
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
|
||||||
|
const replacementBtn = document.createElement('button')
|
||||||
|
replacementBtn.classList.add('bes-replacement-btn')
|
||||||
|
replacementBtn.dataset.length = length
|
||||||
|
replacementBtn.dataset.offset = offset
|
||||||
|
replacementBtn.textContent = replacement
|
||||||
|
replacementBtn.classList.add('bes-replacement')
|
||||||
|
replacementDiv.appendChild(replacementBtn)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('bes-popup-el', BesPopupEl)
|
||||||
|
|||||||
124
popup.js
124
popup.js
@ -1,124 +0,0 @@
|
|||||||
class BesPopupEl extends HTMLElement {
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.attachShadow({ mode: 'open' })
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
this.render()
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
this.shadowRoot.innerHTML = `
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
z-index: -1
|
|
||||||
}
|
|
||||||
:host(.show){
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.popup-text {
|
|
||||||
max-width: 160px;
|
|
||||||
color: black;
|
|
||||||
text-align: center;
|
|
||||||
padding: 8px 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.bes-popup-container {
|
|
||||||
visibility: hidden;
|
|
||||||
max-width: 300px;
|
|
||||||
background-color: rgb(241, 243, 249);
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 8px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.bes-toolbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
padding: 5px 2px;
|
|
||||||
}
|
|
||||||
.bes-toolbar button {
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
.bes-text-div{
|
|
||||||
background-color: white;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.bes-replacement-btn{
|
|
||||||
margin: 5px 0;
|
|
||||||
padding: 5px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #239aff;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.bes-replacement-btn:hover{
|
|
||||||
background-color: #1976f0;
|
|
||||||
}
|
|
||||||
:host(.show) .bes-popup-container {
|
|
||||||
visibility: visible;
|
|
||||||
animation: fadeIn 1s;
|
|
||||||
}
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {opacity: 0;}
|
|
||||||
to {opacity:1 ;}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="bes-popup-container">
|
|
||||||
<div class="bes-toolbar">
|
|
||||||
<button class="bes-close-btn">X</button>
|
|
||||||
</div>
|
|
||||||
<div class="bes-text-div">
|
|
||||||
<span class="popup-text">
|
|
||||||
</span>
|
|
||||||
<div class="bes-replacement-div">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
show(x, y) {
|
|
||||||
y = y + 20
|
|
||||||
this.style.position = 'fixed'
|
|
||||||
this.style.left = `${x}px`
|
|
||||||
this.style.top = `${y}px`
|
|
||||||
this.clear()
|
|
||||||
this.classList.add('show')
|
|
||||||
}
|
|
||||||
|
|
||||||
clear() {
|
|
||||||
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
|
|
||||||
const replacements = replacementDiv.childNodes
|
|
||||||
if (!replacements.length) return
|
|
||||||
replacements.forEach(replacement => {
|
|
||||||
replacementDiv.removeChild(replacement)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
this.classList.remove('show')
|
|
||||||
}
|
|
||||||
|
|
||||||
changeText(text) {
|
|
||||||
this.shadowRoot.querySelector('.popup-text').textContent = text
|
|
||||||
}
|
|
||||||
|
|
||||||
appendReplacements(replacement, offset, length) {
|
|
||||||
const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
|
|
||||||
const replacementBtn = document.createElement('button')
|
|
||||||
replacementBtn.classList.add('bes-replacement-btn')
|
|
||||||
replacementBtn.dataset.length = length
|
|
||||||
replacementBtn.dataset.offset = offset
|
|
||||||
replacementBtn.textContent = replacement
|
|
||||||
replacementBtn.classList.add('bes-replacement')
|
|
||||||
replacementDiv.appendChild(replacementBtn)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define('bes-popup-el', BesPopupEl)
|
|
||||||
Loading…
x
Reference in New Issue
Block a user