Tweak registering besService and unify textarea and div contenteditable classes

This commit is contained in:
Aljaž Grilc 2024-03-26 10:53:02 +01:00
parent dca6ecd28a
commit 1ed14519e7
2 changed files with 27 additions and 36 deletions

View File

@ -8,45 +8,42 @@
<script src="service.js"></script> <script src="service.js"></script>
</head> </head>
<body> <body>
<div class="bes-service" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div> <!-- <div class="bes-service any-other-class" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
<br> <br /> -->
<!-- <div class="bes-service" contenteditable="true"></div> --> <!-- <div class="bes-service any-other-class" contenteditable="true"></div>
<!-- <br /> <br /> -->
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div></div> --> <!-- <div class="bes-service any-other-class" contenteditable="true"><div>Popravite kar želite.</div></div>
<br> -->
<!-- TODO: In the example below, BesService suggests wrong replacement (with included HTML tag) --> <!-- TODO: In the example below, BesService suggests wrong replacement (with included HTML tag) -->
<!-- <br> <!-- <div class="bes-service any-other-class" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<div class="bes-service" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> --> <br> -->
<!-- <br> <!-- <div class="bes-service any-other-class" contenteditable="true">To je preiskus.</div>
<div class="bes-service" contenteditable="true">To je preiskus.</div> --> <br> -->
<!--<br> <div class="bes-service any-other-class" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div>
<div class="bes-service" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div>--> <br>
<!-- <br> <div class="bes-service any-other-class" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> --> <br>
<!-- <br> <div class="bes-service any-other-class" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<div class="bes-service" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> -->
<br /> <br />
<textarea class="bes-service-textarea"></textarea> <textarea class="bes-service any-other-class"></textarea>
<br />
<textarea class="bes-service any-other-class"></textarea>
<br />
<textarea class="bes-service any-other-class"></textarea>
<br />
<textarea class="bes-service any-other-class"></textarea>
<bes-popup-el></bes-popup-el> <bes-popup-el></bes-popup-el>
</body> </body>
</html> </html>
<style> <style>
.bes-service { .bes-service {
width: 80%;
height: 300px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
line-height: 1.6;
white-space: pre-wrap;
overflow-y: auto; overflow-y: auto;
font-family: Arial, Helvetica, sans-serif; white-space: pre-wrap;
z-index: 2; z-index: 2;
position: relative; position: relative;
} }
.bes-service-textarea { .any-other-class{
width: 80%; width: 80%;
height: 300px; height: 300px;
margin: 0 auto; margin: 0 auto;
@ -55,10 +52,6 @@
background-color: #f5f5f5; background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap;
overflow-y: auto;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
z-index: 2;
position: relative;
} }
</style> </style>

View File

@ -994,11 +994,9 @@ class BesPopupEl extends HTMLElement {
} }
window.onload = () => { window.onload = () => {
document document.querySelectorAll('.bes-service').forEach(hostElement => {
.querySelectorAll('.bes-service') if (hostElement.tagName === 'TEXTAREA') BesTAService.register(hostElement)
.forEach(hostElement => BesService.register(hostElement)) else BesService.register(hostElement)
document.querySelectorAll('.bes-service-textarea').forEach(hostElement => {
BesTAService.register(hostElement)
}) })
} }