UNPKG

@scriptloom/ngx-media-query

Version:

A convenient media query service for building responsive Angular components.

568 lines (553 loc) 26.2 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ngrx/store'), require('@ngrx/entity'), require('@ngrx/effects'), require('rxjs/operators'), require('rxjs')) : typeof define === 'function' && define.amd ? define('@scriptloom/ngx-media-query', ['exports', '@angular/core', '@ngrx/store', '@ngrx/entity', '@ngrx/effects', 'rxjs/operators', 'rxjs'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.scriptloom = global.scriptloom || {}, global.scriptloom['ngx-media-query'] = {}), global.ng.core, global.i1, global.entity, global.effects, global.rxjs.operators, global.rxjs)); }(this, (function (exports, i0, i1, entity, effects, operators, rxjs) { 'use strict'; (function (MediaQueriesActionsEnum) { MediaQueriesActionsEnum["LoadMediaQueries"] = "[NgxMediaQuery/API] Load Media Queries"; MediaQueriesActionsEnum["LoadMediaQueriesSuccess"] = "[NgxMediaQuery/API] Load MediaQueries Success"; MediaQueriesActionsEnum["LoadMediaQueriesFailure"] = "[NgxMediaQuery/API] Load MediaQueries Failure"; MediaQueriesActionsEnum["AddMediaQuery"] = "[NgxMediaQuery/API] Add Media Query"; MediaQueriesActionsEnum["SetMediaQuery"] = "[NgxMediaQuery/API] Set Media Query"; MediaQueriesActionsEnum["UpsertMediaQuery"] = "[NgxMediaQuery/API] Upsert Media Query"; MediaQueriesActionsEnum["AddMediaQueries"] = "[NgxMediaQuery/API] Add Media Queries"; MediaQueriesActionsEnum["UpsertMediaQueries"] = "[NgxMediaQuery/API] Upsert Media Queries"; MediaQueriesActionsEnum["UpdateMediaQuery"] = "[NgxMediaQuery/API] Update Media Query"; MediaQueriesActionsEnum["UpdateMediaQueries"] = "[NgxMediaQuery/API] Update Media Queries"; MediaQueriesActionsEnum["MapMediaQueries"] = "[NgxMediaQuery/API] Map Media Queries"; MediaQueriesActionsEnum["DeleteMediaQuery"] = "[NgxMediaQuery/API] Delete Media Query"; MediaQueriesActionsEnum["DeleteMediaQueries"] = "[NgxMediaQuery/API] Delete Media Queries"; MediaQueriesActionsEnum["DeleteMediaQueriesByPredicate"] = "[NgxMediaQuery/API] Delete Media Queries By Predicate"; MediaQueriesActionsEnum["ClearMediaQueries"] = "[NgxMediaQuery/API] Clear Media Queries"; MediaQueriesActionsEnum["SelectMediaQuery"] = "[NgxMediaQuery/API] Select Media Query by ID"; })(exports.ɵf || (exports.ɵf = {})); var loadMediaQueries = i1.createAction(exports.ɵf.LoadMediaQueries); var loadMediaQueriesSuccess = i1.createAction(exports.ɵf.LoadMediaQueriesSuccess, i1.props()); var selectMediaQuery = i1.createAction(exports.ɵf.SelectMediaQuery, i1.props()); var loadMediaQueriesFailure = i1.createAction(exports.ɵf.LoadMediaQueriesFailure, i1.props()); var addMediaQuery = i1.createAction(exports.ɵf.AddMediaQuery, i1.props()); var setMediaQuery = i1.createAction(exports.ɵf.SetMediaQuery, i1.props()); var upsertMediaQuery = i1.createAction(exports.ɵf.UpsertMediaQuery, i1.props()); var addMediaQueries = i1.createAction(exports.ɵf.AddMediaQueries, i1.props()); var upsertMediaQueries = i1.createAction(exports.ɵf.UpsertMediaQueries, i1.props()); var updateMediaQuery = i1.createAction(exports.ɵf.UpdateMediaQuery, i1.props()); var updateMediaQueries = i1.createAction(exports.ɵf.UpdateMediaQueries, i1.props()); var mapMediaQueries = i1.createAction(exports.ɵf.MapMediaQueries, i1.props()); var deleteMediaQuery = i1.createAction(exports.ɵf.DeleteMediaQuery, i1.props()); var deleteMediaQueries = i1.createAction(exports.ɵf.DeleteMediaQueries, i1.props()); var deleteMediaQueriesByPredicate = i1.createAction(exports.ɵf.DeleteMediaQueriesByPredicate, i1.props()); var clearMediaQueries = i1.createAction(exports.ɵf.ClearMediaQueries); var NGX_MEDIA_QUERY_FEATURE_KEY = 'mediaQueries'; var mediaQueriesAdapter = entity.createEntityAdapter(); var initialMediaQueriesState = mediaQueriesAdapter.getInitialState({ // set initial required properties loaded: false, }); var ɵ0 = function (state) { return (Object.assign(Object.assign({}, state), { loaded: false, error: null })); }, ɵ1 = function (state, _a) { var mediaQueries = _a.mediaQueries; return mediaQueriesAdapter.setAll(mediaQueries, Object.assign(Object.assign({}, state), { loaded: true })); }, ɵ2 = function (state, _a) { var error = _a.error; return (Object.assign(Object.assign({}, state), { error: error })); }, ɵ3 = function (state, _a) { var id = _a.id; return (Object.assign(Object.assign({}, state), { selectedId: state.entities[id] !== undefined ? id : undefined })); }, ɵ4 = function (state, _a) { var mediaQuery = _a.mediaQuery; return mediaQueriesAdapter.addOne(mediaQuery, state); }, ɵ5 = function (state, _a) { var mediaQuery = _a.mediaQuery; return mediaQueriesAdapter.setOne(mediaQuery, state); }, ɵ6 = function (state, _a) { var mediaQuery = _a.mediaQuery; return mediaQueriesAdapter.upsertOne(mediaQuery, state); }, ɵ7 = function (state, _a) { var mediaQueries = _a.mediaQueries; return mediaQueriesAdapter.addMany(mediaQueries, state); }, ɵ8 = function (state, _a) { var mediaQueries = _a.mediaQueries; return mediaQueriesAdapter.upsertMany(mediaQueries, state); }, ɵ9 = function (state, _a) { var update = _a.update; return mediaQueriesAdapter.updateOne(update, state); }, ɵ10 = function (state, _a) { var updates = _a.updates; return mediaQueriesAdapter.updateMany(updates, state); }, ɵ11 = function (state, _a) { var entityMap = _a.entityMap; return mediaQueriesAdapter.map(entityMap, state); }, ɵ12 = function (state, _a) { var id = _a.id; return mediaQueriesAdapter.removeOne(id, state); }, ɵ13 = function (state, _a) { var ids = _a.ids; return mediaQueriesAdapter.removeMany(ids, state); }, ɵ14 = function (state, _a) { var predicate = _a.predicate; return mediaQueriesAdapter.removeMany(predicate, state); }, ɵ15 = function (state) { return mediaQueriesAdapter.removeAll(Object.assign(Object.assign({}, state), { selectedId: null })); }; var mediaQueriesReducer = i1.createReducer(initialMediaQueriesState, i1.on(loadMediaQueries, ɵ0), i1.on(loadMediaQueriesSuccess, ɵ1), i1.on(loadMediaQueriesFailure, ɵ2), i1.on(selectMediaQuery, ɵ3), i1.on(addMediaQuery, ɵ4), i1.on(setMediaQuery, ɵ5), i1.on(upsertMediaQuery, ɵ6), i1.on(addMediaQueries, ɵ7), i1.on(upsertMediaQueries, ɵ8), i1.on(updateMediaQuery, ɵ9), i1.on(updateMediaQueries, ɵ10), i1.on(mapMediaQueries, ɵ11), i1.on(deleteMediaQuery, ɵ12), i1.on(deleteMediaQueries, ɵ13), i1.on(deleteMediaQueriesByPredicate, ɵ14), i1.on(clearMediaQueries, ɵ15)); function NGX_MEDIA_QUERY_REDUCER(state, action) { return mediaQueriesReducer(state, action); } // Lookup the 'MediaQueries' feature state managed by NgRx var getMediaQueriesState = i1.createFeatureSelector(NGX_MEDIA_QUERY_FEATURE_KEY); var _a = mediaQueriesAdapter.getSelectors(), selectAll = _a.selectAll, selectEntities = _a.selectEntities; var ɵ0$1 = function (state) { return state.loaded; }; var getMediaQueriesLoaded = i1.createSelector(getMediaQueriesState, ɵ0$1); var ɵ1$1 = function (state) { return state.error; }; var getMediaQueriesError = i1.createSelector(getMediaQueriesState, ɵ1$1); var ɵ2$1 = function (state) { return selectAll(state); }; var getAllMediaQueries = i1.createSelector(getMediaQueriesState, ɵ2$1); var ɵ3$1 = function (state) { return selectEntities(state); }; var getMediaQueriesEntities = i1.createSelector(getMediaQueriesState, ɵ3$1); var ɵ4$1 = function (state) { return state.selectedId; }; var getSelectedMediaQueryId = i1.createSelector(getMediaQueriesState, ɵ4$1); var ɵ5$1 = function (state) { return state.ids; }; var getMediaQueryIds = i1.createSelector(getMediaQueriesState, ɵ5$1); var ɵ6$1 = function (entities, selectedId) { return entities[selectedId]; }; var getSelectedMediaQuery = i1.createSelector(getMediaQueriesEntities, getSelectedMediaQueryId, ɵ6$1); var NgxMediaQueryService = /** @class */ (function () { function NgxMediaQueryService(store) { this.store = store; } NgxMediaQueryService.prototype.getSelectedMediaQuery$ = function () { return this.store.pipe(i1.select(getSelectedMediaQuery)); }; NgxMediaQueryService.prototype.clearMediaQueries = function () { this.store.dispatch(clearMediaQueries()); }; return NgxMediaQueryService; }()); NgxMediaQueryService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NgxMediaQueryService_Factory() { return new NgxMediaQueryService(i0.ɵɵinject(i1.Store)); }, token: NgxMediaQueryService, providedIn: "root" }); NgxMediaQueryService.decorators = [ { type: i0.Injectable, args: [{ providedIn: 'root' },] } ]; NgxMediaQueryService.ctorParameters = function () { return [ { type: i1.Store } ]; }; var NgxMediaQueryComponent = /** @class */ (function () { function NgxMediaQueryComponent(store) { this.store = store; } NgxMediaQueryComponent.prototype.ngOnInit = function () { this.store.dispatch(loadMediaQueries()); }; NgxMediaQueryComponent.prototype.ngOnDestroy = function () { this.store.dispatch(clearMediaQueries()); }; return NgxMediaQueryComponent; }()); NgxMediaQueryComponent.decorators = [ { type: i0.Component, args: [{ selector: 'lib-ngx-media-query', template: "\n <div libNgxMediaQuery></div>\n " },] } ]; NgxMediaQueryComponent.ctorParameters = function () { return [ { type: i1.Store } ]; }; var nullMediaQuery = { xs: null, sm: null, md: null, lg: null, xl: null, lt_sm: null, lt_md: null, lt_lg: null, lt_xl: null, gt_xs: null, gt_sm: null, gt_md: null, gt_lg: null, }; var screenWidthXl = { xs: false, sm: false, md: false, lg: false, xl: true, lt_sm: false, lt_md: false, lt_lg: false, lt_xl: false, gt_xs: true, gt_sm: true, gt_md: true, gt_lg: true }; var screenWidthLg = { xs: false, sm: false, md: false, lg: true, xl: false, lt_sm: false, lt_md: false, lt_lg: false, lt_xl: true, gt_xs: true, gt_sm: true, gt_md: true, gt_lg: false }; var screenWidthMd = { xs: false, sm: false, md: true, lg: false, xl: false, lt_sm: false, lt_md: false, lt_lg: true, lt_xl: true, gt_xs: true, gt_sm: true, gt_md: false, gt_lg: false }; var screenWidthSm = { xs: false, sm: true, md: false, lg: false, xl: false, lt_sm: false, lt_md: true, lt_lg: true, lt_xl: true, gt_xs: true, gt_sm: false, gt_md: false, gt_lg: false }; var screenWidthXs = { xs: true, sm: false, md: false, lg: false, xl: false, lt_sm: true, lt_md: true, lt_lg: true, lt_xl: true, gt_xs: false, gt_sm: false, gt_md: false, gt_lg: false }; var MediaQueriesDirective = /** @class */ (function () { function MediaQueriesDirective(store) { this.store = store; // screen this.screenQuery = window.matchMedia('screen'); this.screenQueryListener = function () { }; // xs this.upperXsQuery = window.matchMedia('(max-width: 599px)'); this.xsQueryListener = this.screenXsConditional(); // sm this.lowerSmQuery = window.matchMedia('(min-width: 600px)'); this.upperSmQuery = window.matchMedia('(max-width: 959px)'); this.smQueryListener = this.screenSmConditional(); // md this.lowerMdQuery = window.matchMedia('(min-width: 960px)'); this.upperMdQuery = window.matchMedia('(max-width: 1279px)'); this.mdQueryListener = this.screenMdConditional(); // lg this.lowerLgQuery = window.matchMedia('(min-width: 1280px)'); this.upperLgQuery = window.matchMedia('(max-width: 1919px)'); this.lgQueryListener = this.screenLgConditional(); // xl this.lowerXlQuery = window.matchMedia('(min-width: 1920px)'); this.upperXlQuery = window.matchMedia('(max-width: 5000px)'); this.xlQueryListener = this.screenXlConditional(); } MediaQueriesDirective.prototype.ngOnInit = function () { if (typeof window.matchMedia('(min-width: 0px)').addEventListener !== 'undefined') { // screen this.screenQuery.addEventListener('change', this.screenQueryListener); // xs this.upperXsQuery.addEventListener('change', this.xsQueryListener); // sm this.lowerSmQuery.addEventListener('change', this.smQueryListener); this.upperSmQuery.addEventListener('change', this.smQueryListener); // md this.lowerMdQuery.addEventListener('change', this.mdQueryListener); this.upperMdQuery.addEventListener('change', this.mdQueryListener); // lg this.lowerLgQuery.addEventListener('change', this.lgQueryListener); this.upperLgQuery.addEventListener('change', this.lgQueryListener); // xl this.lowerXlQuery.addEventListener('change', this.xlQueryListener); this.upperXlQuery.addEventListener('change', this.xlQueryListener); } else { // As of July 4, 2020 it is expect Safari does not implement // MediaQueryList.addEventListener and so MediaQueryList.addListener // is used if the MediaQueryList.addEventListener is not found. See: // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList. // screen this.screenQuery.addListener(this.screenQueryListener); // xs this.upperXsQuery.addListener(this.xsQueryListener); // sm this.lowerSmQuery.addListener(this.smQueryListener); this.upperSmQuery.addListener(this.smQueryListener); // md this.lowerMdQuery.addListener(this.mdQueryListener); this.upperMdQuery.addListener(this.mdQueryListener); // lg this.lowerLgQuery.addListener(this.lgQueryListener); this.upperLgQuery.addListener(this.lgQueryListener); // xl this.lowerXlQuery.addListener(this.xlQueryListener); this.upperXlQuery.addListener(this.xlQueryListener); } // initialize states this.initializeState(); }; MediaQueriesDirective.prototype.ngOnDestroy = function () { if (typeof window.matchMedia('(min-width: 0px)').removeEventListener !== 'undefined') { // screen this.screenQuery.removeEventListener('change', this.screenQueryListener); // xs this.upperXsQuery.removeEventListener('change', this.xsQueryListener); // sm this.lowerSmQuery.removeEventListener('change', this.smQueryListener); this.upperSmQuery.removeEventListener('change', this.smQueryListener); // md this.lowerMdQuery.removeEventListener('change', this.mdQueryListener); this.upperMdQuery.removeEventListener('change', this.mdQueryListener); // lg this.lowerLgQuery.removeEventListener('change', this.lgQueryListener); this.upperLgQuery.removeEventListener('change', this.lgQueryListener); // xl this.lowerXlQuery.removeEventListener('change', this.xlQueryListener); this.upperXlQuery.removeEventListener('change', this.xlQueryListener); } else { // As of July 4, 2020 it is expect Safari does not implement // MediaQueryList.removeEventListener and so MediaQueryList.removeListener // is used if the MediaQueryList.removeEventListener is not found. See: // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList // screen this.screenQuery.removeListener(this.screenQueryListener); // xs this.upperXsQuery.removeListener(this.xsQueryListener); // sm this.lowerSmQuery.removeListener(this.smQueryListener); this.upperSmQuery.removeListener(this.smQueryListener); // md this.lowerMdQuery.removeListener(this.mdQueryListener); this.upperMdQuery.removeListener(this.mdQueryListener); // lg this.lowerLgQuery.removeListener(this.lgQueryListener); this.upperLgQuery.removeListener(this.lgQueryListener); // xl this.lowerXlQuery.removeListener(this.xlQueryListener); this.upperXlQuery.removeListener(this.xlQueryListener); } }; MediaQueriesDirective.prototype.dispatchMediaQuery = function () { var id = new Date().getTime().toString(); this.store.dispatch(addMediaQuery({ mediaQuery: { id: id, query: this.currentMediaQuery, } })); this.store.dispatch(selectMediaQuery({ id: id })); }; // Class methods. // xs MediaQueriesDirective.prototype.screenXsConditional = function () { var _this = this; return function () { if (_this.screenQuery.matches && _this.upperXsQuery.matches) { _this.notifyStoreScreenWidthXs(); } }; }; MediaQueriesDirective.prototype.notifyStoreScreenWidthXs = function () { this.currentMediaQuery = screenWidthXs; this.dispatchMediaQuery(); }; // sm MediaQueriesDirective.prototype.screenSmConditional = function () { var _this = this; return function () { if (_this.screenQuery.matches && _this.lowerSmQuery.matches && _this.upperSmQuery.matches) { _this.notifyStoreScreenWidthSm(); } }; }; MediaQueriesDirective.prototype.notifyStoreScreenWidthSm = function () { this.currentMediaQuery = screenWidthSm; this.dispatchMediaQuery(); }; // md MediaQueriesDirective.prototype.screenMdConditional = function () { var _this = this; return function () { if (_this.screenQuery.matches && _this.lowerMdQuery.matches && _this.upperMdQuery.matches) { _this.notifyStoreScreenWidthMd(); } }; }; MediaQueriesDirective.prototype.notifyStoreScreenWidthMd = function () { this.currentMediaQuery = screenWidthMd; this.dispatchMediaQuery(); }; // lg MediaQueriesDirective.prototype.screenLgConditional = function () { var _this = this; return function () { if (_this.screenQuery.matches && _this.lowerLgQuery.matches && _this.upperLgQuery.matches) { _this.notifyStoreScreenWidthLg(); } }; }; MediaQueriesDirective.prototype.notifyStoreScreenWidthLg = function () { this.currentMediaQuery = screenWidthLg; this.dispatchMediaQuery(); }; // xl MediaQueriesDirective.prototype.screenXlConditional = function () { var _this = this; return function () { if (_this.screenQuery.matches && _this.lowerXlQuery.matches && _this.upperXlQuery.matches) { _this.notifyStoreScreenWidthXl(); } }; }; MediaQueriesDirective.prototype.notifyStoreScreenWidthXl = function () { this.currentMediaQuery = screenWidthXl; this.dispatchMediaQuery(); }; MediaQueriesDirective.prototype.initializeState = function () { // Initialize the store with a MediaQueryStateInterface // reflecting the size of current user's screen. // Since the media events will not have fired on initialization, // we set the starting state using the window object. if (window.screen && window.innerWidth < 600) { this.notifyStoreScreenWidthXs(); } else if (window.screen && window.innerWidth < 960 && window.innerWidth >= 600) { this.notifyStoreScreenWidthSm(); } else if (window.screen && window.innerWidth < 1280 && window.innerWidth >= 960) { this.notifyStoreScreenWidthMd(); } else if (window.screen && window.innerWidth < 1920 && window.innerWidth >= 960) { this.notifyStoreScreenWidthLg(); } else if (window.screen) { this.notifyStoreScreenWidthXl(); } }; return MediaQueriesDirective; }()); MediaQueriesDirective.decorators = [ { type: i0.Directive, args: [{ selector: '[libNgxMediaQuery]' },] } ]; MediaQueriesDirective.ctorParameters = function () { return [ { type: i1.Store } ]; }; var MediaQueriesEffects = /** @class */ (function () { function MediaQueriesEffects(actions$) { var _this = this; this.actions$ = actions$; this.loadMediaQueries$ = effects.createEffect(function () { return _this.actions$.pipe(effects.ofType(loadMediaQueries), operators.map(function () { // Your custom service 'load' logic goes here. var mediaQueries = _this.loadMediaQueries(); return loadMediaQueriesSuccess({ mediaQueries: mediaQueries }); }), operators.catchError(function (error) { console.error('Error', error); return rxjs.of(loadMediaQueriesFailure({ error: error })); })); }, { dispatch: true, resubscribeOnError: false }); } MediaQueriesEffects.prototype.loadMediaQueries = function () { return []; }; return MediaQueriesEffects; }()); MediaQueriesEffects.decorators = [ { type: i0.Injectable } ]; MediaQueriesEffects.ctorParameters = function () { return [ { type: effects.Actions } ]; }; var NgxMediaQueryModule = /** @class */ (function () { function NgxMediaQueryModule() { } return NgxMediaQueryModule; }()); NgxMediaQueryModule.decorators = [ { type: i0.NgModule, args: [{ declarations: [ NgxMediaQueryComponent, MediaQueriesDirective ], imports: [ i1.StoreModule.forFeature(NGX_MEDIA_QUERY_FEATURE_KEY, NGX_MEDIA_QUERY_REDUCER), effects.EffectsModule.forFeature([MediaQueriesEffects]) ], exports: [NgxMediaQueryComponent] },] } ]; /* * Public API Surface of ngx-media-query */ /** * Generated bundle index. Do not edit. */ exports.NgxMediaQueryComponent = NgxMediaQueryComponent; exports.NgxMediaQueryModule = NgxMediaQueryModule; exports.NgxMediaQueryService = NgxMediaQueryService; exports.nullMediaQuery = nullMediaQuery; exports.screenWidthLg = screenWidthLg; exports.screenWidthMd = screenWidthMd; exports.screenWidthSm = screenWidthSm; exports.screenWidthXl = screenWidthXl; exports.screenWidthXs = screenWidthXs; exports.ɵa = MediaQueriesDirective; exports.ɵb = NGX_MEDIA_QUERY_FEATURE_KEY; exports.ɵc = mediaQueriesAdapter; exports.ɵd = initialMediaQueriesState; exports.ɵe = NGX_MEDIA_QUERY_REDUCER; exports.ɵg = loadMediaQueries; exports.ɵh = loadMediaQueriesSuccess; exports.ɵi = selectMediaQuery; exports.ɵj = loadMediaQueriesFailure; exports.ɵk = addMediaQuery; exports.ɵl = setMediaQuery; exports.ɵm = upsertMediaQuery; exports.ɵn = addMediaQueries; exports.ɵo = upsertMediaQueries; exports.ɵp = updateMediaQuery; exports.ɵq = updateMediaQueries; exports.ɵr = mapMediaQueries; exports.ɵs = deleteMediaQuery; exports.ɵt = deleteMediaQueries; exports.ɵu = deleteMediaQueriesByPredicate; exports.ɵv = clearMediaQueries; exports.ɵw = MediaQueriesEffects; Object.defineProperty(exports, '__esModule', { value: true }); }))); //# sourceMappingURL=scriptloom-ngx-media-query.umd.js.map