Реализация определения размера устройства в AngularJS

Идея описана здесь — https://blog.bullgare.com/2013/12/%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B8%D0%BF%D0%B0-%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0-%D0%B2-js-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-media/.
Т.е. через media-queries задавать параметры, которые определят размеры устройства, по этим параметрам менять z-index. Затем создать в js-файле такой элемент скрытым и считывать его z-index в любой момент.
Особенно это удобно делать в css-препроцессорах, чтобы параметризовать параметры media-queries. Тогда изменения внешнего вида сайта через css будут происходить одновременно с изменением функциональности js-приложения.
Единственный минус — надо синхронизировать значения z-index-ов между scss и js, но меняются они не часто.
Ниже приведу пример реализации на scss.

_variables.scss

$smallScreenWidth: 450px;

1	$smallScreenWidth: 450px;

_device_detector.scss

.__device_detector__ {
	$valDefault: 1;
	$valSmall: 10;

	position: absolute;
	top: -999em;
	left: -999em;

	z-index: $valDefault;

	@include media("max-width: #{$smallScreenWidth}") {
		z-index: $valSmall;
	}
	@include media("max-height: #{$smallScreenWidth}") {
		z-index: $valSmall;
	}
}

.__device_detector__ {

$valDefault: 1;

$valSmall: 10;

position: absolute;

top: -999em;

left: -999em;

z-index: $valDefault;

@include media("max-width: #{$smallScreenWidth}") {

z-index: $valSmall;

}

@include media("max-height: #{$smallScreenWidth}") {

z-index: $valSmall;

}

utils.js

...
/**
 * This service is for getting device's type according to it's width/height
 */
.factory('DeviceDetectorService', [function DeviceDetectorService() {
	var deviceTypes = {
			1: 'default',
			10: 'small'
		},
		className = '__device_detector__',
		el;

	return {
		/**
		 * Inserts 'div' element into DOM
		 */
		init: function init()
		{
			el = document.createElement('div');
			el.className = className;
			document.body.appendChild(el);
		},
		/**
		 * Gets device's type by media query
		 */
		getType: function getType()
		{
			var defaultType = deviceTypes[1];
			if (! el || ! ('getComputedStyle' in window)) {
				return defaultType;
			}

			var id = parseInt(window.getComputedStyle(el).getPropertyValue('z-index'), 10);
			return deviceTypes[id] || defaultType;
		}
	};
}]);

...

/**

* This service is for getting device's type according to it's width/height

.factory('DeviceDetectorService', [function DeviceDetectorService() {

var deviceTypes = {

1: 'default',

10: 'small'

className = '__device_detector__',

el;

return {

/**

* Inserts 'div' element into DOM

init: function init()

{

el = document.createElement('div');

el.className = className;

document.body.appendChild(el);

/**

* Gets device's type by media query

getType: function getType()

{

var defaultType = deviceTypes[1];

if (! el || ! ('getComputedStyle' in window)) {

return defaultType;

}

var id = parseInt(window.getComputedStyle(el).getPropertyValue('z-index'), 10);

return deviceTypes[id] || defaultType;

}

};

}]);

app.js

.run(['$rootScope', 'DeviceDetectorService', function ($rootScope, DeviceDetectorService)
{
	// инициализация
	DeviceDetectorService.init();
	// и сразу пример использования
	$rootScope.isSmallDeviceOnInit = 'small' === DeviceDetectorService.getType();
}])

.run(['$rootScope', 'DeviceDetectorService', function ($rootScope, DeviceDetectorService)

{

// инициализация

DeviceDetectorService.init();

// и сразу пример использования

$rootScope.isSmallDeviceOnInit = 'small' === DeviceDetectorService.getType();

}])

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

Реализация определения размера устройства в AngularJS

Similar Posts

LEAVE A COMMENT Отменить ответ