Svelte - 如何使数组 forEach 方法对 <svelte:window> 绑定有反应？
Svelte - How to make array forEach method reactive to <svelte:window> bindings?
我有这个 Svelte 代码，它基本上从数据库中获取 html 文本，并针对每个工具提示检查右侧是否有溢出，如果有，代码会将工具提示翻转到左侧.
苗条 REPL.
<script>
import {onMount} from 'svelte'
let newInnerHTML = `<article identifier="061">
<ti.art>Článek 61</ti.art>
<sti.art>Změna nařízení (EU) č. 1093/2010</sti.art>
<alinea>
<parg>V čl. 4 bodu 2 nařízení (EU) č. 1093/2010 se doplňuje nový podbod, který zní:</parg>
<quot.s level="1">
<list type="OTHER">
<item>
<np>
<no.p>
<quotstart>"</quotstart>
viii)
</no.p>
<txt>
pokud jde o nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0028" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
a směrnici Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0029" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
, příslušné orgány ve smyslu čl. 3 odst. 1 bodu 5 uvedené směrnice.
</txt>
</np>
</item>
</list>
<div>----------------------</div>
<note note.id="E0028" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
<note note.id="E0029" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>
<article identifier="064">
<ti.art>Článek 64</ti.art>
<sti.art>Změny nařízení (EU) č. 806/2014</sti.art>
<alinea>
<parg>
V článku 12a nařízení Evropského parlamentu a Rady (EU) č. 806/2014
<note note.id="E0038" numbering="ARAB" numbering.continued="YES" type="FOOTNOTE">
<parg>
Nařízení Evropského parlamentu a Rady (EU) č. 806/2014 ze dne
<date iso="20140715">15. července 2014</date>
, kterým se stanoví jednotná pravidla a jednotný postup pro řešení krize úvěrových institucí a některých investičních podniků v rámci jednotného mechanismu pro řešení krizí a Jednotného fondu pro řešení krizí a mění nařízení (EU) č. 1093/2010 (
<ref.doc.oj coll="L" date.pub="20140730" no.oj="225" page.first="1">Úř. věst. L 225, 30.7.2014, s. 1</ref.doc.oj>
).
</parg>
</note>
se doplňuje nový odstavec, který zní:
</parg>
<quot.s level="1">
<parag identifier="012A.003">
<no.parag>
<quotstart>"</quotstart>
3.
</no.parag>
<alinea>
<parg>
Pokud jde o požadavky na kapitál na individuálním základě investičních podniků uvedených v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2033, jsou v souladu s článkem 65 nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0039" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
v tomto nařízení odkazy na článek 92 nařízení (EU) č. 575/2013 chápány takto:
</parg>
<list type="alpha">
<item>
<np>
<no.p>a)</no.p>
<txt>odkazy na čl. 92 odst. 1 písm. c) nařízení (EU) č. 575/2013, pokud jde o požadavek na celkový kapitálový poměr, v tomto nařízení se považují za odkazy na čl. 11 odst. 1 nařízení (EU) 2019/2033;</txt>
</np>
</item>
<item>
<np>
<no.p>b)</no.p>
<txt>odkazy na čl. 92 odst. 3 nařízení (EU) č. 575/2013, pokud jde o celkový objem rizikové expozice, v tomto nařízení se považují za odkazy na příslušný požadavek podle čl. 11 odst. 1 nařízení (EU) 2019/2033 vynásobený koeficientem 12,5.</txt>
</np>
</item>
</list>
</alinea>
<alinea>
Pokud jde o dodatečné kapitálové požadavky na investiční podniky uvedené v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2034, považují se v souladu s článkem 65 směrnice Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0040" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
v tomto nařízení odkazy na článek 104a směrnice 2013/36/EU za odkazy na článek 40 směrnice (EU) 2019/2034.
</alinea>
</parag>
<div>----------------------</div>
<note note.id="E0039" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
<note note.id="E0040" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>`;
let windowInnerWidthy;
let windowscrollX;
onMount(() => {
let tooltips = document.querySelectorAll("note:not(.under) parg");
tooltips.forEach(element => {
let tooltip = element.getBoundingClientRect();
let offset = tooltip.left + windowscrollX;
let width = tooltip.width;
let smaller = (offset + width <= windowInnerWidthy);
if (!smaller) {
element.classList.add('edge');
} else {
element.classList.remove('edge');
}
});
});
</script>
<svelte:window bind:innerWidth={windowInnerWidthy} bind:scrollX={windowscrollX}/>
<container>
{@html newInnerHTML}
</container>
<style>
:global(ti, preamble\.init, visa, sti, gr\.consid\.init, consid, article, ti\.art, sti\.art, parag, alinea, item)
{
display: block;
padding-top: 5px;
padding-bottom: 5px;
}
:global(no\.p, no\.parag)
{
padding-right: 6px;
}
:global(alinea:first-of-type)
{
display: inline
}
:global(doctitle, ti, ti\.art, sti, sti\.art)
{
text-align: center;
}
:global(note)
{
display: inline-block;
position: relative;
}
:global(note:not(.under) parg)
{
visibility: hidden;
position: absolute;
background-color: black;
color: #fff;
padding: 5px 5px;
border-radius: 6px;
z-index: 1;
width: 50vw;
top: 50%;
}
:global(.edge)
{
right: 0;
}
:global(note::before)
{
content: attr(note\.id);
font-size: x-small;
vertical-align: top;
color: blue;
padding-left: 6px;
}
:global(note:hover parg)
{
visibility: visible;
}
:global(quot\.s)
{
background: #ffe574;
display: inline-block;
}
</style>
使用 onMount() 效果很好。目标是让它对用户调整 window 的大小做出交互式反应，而不仅仅是组件的 onMount。但我不知道如何使用 forEach 方法实现这种反应行为。
到目前为止，这是我的代码：
苗条 REPL.
<script>
import {onMount} from 'svelte'
let newInnerHTML = `<article identifier="061">
<ti.art>Článek 61</ti.art>
<sti.art>Změna nařízení (EU) č. 1093/2010</sti.art>
<alinea>
<parg>V čl. 4 bodu 2 nařízení (EU) č. 1093/2010 se doplňuje nový podbod, který zní:</parg>
<quot.s level="1">
<list type="OTHER">
<item>
<np>
<no.p>
<quotstart>"</quotstart>
viii)
</no.p>
<txt>
pokud jde o nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0028" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
a směrnici Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0029" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
, příslušné orgány ve smyslu čl. 3 odst. 1 bodu 5 uvedené směrnice.
</txt>
</np>
</item>
</list>
<div>----------------------</div>
<note note.id="E0028" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
<note note.id="E0029" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>
<article identifier="064">
<ti.art>Článek 64</ti.art>
<sti.art>Změny nařízení (EU) č. 806/2014</sti.art>
<alinea>
<parg>
V článku 12a nařízení Evropského parlamentu a Rady (EU) č. 806/2014
<note note.id="E0038" numbering="ARAB" numbering.continued="YES" type="FOOTNOTE">
<parg>
Nařízení Evropského parlamentu a Rady (EU) č. 806/2014 ze dne
<date iso="20140715">15. července 2014</date>
, kterým se stanoví jednotná pravidla a jednotný postup pro řešení krize úvěrových institucí a některých investičních podniků v rámci jednotného mechanismu pro řešení krizí a Jednotného fondu pro řešení krizí a mění nařízení (EU) č. 1093/2010 (
<ref.doc.oj coll="L" date.pub="20140730" no.oj="225" page.first="1">Úř. věst. L 225, 30.7.2014, s. 1</ref.doc.oj>
).
</parg>
</note>
se doplňuje nový odstavec, který zní:
</parg>
<quot.s level="1">
<parag identifier="012A.003">
<no.parag>
<quotstart>"</quotstart>
3.
</no.parag>
<alinea>
<parg>
Pokud jde o požadavky na kapitál na individuálním základě investičních podniků uvedených v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2033, jsou v souladu s článkem 65 nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0039" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
v tomto nařízení odkazy na článek 92 nařízení (EU) č. 575/2013 chápány takto:
</parg>
<list type="alpha">
<item>
<np>
<no.p>a)</no.p>
<txt>odkazy na čl. 92 odst. 1 písm. c) nařízení (EU) č. 575/2013, pokud jde o požadavek na celkový kapitálový poměr, v tomto nařízení se považují za odkazy na čl. 11 odst. 1 nařízení (EU) 2019/2033;</txt>
</np>
</item>
<item>
<np>
<no.p>b)</no.p>
<txt>odkazy na čl. 92 odst. 3 nařízení (EU) č. 575/2013, pokud jde o celkový objem rizikové expozice, v tomto nařízení se považují za odkazy na příslušný požadavek podle čl. 11 odst. 1 nařízení (EU) 2019/2033 vynásobený koeficientem 12,5.</txt>
</np>
</item>
</list>
</alinea>
<alinea>
Pokud jde o dodatečné kapitálové požadavky na investiční podniky uvedené v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2034, považují se v souladu s článkem 65 směrnice Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0040" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
v tomto nařízení odkazy na článek 104a směrnice 2013/36/EU za odkazy na článek 40 směrnice (EU) 2019/2034.
</alinea>
</parag>
<div>----------------------</div>
<note note.id="E0039" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
<note note.id="E0040" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>`;
let windowInnerWidthy;
let windowscrollX;
let tooltips = document.querySelectorAll("note:not(.under) parg");
tooltips.forEach(element => {
let tooltip = element.getBoundingClientRect();
let offset = tooltip.left + windowscrollX;
let width = tooltip.width;
let smaller = (offset + width <= windowInnerWidthy);
if (!smaller) {
element.classList.add('edge');
} else {
element.classList.remove('edge');
}
});
tooltips = tooltips;
</script>
<svelte:window bind:innerWidth={windowInnerWidthy} bind:scrollX={windowscrollX}/>
<container>
{@html newInnerHTML}
</container>
<style>
:global(ti, preamble\.init, visa, sti, gr\.consid\.init, consid, article, ti\.art, sti\.art, parag, alinea, item)
{
display: block;
padding-top: 5px;
padding-bottom: 5px;
}
:global(no\.p, no\.parag)
{
padding-right: 6px;
}
:global(alinea:first-of-type)
{
display: inline
}
:global(doctitle, ti, ti\.art, sti, sti\.art)
{
text-align: center;
}
:global(note)
{
display: inline-block;
position: relative;
}
:global(note:not(.under) parg)
{
visibility: hidden;
position: absolute;
background-color: black;
color: #fff;
padding: 5px 5px;
border-radius: 6px;
z-index: 1;
width: 50vw;
top: 50%;
}
:global(.edge)
{
right: 0;
}
:global(note::before)
{
content: attr(note\.id);
font-size: x-small;
vertical-align: top;
color: blue;
padding-left: 6px;
}
:global(note:hover parg)
{
visibility: visible;
}
:global(quot\.s)
{
background: #ffe574;
display: inline-block;
}
</style>
而不是 onMount 你可以在一个函数中创建它并响应地调用它：
function calculateTooltips() {
// code goes here
}
// this line will be called everytime windowInnerWidthy changes
$: windowInnerWidthy, calculateTooltips();
所以这似乎是一个有效的代码。我还添加了去抖动以对其进行一些优化。
苗条REPL
<script>
import { onMount } from "svelte";
let newInnerHTML = `<article identifier="061">
<ti.art>Článek 61</ti.art>
<sti.art>Změna nařízení (EU) č. 1093/2010</sti.art>
<alinea>
<parg>V čl. 4 bodu 2 nařízení (EU) č. 1093/2010 se doplňuje nový podbod, který zní:</parg>
<quot.s level="1">
<list type="OTHER">
<item>
<np>
<no.p>
<quotstart>"</quotstart>
viii)
</no.p>
<txt>
pokud jde o nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0028" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
a směrnici Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0029" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
, příslušné orgány ve smyslu čl. 3 odst. 1 bodu 5 uvedené směrnice.
</txt>
</np>
</item>
</list>
<div>----------------------</div>
<note note.id="E0028" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
<note note.id="E0029" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>
<article identifier="064">
<ti.art>Článek 64</ti.art>
<sti.art>Změny nařízení (EU) č. 806/2014</sti.art>
<alinea>
<parg>
V článku 12a nařízení Evropského parlamentu a Rady (EU) č. 806/2014
<note note.id="E0038" numbering="ARAB" numbering.continued="YES" type="FOOTNOTE">
<parg>
Nařízení Evropského parlamentu a Rady (EU) č. 806/2014 ze dne
<date iso="20140715">15. července 2014</date>
, kterým se stanoví jednotná pravidla a jednotný postup pro řešení krize úvěrových institucí a některých investičních podniků v rámci jednotného mechanismu pro řešení krizí a Jednotného fondu pro řešení krizí a mění nařízení (EU) č. 1093/2010 (
<ref.doc.oj coll="L" date.pub="20140730" no.oj="225" page.first="1">Úř. věst. L 225, 30.7.2014, s. 1</ref.doc.oj>
).
</parg>
</note>
se doplňuje nový odstavec, který zní:
</parg>
<quot.s level="1">
<parag identifier="012A.003">
<no.parag>
<quotstart>"</quotstart>
3.
</no.parag>
<alinea>
<parg>
Pokud jde o požadavky na kapitál na individuálním základě investičních podniků uvedených v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2033, jsou v souladu s článkem 65 nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0039" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
v tomto nařízení odkazy na článek 92 nařízení (EU) č. 575/2013 chápány takto:
</parg>
<list type="alpha">
<item>
<np>
<no.p>a)</no.p>
<txt>odkazy na čl. 92 odst. 1 písm. c) nařízení (EU) č. 575/2013, pokud jde o požadavek na celkový kapitálový poměr, v tomto nařízení se považují za odkazy na čl. 11 odst. 1 nařízení (EU) 2019/2033;</txt>
</np>
</item>
<item>
<np>
<no.p>b)</no.p>
<txt>odkazy na čl. 92 odst. 3 nařízení (EU) č. 575/2013, pokud jde o celkový objem rizikové expozice, v tomto nařízení se považují za odkazy na příslušný požadavek podle čl. 11 odst. 1 nařízení (EU) 2019/2033 vynásobený koeficientem 12,5.</txt>
</np>
</item>
</list>
</alinea>
<alinea>
Pokud jde o dodatečné kapitálové požadavky na investiční podniky uvedené v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2034, považují se v souladu s článkem 65 směrnice Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0040" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
v tomto nařízení odkazy na článek 104a směrnice 2013/36/EU za odkazy na článek 40 směrnice (EU) 2019/2034.
</alinea>
</parag>
<div>----------------------</div>
<note note.id="E0039" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
<note note.id="E0040" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>`;
let windowInnerWidthy;
const debounce = (func, delay) => {
let timer;
return function () {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => func.apply(context, args), delay);
};
};
function calculateTooltips() {
let tooltips = document.querySelectorAll("note:not(.under) parg");
tooltips.forEach((element, i) => {
let rect = element.getBoundingClientRect();
let rectParent = element.parentElement.getBoundingClientRect();
let tooltipLeft = rectParent.left + rectParent.width;
let tooltiWidth = rect.width;
let tooltipFromRightToEnd = tooltipLeft + tooltiWidth;
let overflow = tooltipFromRightToEnd + 60 > windowInnerWidthy;
if (overflow) {
element.classList.add("flip");
} else {
element.classList.remove("flip");
}
});
tooltips = tooltips;
}
const debouncedcalculateTooltips = debounce(calculateTooltips, 300);
onMount(() => {
calculateTooltips();
window.addEventListener("resize", debouncedcalculateTooltips);
return () => {
window.removeEventListener("resize", debouncedcalculateTooltips);
};
});
</script>
<svelte:window bind:innerWidth={windowInnerWidthy} />
<container>
{@html newInnerHTML}
</container>
<style>
:global(ti, preamble\.init, visa, sti, gr\.consid\.init, consid, article, ti\.art, sti\.art, parag, alinea, item) {
display: block;
padding-top: 5px;
padding-bottom: 5px;
}
:global(no\.p, no\.parag) {
padding-right: 6px;
}
:global(alinea:first-of-type) {
display: inline;
}
:global(doctitle, ti, ti\.art, sti, sti\.art) {
text-align: center;
}
:global(note) {
display: inline-block;
position: relative;
}
:global(note:not(.under) parg) {
visibility: hidden;
position: absolute;
background-color: black;
color: #fff;
padding: 5px 10px;
border-radius: 6px;
z-index: 1;
width: 40vw;
top: 50%;
}
:global(.flip) {
right: 0;
}
:global(note::before) {
content: attr(note\.id);
font-size: x-small;
vertical-align: top;
color: blue;
padding-left: 6px;
}
:global(note:hover parg) {
visibility: visible;
}
:global(quot\.s) {
background: #fff8d7;
display: inline-block;
}
</style>
我有这个 Svelte 代码，它基本上从数据库中获取 html 文本，并针对每个工具提示检查右侧是否有溢出，如果有，代码会将工具提示翻转到左侧.
苗条 REPL.
<script>
import {onMount} from 'svelte'
let newInnerHTML = `<article identifier="061">
<ti.art>Článek 61</ti.art>
<sti.art>Změna nařízení (EU) č. 1093/2010</sti.art>
<alinea>
<parg>V čl. 4 bodu 2 nařízení (EU) č. 1093/2010 se doplňuje nový podbod, který zní:</parg>
<quot.s level="1">
<list type="OTHER">
<item>
<np>
<no.p>
<quotstart>"</quotstart>
viii)
</no.p>
<txt>
pokud jde o nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0028" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
a směrnici Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0029" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
, příslušné orgány ve smyslu čl. 3 odst. 1 bodu 5 uvedené směrnice.
</txt>
</np>
</item>
</list>
<div>----------------------</div>
<note note.id="E0028" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
<note note.id="E0029" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>
<article identifier="064">
<ti.art>Článek 64</ti.art>
<sti.art>Změny nařízení (EU) č. 806/2014</sti.art>
<alinea>
<parg>
V článku 12a nařízení Evropského parlamentu a Rady (EU) č. 806/2014
<note note.id="E0038" numbering="ARAB" numbering.continued="YES" type="FOOTNOTE">
<parg>
Nařízení Evropského parlamentu a Rady (EU) č. 806/2014 ze dne
<date iso="20140715">15. července 2014</date>
, kterým se stanoví jednotná pravidla a jednotný postup pro řešení krize úvěrových institucí a některých investičních podniků v rámci jednotného mechanismu pro řešení krizí a Jednotného fondu pro řešení krizí a mění nařízení (EU) č. 1093/2010 (
<ref.doc.oj coll="L" date.pub="20140730" no.oj="225" page.first="1">Úř. věst. L 225, 30.7.2014, s. 1</ref.doc.oj>
).
</parg>
</note>
se doplňuje nový odstavec, který zní:
</parg>
<quot.s level="1">
<parag identifier="012A.003">
<no.parag>
<quotstart>"</quotstart>
3.
</no.parag>
<alinea>
<parg>
Pokud jde o požadavky na kapitál na individuálním základě investičních podniků uvedených v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2033, jsou v souladu s článkem 65 nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0039" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
v tomto nařízení odkazy na článek 92 nařízení (EU) č. 575/2013 chápány takto:
</parg>
<list type="alpha">
<item>
<np>
<no.p>a)</no.p>
<txt>odkazy na čl. 92 odst. 1 písm. c) nařízení (EU) č. 575/2013, pokud jde o požadavek na celkový kapitálový poměr, v tomto nařízení se považují za odkazy na čl. 11 odst. 1 nařízení (EU) 2019/2033;</txt>
</np>
</item>
<item>
<np>
<no.p>b)</no.p>
<txt>odkazy na čl. 92 odst. 3 nařízení (EU) č. 575/2013, pokud jde o celkový objem rizikové expozice, v tomto nařízení se považují za odkazy na příslušný požadavek podle čl. 11 odst. 1 nařízení (EU) 2019/2033 vynásobený koeficientem 12,5.</txt>
</np>
</item>
</list>
</alinea>
<alinea>
Pokud jde o dodatečné kapitálové požadavky na investiční podniky uvedené v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2034, považují se v souladu s článkem 65 směrnice Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0040" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
v tomto nařízení odkazy na článek 104a směrnice 2013/36/EU za odkazy na článek 40 směrnice (EU) 2019/2034.
</alinea>
</parag>
<div>----------------------</div>
<note note.id="E0039" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
<note note.id="E0040" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>`;
let windowInnerWidthy;
let windowscrollX;
onMount(() => {
let tooltips = document.querySelectorAll("note:not(.under) parg");
tooltips.forEach(element => {
let tooltip = element.getBoundingClientRect();
let offset = tooltip.left + windowscrollX;
let width = tooltip.width;
let smaller = (offset + width <= windowInnerWidthy);
if (!smaller) {
element.classList.add('edge');
} else {
element.classList.remove('edge');
}
});
});
</script>
<svelte:window bind:innerWidth={windowInnerWidthy} bind:scrollX={windowscrollX}/>
<container>
{@html newInnerHTML}
</container>
<style>
:global(ti, preamble\.init, visa, sti, gr\.consid\.init, consid, article, ti\.art, sti\.art, parag, alinea, item)
{
display: block;
padding-top: 5px;
padding-bottom: 5px;
}
:global(no\.p, no\.parag)
{
padding-right: 6px;
}
:global(alinea:first-of-type)
{
display: inline
}
:global(doctitle, ti, ti\.art, sti, sti\.art)
{
text-align: center;
}
:global(note)
{
display: inline-block;
position: relative;
}
:global(note:not(.under) parg)
{
visibility: hidden;
position: absolute;
background-color: black;
color: #fff;
padding: 5px 5px;
border-radius: 6px;
z-index: 1;
width: 50vw;
top: 50%;
}
:global(.edge)
{
right: 0;
}
:global(note::before)
{
content: attr(note\.id);
font-size: x-small;
vertical-align: top;
color: blue;
padding-left: 6px;
}
:global(note:hover parg)
{
visibility: visible;
}
:global(quot\.s)
{
background: #ffe574;
display: inline-block;
}
</style>
使用 onMount() 效果很好。目标是让它对用户调整 window 的大小做出交互式反应，而不仅仅是组件的 onMount。但我不知道如何使用 forEach 方法实现这种反应行为。 到目前为止，这是我的代码：
苗条 REPL.
<script>
import {onMount} from 'svelte'
let newInnerHTML = `<article identifier="061">
<ti.art>Článek 61</ti.art>
<sti.art>Změna nařízení (EU) č. 1093/2010</sti.art>
<alinea>
<parg>V čl. 4 bodu 2 nařízení (EU) č. 1093/2010 se doplňuje nový podbod, který zní:</parg>
<quot.s level="1">
<list type="OTHER">
<item>
<np>
<no.p>
<quotstart>"</quotstart>
viii)
</no.p>
<txt>
pokud jde o nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0028" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
a směrnici Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0029" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
, příslušné orgány ve smyslu čl. 3 odst. 1 bodu 5 uvedené směrnice.
</txt>
</np>
</item>
</list>
<div>----------------------</div>
<note note.id="E0028" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
<note note.id="E0029" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>
<article identifier="064">
<ti.art>Článek 64</ti.art>
<sti.art>Změny nařízení (EU) č. 806/2014</sti.art>
<alinea>
<parg>
V článku 12a nařízení Evropského parlamentu a Rady (EU) č. 806/2014
<note note.id="E0038" numbering="ARAB" numbering.continued="YES" type="FOOTNOTE">
<parg>
Nařízení Evropského parlamentu a Rady (EU) č. 806/2014 ze dne
<date iso="20140715">15. července 2014</date>
, kterým se stanoví jednotná pravidla a jednotný postup pro řešení krize úvěrových institucí a některých investičních podniků v rámci jednotného mechanismu pro řešení krizí a Jednotného fondu pro řešení krizí a mění nařízení (EU) č. 1093/2010 (
<ref.doc.oj coll="L" date.pub="20140730" no.oj="225" page.first="1">Úř. věst. L 225, 30.7.2014, s. 1</ref.doc.oj>
).
</parg>
</note>
se doplňuje nový odstavec, který zní:
</parg>
<quot.s level="1">
<parag identifier="012A.003">
<no.parag>
<quotstart>"</quotstart>
3.
</no.parag>
<alinea>
<parg>
Pokud jde o požadavky na kapitál na individuálním základě investičních podniků uvedených v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2033, jsou v souladu s článkem 65 nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0039" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
v tomto nařízení odkazy na článek 92 nařízení (EU) č. 575/2013 chápány takto:
</parg>
<list type="alpha">
<item>
<np>
<no.p>a)</no.p>
<txt>odkazy na čl. 92 odst. 1 písm. c) nařízení (EU) č. 575/2013, pokud jde o požadavek na celkový kapitálový poměr, v tomto nařízení se považují za odkazy na čl. 11 odst. 1 nařízení (EU) 2019/2033;</txt>
</np>
</item>
<item>
<np>
<no.p>b)</no.p>
<txt>odkazy na čl. 92 odst. 3 nařízení (EU) č. 575/2013, pokud jde o celkový objem rizikové expozice, v tomto nařízení se považují za odkazy na příslušný požadavek podle čl. 11 odst. 1 nařízení (EU) 2019/2033 vynásobený koeficientem 12,5.</txt>
</np>
</item>
</list>
</alinea>
<alinea>
Pokud jde o dodatečné kapitálové požadavky na investiční podniky uvedené v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2034, považují se v souladu s článkem 65 směrnice Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0040" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
v tomto nařízení odkazy na článek 104a směrnice 2013/36/EU za odkazy na článek 40 směrnice (EU) 2019/2034.
</alinea>
</parag>
<div>----------------------</div>
<note note.id="E0039" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
<note note.id="E0040" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>`;
let windowInnerWidthy;
let windowscrollX;
let tooltips = document.querySelectorAll("note:not(.under) parg");
tooltips.forEach(element => {
let tooltip = element.getBoundingClientRect();
let offset = tooltip.left + windowscrollX;
let width = tooltip.width;
let smaller = (offset + width <= windowInnerWidthy);
if (!smaller) {
element.classList.add('edge');
} else {
element.classList.remove('edge');
}
});
tooltips = tooltips;
</script>
<svelte:window bind:innerWidth={windowInnerWidthy} bind:scrollX={windowscrollX}/>
<container>
{@html newInnerHTML}
</container>
<style>
:global(ti, preamble\.init, visa, sti, gr\.consid\.init, consid, article, ti\.art, sti\.art, parag, alinea, item)
{
display: block;
padding-top: 5px;
padding-bottom: 5px;
}
:global(no\.p, no\.parag)
{
padding-right: 6px;
}
:global(alinea:first-of-type)
{
display: inline
}
:global(doctitle, ti, ti\.art, sti, sti\.art)
{
text-align: center;
}
:global(note)
{
display: inline-block;
position: relative;
}
:global(note:not(.under) parg)
{
visibility: hidden;
position: absolute;
background-color: black;
color: #fff;
padding: 5px 5px;
border-radius: 6px;
z-index: 1;
width: 50vw;
top: 50%;
}
:global(.edge)
{
right: 0;
}
:global(note::before)
{
content: attr(note\.id);
font-size: x-small;
vertical-align: top;
color: blue;
padding-left: 6px;
}
:global(note:hover parg)
{
visibility: visible;
}
:global(quot\.s)
{
background: #ffe574;
display: inline-block;
}
</style>
而不是 onMount 你可以在一个函数中创建它并响应地调用它：
function calculateTooltips() {
// code goes here
}
// this line will be called everytime windowInnerWidthy changes
$: windowInnerWidthy, calculateTooltips();
所以这似乎是一个有效的代码。我还添加了去抖动以对其进行一些优化。
苗条REPL
<script>
import { onMount } from "svelte";
let newInnerHTML = `<article identifier="061">
<ti.art>Článek 61</ti.art>
<sti.art>Změna nařízení (EU) č. 1093/2010</sti.art>
<alinea>
<parg>V čl. 4 bodu 2 nařízení (EU) č. 1093/2010 se doplňuje nový podbod, který zní:</parg>
<quot.s level="1">
<list type="OTHER">
<item>
<np>
<no.p>
<quotstart>"</quotstart>
viii)
</no.p>
<txt>
pokud jde o nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0028" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
a směrnici Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0029" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
, příslušné orgány ve smyslu čl. 3 odst. 1 bodu 5 uvedené směrnice.
</txt>
</np>
</item>
</list>
<div>----------------------</div>
<note note.id="E0028" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1 ).
</parg>
</note>
<note note.id="E0029" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>
<article identifier="064">
<ti.art>Článek 64</ti.art>
<sti.art>Změny nařízení (EU) č. 806/2014</sti.art>
<alinea>
<parg>
V článku 12a nařízení Evropského parlamentu a Rady (EU) č. 806/2014
<note note.id="E0038" numbering="ARAB" numbering.continued="YES" type="FOOTNOTE">
<parg>
Nařízení Evropského parlamentu a Rady (EU) č. 806/2014 ze dne
<date iso="20140715">15. července 2014</date>
, kterým se stanoví jednotná pravidla a jednotný postup pro řešení krize úvěrových institucí a některých investičních podniků v rámci jednotného mechanismu pro řešení krizí a Jednotného fondu pro řešení krizí a mění nařízení (EU) č. 1093/2010 (
<ref.doc.oj coll="L" date.pub="20140730" no.oj="225" page.first="1">Úř. věst. L 225, 30.7.2014, s. 1</ref.doc.oj>
).
</parg>
</note>
se doplňuje nový odstavec, který zní:
</parg>
<quot.s level="1">
<parag identifier="012A.003">
<no.parag>
<quotstart>"</quotstart>
3.
</no.parag>
<alinea>
<parg>
Pokud jde o požadavky na kapitál na individuálním základě investičních podniků uvedených v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2033, jsou v souladu s článkem 65 nařízení Evropského parlamentu a Rady (EU) 2019/2033
<note note.id="E0039" numbering="STAR" type="QUOTATION">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
v tomto nařízení odkazy na článek 92 nařízení (EU) č. 575/2013 chápány takto:
</parg>
<list type="alpha">
<item>
<np>
<no.p>a)</no.p>
<txt>odkazy na čl. 92 odst. 1 písm. c) nařízení (EU) č. 575/2013, pokud jde o požadavek na celkový kapitálový poměr, v tomto nařízení se považují za odkazy na čl. 11 odst. 1 nařízení (EU) 2019/2033;</txt>
</np>
</item>
<item>
<np>
<no.p>b)</no.p>
<txt>odkazy na čl. 92 odst. 3 nařízení (EU) č. 575/2013, pokud jde o celkový objem rizikové expozice, v tomto nařízení se považují za odkazy na příslušný požadavek podle čl. 11 odst. 1 nařízení (EU) 2019/2033 vynásobený koeficientem 12,5.</txt>
</np>
</item>
</list>
</alinea>
<alinea>
Pokud jde o dodatečné kapitálové požadavky na investiční podniky uvedené v čl. 2 písm. c) tohoto nařízení, které nejsou investičními podniky uvedenými v čl. 1 odst. 2 nebo 5 nařízení (EU) 2019/2034, považují se v souladu s článkem 65 směrnice Evropského parlamentu a Rady (EU) 2019/2034
<note note.id="E0040" numbering="STAR" type="QUOTATION">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
v tomto nařízení odkazy na článek 104a směrnice 2013/36/EU za odkazy na článek 40 směrnice (EU) 2019/2034.
</alinea>
</parag>
<div>----------------------</div>
<note note.id="E0039" numbering="STAR" type="QUOTATION" class="under">
<parg>
Nařízení Evropského parlamentu a Rady (EU) 2019/2033 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostních požadavcích na investiční podniky a o změně nařízení (EU) č. 1093/2010 (EU) č. 575/2013, (EU) č. 600/2014 a (EU) č. 806/2014 (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 1).
</parg>
</note>
<note note.id="E0040" numbering="STAR" type="QUOTATION" class="under">
<parg>
Směrnice Evropského parlamentu a Rady (EU) 2019/2034 ze dne
<date iso="20191127">27. listopadu 2019</date>
o obezřetnostním dohledu nad investičními podniky a o změně směrnic 2002/87/ES, 2009/65/ES, 2011/61/ES, 2013/36/EU, 2014/59/EU a 2014/65/EU (Úř. věst. L 314,
<date iso="20191205">5.12.2019</date>
, s. 64).
<quotend>"</quotend>
</parg>
</note>
</quot.s>
</alinea>
</article>`;
let windowInnerWidthy;
const debounce = (func, delay) => {
let timer;
return function () {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => func.apply(context, args), delay);
};
};
function calculateTooltips() {
let tooltips = document.querySelectorAll("note:not(.under) parg");
tooltips.forEach((element, i) => {
let rect = element.getBoundingClientRect();
let rectParent = element.parentElement.getBoundingClientRect();
let tooltipLeft = rectParent.left + rectParent.width;
let tooltiWidth = rect.width;
let tooltipFromRightToEnd = tooltipLeft + tooltiWidth;
let overflow = tooltipFromRightToEnd + 60 > windowInnerWidthy;
if (overflow) {
element.classList.add("flip");
} else {
element.classList.remove("flip");
}
});
tooltips = tooltips;
}
const debouncedcalculateTooltips = debounce(calculateTooltips, 300);
onMount(() => {
calculateTooltips();
window.addEventListener("resize", debouncedcalculateTooltips);
return () => {
window.removeEventListener("resize", debouncedcalculateTooltips);
};
});
</script>
<svelte:window bind:innerWidth={windowInnerWidthy} />
<container>
{@html newInnerHTML}
</container>
<style>
:global(ti, preamble\.init, visa, sti, gr\.consid\.init, consid, article, ti\.art, sti\.art, parag, alinea, item) {
display: block;
padding-top: 5px;
padding-bottom: 5px;
}
:global(no\.p, no\.parag) {
padding-right: 6px;
}
:global(alinea:first-of-type) {
display: inline;
}
:global(doctitle, ti, ti\.art, sti, sti\.art) {
text-align: center;
}
:global(note) {
display: inline-block;
position: relative;
}
:global(note:not(.under) parg) {
visibility: hidden;
position: absolute;
background-color: black;
color: #fff;
padding: 5px 10px;
border-radius: 6px;
z-index: 1;
width: 40vw;
top: 50%;
}
:global(.flip) {
right: 0;
}
:global(note::before) {
content: attr(note\.id);
font-size: x-small;
vertical-align: top;
color: blue;
padding-left: 6px;
}
:global(note:hover parg) {
visibility: visible;
}
:global(quot\.s) {
background: #fff8d7;
display: inline-block;
}
</style>