Пояснения к Adapt JS

Это частичный перевод руководства к весьма полезному скрипту позволяющего организовать адаптивность сайта. https://adapt.960.gs/

Тут отпущено лирическое вступление, где автор посыпает голову пеплом, что он отступил от канонов и рассказывает о мыльной опере, во время просмотра которой ему пришла в голову идея... ))) Ну как то так.

Как Использовать.

Во всех следующих примерах вы можете отбрасывать суффикс px. Это просто для того, чтобы подчеркнуть, что расчеты, выполненные Adapt.js основаны на пикселях.

Как минимум, если все, что вы хотите, - это только загружать CSS файлы, необходимые для загрузки страницы, но не беспокоитесь о изменении размера браузера и тому подобном, все, что вам действительно нужно, - это это:

var ADAPT_CONFIG = {
	path: 'assets/css/',
	range: [
		'0px    to 760px  = mobile.css',
		'760px  to 980px  = 720.css',
		'980px  to 1280px = 960.css',
		'1280px to 1600px = 1200.css',
		'1600px to 1920px = 1560.css',
		'1920px           = fluid.css',
	],
};

Имейте в виду, что вам не нужно использовать эти соглашения об именах для ваших CSS - файлов. "720.css" с таким же успехом может быть "peanut_butter.css" или любое другое имя.

Теперь предположим, что вы хотите поместить все свои мобильные стили в основную таблицу стилей и добавить только дополнительные стили выше определенного порога ширины. Следующий код в основном говорит: "Если ширина больше 760 пикселей, добавьте desktop.css." Adapt.js знает это, потому что это последняя (единственная) запись в массиве диапазонов.

var ADAPT_CONFIG = {
	path: 'assets/css/',
	range: ['760px = desktop.css'],
};

Если вы хотите адаптироваться к размеру браузера и наклону устройства, добавьте флаг dynamic.

var ADAPT_CONFIG = {
	path: 'assets/css/',
	dynamic: true,
	range: ['760px = desktop.css'],
};

Функция обратного вызова.

Для JS, который вы хотите запустить при изменении размера окна, укажите функцию обратного вызова.

var ADAPT_CONFIG = {
	path: 'assets/css/',
	dynamic: true,
	callback: myCallback,
	range: [
		'0px    to 760px  = mobile.css',
		'760px  to 980px  = 720.css',
		'980px  to 1280px = 960.css',
		'1280px to 1600px = 1200.css',
		'1600px to 1920px = 1560.css',
		'1920px           = fluid.css',
	],
};

Если вы не хотите подгружать CSS-файлы, просто оставьте их диапазоны и не указывайте path. Это все равно позволит вам воспользоваться Adapt.js чтобы вызвать функцию обратного вызова.

var ADAPT_CONFIG = {
	dynamic: true,
	callback: myCallback,
	range: ['0    to 760', '760  to 980', '980  to 1280', '1280 to 1600', '1600 to 1920', '1920'],
};

Имя класса тега HTML.

ПРОСМОТР ДЕМОНСТРАЦИИ изменения имени класса

В обратный вызов передается индекс диапазона и ширина окна — myCallback(i, width). Основываясь на этой информации, вы можете делать любые манипуляции. Я предполагаю, что одним из распространенных вариантов использования будет добавление имени класса в HTML-тег. Это позволит вам внести небольшие изменения с помощью селекторов потомков в вашем главном CSS-файле.

Для обсуждения я использую имя функции MyCallback. Однако вы можете так же легко назвать свою функцию обратного вызова MyLittlePony, captainAmerica или указать ее как часть пространства имен приложений, например MY.app.adapt_callback.

В приведенном ниже примере i -это индекс массива диапазонов. Поскольку массивы в JS (на самом деле, на каждом языке) индексируются нулем, это означает, что первый будет равен 0, второй- 1 и т. д. Не вините меня, я не устанавливал правила!

function myCallback(i, width) {
	// Псевдоним HTML-тега.
	var html = document.documentElement;

	// Найди все экземпляры range_NUMBER и убери их.
	html.className = html.className.replace(/(\s+)?range_\d/g, '');

	// Проверь допустимый диапазон.
	if (i > -1) {
		// Добавить класс="range_NUMBER"
		html.className += ' range_' + i;
	}

	// Примечание: Здесь не используется ширина, но я уверен,
	// что вы могли бы придумать интересный способ ее использования.
}

В вашем главном CSS-файле вы можете выполнить переопределение стилей, например…

.foobar {
	/* Стили по умолчанию здесь. */
}

html.range_0 .foobar {
	/* Переопределения стилей для: от 0px до 760px */
}

html.range_1 .foobar {
	/* Переопределения стилей для: от 760px до 980px */
}

/* etc. */

Изменение атрибута ID тега HTML.

ПРОСМОТР ДЕМОНСТРАЦИИ изменения ID

Если вы предпочитаете использовать вместо этого селектор id, предполагая, что у вас еще нет чего-то вроде id="example_com" или id="example_org" в вашем HTML-теге, вы можете определить чрезвычайно простую функцию обратного вызова. Вот так…

function myCallback(i) {
	// Заменить HTML-тег ID.
	document.documentElement.id = 'range_' + i;
}

Это дает более сильный селектор CSS для стиля (id превосходит class).

html#range_0 .foobar {
  /* Переопределения стилей для: от 0px до 760px */
}

/* и т.д. */

Это только один пример. Ваш обратный вызов может делать все, что вы хотите, позволяя размер файла Adapt.js чтобы оставаться легким. Просто убедитесь, что вы определили свою функцию обратного вызова, прежде чем ссылаться на adapt.js файл, чтобы она была распознана.