jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

51
2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

2
2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
View file

@ -26,7 +26,7 @@ Next we need to assign the correct `ball.style.position.left/top`. They contain
Here's the picture:
![](move-ball-coords.png)
![](move-ball-coords.svg)
We have `event.clientX/clientY` -- window-relative coordinates of the click.

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

31
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1.svg Normal file
View file

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="488px" height="246px" viewBox="0 0 488 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>carousel1.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="carousel1.svg">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="41.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="109.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="177.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="245.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="313.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="381.5" y="98.5" width="63" height="63" rx="10"></rect>
<text id="…-2" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="406" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" x="38" y="95" width="412" height="70"></rect>
<path d="M244,59 L36,59 L36,196 L244,196 L244,59 Z M19,42 L261,42 L261,213 L19,213 L19,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="div-(container)" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82.5" y="32">div (container)</tspan>
</text>
<text id="130x130" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="48" y="133">130x130</tspan>
</text>
<text id="ul-(width:-9999px)" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="71.5" y="82">ul (width: 9999px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" x="447" y="90" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

33
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="639px" height="246px" viewBox="0 0 639 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>carousel2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="carousel2.svg">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="41.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="109.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="177.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="245.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="313.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" x="381.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-26" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="449.5" y="98.5" width="63" height="63" rx="10"></rect>
<rect id="Rectangle-25" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" opacity="0.5" x="517.5" y="98.5" width="63" height="63" rx="10"></rect>
<text id="…-3" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="542" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" x="38" y="95" width="546" height="70"></rect>
<path d="M450,59 L242,59 L242,196 L450,196 L450,59 Z M225,42 L467,42 L467,213 L225,213 L225,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F"></path>
<text id="div-(container)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="288.5" y="32">div (container)</tspan>
</text>
<text id="130x130" font-family="PTMono-Regular, PT Mono" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="252" y="133">130x130</tspan>
</text>
<text id="ul-(margin-left:--35" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="246.5" y="82">ul (margin-left: -350px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" x="582" y="83" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
2-ui/2-events/01-introduction-browser-events/07-carousel/carousel2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

4
2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md
View file

@ -2,7 +2,7 @@ The images ribbon can be represented as `ul/li` list of images `<img>`.
Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visibble:
![](carousel1.png)
![](carousel1.svg)
To make the list show horizontally we need to apply correct CSS properties for `<li>`, like `display: inline-block`.
@ -10,7 +10,7 @@ For `<img>` we should also adjust `display`, because by default it's `inline`. T
To do the scrolling, we can shift `<ul>`. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`:
![](carousel2.png)
![](carousel2.svg)
The outer `<div>` has a fixed width, so "extra" images are cut.

4
2-ui/2-events/02-bubbling-and-capturing/article.md
View file

@ -41,7 +41,7 @@ A click on the inner `<p>` first runs `onclick`:
3. Then on the outer `<form>`.
4. And so on upwards till the `document` object.
![](event-order-bubbling.png)
![](event-order-bubbling.svg)
So if we click on `<p>`, then we'll see 3 alerts: `p` -> `div` -> `form`.
@ -128,7 +128,7 @@ The standard [DOM Events](http://www.w3.org/TR/DOM-Level-3-Events/) describes 3
Here's the picture of a click on `<td>` inside a table, taken from the specification:
![](eventflow.png)
![](eventflow.svg)
That is: for a click on `<td>` the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.

BIN
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

28
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="353px" height="216px" viewBox="0 0 353 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>event-order-bubbling.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="event-order-bubbling.svg">
<polygon id="Rectangle-210" fill="#FFDE99" points="159.48764 140 174 186 60 186 74.51236 140"></polygon>
<path d="M173.633566,81 L59.3664344,81 L43.2766439,132 L189.723356,132 L173.633566,81 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18"></path>
<path d="M193.013506,29 L39.9864943,29 L17.2759239,101 L215.724076,101 L193.013506,29 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18"></path>
<path d="M121.499875,123 L112.500875,123 L112.500875,110 L121.499875,110 L121.499875,123 Z M121.499875,141 L121.499875,154.816139 C121.499875,157.302139 119.484875,159.316139 117.000875,159.316139 C114.514875,159.316139 112.500875,157.302139 112.500875,154.816139 L112.500875,141 L121.499875,141 Z M121.499875,92 L112.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 Z" id="Fill-46" fill="#5A4739"></path>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="210" y="105">1</tspan>
</text>
<text id="2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#5A4739">
<tspan x="185" y="136">2</tspan>
</text>
<text id="3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="157" y="181">3</tspan>
</text>
<text id="Most-deeply-nested-e" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="228.480469" y="175">Most deeply </tspan>
<tspan x="216.305664" y="194">nested element</tspan>
</text>
<path d="M179.5,177.5 L209.5,177.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
2-ui/2-events/02-bubbling-and-capturing/eventflow.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 70 KiB

198
2-ui/2-events/02-bubbling-and-capturing/eventflow.svg Normal file
View file

@ -0,0 +1,198 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="641px" height="633px" viewBox="0 0 641 633" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>eventflow.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="eventflow.svg">
<g id="eventflow" transform="translate(22.000000, 28.000000)">
<g id="nodes">
<g id="Window-node" transform="translate(224.684713, 0.000000)">
<g id="Group">
<rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" x="0" y="0" width="134.426752" height="34.5671642"></rect>
<text id="Window" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="39.3678344" y="21.9134328">Window</tspan>
</text>
</g>
</g>
<g id="document-node" transform="translate(234.286624, 60.492537)">
<g id="Group">
<rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" x="0" y="0" width="115.22293" height="34.5671642"></rect>
<text id="Document" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="22.0843949" y="21.9134328">Document</tspan>
</text>
</g>
</g>
<g id="html-node" transform="translate(243.888535, 120.985075)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;html&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;html&gt;</tspan>
</text>
</g>
<g id="body-node" transform="translate(243.888535, 181.477612)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;body&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;body&gt;</tspan>
</text>
</g>
<g id="table-node" transform="translate(243.888535, 241.970149)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;table&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;table&gt;</tspan>
</text>
</g>
<g id="tbody-node" transform="translate(243.888535, 302.462687)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tbody&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="19.2038217" y="21.9134328">&lt;tbody&gt;</tspan>
</text>
</g>
<g id="tr_1-node" transform="translate(80.656051, 380.238806)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="35.5270701" y="21.9134328">&lt;tr&gt;</tspan>
</text>
</g>
<g id="tr_2-node" transform="translate(426.324841, 380.238806)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;tr&gt;</tspan>
</text>
</g>
<g id="tr_1_td_1-node" transform="translate(13.442675, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="31.6863057" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_1_td_1_text-node" transform="translate(0.000000, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Shady-Grove" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<tspan x="19.2038217" y="34.6044776">Shady Grove</tspan>
</text>
</g>
<g id="tr_1_td_2-node" transform="translate(147.869427, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_1_td_2_text-node" transform="translate(134.426752, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Aeolian" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<tspan x="36.9673567" y="34.6044776">Aeolian</tspan>
</text>
</g>
<g id="tr_2_td_1-node" transform="translate(359.111465, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#0000FF" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#FFFFFF" font-family="PTMono-Regular, PT Mono" font-size="15.5552239" font-weight="normal">
<tspan x="27.8455414" y="22.3701493">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_2_td_1_text-node" transform="translate(345.668790, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<g id="Group" transform="translate(12.482484, 14.555224)" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<text id="Over-the-River,">
<tspan x="0.480095541" y="14">Over the River,</tspan>
</text>
<text id="Charlie">
<tspan x="25.9251592" y="31.2835821">Charlie</tspan>
</text>
</g>
</g>
<g id="tr_2_td_2-node" transform="translate(493.538217, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" font-family="OpenSans-Regular, Open Sans" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_2_td_2_text-node" transform="translate(480.095541, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Dorian" fill="#FFFFFF" font-family="OpenSans-Regular, Open Sans" font-size="12.9626866" font-weight="normal">
<tspan x="39.8479299" y="34.6044776">Dorian</tspan>
</text>
</g>
</g>
<g id="edges" transform="translate(61.452229, 34.567164)" stroke="#000000" stroke-width="2">
<path d="M230.44586,0 L230.44586,19.8761194" id="window-document" fill="#000000"></path>
<path d="M230.44586,60.4925373 L230.44586,80.3686567" id="document-html" fill="#000000"></path>
<path d="M230.44586,120.985075 L230.44586,140.861194" id="html-body" fill="#000000"></path>
<path d="M230.44586,181.477612 L230.44586,201.353731" id="body-table" fill="#000000"></path>
<path d="M230.44586,241.970149 L230.44586,261.846269" id="table-tbody" fill="#000000"></path>
<path d="M230.44586,302.462687 C230.44586,313.985075 214.442675,319.746269 182.436306,319.746269 L86.4171975,319.746269 C73.6146497,319.746269 67.2133758,326.371642 67.2133758,339.622388" id="tbody-tr_1"></path>
<path d="M230.44586,302.462687 C230.44586,313.985075 252.850318,319.746269 297.659236,319.746269 L393.678344,319.746269 C406.480892,319.746269 412.882166,326.371642 412.882166,339.622388" id="tbody-tr_2"></path>
<path d="M67.2133758,380.238806 C67.2133758,391.761194 60.8121019,397.522388 48.0095541,397.522388 L19.2038217,397.522388 C6.40127389,397.522388 0,404.147761 0,417.398507" id="tr_1-tr_2_td_1"></path>
<path d="M67.2133758,380.238806 C67.2133758,391.761194 73.6146497,397.522388 86.4171975,397.522388 L115.22293,397.522388 C128.025478,397.522388 134.426752,404.147761 134.426752,417.398507" id="tr_1-tr_2_td_2"></path>
<path d="M412.882166,380.238806 C412.882166,391.761194 406.480892,397.522388 393.678344,397.522388 L364.872611,397.522388 C352.070064,397.522388 345.66879,404.147761 345.66879,417.398507" id="tr_2-tr_2_td_1"></path>
<path d="M412.882166,380.238806 C412.882166,391.761194 425.684713,397.522388 451.289809,397.522388 L460.89172,397.522388 C473.694268,397.522388 480.095541,404.147761 480.095541,417.398507" id="tr_2-tr_2_td_2"></path>
<path d="M0,458.014925 L0,477.891045" id="tr_1_td_1-text" fill="#000000"></path>
<path d="M134.426752,458.014925 L134.426752,477.891045" id="tr_1_td_2-text" fill="#000000"></path>
<path d="M345.66879,458.014925 L345.66879,477.891045" id="tr_2_td_1-text" fill="#000000"></path>
<path d="M482.015924,458.014925 L482.015924,477.891045" id="tr_2_td_2-text" fill="#000000"></path>
</g>
<g id="event-flow" transform="translate(103.700637, 14.691045)">
<g id="target_phase" transform="translate(186.277070, 443.323881)">
<text id="Target" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0.960191083" y="34.1477612">Target</tspan>
</text>
<text id="Phase" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0.480095541" y="51.4313433">Phase</tspan>
</text>
<text id="(2)" fill="#0000FF" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="15.8431529" y="68.7149254">(2)</tspan>
</text>
<rect id="Rectangle-path" stroke="#000000" stroke-width="5" x="69.133758" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
</g>
<g id="capture_phase">
<text id="Capture" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="0" y="166.367164">Capture</tspan>
</text>
<text id="Phase" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="7.20143312" y="183.650746">Phase</tspan>
</text>
<text id="(1)" fill="#FF0000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="22.5644904" y="200.934328">(1)</tspan>
</text>
<path d="M116.183121,0.864179104 C77.7754777,-1.72835821 77.7754777,41.480597 119.063694,50.1223881" id="capture_phase_arrow" stroke="#FF0000" stroke-width="3"></path>
<g id="capture_phase_arrow-link" transform="translate(92.178344, 60.492537)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 120.985075)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 181.477612)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 241.970149)" stroke="#FF0000" stroke-width="3">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<path d="M125.785032,303.326866 C87.3773885,300.734328 87.3773885,385.423881 301.5,372.461194" id="capture_phase_arrow2" stroke="#FF0000" stroke-width="3"></path>
<path d="M301.5,385.423881 C207.401274,382.831343 207.401274,437.274627 239.08758,450.237313" id="capture_phase_arrow3" stroke="#FF0000" stroke-width="3"></path>
</g>
<g id="bubble_phase" transform="translate(250.609873, 12.962687)">
<text id="Bubbling" fill="#008000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="72.9745223" y="239.822388">Bubbling</tspan>
</text>
<text id="Phase" fill="#008000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="83.0565287" y="257.10597">Phase</tspan>
</text>
<text id="(3)" fill="#008000" font-family="OpenSans-Regular, Open Sans" font-size="17.2835821" font-weight="normal">
<tspan x="98.419586" y="274.389552">(3)</tspan>
</text>
<path d="M112.342357,437.274627 C244.848726,381.102985 244.848726,369.868657 179.555732,372.461194" id="bubble_phase_arrow3" stroke="#008000" stroke-width="3"></path>
<path d="M182.436306,358.634328 C220.843949,349.992537 220.843949,307.647761 1.92038217,299.00597" id="bubble_phase_arrow2" stroke="#008000" stroke-width="3"></path>
<path d="M0,287.771642 C38.4076433,285.179104 38.4076433,250.61194 0,241.970149" id="bubble_phase_arrow" stroke="#008000" stroke-width="3"></path>
<g id="bubble_phase_arrow-link" transform="translate(0.000000, 181.477612)" stroke="#008000" stroke-width="3">
<path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
</g>
<g id="bubble_phase_arrow-link" transform="translate(0.000000, 120.985075)" stroke="#008000" stroke-width="3">
<path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
</g>
<path d="M0,106.29403 C48.0095541,103.701493 48.0095541,69.1343284 9.60191083,60.4925373" id="bubble_phase_arrow4" stroke="#008000" stroke-width="3"></path>
<path d="M9.60191083,45.8014925 C57.611465,43.2089552 57.611465,8.64179104 19.2038217,0" id="bubble_phase_arrow" stroke="#008000" stroke-width="3"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
2-ui/2-events/02-bubbling-and-capturing/eventflow@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 160 KiB

2
2-ui/2-events/03-event-delegation/article.md
View file

@ -81,7 +81,7 @@ In our case if we take a look inside the HTML, we can see nested tags inside `<t
Naturally, if a click happens on that `<strong>` then it becomes the value of `event.target`.
![](bagua-bubble.png)
![](bagua-bubble.svg)
In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `<td>` or not.

BIN
2-ui/2-events/03-event-delegation/bagua-bubble.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

27
2-ui/2-events/03-event-delegation/bagua-bubble.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="369px" height="216px" viewBox="0 0 369 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>bagua-bubble.svg</title>
<desc>Created with sketchtool.</desc>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bagua-bubble.svg">
<polygon id="Rectangle-210" fill="#FFDE99" points="202.48764 140 217 186 103 186 117.51236 140"></polygon>
<path d="M216.633566,81 L102.366434,81 L86.2766439,132 L232.723356,132 L216.633566,81 Z" id="Rectangle-209" stroke="#CFCE95" stroke-width="18"></path>
<path d="M236.013506,29 L82.9864943,29 L60.2759239,101 L258.724076,101 L236.013506,29 Z" id="Rectangle-208" stroke="#99C0C3" stroke-width="18"></path>
<path d="M164.499875,123 L155.500875,123 L155.500875,110 L164.499875,110 L164.499875,123 Z M164.499875,141 L164.499875,154.816139 C164.499875,157.302139 162.484875,159.316139 160.000875,159.316139 C157.514875,159.316139 155.500875,157.302139 155.500875,154.816139 L155.500875,141 L164.499875,141 Z M164.499875,92 L155.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 Z" id="Fill-46" fill="#5A4739"></path>
<text id="&lt;table&gt;" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#99C0C3">
<tspan x="9" y="30">&lt;table&gt;</tspan>
</text>
<text id="&lt;td&gt;" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#CFCE95">
<tspan x="36" y="136">&lt;td&gt;</tspan>
</text>
<text id="&lt;strong&gt;" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#E8C48E">
<tspan x="35" y="181">&lt;strong&gt;</tspan>
</text>
<text id="event.target" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="271.745605" y="181">event.target</tspan>
</text>
<path d="M229.5,177.5 L259.5,177.5" id="Line-30" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
2-ui/2-events/03-event-delegation/bagua-bubble@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB