Практика создания виджетов

Для управления подсказкой нам понадобятся два события:

1. Наведение на элемент mouseover
2. Уход с элемента mouseout

Скелет кода:

function Tooltip(elem, text) {

  var offsetFromElement = 10; // отступ подсказки от элемента 10px
  var tooltipElem; // тут будет DOM-элемент для подсказки

  elem.onmouseout = function() {
    hide(); // спрятать подсказку
  };

  elem.onmouseover = function() {
    show(); // показать подсказку
  };
}

Функция show должна при первом показе сгенерировать элемент с подсказкой, а затем — показать в нужном месте страницы.

Для генерации подсказки добавим вспомогательную функцию getTooltipElem(). Она будет возвращать существующий элемент, если он есть, а если нет — генерировать новый.

function getTooltipElem() {
  if (!tooltipElem) {
    tooltipElem = document.createElement('div');
    tooltipElem.className = 'tooltip';
    tooltipElem.innerHTML = text;
  }
  return tooltipElem;
}

Основная настройка вида подсказки будет в CSS-классе tooltip.

Например:

.tooltip {
  position:absolute;
  left: -9999px; /* за пределами экрана */
  z-index:100; /* подсказка должна перекрывать другие элементы */
  background: #F0FFF0;
  padding: 5px;
  border: 1px dashed green;
  text-align: center;
}

Как правильно отпозиционировать подсказку? Для начала, по горизонтали.

Центр подсказки должен быть ровно над центром элемента, который имеет координату getCoords(elem).left + elem.offsetWidth/2.

Если поставить tooltipElem.left в это значение — результат будет выглядеть так:

Дополнительно нужно сдвинуть подсказку на половину собственной ширины влево:

Теперь отпозиционируем по вертикали.

Это гораздо проще: нужно взять координату getCoords(elem).top и вычесть из неё высоту подсказки и дополнительный отступ:

Для того, чтобы определить высоту подсказки offsetHeight, она должна быть в DOM со свойством display, не равным none.

Поэтому мы позиционируем её за пределами видимой области, поставив left:-9999px.

В качестве альтренативы можно было бы использовать для скрытия visibility:hidden. Это свойство, в отличие от display:none, оставляет элементу размеры, просто делает его невидимым.

Полный код решения демонстрирует эти подходы на tutorial/browser/events/tooltip-fixed/index.html.

Три события имеют отношение к подсказке:

1. При mouseover — показать.
2. При mousemove — показать на новом месте.
3. При mouseout — спрятать.

…Но при заходе на элемент происходят сразу оба события: mouseover и mousemove на нём же. Зачем вызывать код для показа два раза? Можно оставить его только в mousemove.

Стиль элемента подсказки:

.tooltip {
  position:absolute;
  left: -9999px; /* изначально спрятана за пределы экрана */
  z-index:100; /* подсказка должна перекрывать другие элементы */
  ...
}

Скелет кода:

function Tooltip(elem, text) {

  var offsetFromCursor = 10; // отступ от курсора 10px
  var tooltipElem; // тут будет элемент-подсказка

  elem.onmouseout = function() {
    hide();                   // спрятать подсказку
  };

  elem.onmousemove = function(e) {
    e = fixEvent(e);
    show(e.pageX, e.pageY);   // показать рядом с курсором
  };

  function getTooltipElem() { // создать элемент-подсказку
    if (!tooltipElem) {
      tooltipElem = document.createElement('div');
      tooltipElem.className = 'tooltip'; // CSS подсказки
      tooltipElem.innerHTML = text;
    }
    return tooltipElem;
  }

  function hide() {
    document.body.removeChild(getTooltipElem());
  };

  function show(pageX, pageY) {
    показать getTooltipElem() для координат курсора pageX/pageY
  }
}

Для показа на нужном месте — как правило, подойдут простые вычисления. Функция show ниже сдвигает элемент на offsetFromCursor относительно переданных её координат курсора:

function show(pageX, pageY) {
  var tooltipElem = getTooltipElem();

  var newLeft = pageX + offsetFromCursor;
  var newTop = pageY + offsetFromCursor;

  tooltipElem.left = newLeft + 'px';
  tooltipElem.top = newTop + 'px';
}

Основной сложный момент здесь — определить, когда подсказка вылезает за правую/нижнюю границы окна. Для этого нужно эти границы вычислить:

var scrollY = window.pageYOffset || document.documentElement.scrollTop;
var winBottom = scrollY + document.documentElement.clientHeight;

var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var winRight  = scrollX + document.documentElement.clientWidth;

Соответствующие свойства, использованные для вычисления, описаны в статье Размеры и прокрутка элементов.

Проверим, не вылезет ли подсказка за границы, и если это так — перенесём ее:

if (newLeft + tooltipElem.offsetWidth > winRight) {
  // правая граница подсказки вылезает за экран
  newLeft -= tooltipElem.offsetWidth;
  newLeft -= offsetFromCursor+2; // (*)
}

if (newTop + tooltipElem.offsetHeight > winBottom) {
  // нижняя граница подсказки вылезает за экран
  newTop -= tooltipElem.offsetHeight;
  newTop -= offsetFromCursor+2;  // (**)
}

Здесь есть еще две тонкости.

1. Для того, чтобы можно было получить offsetHeight/offsetWidth, подсказка должна быть скрыта при помощи visibility:hidden или left/top за пределами экрана, но не display:none.
2. В строках (*) и (**) подсказку сдвигаем немного левее/выше курсора (на 2 пикселя).

   Главное чтобы подсказка не оказалась под курсором. Если такое произойдет, то подсказка перекроет элемент, и в результате события mousemove станут происходить уже на подсказке, а не на элементе, и их обработка сломается.

Полное решение: tutorial/browser/events/tooltip-moving/index.html.

Для захвата проще всего создать дополнительные DIV'ы и отпозиционировать их сбоку и справа-снизу IMG. При нажатии на них начинать смену размера.

CSS-структура:

<div class="resize-wrapper" style="width: 503px; height: 285px;">
  <img src="heroes.jpg" id="heroes" style="width:500px;height:282px">
  <div class="resize-handle-s"></div>
  <div class="resize-handle-e"></div>
  <div class="resize-handle-se"></div>
</div>

Внешний DIV подстраивается под размер картинки и имеет position:relative. Внутри него расположены абсолютно позиционированные «ручки» для захвата.

Стиль:

.resize-wrapper {
      position: relative;
    }
    .resize-wrapper img {
      display: block;
    }

    .resize-handle-se {
      width: 16px;
      height: 16px;
      position: absolute;
      bottom: 0;
      right: 0;
      background: url(handle-se.png) no-repeat;
      cursor: se-resize;
    }

    .resize-handle-s {
      height: 3px;
      width:100%;
      position: absolute;
      bottom: 0;
      background: gray;
      cursor: s-resize;
    }

    .resize-handle-e {
      width: 3px;
      height:100%;
      position: absolute;
      right: 0;
      top: 0;
      background: gray;
      cursor: e-resize;
    }

Для обозначения низа используется буква «s» (south, «юг» по-английски), обозначения правой стороны — буква «e» (east, «восток» по-английски).

Использование сторон света для обозначения направления можно часто встретить в скриптах.

Алгоритм:

1. При инициализации IMG оборачивается во внешнюю обертку и обкладывается DIV'ами, на которых ловим mousedown. Обертка нужна, чтобы абсолютно позиционировать DIV'ы внутри неё под/сбоку изображения.
2. При наступлении mousedown, начинаем ловить document.mousemove и подгонять картинку под размер, а обертку — под картинку.

   Желательно заодно отменить браузерное выделение и Drag’n’Drop, возвратив false из собработчиков событий mousedown и dragstart.

3. При наступлении mouseup — конец.

Более подробно детали отмечены в комментариях к решению: tutorial/browser/events/resizeable/index.html

Область выделения — это DIV, серого цвета, полупрозрачный, с рамкой:

.crop-area {
  position: absolute;
  background: #F5DEB3;
  opacity: 0.3;
  filter:alpha(opacity=30); /* IE opacity */
  border: 1px dashed black;
}

Решение: tutorial/browser/events/croppable/index.html

Обратите внимание: обработчики mousemove/mouseup ставятся на document, не на элемент.

Это для того, чтобы посетитель мог начать выделение на элементе, а продолжить и завершить его, двигая зажатой мышкой снаружи, вне его границ.

Решение: .

Как сопоставить позицию слайдера и значение?

Для этого посмотрим крайние значения слайдера. Допустим, размер бегунка 10px.

Раз центр соответствует значению, то крайнее левое значение будет соответствовать центру на 5px, а крайнее правой — центру на 5px от правой границы:

Соответственно, ширина области изменения будет sliderElem.clientWidth - thumbElem.clientWidth. Далее её можно уже поделить на части, количество пикселей на значение будет:

pixelsPerValue = (sliderElem.clientWidth-thumbElem.clientWidth) / max;

Может получиться так, что это значение будет дробным, меньше единицы. Например, если max = 1000, а ширина слайдера 110 (пробег 100), то будет 0.1 пикселя на значение.

Используя pixelsPerValue мы сможем переводить позицию бегунка в значение и обратно.

Крайнее левое значение thumbElem.style.left равно нулю, крайнее правой — как раз ширине доступной области sliderElem.clientWidth - thumbElem.clientWidth. Поэтому можно получив значение, поделив его на pixelsPerValue:

value = Math.round( newLeft / pixelsPerValue);

Итоговое решение: tutorial/browser/events/slider/index.html.

• Так как высота и ширина окна известны, вёрстка внутри может содержать точные пиксельные размеры.
• При обработке события document.onmousemove, мы вычисляем новые координаты left/top и смотрим, вылезает ли окно за границы. Если да — меняем left/top на максимально возможные, чтобы не вылезало.
• На форме вешаем обработчик onsubmit, т.к. иначе Enter в поле отправить её на сервер.

tutorial/browser/dnd/window/index.html

tutorial/browser/dnd/window-manager/index.html