DIV
diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
index 7fa11b9b..8d955f1a 100644
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@@ -12,7 +12,7 @@
В примере ниже вы можете наглядно посмотреть события `mouseover/out`, возникающие на всех элементах.
-[example src="mouseoverout" height=220]
+[codetabs src="mouseoverout" height=220]
Можно заметить, что в некоторых случаях значение `relatedTarget` может быть `null`. Это вполне нормально и означает, что мышь пришла из-за пределов окна (или ушла за окно).
@@ -38,7 +38,7 @@
А еще попробуйте зайти курсором мыши на красный `div` и потом быстро вывести мышь из него куда-нибудь сквозь зеленый. Если движение мыши достаточно быстрое, то родительский элемент будет проигнорирован.
-[example height=360 src="mouseoverout-fast"]
+[codetabs height=360 src="mouseoverout-fast"]
Важно иметь в виду эту особенность событий, чтобы не написать код, который рассчитан на последовательный проход над элементами.
@@ -58,7 +58,7 @@
Зайдите на синий элемент, а потом переведите мышь на красный -- и наблюдайте за событиями:
-[example height=360 src="mouseoverout-child"]
+[codetabs height=360 src="mouseoverout-child"]
- При заходе на синий -- на нём сработает `mouseover [target: blue]`.
@@ -91,7 +91,7 @@
Вы можете увидеть, как они работают проведя курсором над голубым `DIV'ом` ниже. Обработчик стоит только на внешнем, синем элементе. Обратите внимание -- лишних событий при переходе на красного потомка нет!
-[example height=340 src="mouseleave"]
+[codetabs height=340 src="mouseleave"]
## Делегирование -- проблема mouseenter/leave
@@ -103,7 +103,7 @@
Это легко видеть в примере ниже: обработчики `mouseenter/leave` стоят на `` и сработают при входе-выходе из таблицы, получить из них какую-то информацию о переходах по её ячейкам не представляется возможным:
-[example height=480 src="mouseleave-table"]
+[codetabs height=480 src="mouseleave-table"]
Не беда -- воспользуемся `mouseover/mouseout`.
@@ -113,7 +113,7 @@
Получится так:
-[example height=450 src="mouseenter-mouseleave-delegation"]
+[codetabs height=450 src="mouseenter-mouseleave-delegation"]
В этом примере код обработчиков выглядит так:
@@ -139,7 +139,7 @@ table.onmouseout = function(event) {
Детали кода вы можете посмотреть в примере ниже, который демонстрирует этот подход:
-[example height=450 src="mouseenter-mouseleave-delegation-2"]
+[codetabs height=450 src="mouseenter-mouseleave-delegation-2"]
Попробуйте по-разному, быстро или медленно заходить и выходить в ячейки таблицы. Обработчики `mouseover/mouseout` стоят на `table`, но при помощи делегирования корректно обрабатывают вход-выход.
diff --git a/2-ui/3-event-details/8-keyboard-events/article.md b/2-ui/3-event-details/8-keyboard-events/article.md
index 03b290bd..35e65d36 100644
--- a/2-ui/3-event-details/8-keyboard-events/article.md
+++ b/2-ui/3-event-details/8-keyboard-events/article.md
@@ -10,7 +10,7 @@
Попробуйте различные варианты нажатия клавиш в текстовом поле.
-[example src="keyboard-dump"]
+[codetabs src="keyboard-dump"]
По мере чтения статьи, если возникнут вопросы -- возвращайтесь к этому стенду.
diff --git a/2-ui/5-widgets/2-widgets-structure/article.md b/2-ui/5-widgets/2-widgets-structure/article.md
index 516b3923..21b8d904 100644
--- a/2-ui/5-widgets/2-widgets-structure/article.md
+++ b/2-ui/5-widgets/2-widgets-structure/article.md
@@ -58,7 +58,7 @@ var menu = new Menu({
```
Меню:
-[example src="menu-1"]
+[codetabs src="menu-1"]
Это, конечно, только первый шаг, но уже здесь видны некоторые важные соглашения в коде.
@@ -268,7 +268,7 @@ function Menu(options) {
Основные изменения -- теперь метод `toggle` не просто меняет класс. Этого недостаточно, ведь, чтобы открыть меню, нужно для начала отрендерить его опции. Поэтому добавлено два метода `open` и `close`, которые также полезны и для внешнего интерфейса.
В действии:
-[example src="menu-3-elem" height="200"]
+[codetabs src="menu-3-elem" height="200"]
## Итого
diff --git a/2-ui/5-widgets/5-custom-events/article.md b/2-ui/5-widgets/5-custom-events/article.md
index 01889231..87b3a24f 100644
--- a/2-ui/5-widgets/5-custom-events/article.md
+++ b/2-ui/5-widgets/5-custom-events/article.md
@@ -52,7 +52,7 @@ function showSelected(href) {
Демо:
-[example src="menu-callback" height="180"]
+[codetabs src="menu-callback" height="180"]
## Свои события
@@ -236,7 +236,7 @@ menu.on('select', function(value) {
```
Результат:
-[example src="menu-event"]
+[codetabs src="menu-event"]
## События при помощи jQuery
diff --git a/figures.sketch b/figures.sketch
index 67e33a12..983da3cf 100644
Binary files a/figures.sketch and b/figures.sketch differ
+
Вы можете открыть [edit src="metric"]этот документ в песочнице[/edit].
@@ -64,7 +64,7 @@
Вот общая картина:
-
+
На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.
@@ -99,7 +99,7 @@
```
-
+
## offsetWidth/Height
@@ -107,7 +107,7 @@
Эти два свойства -- самые простые. Они содержат "внешнюю" ширину/высоту элемента, то есть его полный размер, включая рамки `border`.
-
+
Для нашего элемента:
+
...Но на самом деле они -- вовсе не рамки, а отступ внутренней части элемента от внешней.
@@ -162,7 +162,7 @@ function isHidden(elem)
Получится так:
-
+
## clientWidth/Height
@@ -171,7 +171,7 @@ function isHidden(elem)
Они включают в себя ширину содержимого `width` вместе с полями `padding`, но без прокрутки.
-
+
На рисунке выше посмотрим вначале на `clientHeight`, её посчитать проще всего. Прокрутки нет, так что это в точности то, что внутри рамок: CSS-ширина `200px` плюс верхнее и нижнее поля `padding` (по `20px`), итого `240px`.
@@ -183,7 +183,7 @@ function isHidden(elem)
**Если `padding` нет, то `clientWidth/Height` в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.**
-
+
Поэтому в тех случаях, когда мы точно знаем, что `padding` нет, их используют для определения внутренних размеров элемента.
@@ -193,7 +193,7 @@ function isHidden(elem)
Свойства `clientWidth/clientHeight` относятся только к видимой области элемента, а `scrollWidth/scrollHeight` добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.
-
+
На рисунке выше:
+
[smart header="`scrollLeft/scrollTop` можно изменять"]
В отличие от большинства свойств, которые доступны только для чтения, значения `scrollLeft/scrollTop` можно изменить, и браузер выполнит прокрутку элемента.
diff --git a/2-ui/1-document/15-metrics/metric-all.png b/2-ui/1-document/15-metrics/metric-all.png
deleted file mode 100644
index b2da52e9..00000000
Binary files a/2-ui/1-document/15-metrics/metric-all.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-all.svg b/2-ui/1-document/15-metrics/metric-all.svg
new file mode 100644
index 00000000..3415cf73
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-all.svg
@@ -0,0 +1,154 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-all@2x.png b/2-ui/1-document/15-metrics/metric-all@2x.png
deleted file mode 100644
index 00bfb703..00000000
Binary files a/2-ui/1-document/15-metrics/metric-all@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top-rtl.png b/2-ui/1-document/15-metrics/metric-client-left-top-rtl.png
deleted file mode 100644
index 01b83207..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-left-top-rtl.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg b/2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg
new file mode 100644
index 00000000..1f1306d3
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg
@@ -0,0 +1,93 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top-rtl@2x.png b/2-ui/1-document/15-metrics/metric-client-left-top-rtl@2x.png
deleted file mode 100644
index e3238e78..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-left-top-rtl@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top.png b/2-ui/1-document/15-metrics/metric-client-left-top.png
deleted file mode 100644
index 4d384490..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-left-top.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top.svg b/2-ui/1-document/15-metrics/metric-client-left-top.svg
new file mode 100644
index 00000000..9fb3aeea
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-client-left-top.svg
@@ -0,0 +1,60 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-client-left-top@2x.png b/2-ui/1-document/15-metrics/metric-client-left-top@2x.png
deleted file mode 100644
index b78fc0b0..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-left-top@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-width-height.png b/2-ui/1-document/15-metrics/metric-client-width-height.png
deleted file mode 100644
index 3294dfa9..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-width-height.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-width-height.svg b/2-ui/1-document/15-metrics/metric-client-width-height.svg
new file mode 100644
index 00000000..bb74d35c
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-client-width-height.svg
@@ -0,0 +1,116 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-client-width-height@2x.png b/2-ui/1-document/15-metrics/metric-client-width-height@2x.png
deleted file mode 100644
index 82dfe3a1..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-width-height@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-width-nopadding.png b/2-ui/1-document/15-metrics/metric-client-width-nopadding.png
deleted file mode 100644
index 55aa066a..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-width-nopadding.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-client-width-nopadding.svg b/2-ui/1-document/15-metrics/metric-client-width-nopadding.svg
new file mode 100644
index 00000000..cda864d3
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-client-width-nopadding.svg
@@ -0,0 +1,77 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-client-width-nopadding@2x.png b/2-ui/1-document/15-metrics/metric-client-width-nopadding@2x.png
deleted file mode 100644
index 076d05e5..00000000
Binary files a/2-ui/1-document/15-metrics/metric-client-width-nopadding@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-css.png b/2-ui/1-document/15-metrics/metric-css.png
deleted file mode 100644
index b82f0182..00000000
Binary files a/2-ui/1-document/15-metrics/metric-css.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-css.svg b/2-ui/1-document/15-metrics/metric-css.svg
new file mode 100644
index 00000000..7354d3b8
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-css.svg
@@ -0,0 +1,109 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-css@2x.png b/2-ui/1-document/15-metrics/metric-css@2x.png
deleted file mode 100644
index 2bde2d0c..00000000
Binary files a/2-ui/1-document/15-metrics/metric-css@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-offset-parent.png b/2-ui/1-document/15-metrics/metric-offset-parent.png
deleted file mode 100644
index 0dee96ce..00000000
Binary files a/2-ui/1-document/15-metrics/metric-offset-parent.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-offset-parent.svg b/2-ui/1-document/15-metrics/metric-offset-parent.svg
new file mode 100644
index 00000000..a33f575c
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-offset-parent.svg
@@ -0,0 +1,87 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-offset-parent@2x.png b/2-ui/1-document/15-metrics/metric-offset-parent@2x.png
deleted file mode 100644
index 76a5b1ec..00000000
Binary files a/2-ui/1-document/15-metrics/metric-offset-parent@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-offset-width-height.png b/2-ui/1-document/15-metrics/metric-offset-width-height.png
deleted file mode 100644
index 05bad327..00000000
Binary files a/2-ui/1-document/15-metrics/metric-offset-width-height.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-offset-width-height.svg b/2-ui/1-document/15-metrics/metric-offset-width-height.svg
new file mode 100644
index 00000000..d418a62c
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-offset-width-height.svg
@@ -0,0 +1,116 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-offset-width-height@2x.png b/2-ui/1-document/15-metrics/metric-offset-width-height@2x.png
deleted file mode 100644
index 2ed83ba2..00000000
Binary files a/2-ui/1-document/15-metrics/metric-offset-width-height@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-scroll-top.png b/2-ui/1-document/15-metrics/metric-scroll-top.png
deleted file mode 100644
index 240af3ce..00000000
Binary files a/2-ui/1-document/15-metrics/metric-scroll-top.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-scroll-top.svg b/2-ui/1-document/15-metrics/metric-scroll-top.svg
new file mode 100644
index 00000000..47d7297b
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-scroll-top.svg
@@ -0,0 +1,92 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-scroll-top@2x.png b/2-ui/1-document/15-metrics/metric-scroll-top@2x.png
deleted file mode 100644
index eb139203..00000000
Binary files a/2-ui/1-document/15-metrics/metric-scroll-top@2x.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-scroll-width-height.png b/2-ui/1-document/15-metrics/metric-scroll-width-height.png
deleted file mode 100644
index 75fdda43..00000000
Binary files a/2-ui/1-document/15-metrics/metric-scroll-width-height.png and /dev/null differ
diff --git a/2-ui/1-document/15-metrics/metric-scroll-width-height.svg b/2-ui/1-document/15-metrics/metric-scroll-width-height.svg
new file mode 100644
index 00000000..a169fee9
--- /dev/null
+++ b/2-ui/1-document/15-metrics/metric-scroll-width-height.svg
@@ -0,0 +1,93 @@
+
+
\ No newline at end of file
diff --git a/2-ui/1-document/15-metrics/metric-scroll-width-height@2x.png b/2-ui/1-document/15-metrics/metric-scroll-width-height@2x.png
deleted file mode 100644
index b7a55a32..00000000
Binary files a/2-ui/1-document/15-metrics/metric-scroll-width-height@2x.png and /dev/null differ
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/article.md b/2-ui/2-events-and-interfaces/4-event-bubbling/article.md
index fd18eaaa..45da4ab2 100644
--- a/2-ui/2-events-and-interfaces/4-event-bubbling/article.md
+++ b/2-ui/2-events-and-interfaces/4-event-bubbling/article.md
@@ -70,14 +70,14 @@