87 lines
2.5 KiB
JavaScript
87 lines
2.5 KiB
JavaScript
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
|
|
export var responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
|
|
export var responsiveMap = {
|
|
xs: '(max-width: 575px)',
|
|
sm: '(min-width: 576px)',
|
|
md: '(min-width: 768px)',
|
|
lg: '(min-width: 992px)',
|
|
xl: '(min-width: 1200px)',
|
|
xxl: '(min-width: 1600px)'
|
|
};
|
|
var subscribers = [];
|
|
var subUid = -1;
|
|
var screens = {};
|
|
var responsiveObserve = {
|
|
matchHandlers: {},
|
|
dispatch: function dispatch(pointMap) {
|
|
screens = pointMap;
|
|
|
|
if (subscribers.length < 1) {
|
|
return false;
|
|
}
|
|
|
|
subscribers.forEach(function (item) {
|
|
item.func(screens);
|
|
});
|
|
return true;
|
|
},
|
|
subscribe: function subscribe(func) {
|
|
if (subscribers.length === 0) {
|
|
this.register();
|
|
}
|
|
|
|
var token = (++subUid).toString();
|
|
subscribers.push({
|
|
token: token,
|
|
func: func
|
|
});
|
|
func(screens);
|
|
return token;
|
|
},
|
|
unsubscribe: function unsubscribe(token) {
|
|
subscribers = subscribers.filter(function (item) {
|
|
return item.token !== token;
|
|
});
|
|
|
|
if (subscribers.length === 0) {
|
|
this.unregister();
|
|
}
|
|
},
|
|
unregister: function unregister() {
|
|
var _this = this;
|
|
|
|
Object.keys(responsiveMap).forEach(function (screen) {
|
|
var matchMediaQuery = responsiveMap[screen];
|
|
var handler = _this.matchHandlers[matchMediaQuery];
|
|
|
|
if (handler && handler.mql && handler.listener) {
|
|
handler.mql.removeListener(handler.listener);
|
|
}
|
|
});
|
|
},
|
|
register: function register() {
|
|
var _this2 = this;
|
|
|
|
Object.keys(responsiveMap).forEach(function (screen) {
|
|
var matchMediaQuery = responsiveMap[screen];
|
|
|
|
var listener = function listener(_ref) {
|
|
var matches = _ref.matches;
|
|
|
|
_this2.dispatch(_extends(_extends({}, screens), _defineProperty({}, screen, matches)));
|
|
};
|
|
|
|
var mql = window.matchMedia(matchMediaQuery);
|
|
mql.addListener(listener);
|
|
_this2.matchHandlers[matchMediaQuery] = {
|
|
mql: mql,
|
|
listener: listener
|
|
};
|
|
listener(mql);
|
|
});
|
|
}
|
|
};
|
|
export default responsiveObserve; |