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

rename files svg to png

Browse source
This commit is contained in:
Ilya Kantor 2015-04-18 01:18:51 +03:00
parent 0277990cf1
commit 0ed8583dc2
303 changed files with 0 additions and 4249 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

32
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1.svg
View file

@ -1,32 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>carousel1.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="carousel1.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="40" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="176" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="244" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="312" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="380" y="97" width="66" height="66" rx="10"></rect>
<text id="…-2" sketch:type="MSTextLayer" 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" sketch:type="MSShapeGroup" x="39" y="96" width="410" height="68"></rect>
<path d="M244,59 L244,196 L36,196 L36,59 L244,59 Z M19,42 L261,42 L261,213 L19,213 L19,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="div-(контейнер)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="82.5" y="32">div (контейнер)</tspan>
</text>
<text id="130x130" sketch:type="MSTextLayer" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="48" y="133">130x130</tspan>
</text>
<text id="ul-(width:-9999px)" sketch:type="MSTextLayer" 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" sketch:type="MSShapeGroup" x="447" y="90" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel1@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

34
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2.svg
View file

@ -1,34 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>carousel2.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="carousel2.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-18" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="40" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-19" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-20" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="176" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-21" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="244" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-22" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="312" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-23" stroke="#8A704D" stroke-width="3" fill="#FFF9EB" sketch:type="MSShapeGroup" x="380" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-26" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="448" y="97" width="66" height="66" rx="10"></rect>
<rect id="Rectangle-25" stroke="#8A704D" stroke-width="3" opacity="0.5" fill="#FFF9EB" sketch:type="MSShapeGroup" x="516" y="97" width="66" height="66" rx="10"></rect>
<text id="…-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="542" y="131">…</tspan>
</text>
<rect id="Rectangle-24" stroke="#EE6B47" stroke-width="2" sketch:type="MSShapeGroup" x="39" y="96" width="544" height="68"></rect>
<path d="M450,59 L450,196 L242,196 L242,59 L450,59 Z M225,42 L467,42 L467,213 L225,213 L225,42 Z" id="Rectangle-1" fill-opacity="0.88" fill="#E8C48F" sketch:type="MSShapeGroup"></path>
<text id="div-(контейнер)" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="288.5" y="32">div (контейнер)</tspan>
</text>
<text id="130x130" sketch:type="MSTextLayer" font-family="Consolas" font-size="13" font-weight="normal" fill="#8A704D">
<tspan x="252" y="133">130x130</tspan>
</text>
<text id="ul-(margin-left:--35" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="254.5" y="82">ul (margin-left: -350px)</tspan>
</text>
<rect id="Rectangle-36" fill="#FFFFFF" sketch:type="MSShapeGroup" x="582" y="83" width="16" height="84"></rect>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/carousel2@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

29
2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling.svg
View file

@ -1,29 +0,0 @@
<?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" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="213.611328" y="181">Самый глубокий </tspan>
<tspan x="243.361328" 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>
Side by side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
2-ui/2-events-and-interfaces/4-event-bubbling/event-order-bubbling@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 KiB

199
2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg
View file

@ -1,199 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>eventflow.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="eventflow.svg" sketch:type="MSArtboardGroup">
<g id="eventflow" sketch:type="MSLayerGroup" 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" sketch:type="MSShapeGroup" x="0" y="0" width="134.426752" height="34.5671642"></rect>
<text id="Window" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" x="0" y="0" width="115.22293" height="34.5671642"></rect>
<text id="Document" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;html&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;body&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;table&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tbody&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Shady-Grove" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="12.9626866" font-weight="normal">
<tspan x="19.2038217" y="34.6044776" fill="#000000">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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Aeolian" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="12.9626866" font-weight="normal">
<tspan x="36.9673567" y="34.6044776" fill="#000000">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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Consolas" font-size="15.5552239" font-weight="normal">
<tspan x="27.8455414" y="22.3701493" fill="#000000">&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" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<g id="Group" transform="translate(12.482484, 15.555224)" font-size="12.9626866" font-family="Helvetica" fill="#FFFFFF" sketch:type="MSTextLayer" font-weight="normal">
<text id="Over-the-River,">
<tspan x="0.480095541" y="13" fill="#000000">Over the River,</tspan>
</text>
<text id="Charlie">
<tspan x="25.9251592" y="30.2835821" fill="#000000">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" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" 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" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Dorian" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="12.9626866" font-weight="normal">
<tspan x="39.8479299" y="34.6044776" fill="#000000">Dorian</tspan>
</text>
</g>
</g>
<g id="edges" transform="translate(61.452229, 34.567164)" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup">
<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" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="0.960191083" y="34.1477612" fill="#000000">Target</tspan>
</text>
<text id="Phase" fill="#0000FF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="0.480095541" y="51.4313433" fill="#000000">Phase</tspan>
</text>
<text id="(2)" fill="#0000FF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="15.8431529" y="68.7149254" fill="#000000">(2)</tspan>
</text>
<rect id="Rectangle-path" stroke="#000000" stroke-width="5" sketch:type="MSShapeGroup" x="69.133758" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
</g>
<g id="capture_phase">
<text id="Capture" fill="#FF0000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="0" y="166.367164" fill="#000000">Capture</tspan>
</text>
<text id="Phase" fill="#FF0000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="7.20143312" y="183.650746" fill="#000000">Phase</tspan>
</text>
<text id="(1)" fill="#FF0000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="22.5644904" y="200.934328" fill="#000000">(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" sketch:type="MSShapeGroup"></path>
<g id="capture_phase_arrow-link" transform="translate(92.178344, 60.492537)" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup">
<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" sketch:type="MSShapeGroup">
<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" sketch:type="MSShapeGroup">
<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" sketch:type="MSShapeGroup">
<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" sketch:type="MSShapeGroup"></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" sketch:type="MSShapeGroup"></path>
</g>
<g id="bubble_phase" transform="translate(250.609873, 12.962687)">
<text id="Bubbling" fill="#008000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="72.9745223" y="239.822388" fill="#000000">Bubbling</tspan>
</text>
<text id="Phase" fill="#008000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="83.0565287" y="257.10597" fill="#000000">Phase</tspan>
</text>
<text id="(3)" fill="#008000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="98.419586" y="274.389552" fill="#000000">(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" sketch:type="MSShapeGroup"></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" sketch:type="MSShapeGroup"></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" sketch:type="MSShapeGroup"></path>
<g id="bubble_phase_arrow-link" transform="translate(0.000000, 181.477612)" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup">
<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" sketch:type="MSShapeGroup">
<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" sketch:type="MSShapeGroup"></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" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
2-ui/2-events-and-interfaces/4-event-bubbling/eventflow@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.5 KiB

24
2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble.svg
View file

@ -1,24 +0,0 @@
<?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="&lt;table&gt;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#99C0C3">
<tspan x="9" y="30">&lt;table&gt;</tspan>
</text>
<text id="&lt;td&gt;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#CFCE95">
<tspan x="36" y="136">&lt;td&gt;</tspan>
</text>
<text id="&lt;strong&gt;" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#E8C48E">
<tspan x="35" y="181">&lt;strong&gt;</tspan>
</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.7 KiB

BIN
2-ui/2-events-and-interfaces/5-event-delegation/bagua-bubble@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB