Режим редактора в браузере. Работа с аудио и видео. Drag and Drop API. Дополнительные API

1. Дополнительные
возможности в DOM
Курс Frontend-разработки на Javascript + Vue/React

2. Работа с аудио/видео
• Работа с аудио или видео, встроенными по стандарту HTML5,
сводится к работе с DOM-элементами соответствующего тега
<audio> или <video>.
• На базе DOM-элемента аудио или видео разработчики строят
собственные стилизованные плееры. Стилизовать базовый
браузерный плеер при помощи CSS не представляется возможным.

3. События медийных тегов
Событие Описание
canplay Возникает, когда медиа готово к воспроизведению.
play Возникает, когда медиа начинает воспроизводиться.
pause Возникает, когда медиа было поставлено на паузу
timeupdate Возникает, когда изменилось текущее время медиа
ended Возникает, когда воспроизведение медиа дошло до конца
error Возникает в случаях, когда при воспроизведении возникла ошибка
loadedmetadata Возникает, когда для медиа были загружены метаданные (в частности,
длительность)

4. Свойства и методы медийных
тегов
Свойство/метод Тип значения Описание
.currentTime Дробное число Текущее время воспроизведения медиа в секундах. Можно перезаписать.
.duration Дробное число Только для чтения. Длительность медиа в секундах.
.ended Boolean Только для чтения. Указывает, закончилось ли воспроизведение.
.loop Boolean Если задать true, то воспроизведение будет зациклено.
.muted Boolean При задании значения true отключает звук в медиа.
.paused Boolean Только для чтения. Вернет true если медиа было поставлено на паузу.
.playbackRate Дробное число Скорость воспроизведения, по умолчанию = 1. Можно задать другие
значения для ускорения/замедления воспроизведения.
.src Строка Адрес текущего медиа. Можно перезаписать.
.volume Дробное число от 0 до 1 Громкость воспроизведения медиа.
.pause() - Запускает приостановление видео на паузу.
.play() - Запускает воспроизведение видео (асинхронно).

5. Задача 1.
• Создать видеоплеер со следующими возможностями:
• Пауза/продолжение и стоп
• Перемотка позиции
• Изменение громкости воспроизведения
• Изменение скорости воспроизведения
• Создать видеогалерею из нескольких видео, при клике – отправлять
видео, на которое кликнул пользователь, в плеер.

6. Задача 1 (самостоятельно)
• Создать аудиоплеер с описанными в предыдущей задаче
возможностями.
• Стилизовать аудиоплеер.

7. Режим редактора
• Режим редактора – особое состояние DOM-элемента, которое
позволяет пользователю напрямую взаимодействовать с
содержимым элемента, изменяя его как форматированный текст.
• Для включения режима редактора используется атрибут или
свойство contenteditable:
или
<div contenteditable="true"></div>
const div = document.getElementById('editor');
div.contenteditable = true;

8. Команды режима редактора
• Для выполнения действий режима редактора программно при помощи
скрипта используюся команды редактора.
• Команды редактора запускаются следующим образом:
• Первый аргумент – название команды. Второй аргумент следует
устанавливать в false. Третий аргумент – данные для запуска команды (или
null для команд, которые не требуют данных)
• Команда выполняется в документе в том месте, где установлен курсор
пользователя. Если курсор не установлен нигде или выделен текст за
пределами элемента в режиме редактора, запуск команды не возымеет
эффекта.
document.execCommand('command', false, data);

9. Список команд
Команда Данные Описание
bold - Жирное выделение в месте выделения или курсора
italic - Курсивное выделение
underline - Подчеркнутое выделение
fontName Строка с названием шрифта Изменение шрифта для выделенного текста или места курсора
fontSize Число от 1 до 7 Изменение размера шрифта (от x-small до xx-large)
foreColor Строка с цветом (CSS) Изменение цвета выделенного текста
backColor Строка с цветом (CSS) Изменение цвета фонового текста
heading Название тега h1..h6 Установка в место курсора или выделения заголовка. Уровень
передается в данные
increaseFontSize - Увеличение размера шрифта
decreaseFontSize - Уменьшение размера шрифта
formatBlock Название тега Обертка выделенного текста или курсора тегом, название
которого передается в данные.

10. Список команд
Команда Данные Описание
createLink Строка с адресом Создает из выделенного текста ссылку с адресом, переданным в данные
unlink - Удаляет ссылку с выделенного текста или места курсора
justifyCenter - Выравнивает текст в месте положения курсора по центру
justifyLeft - Выравнивание по левому краю
justifyRight - Выравнивание по правому краю
justifyFull - Выравнивание по ширине
indent - Добавляет один отступ красной строки
outdent - Удаляет один отступ красной строки
insertText Строка Вставляет или заменяет выделенный текст на текст, переданный в команду
insertOrderedList - Вставляет или превращает выделенный текст в нумерованный список
insertUnorderedList - Вставляет/оборачивает выделение в маркированный список

11. Список команд
Команда Данные Описание
insertParagraph - Вставляет/оборачивает выделение в тег <p>
insertImage Адрес изображения Вставляет изображение. Адрес изображения передается в команду.
insertHTML Строка с HTML Вставляет в место положения курсора HTML-содержимое
copy - Копирует выделенный текст в буфер обмена
cut - Вырезает выделенный текст в буфер обмена
paste - Вставляет текст из буфера обмена в место положения курсора
undo - Отменяет предыдущую операцию (аналог Ctrl + Z)
redo - Возвращает отмену предыдущей операции (аналог Ctrl + Y)
removeFormat - Очищает форматирование с выделенного участка текста.
И другие команды (см. дополнительные материалы)

12. Состояние команды в текущей
позиции
• Для построения отзывчивого интерфейса визуального редактора полезно иметь
возможность определить, применена ли данная команда в текущей позиции
курсора, и каким образом. Для этого существуют следующие возможности:
Вернет true, если в данный момент команду можно применить.
Вернет true, если в текущей позиции курсора применена данная команда и false в
противном случае.
Вернет значение, с которым была запущена переданная команда в позиции курсора.
document.queryCommandEnabled('bold')
document.queryCommandState('italic')
document.queryCommandValue('insertlink')

13. Задача 2
• Построить редактор форматированного текста с возможностями:
• Изменять начертание текста: жирное, курсивное, подчеркнутое.
• Изменять параметры шрифта: размер, гарнитура, цвет.
• Вставлять и удалять ссылку
• Редактор должен подсвечивать кнопки и другие элементы в
соответствии с тем, в каком состоянии и доступна ли операция в
данный момент в данном положении курсора.

14. Задача 2 (самостоятельно)
• Дополнить редактор следующими возможностями:
• Выравнивание текста
• Очистка форматирования
• Добавление картинки
• Операции копирования, вырезания, вставки
• Отмена и возврат действия

15. Drag & Drop API
• Drag&Drop – общее названия для перечня событий и
дополнительных возможностей в DOM, позволяющих реализовать
перетаскивание на странице.
• Перетаскивание бывает двух видов: когда перетаскивается сам
элемент в другое место и когда на элемент перетаскивается какое-
то другое содержимое.

16. Перетаскивание элементов
• Для того, чтобы элемент можно было перетаскивать, для него
необходимо задать свойство draggable в значение true.
• Тогда элемент будет инициировать события:
• dragstart – возникает, когда элемент начинают перетаскивать
• drag – возникает каждый раз, когда элемент перемещается при
перетаскивании
• dragend – возникает, когда перетаскивание элемента завершается

17. Перетаскивание на элемент
• Перетаскивать на элемент можно: другие элементы, текст или файл.
Для работы с этим функционалом не требуется никаких
дополнительных действий. При перетаскивании на элемент он
инициирует события:
• dragenter – возникает, когда на элемент ввели курсор с перетаскиваемым
содержимым
• dragover – возникает каждый раз, когда над элементом перемещается курсор
с перетаскиваемым содержимым
• dragleave – возникает, когда курсор с перетаскиваемым содержимым
покидает границы элемента
• drop – возникает, когда над элементом отпускают перетаскивание. В этом
событии можно обратиться к содержимому, которое перетаскивалось.

18. Задача 3.
• Создать список элементов на странице. Реализовать
перетаскивание элементов в этом списке.

19. Дополнительные API
• DOM Selection API – позволяет работать с выделениями на странице
(выделение текста).
• CSS Object Model – позволяет работать с CSS-документами при
помощи Javascript на уровне структурных единиц языка CSS
• DOM Parser – API для превращения XML-документов в DOM-
документ для последующего извлечения данных.

20. Дополнительные материалы
События аудио и видео
https://developer.mozilla.org/ru/docs/Web/Guide/Events/Medi
a_events
Свойства тегов аудио и видео
https://developer.mozilla.org/en-
US/docs/Web/API/HTMLMediaElement
execCommand и список команд режима редактора
https://developer.mozilla.org/ru/docs/Web/API/Document/exe
cCommand
Drag and drop на MDN
https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Drag
_and_drop
Введение в работу с выделением текста
https://learn.javascript.ru/range-textrange-selection
CSS Object Model - перечень возможностей
https://developer.mozilla.org/ru/docs/Web/API/CSS_Object_M
odel
DOMParser
https://developer.mozilla.org/ru/docs/Web/API/DOMParser