renovations, new pics from @bezart
This commit is contained in:
Ilya Kantor
parent
b1cf35268b
commit
801ff5f119
145 changed files with 711 additions and 300 deletions
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
Всплытие гарантирует, что клик по внутреннему `<p>` вызовет обработчик `onclick` (если есть) сначала на самом `<p>`, затем на элементе `<div>` далее на элементе `<form>`, и так далее вверх по цепочке родителей до самого `document`.
|
||||
|
||||
<img src="event-order-bubbling.png" alt="Порядок всплытия событий">
|
||||
<img src="event-order-bubbling.svg" alt="Порядок всплытия событий">
|
||||
|
||||
Поэтому если в примере выше кликнуть на `P`, то последовательно выведутся `alert`: `p` -> `div` -> `form`.
|
||||
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
|
||||
В [стандарте DOM Events 3](http://www.w3.org/TR/DOM-Level-3-Events/) это продемонстрировано так:
|
||||
|
||||
<img src="eventflow.png">
|
||||
<img src="eventflow.svg">
|
||||
|
||||
То есть, при клике на `TD` событие путешествует по цепочке родителей сначала вниз к элементу ("погружается"), а потом наверх ("всплывает"), по пути задействуя обработчики.
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="337px" height="216px" viewBox="0 0 337 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>event-order-bubbling.svg</title>
|
||||
<desc>Created with bin/sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="event-order-bubbling.svg" sketch:type="MSArtboardGroup">
|
||||
<path d="M159.48764,140 L174,186 L60,186 L74.51236,140 L159.48764,140 Z" id="Rectangle-210" fill="#FFDE99" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M180.23146,72 L202,141 L31,141 L52.76854,72 L180.23146,72 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M199.611787,20 L228,110 L5,110 L33.388213,20 L199.611787,20 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M112.500875,123 L112.500875,110 L112.500875,110 L121.499875,110 L121.499875,123 L112.500875,123 Z M112.500875,141 L112.500875,154.816139 C112.500875,157.302139 114.514875,159.316139 117.000875,159.316139 C119.484875,159.316139 121.499875,157.302139 121.499875,154.816139 L121.499875,141 L112.500875,141 Z M112.500875,92 L112.500875,35.6981394 L102.361875,45.8351394 C100.605875,47.5921394 97.756875,47.5921394 95.998875,45.8351394 C94.240875,44.0771394 94.240875,41.2281394 95.998875,39.4711394 L113.637875,21.8311394 C114.563875,20.9071394 115.789875,20.4821394 117.000875,20.5311394 C118.210875,20.4821394 119.437875,20.9071394 120.361875,21.8311394 L138.001875,39.4711394 C139.758875,41.2281394 139.758875,44.0771394 138.001875,45.8351394 C136.243875,47.5921394 133.394875,47.5921394 131.637875,45.8351394 L121.499875,35.6981394 L121.499875,92 L112.500875,92 Z" id="Fill-46" fill="#5A4739" sketch:type="MSShapeGroup"></path>
|
||||
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#5A4739">
|
||||
<tspan x="210" y="105">1</tspan>
|
||||
</text>
|
||||
<text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#5A4739">
|
||||
<tspan x="185" y="136">2</tspan>
|
||||
</text>
|
||||
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#EE6B47">
|
||||
<tspan x="157" y="181">3</tspan>
|
||||
</text>
|
||||
<text id="Самый-глубокий-элеме" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" line-spacing="17" fill="#8A704D">
|
||||
<tspan x="211" y="181">Самый глубокий </tspan>
|
||||
<tspan x="211" y="198">элемент</tspan>
|
||||
</text>
|
||||
<path d="M170.5,176.5 L200.5,176.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
194
2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg
Normal file
194
2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="100%" height="100%" viewBox="0 0 640 690">
|
||||
|
||||
<title>DOM Level 3 Events: Event Flow</title>
|
||||
<desc>Alternate description</desc>
|
||||
|
||||
|
||||
<defs id="defs-1">
|
||||
<path id="arrowhead" d="M-9,-4 L0,0 -9,4 Z" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<marker id="blackArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
|
||||
<use xlink:href="#arrowhead" stroke="black" fill="black" />
|
||||
</marker>
|
||||
<marker id="redArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
|
||||
<use xlink:href="#arrowhead" stroke="red" fill="red" />
|
||||
</marker>
|
||||
<marker id="greenArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
|
||||
<use xlink:href="#arrowhead" stroke="green" fill="green" />
|
||||
</marker>
|
||||
|
||||
<filter x="-5%" y="-5%" width="120%" height="120%" id="dropShadow">
|
||||
<feGaussianBlur stdDeviation="2 2" in="SourceAlpha"/>
|
||||
<feOffset dx="4" dy="4"/>
|
||||
<feComponentTransfer result="shadow">
|
||||
<feFuncA type="linear" slope=".55" intercept="0"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
</defs>
|
||||
|
||||
|
||||
<g id="nodes" font-family="Verdana, sans-serif" font-size="18" fill="black" text-anchor="middle" stroke="none" stroke-width="2">
|
||||
<g id="Window-node" transform="translate(310, 10)">
|
||||
<a xlink:href="../DOM3-Events.html#glossary-window" target="_parent">
|
||||
<rect x="-70" y="0" width="140" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26">Window</text>
|
||||
</a>
|
||||
</g>
|
||||
|
||||
<g id="document-node" transform="translate(310, 80)">
|
||||
<a xlink:href="../DOM3-Events.html#glossary-document" target="_parent">
|
||||
<rect x="-60" y="0" width="120" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26">Document</text>
|
||||
</a>
|
||||
</g>
|
||||
|
||||
<g id="html-node" transform="translate(310, 150)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26"><html></text>
|
||||
</g>
|
||||
|
||||
<g id="body-node" transform="translate(310, 220)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26"><body></text>
|
||||
</g>
|
||||
|
||||
<g id="table-node" transform="translate(310, 290)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26"><table></text>
|
||||
</g>
|
||||
|
||||
<g id="tbody-node" transform="translate(310, 360)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26"><tbody></text>
|
||||
</g>
|
||||
|
||||
<g id="tr_1-node" transform="translate(140, 450)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26"><tr></text>
|
||||
</g>
|
||||
|
||||
<g id="tr_2-node" transform="translate(500, 450)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26"><tr></text>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="tr_1_td_1-node" transform="translate(70, 540)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26"><td></text>
|
||||
</g>
|
||||
|
||||
<g id="tr_1_td_1_text-node" transform="translate(70, 610)">
|
||||
<ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
|
||||
<text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Shady Grove</text>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="tr_1_td_2-node" transform="translate(210, 540)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26"><td></text>
|
||||
</g>
|
||||
|
||||
<g id="tr_1_td_2_text-node" transform="translate(210, 610)">
|
||||
<ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
|
||||
<text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Aeolian</text>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="tr_2_td_1-node" transform="translate(430, 540)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="blue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26" fill="white"><td></text>
|
||||
</g>
|
||||
|
||||
<g id="tr_2_td_1_text-node" transform="translate(430, 610)">
|
||||
<ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
|
||||
<text x="0" y="40" font-size="15" fill="white" text-anchor="middle">
|
||||
<tspan x="0" y="34">Over the River,</tspan> <tspan x="0" y="54">Charlie</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="tr_2_td_2-node" transform="translate(570, 540)">
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
|
||||
<text x="0" y="26"><td></text>
|
||||
</g>
|
||||
|
||||
<g id="tr_2_td_2_text-node" transform="translate(570, 610)">
|
||||
<ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
|
||||
<text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Dorian</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="edges">
|
||||
<line id="window-document" x1="310" y1="50" x2="310" y2="73" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
|
||||
<line id="document-html" x1="310" y1="120" x2="310" y2="143" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
|
||||
<line id="html-body" x1="310" y1="190" x2="310" y2="213" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
|
||||
<line id="body-table" x1="310" y1="260" x2="310" y2="283" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
|
||||
<line id="table-tbody" x1="310" y1="330" x2="310" y2="353" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
|
||||
<path id="tbody-tr_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
|
||||
d="M310,400 Q310,420 260,420 H160 Q140,420 140,443"/>
|
||||
<path id="tbody-tr_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
|
||||
d="M310,400 Q310,420 380,420 H480 Q500,420 500,443"/>
|
||||
<path id="tr_1-tr_2_td_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
|
||||
d="M140,490 Q140,510 120,510 H90 Q70,510 70,533"/>
|
||||
<path id="tr_1-tr_2_td_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
|
||||
d="M140,490 Q140,510 160,510 H190 Q210,510 210,533"/>
|
||||
<path id="tr_2-tr_2_td_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
|
||||
d="M500,490 Q500,510 480,510 H450 Q430,510 430,533"/>
|
||||
<path id="tr_2-tr_2_td_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
|
||||
d="M500,490 Q500,510 540,510 H550 Q570,510 570,533"/>
|
||||
<line id="tr_1_td_1-text" x1="70" y1="580" x2="70" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
|
||||
<line id="tr_1_td_2-text" x1="210" y1="580" x2="210" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
|
||||
<line id="tr_2_td_1-text" x1="430" y1="580" x2="430" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
|
||||
<line id="tr_2_td_2-text" x1="570" y1="580" x2="570" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
|
||||
</g>
|
||||
|
||||
<g id="event-flow" stroke-dasharray="10,5">
|
||||
<g id="capture_phase">
|
||||
<a xlink:href="../DOM3-Events.html#glossary-capture-phase" target="_parent"><text fill="red" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="150" y="220">Capture</tspan> <tspan x="150" y="240">Phase</tspan> <tspan x="150" y="260">(1)</tspan></text></a>
|
||||
|
||||
<path id="capture_phase_arrow" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
|
||||
d="M235,28 C195,25 195,75 238,85 "/>
|
||||
<use xlink:href="#capture_phase_arrow" x="5" y="70" />
|
||||
<use xlink:href="#capture_phase_arrow" x="10" y="140" />
|
||||
<use xlink:href="#capture_phase_arrow" x="10" y="210" />
|
||||
<use xlink:href="#capture_phase_arrow" x="10" y="280" />
|
||||
<path id="capture_phase_arrow2" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
|
||||
d="M245,378 C205,375 205,473 428,458 "/>
|
||||
<path id="capture_phase_arrow3" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
|
||||
stroke-dasharray="none" d="M428,473 C330,470 330,533 363,548 "/>
|
||||
|
||||
</g>
|
||||
|
||||
<g id="target_phase">
|
||||
<a xlink:href="../DOM3-Events.html#glossary-target-phase" target="_parent"><text fill="blue" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="337" y="580">Target</tspan> <tspan x="337" y="600">Phase</tspan> <tspan x="337" y="620">(2)</tspan></text></a>
|
||||
|
||||
<rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="none" stroke="black" stroke-width="5" stroke-dasharray="none"
|
||||
transform="translate(430, 540)"/>
|
||||
</g>
|
||||
|
||||
<g id="bubble_phase">
|
||||
<a xlink:href="../DOM3-Events.html#glossary-bubbling-phase" target="_parent"><text fill="green" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="490" y="320">Bubbling</tspan> <tspan x="490" y="340">Phase</tspan> <tspan x="490" y="360">(3)</tspan></text></a>
|
||||
|
||||
<path id="bubble_phase_arrow3" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
|
||||
stroke-dasharray="none" d="M492,548 C630,483 630,470 562,473"/>
|
||||
<path id="bubble_phase_arrow2" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
|
||||
d="M565,457 C605,447 605,398 377,388"/>
|
||||
<path id="bubble_phase_arrow" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
|
||||
d="M375,375 C415,372 415,332 375,322"/>
|
||||
<use xlink:href="#bubble_phase_arrow" x="0" y="-70" />
|
||||
<use xlink:href="#bubble_phase_arrow" x="0" y="-140" />
|
||||
<path id="bubble_phase_arrow4" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
|
||||
d="M375,165 C425,162 425,122 385,112"/>
|
||||
<path id="bubble_phase_arrow" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
|
||||
d="M385,95 C435,92 435,52 395,42"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -79,7 +79,7 @@ function highlight(node) {
|
|||
|
||||
Естественно, клик может произойти внутри `<td>`, на элементе `<strong>`. Такой клик будет пойман единым обработчиком, но `target` у него будет не `<td>`, а `<strong>`:
|
||||
|
||||
<img src="bagua.png">
|
||||
<img src="bagua-bubble.svg">
|
||||
|
||||
Внутри обработчика `table.onclick` мы должны по `event.target` разобраться, в каком именно `<td>` был клик.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="320px" height="216px" viewBox="0 0 320 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>bagua-bubble.svg</title>
|
||||
<desc>Created with bin/sketchtool.</desc>
|
||||
<defs></defs>
|
||||
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="bagua-bubble.svg" sketch:type="MSArtboardGroup">
|
||||
<path d="M202.48764,140 L217,186 L103,186 L117.51236,140 L202.48764,140 Z" id="Rectangle-210" fill="#FFDE99" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M223.23146,72 L245,141 L74,141 L95.76854,72 L223.23146,72 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M242.611787,20 L271,110 L48,110 L76.388213,20 L242.611787,20 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M155.500875,123 L155.500875,110 L155.500875,110 L164.499875,110 L164.499875,123 L155.500875,123 Z M155.500875,141 L155.500875,154.816139 C155.500875,157.302139 157.514875,159.316139 160.000875,159.316139 C162.484875,159.316139 164.499875,157.302139 164.499875,154.816139 L164.499875,141 L155.500875,141 Z M155.500875,92 L155.500875,35.6981394 L145.361875,45.8351394 C143.605875,47.5921394 140.756875,47.5921394 138.998875,45.8351394 C137.240875,44.0771394 137.240875,41.2281394 138.998875,39.4711394 L156.637875,21.8311394 C157.563875,20.9071394 158.789875,20.4821394 160.000875,20.5311394 C161.210875,20.4821394 162.437875,20.9071394 163.361875,21.8311394 L181.001875,39.4711394 C182.758875,41.2281394 182.758875,44.0771394 181.001875,45.8351394 C179.243875,47.5921394 176.394875,47.5921394 174.637875,45.8351394 L164.499875,35.6981394 L164.499875,92 L155.500875,92 Z" id="Fill-46" fill="#5A4739" sketch:type="MSShapeGroup"></path>
|
||||
<text id="<table>" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#99C0C3">
|
||||
<tspan x="9" y="30"><table></tspan>
|
||||
</text>
|
||||
<text id="<td>" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#CFCE95">
|
||||
<tspan x="36" y="136"><td></tspan>
|
||||
</text>
|
||||
<text id="<strong>" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#E8C48E">
|
||||
<tspan x="35" y="181"><strong></tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Loading…
Add table
Add a link
Reference in a new issue