Amebis/BesService
2
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge commit 'e8b1ab94d9ae1a26152f7b4ebaafd7b12480dbb3'

Browse Source
This commit is contained in:
Simon Rozman 2024-06-10 14:53:46 +02:00
commit ba9a18705e
2 changed files with 54 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
samples/mock-page.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BesService &lt;div contenteditable="true"&gt; Example</title>
<link rel="stylesheet" href="../styles.css" />
<link rel="stylesheet" href="styles.css" />
<script>const besUrl = 'http://localhost:225/api/v2';</script>
<script src="../service2.js"></script>
</head>
<body>
<div class="flex">
<div class="mock-content">
<p>Element to delete</p>
<p>Element to delete</p>
<p>Element to delete</p>
<p>Element to delete</p>
<p>Element to delete</p>
</div>
<div class="resizable">
<div class="my-block my-control bes-service" contenteditable="true">
<p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
<p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
<p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
<p>Na mizo nisem položil knjigo.</p>
</div>
<p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
<p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
<p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
<p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
<p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
<p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
<p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
<p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
<div class="my-block my-control bes-service" contenteditable="true">
<p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
<p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
<p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
<p>Na mizo nisem položil knjigo.</p>
</div>
</div>
</div>
<bes-popup-el/>
</body>
</html>

13
service2.js
View File

@ -147,8 +147,6 @@ class BesService {
onScroll() { onScroll() {
// Scroll panel is "position: absolute", we need to keep it aligned with the host element. // Scroll panel is "position: absolute", we need to keep it aligned with the host element.
this.scrollPanel.style.top = `${-this.hostElement.scrollTop}px` this.scrollPanel.style.top = `${-this.hostElement.scrollTop}px`
// Why do we need to set left to -scrollLeft? It destroys the position of highlights
this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px` this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
} }
@ -315,10 +313,13 @@ class BesService {
*/ */
setStatusDivPosition() { setStatusDivPosition() {
const rect = this.hostElement.getBoundingClientRect() const rect = this.hostElement.getBoundingClientRect()
const scrollLeft = window.scrollX || document.documentElement.scrollLeft const parentRect = this.hostElement.parentElement.getBoundingClientRect()
const scrollTop = window.scrollY || document.documentElement.scrollTop const scrollbarWidth =
this.statusDiv.style.left = `${rect.right - 40 + scrollLeft}px` this.hostElement.offsetWidth - this.hostElement.clientWidth
this.statusDiv.style.top = `${rect.bottom - 30 + scrollTop}px` this.statusDiv.style.left = `${
rect.right - parentRect.left - 40 - scrollbarWidth
}px`
this.statusDiv.style.top = `${rect.bottom - parentRect.top - 30}px`
} }
/** /**