renovations

Author: iliakan

2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html

@@ -18,7 +18,7 @@
 
 
 <div id="field">
-<img src="//js.cx/clipart/ball.gif" id="ball">
+<img src="//js.cx/clipart/ball.svg" id="ball">
 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
 </div>
 

2-ui/1-document/15-metrics/4-put-ball-in-center/solution.md

@@ -33,7 +33,7 @@ ball.style.top = Math.round(field.clientHeight/2 - ball.offsetHeight/2)+'px';
 Код выше стабильно работать не будет, потому что `IMG` идет без ширины/высоты:
 
 ```html
-<img src="ball.gif" id="ball">
+<img src="ball.svg" id="ball">
 ```
 
 **Высота и ширина изображения неизвестны браузеру до тех пор, пока оно не загрузится, если размер не указан явно.** 
@@ -43,7 +43,7 @@ ball.style.top = Math.round(field.clientHeight/2 - ball.offsetHeight/2)+'px';
 Чтобы это исправить, добавим `width/height` к картинке:
 
 ```html
-<img src="ball.gif" *!*width="40" height="40"*/!* id="ball">
+<img src="ball.svg" *!*width="40" height="40"*/!* id="ball">
 ```
 
 Теперь браузер всегда знает ширину и высоту, так что все работает. Тот же эффект дало бы указание размеров в CSS.

2-ui/1-document/15-metrics/4-put-ball-in-center/solution.view/index.html

@@ -18,7 +18,7 @@
 
 
 <div id="field">
-<img src="//js.cx/clipart/ball.gif" width="40" height="40" id="ball">
+<img src="//js.cx/clipart/ball.svg" width="40" height="40" id="ball">
 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
 </div>
 

2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html

@@ -18,7 +18,7 @@
 
 
 <div id="field">
-<img src="//js.cx/clipart/ball.gif" id="ball">
+<img src="//js.cx/clipart/ball.svg" id="ball">
 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
 </div>
 

2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html

@@ -35,7 +35,7 @@
 
 
   <div id="field">
-    <img src="//js.cx/clipart/ball.gif" id="ball">
+    <img src="//js.cx/clipart/ball.svg" id="ball">
     . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
   </div>
 

2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html

@@ -28,7 +28,7 @@
 
 
 <div id="field">
-<img src="//js.cx/clipart/ball.gif" id="ball">
+<img src="//js.cx/clipart/ball.svg" id="ball">
 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
 </div>
 

2-ui/3-event-details/5-fixevent/article.md renamed to 2-ui/3-event-details/12-fixevent/article.md

@@ -4,16 +4,15 @@
 
 В браузере нет способа "просто получить" текущие координаты. Это может сделать обработчик события, в данном случае `mousemove`. Поэтому нужно будет поставить обработчик на `mousemove` и при каждом движении запоминать текущие координаты, чтобы `setInterval` мог раз в 100мс сравнивать их.
 
-Можно обойтись и без `setInterval` -- сравнивать координаты при каждом срабатывании `mousemove`. Если передвинулись на маленькое расстояние с последнего `mousemove` -- это "наведение на элемент", а на большое -- игнорируем. Вариант с `setInterval` теоретически надёжнее, но на практике и один `mousemove` работает.
+Можно обойтись и без `setInterval` -- сравнивать координаты при каждом срабатывании `mousemove`. Если передвинулись на маленькое расстояние с последнего `mousemove` -- это "наведение на элемент", а на большое -- игнорируем. Вариант с `setInterval` лучше с точки зрения производительности -- `mousemove` происходит уж очень часто, но если проверка несложная, то и `mousemove` подойдёт.
 
-Чтобы наш код не срабатывал чересчур часто, мы будем начинать анализ координат при заходе на элемент, а заканчивать -- при выходе с него. 
-
-Если выход осуществлён, и при этом на элементе зафиксировано "состояние наведения", то нужно вызвать соответствующий обработчик `options.out`.
+Имеет смысл начинать анализ координат и отслеживание `mousemove` при заходе на элемент, а заканчивать -- при выходе с него.
 
 Чтобы точно отловить момент входа и выхода, без учёта подэлементов (во избежание мигания), можно использовать `mouseenter/mouseleave`. 
 
 В решении, предложенном ниже, однако, используется `mouseover/mouseout`, так как это позволит легко "прикрутить" к такому объекту делегирование, если потребуется. А, чтобы не было лишних срабатываний, лишние переходы отфильтровываются.
 
+При этом при обнаружении "наведения на элемент" это запоминается в переменной `isHover` и вызывается `options.over`, а затем, при выходе с элемента, если было "наведение", вызывается `options.out`.
 
 
 

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md

@@ -42,7 +42,7 @@ new HoverIntent({
 });
 ```
 
-Демо:
+Демо этого кода:
 
 [iframe src="solution" height=110]
 

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md

@@ -20,16 +20,14 @@
 
 Для `mouseout` всё наоборот:
 
+
 <ul>
 <li>`event.target` -- элемент, с которого ушла мышь, то есть на котором возникло событие.</li>
 <li>`event.relatedTarget` -- элемент, на который перешла мышь.</li>
 </ul>
 
-[online]
-В примере ниже вы можете наглядно посмотреть события `mouseover/out`, возникающие на всех элементах. 
-
+В примере ниже, если у вас есть мышь, вы можете наглядно посмотреть события `mouseover/out`, возникающие на всех элементах. 
 [codetabs src="mouseoverout" height=220]
-[/online]
 
 [warn header="`relatedTarget` может быть `null`"]
 Свойство `relatedTarget` может быть равно `null`. 

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md

@@ -0,0 +1,6 @@
+
+Как можно видеть из HTML/CSS, слайдер -- это `DIV`, подкрашенный фоном/градиентом, внутри которого находится другой `DIV`, оформленный как бегунок, с `position:relative`.
+
+Бегунок немного поднят, и вылезает по высоте из родителя.
+
+На этой основе мы реализуем горизонтальный Drag'n'Drop, ограниченный по ширине. Его особенность -- в `position:relative` у переносимого элемента, т.е. координата ставится не абсолютная, а относительно родителя.

2-ui/3-event-details/4-drag-and-drop/1-slider/solution.md

@@ -2,29 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <script src="lib.js"></script>
-  <style>
-    .slider {
-      border-radius: 5px;
-      background: #E0E0E0;
-      background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
-      background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
-      background: linear-gradient(left top, #E0E0E0, #EEEEEE);
-      width: 310px;
-      height: 15px;
-      margin: 5px;
-    }
-    .thumb {
-      width: 10px;
-      height: 25px;
-      border-radius: 3px;
-      position: relative;
-      left: 10px;
-      top: -5px;
-      background: blue;
-      cursor: pointer;
-    }
-  </style>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
@@ -37,18 +15,14 @@
 var sliderElem = document.getElementById('slider');
 var thumbElem = sliderElem.children[0];
 
-thumbElem.ondragstart = function() { return false; };
 thumbElem.onmousedown = function(e) {
-  e = fixEvent(e);
   var thumbCoords = getCoords(thumbElem);
   var shiftX = e.pageX - thumbCoords.left;
   // shiftY здесь не нужен, слайдер двигается только по горизонтали
 
   var sliderCoords = getCoords(sliderElem);
 
   document.onmousemove = function(e) {
-    e = fixEvent(e);
-
     //  вычесть координату родителя, т.к. position: relative
     var newLeft = e.pageX - shiftX - sliderCoords.left;
 
@@ -71,9 +45,21 @@
   return false; // disable selection start (cursor change)
 };
 
+thumbElem.ondragstart = function() { 
+  return false; 
+};
+
+function getCoords(elem) {  // кроме IE8-
+  var box = elem.getBoundingClientRect();
+
+  return {
+    top: box.top + pageYOffset,
+    left: box.left + pageXOffset
+  };
+
+}
 
 </script>
 
 </body>
-</html>
-
+</html>

2-ui/3-event-details/6-drag-and-drop/1-slider/solution.view/index.html renamed to 2-ui/3-event-details/4-drag-and-drop/1-slider/solution.view/index.html

@@ -0,0 +1,22 @@
+
+.slider {
+  border-radius: 5px;
+  background: #E0E0E0;
+  background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
+  background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
+  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+  width: 310px;
+  height: 15px;
+  margin: 5px;
+}
+
+.thumb {
+  width: 10px;
+  height: 25px;
+  border-radius: 3px;
+  position: relative;
+  left: 10px;
+  top: -5px;
+  background: blue;
+  cursor: pointer;
+}

2-ui/3-event-details/4-drag-and-drop/1-slider/solution.view/style.css

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div id="slider" class="slider">
+  <div class="thumb"></div>
+</div>
+
+<script>
+  // ...Ваш код..
+</script>
+
+</body>
+</html>

2-ui/3-event-details/4-drag-and-drop/1-slider/source.view/index.html

@@ -0,0 +1,22 @@
+
+.slider {
+  border-radius: 5px;
+  background: #E0E0E0;
+  background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
+  background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
+  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+  width: 310px;
+  height: 15px;
+  margin: 5px;
+}
+
+.thumb {
+  width: 10px;
+  height: 25px;
+  border-radius: 3px;
+  position: relative;
+  left: 10px;
+  top: -5px;
+  background: blue;
+  cursor: pointer;
+}

2-ui/3-event-details/4-drag-and-drop/1-slider/source.view/style.css

@@ -7,13 +7,8 @@
 
 Захватите мышкой синий бегунок и двигайте его, чтобы увидеть в работе.
 
-Позже к этому слайдеру можно будет добавить дополнительные функции по чтению/установке значения.
-
- ([getCoords](#getCoords) -- в lib.js).
-
 Важно:
 <ul>
 <li>Слайдер должен нормально работать при резком движении мыши влево или вправо, за пределы полосы. При этом бегунок должен останавливаться четко в нужном конце полосы.</li>
-<li>Курсор при передвижении слайдера должен быть рукой(`hand`) или крестиком(`move`).</li> 
-<li>При нажатом бегунке мышь может выходить за пределы полосы слайдера, но слайдер пусть все равно работает (удобство для пользователя).</li>
+<li>При нажатом бегунке мышь может выходить за пределы полосы слайдера, но слайдер пусть все равно работает (это удобно для пользователя).</li>
 </ul>

2-ui/3-event-details/6-drag-and-drop/1-slider/task.md renamed to 2-ui/3-event-details/4-drag-and-drop/1-slider/task.md

@@ -0,0 +1,5 @@
+В решении этой задачи для переноса мы используем координаты относительно окна и `position:fixed`. Так проще.
+
+А по окончании -- прибавляем прокрутку и делаем `position:absolute`, чтобы элемент был привязан к определённому месту в документе, а не в окне. Можно было и сразу `position:absolute` и оперировать в абсолютных координатах, но код был бы немного длиннее.
+
+Детали решения расписаны в комментариях в исходном коде.

2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.md

@@ -8,9 +8,9 @@
 
   <h2>Расставьте супергероев по полю.</h2>
 
-  <p>Супергерои -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
+  <p>Супергерои и мяч -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
 
-  <p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Конечно, можно прокрутить и клавиатурой, но так -- удобнее. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
+  <p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
 
   <p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>
 
@@ -23,15 +23,12 @@ <h2>Расставьте супергероев по полю.</h2>
   <div class="hero draggable" id="hero3"></div>
   <div class="hero draggable" id="hero4"></div>
   <div class="hero draggable" id="hero5"></div>
-  <div id="winnie" class="draggable"></div>
+  <div class="hero draggable" id="hero6"></div>
 
   <img src="//js.cx/drag-heroes/ball.png" class="draggable">
 
   <div style="clear:both"></div>
 
-  <script src="//js.cx/libs/getCoords.js"></script>
-  <script src="//js.cx/libs/documentScroll.js"></script>
-  
   <script src="soccer.js"></script>
 </body>
 </html>

2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/index.html renamed to 2-ui/3-event-details/4-drag-and-drop/2-drag-heroes/solution.view/index.html

@@ -10,9 +10,10 @@ html, body {
   float: left;
 }
 
+/* герои и мяч (переносимые элементы) */
 .hero {
   background: url(//js.cx/drag-heroes/heroes.png);
-  width: 105px;
+  width: 130px;
   height: 128px;
   float: left;
 }
@@ -26,33 +27,21 @@ html, body {
 }
 
 #hero3 {
-  background-position: -131px 0;
+  background-position: -120px 0;
 }
 
 #hero4 {
-  background-position: -131px -128px;
+  background-position: -125px -128px;
 }
 
 #hero5 {
-  background-position: -236px 0;
-  width: 130px;
+  background-position: -248px -128px;
 }
 
-#winnie {
-  background: url(//js.cx/drag-heroes/winnie.png);
-  width: 115px;
-  height: 128px;
-  float: left;
+#hero6 {
+  background-position: -244px 0;
 }
 
 .draggable {
   cursor: pointer;
 }
-
-.dragging {
-  z-index: 1000;
-  position: absolute;
-  cursor: move;
-}
-
-