Epg API

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

Когда вы начинаете использовать epg, сначала определите фокусный идентификатор класса, а затем инициализируйте epg:

epg.init({
	// config code.
});

Инициализация

Значения по умолчанию для параметров конфигурации следующие:

var defaults = {
	controller: {},
	cursor: {
		sign: '.link',
		first: document.querySelector('.link'),
		rim: '.pseudo',
		mode: 'outer',
		border: '#ffde00 solid 2px',
		shadow: '0 0 8px 1px #000',
		effect: null
	}
};

Параметры конфигурации:

• controller — удалённый объект управления, в котором можно написать функцию обратного вызова операции. Функции обратного вызова включают left, right, up, down, enter и back. Параметры конфигурации следующие:
  • left/right/up/down — функции обратного вызова перемещения фокуса. Если при перемещении фокуса не требуется никаких специальных операций, эти параметры можно не настраивать. Если они не настроены, внутренняя функция обработки будет отвечать за вычисление перемещения фокуса. После настройки этих параметров вы потеряете стандартные операции, и будете нести полную ответственность за все перемещения фокуса. Этот параметр полезен, например, для перехода фокуса к указанному местоположению. Epg предоставляет функцию получения следующего фокуса для выполнения стандартных правил перемещения;
  • enter/back — обратные вызовы для перехода по ссылке или возврата на страницу. Эти параметры можно не настраивать, если нет операций.
• cursor — параметры конфигурации фокуса, параметры конфигурации следующие:
  • sign — класс имени для обозначения фокуса должен быть установлен на значение по умолчанию .link, если не настроен;
  • first — первый фокус, который нужно установить. Если не указан, будет использоваться значение по умолчанию. Поскольку необходимо найти первый фокус, его необходимо настроить перед инициализацией, иначе он может не достичь ожидаемого результата;
  • rim — имя класса фокуса, стиль рамки и внешний стиль;
  • mode — значение по умолчанию outer означает внешний стиль, и rim должен быть настроен. Другое значение inline указывает на внутренний стиль, и должны быть настроены border и shadow;
  • border/shadow — стили рамки и тени;
  • effect — тип данных number, есть два эффекта: scale и twinkle. Если значение находится между 1 и 5, область фокусировки будет увеличена. Когда значение находится между 500 и 2000, область фокуса будет мигать.

Объект Cursor

Объект Cursor по умолчанию перемещается к следующему подходящему положению фокуса в соответствии с направлением операции. Если функция обратного вызова не настроена, left/right/up/down объекта Cursor автоматически переместится к следующему подходящему фокусу. Если функция обратного вызова уже настроена, её всё ещё можно вызвать внутри, когда нет нового фокуса:

epg.cursor.left();  // нормальный вызов
epg.cursor.right(document.querySelector('.video .link'));  // передача DOM объекта фокуса

Второй метод вызова требует, чтобы параметр был уникальным DOM объектом.

Другие основные функции:

epg.cursor.parent(first, second);  // возвращает существующий целевой родительский элемент.

first — обязательный родительский элемент, second — необязательный элемент поиска родительского элемента. Если second не существует, по умолчанию используется текущий фокус. Эти два параметра могут быть string или уникальным DOM объектом.

epg.cursor.index(parent, target);  // возвращает дочерний элемент родительского элемента по индексу.

parent — обязательный родительский элемент, target — необязательный дочерний элемент родителя. Если target не существует, по умолчанию используется текущий фокус. Эти два параметра могут быть string или уникальным DOM объектом.

epg.cursor.next(dir);  // возвращает следующий фокус.

dir указывает направление следующего фокуса.

Функции, которые всё ещё могут вызываться извне:

// внутренняя функция
epg.cursor.move(parameter);  // перемещение фокуса (влево/вправо/вверх/вниз) базовая функция вызова.
epg.cursor.setRim();  // функция установки стиля фокуса.

Вы можете получить текущий фокус через epg.cursor.pointer.

Swiper Object

Swiper Object включает эффекты слайдов и списков, значения параметров конфигурации по умолчанию следующие:

var defaults = {
	mode: 'none',
	container: '.swiper-container',
	wrapper: '.swiper-wrapper',
	pagination: {
		wrapper: '.swiper-pagination',
		tagName: 'span',
		normal: '.swiper-pagination-normal',
		active: '.swiper-pagination-active'
	},
	prevButton: '.swiper-button-prev',
	nextButton: '.swiper-button-next',
	direction: 'horizontal',
	autoPlay: 5000,
	distance: 0
};

Параметры конфигурации:

• mode — тип эффекта, list или slide. Если он не настроен, программа автоматически определит тип. Конечно, произойдёт сбой идентификации, и по умолчанию не будет никаких операций. Например, ширина/высота, которую вы установили, отличается от ожидаемой программой. Поэтому я настоятельно рекомендую настроить этот параметр;
• container — самый внешний слой, имя класса. wrapper — слой упаковки списка, имя класса;
• pagination — конфигурация разбивки на страницы, действует только для типа slide, поэтому тип list не нуждается в настройке. wrapper — упаковка слоя разбивки на страницы, имя класса. tagName — метка индикатора разбивки на страницы. normal — неактивное состояние, имя класса. active — активное состояние, имя класса. prevButton/nextButton — кнопки предыдущей и следующей страниц, имена классов. Если эти параметры не настроены, необходимо выполнить настройку страницы в соответствии с соответствующими параметрами;
• direction — направление списка/скольжения, горизонтальное или вертикальное;
• autoPlay — задержка автоматического воспроизведения, если значение равно 0, автоматическое воспроизведение не будет выполняться. Как и разбивка на страницы, она действует только для типа slide;
• distance — указать расстояние перемещения, действует только для типа list.

HTML код:

Направление перемещения Swiper можно контролировать: Swiper.left/Swiper.right/Swiper.up/Swiper.down:

epg.swiper.left(); 
epg.swiper.up();

Внешние функции, которые всё ещё можно вызывать:

// Внутренняя функция
epg.swiper.move(dir, auto);  // Перемещение фокуса (влево/вправо/вверх/вниз), базовая функция вызова.
epg.swiper.contrls();  // Настройка кнопок предыдущей и следующей страниц.
epg.swiper.autoPlay();  // Автоматическое воспроизведение.