angular2gridsterv3
Version:
62 lines • 10.8 kB
JavaScript
import { of, fromEvent, merge } from 'rxjs';
import { debounceTime, map, distinctUntilChanged } from 'rxjs/operators';
export class GridsterOptions {
constructor(config, gridsterElement) {
this.defaults = {
lanes: 5,
direction: 'horizontal',
widthHeightRatio: 1,
shrink: false,
responsiveView: true,
responsiveSizes: false,
responsiveToParent: false,
dragAndDrop: true,
resizable: false,
useCSSTransforms: false,
floating: true,
tolerance: 'pointer'
};
this.responsiveOptions = [];
this.breakpointsMap = {
sm: 576,
md: 768,
lg: 992,
xl: 1200 // Extra large
};
const responsiveContainer = config.responsiveToParent ? gridsterElement : window;
this.basicOptions = config;
this.responsiveOptions = this.extendResponsiveOptions(config.responsiveOptions || []);
this.change = merge(of(this.getOptionsByWidth(this.getElementWidth(responsiveContainer))), fromEvent(window, 'resize').pipe(debounceTime(config.responsiveDebounce || 0), map((event) => this.getOptionsByWidth(this.getElementWidth(responsiveContainer))))).pipe(distinctUntilChanged(null, (options) => options.minWidth));
}
getOptionsByWidth(width) {
let i = 0;
let options = Object.assign({}, this.defaults, this.basicOptions);
while (this.responsiveOptions[i]) {
if (this.responsiveOptions[i].minWidth <= width) {
options = this.responsiveOptions[i];
}
i++;
}
return options;
}
extendResponsiveOptions(responsiveOptions) {
return responsiveOptions
// responsive options are valid only with "breakpoint" property
.filter(options => options.breakpoint)
// set default minWidth if not given
.map((options) => {
return Object.assign({
minWidth: this.breakpointsMap[options.breakpoint] || 0
}, options);
})
.sort((curr, next) => curr.minWidth - next.minWidth)
.map((options) => Object.assign({}, this.defaults, this.basicOptions, options));
}
getElementWidth($element) {
if ($element === window) {
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
return $element.clientWidth;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiR3JpZHN0ZXJPcHRpb25zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhcjJncmlkc3RlcnYzL3NyYy9saWIvR3JpZHN0ZXJPcHRpb25zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBYyxFQUFFLEVBQUUsU0FBUyxFQUFRLEtBQUssRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUM5RCxPQUFPLEVBQUUsWUFBWSxFQUFFLEdBQUcsRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBSXpFLE1BQU0sT0FBTyxlQUFlO0lBeUN4QixZQUFZLE1BQXdCLEVBQUUsZUFBNEI7UUEzQmxFLGFBQVEsR0FBcUI7WUFDekIsS0FBSyxFQUFFLENBQUM7WUFDUixTQUFTLEVBQUUsWUFBWTtZQUN2QixnQkFBZ0IsRUFBRSxDQUFDO1lBQ25CLE1BQU0sRUFBRSxLQUFLO1lBQ2IsY0FBYyxFQUFFLElBQUk7WUFDcEIsZUFBZSxFQUFFLEtBQUs7WUFDdEIsa0JBQWtCLEVBQUUsS0FBSztZQUN6QixXQUFXLEVBQUUsSUFBSTtZQUNqQixTQUFTLEVBQUUsS0FBSztZQUNoQixnQkFBZ0IsRUFBRSxLQUFLO1lBQ3ZCLFFBQVEsRUFBRSxJQUFJO1lBQ2QsU0FBUyxFQUFFLFNBQVM7U0FDdkIsQ0FBQztRQUlGLHNCQUFpQixHQUE0QixFQUFFLENBQUM7UUFHaEQsbUJBQWMsR0FBRztZQUNiLEVBQUUsRUFBRSxHQUFHO1lBQ1AsRUFBRSxFQUFFLEdBQUc7WUFDUCxFQUFFLEVBQUUsR0FBRztZQUNQLEVBQUUsRUFBRSxJQUFJLENBQUMsY0FBYztTQUMxQixDQUFDO1FBR0UsTUFBTSxtQkFBbUIsR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO1FBRWpGLElBQUksQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDO1FBQzNCLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsdUJBQXVCLENBQUMsTUFBTSxDQUFDLGlCQUFpQixJQUFJLEVBQUUsQ0FBQyxDQUFDO1FBRXRGLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUNYLEVBQUUsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsRUFDckUsU0FBUyxDQUFDLE1BQU0sRUFBRSxRQUFRLENBQUMsQ0FBQyxJQUFJLENBQzVCLFlBQVksQ0FBQyxNQUFNLENBQUMsa0JBQWtCLElBQUksQ0FBQyxDQUFDLEVBQzVDLEdBQUcsQ0FBQyxDQUFDLEtBQVksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxDQUFDLENBQzNGLENBQ0osQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsSUFBSSxFQUFFLENBQUMsT0FBWSxFQUFFLEVBQUUsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQztJQUMvRSxDQUFDO0lBRUQsaUJBQWlCLENBQUMsS0FBYTtRQUMzQixJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDVixJQUFJLE9BQU8sR0FBcUIsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFFcEYsT0FBTyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDOUIsSUFBSSxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLENBQUMsUUFBUSxJQUFJLEtBQUssRUFBRTtnQkFDN0MsT0FBTyxHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLENBQUMsQ0FBQzthQUN2QztZQUNELENBQUMsRUFBRSxDQUFDO1NBQ1A7UUFFRCxPQUFPLE9BQU8sQ0FBQztJQUNuQixDQUFDO0lBRU8sdUJBQXVCLENBQUMsaUJBQTBDO1FBQ3RFLE9BQU8saUJBQWlCO1lBQ3BCLCtEQUErRDthQUM5RCxNQUFNLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQUMsVUFBVSxDQUFDO1lBQ3RDLG9DQUFvQzthQUNuQyxHQUFHLENBQUMsQ0FBQyxPQUFPLEVBQUUsRUFBRTtZQUNiLE9BQU8sTUFBTSxDQUFDLE1BQU0sQ0FBQztnQkFDakIsUUFBUSxFQUFFLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUM7YUFDekQsRUFBRSxPQUFPLENBQUMsQ0FBQztRQUNoQixDQUFDLENBQUM7YUFDRCxJQUFJLENBQUMsQ0FBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7YUFDbkQsR0FBRyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBbUIsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFDMUcsQ0FBQztJQUVPLGVBQWUsQ0FBQyxRQUFhO1FBQ2pDLElBQUksUUFBUSxLQUFLLE1BQU0sRUFBRTtZQUNyQixPQUFPLE1BQU0sQ0FBQyxVQUFVLElBQUksUUFBUSxDQUFDLGVBQWUsQ0FBQyxXQUFXLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7U0FDakc7UUFFRCxPQUFPLFFBQVEsQ0FBQyxXQUFXLENBQUM7SUFDaEMsQ0FBQztDQUNKIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgT2JzZXJ2YWJsZSwgb2YsIGZyb21FdmVudCwgcGlwZSwgbWVyZ2UgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCBtYXAsIGRpc3RpbmN0VW50aWxDaGFuZ2VkIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xyXG5cclxuaW1wb3J0IHsgSUdyaWRzdGVyT3B0aW9ucyB9IGZyb20gJy4vSUdyaWRzdGVyT3B0aW9ucyc7XHJcblxyXG5leHBvcnQgY2xhc3MgR3JpZHN0ZXJPcHRpb25zIHtcclxuICAgIGRpcmVjdGlvbjogc3RyaW5nO1xyXG4gICAgbGFuZXM6IG51bWJlcjtcclxuICAgIHdpZHRoSGVpZ2h0UmF0aW86IG51bWJlcjtcclxuICAgIGhlaWdodFRvRm9udFNpemVSYXRpbzogbnVtYmVyO1xyXG4gICAgcmVzcG9uc2l2ZVZpZXc6IGJvb2xlYW47XHJcbiAgICByZXNwb25zaXZlU2l6ZXM6IGJvb2xlYW47XHJcbiAgICByZXNwb25zaXZlVG9QYXJlbnQ6IGJvb2xlYW47XHJcbiAgICBkcmFnQW5kRHJvcDogYm9vbGVhbjtcclxuICAgIHJlc2l6YWJsZTogYm9vbGVhbjtcclxuICAgIHNocmluazogYm9vbGVhbjtcclxuICAgIG1pbldpZHRoOiBudW1iZXI7XHJcbiAgICB1c2VDU1NUcmFuc2Zvcm1zOiBib29sZWFuO1xyXG5cclxuICAgIGRlZmF1bHRzOiBJR3JpZHN0ZXJPcHRpb25zID0ge1xyXG4gICAgICAgIGxhbmVzOiA1LFxyXG4gICAgICAgIGRpcmVjdGlvbjogJ2hvcml6b250YWwnLFxyXG4gICAgICAgIHdpZHRoSGVpZ2h0UmF0aW86IDEsXHJcbiAgICAgICAgc2hyaW5rOiBmYWxzZSxcclxuICAgICAgICByZXNwb25zaXZlVmlldzogdHJ1ZSxcclxuICAgICAgICByZXNwb25zaXZlU2l6ZXM6IGZhbHNlLFxyXG4gICAgICAgIHJlc3BvbnNpdmVUb1BhcmVudDogZmFsc2UsXHJcbiAgICAgICAgZHJhZ0FuZERyb3A6IHRydWUsXHJcbiAgICAgICAgcmVzaXphYmxlOiBmYWxzZSxcclxuICAgICAgICB1c2VDU1NUcmFuc2Zvcm1zOiBmYWxzZSxcclxuICAgICAgICBmbG9hdGluZzogdHJ1ZSxcclxuICAgICAgICB0b2xlcmFuY2U6ICdwb2ludGVyJ1xyXG4gICAgfTtcclxuXHJcbiAgICBjaGFuZ2U6IE9ic2VydmFibGU8SUdyaWRzdGVyT3B0aW9ucz47XHJcblxyXG4gICAgcmVzcG9uc2l2ZU9wdGlvbnM6IEFycmF5PElHcmlkc3Rlck9wdGlvbnM+ID0gW107XHJcbiAgICBiYXNpY09wdGlvbnM6IElHcmlkc3Rlck9wdGlvbnM7XHJcblxyXG4gICAgYnJlYWtwb2ludHNNYXAgPSB7XHJcbiAgICAgICAgc206IDU3NiwgLy8gU21hbGwgZGV2aWNlc1xyXG4gICAgICAgIG1kOiA3NjgsIC8vIE1lZGl1bSBkZXZpY2VzXHJcbiAgICAgICAgbGc6IDk5MiwgLy8gTGFyZ2UgZGV2aWNlc1xyXG4gICAgICAgIHhsOiAxMjAwIC8vIEV4dHJhIGxhcmdlXHJcbiAgICB9O1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKGNvbmZpZzogSUdyaWRzdGVyT3B0aW9ucywgZ3JpZHN0ZXJFbGVtZW50OiBIVE1MRWxlbWVudCkge1xyXG4gICAgICAgIGNvbnN0IHJlc3BvbnNpdmVDb250YWluZXIgPSBjb25maWcucmVzcG9uc2l2ZVRvUGFyZW50ID8gZ3JpZHN0ZXJFbGVtZW50IDogd2luZG93O1xyXG5cclxuICAgICAgICB0aGlzLmJhc2ljT3B0aW9ucyA9IGNvbmZpZztcclxuICAgICAgICB0aGlzLnJlc3BvbnNpdmVPcHRpb25zID0gdGhpcy5leHRlbmRSZXNwb25zaXZlT3B0aW9ucyhjb25maWcucmVzcG9uc2l2ZU9wdGlvbnMgfHwgW10pO1xyXG5cclxuICAgICAgICB0aGlzLmNoYW5nZSA9IG1lcmdlKFxyXG4gICAgICAgICAgICAgICAgb2YodGhpcy5nZXRPcHRpb25zQnlXaWR0aCh0aGlzLmdldEVsZW1lbnRXaWR0aChyZXNwb25zaXZlQ29udGFpbmVyKSkpLFxyXG4gICAgICAgICAgICAgICAgZnJvbUV2ZW50KHdpbmRvdywgJ3Jlc2l6ZScpLnBpcGUoXHJcbiAgICAgICAgICAgICAgICAgICAgZGVib3VuY2VUaW1lKGNvbmZpZy5yZXNwb25zaXZlRGVib3VuY2UgfHwgMCksXHJcbiAgICAgICAgICAgICAgICAgICAgbWFwKChldmVudDogRXZlbnQpID0+IHRoaXMuZ2V0T3B0aW9uc0J5V2lkdGgodGhpcy5nZXRFbGVtZW50V2lkdGgocmVzcG9uc2l2ZUNvbnRhaW5lcikpKVxyXG4gICAgICAgICAgICAgICAgKVxyXG4gICAgICAgICAgICApLnBpcGUoZGlzdGluY3RVbnRpbENoYW5nZWQobnVsbCwgKG9wdGlvbnM6IGFueSkgPT4gb3B0aW9ucy5taW5XaWR0aCkpO1xyXG4gICAgfVxyXG5cclxuICAgIGdldE9wdGlvbnNCeVdpZHRoKHdpZHRoOiBudW1iZXIpOiBJR3JpZHN0ZXJPcHRpb25zIHtcclxuICAgICAgICBsZXQgaSA9IDA7XHJcbiAgICAgICAgbGV0IG9wdGlvbnM6IElHcmlkc3Rlck9wdGlvbnMgPSBPYmplY3QuYXNzaWduKHt9LCB0aGlzLmRlZmF1bHRzLCB0aGlzLmJhc2ljT3B0aW9ucyk7XHJcblxyXG4gICAgICAgIHdoaWxlICh0aGlzLnJlc3BvbnNpdmVPcHRpb25zW2ldKSB7XHJcbiAgICAgICAgICAgIGlmICh0aGlzLnJlc3BvbnNpdmVPcHRpb25zW2ldLm1pbldpZHRoIDw9IHdpZHRoKSB7XHJcbiAgICAgICAgICAgICAgICBvcHRpb25zID0gdGhpcy5yZXNwb25zaXZlT3B0aW9uc1tpXTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICBpKys7XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICByZXR1cm4gb3B0aW9ucztcclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIGV4dGVuZFJlc3BvbnNpdmVPcHRpb25zKHJlc3BvbnNpdmVPcHRpb25zOiBBcnJheTxJR3JpZHN0ZXJPcHRpb25zPik6IEFycmF5PElHcmlkc3Rlck9wdGlvbnM+IHtcclxuICAgICAgICByZXR1cm4gcmVzcG9uc2l2ZU9wdGlvbnNcclxuICAgICAgICAgICAgLy8gcmVzcG9uc2l2ZSBvcHRpb25zIGFyZSB2YWxpZCBvbmx5IHdpdGggXCJicmVha3BvaW50XCIgcHJvcGVydHlcclxuICAgICAgICAgICAgLmZpbHRlcihvcHRpb25zID0+IG9wdGlvbnMuYnJlYWtwb2ludClcclxuICAgICAgICAgICAgLy8gc2V0IGRlZmF1bHQgbWluV2lkdGggaWYgbm90IGdpdmVuXHJcbiAgICAgICAgICAgIC5tYXAoKG9wdGlvbnMpID0+IHtcclxuICAgICAgICAgICAgICAgIHJldHVybiBPYmplY3QuYXNzaWduKHtcclxuICAgICAgICAgICAgICAgICAgICBtaW5XaWR0aDogdGhpcy5icmVha3BvaW50c01hcFtvcHRpb25zLmJyZWFrcG9pbnRdIHx8IDBcclxuICAgICAgICAgICAgICAgIH0sIG9wdGlvbnMpO1xyXG4gICAgICAgICAgICB9KVxyXG4gICAgICAgICAgICAuc29ydCgoY3VyciwgbmV4dCkgPT4gY3Vyci5taW5XaWR0aCAtIG5leHQubWluV2lkdGgpXHJcbiAgICAgICAgICAgIC5tYXAoKG9wdGlvbnMpID0+IDxJR3JpZHN0ZXJPcHRpb25zPk9iamVjdC5hc3NpZ24oe30sIHRoaXMuZGVmYXVsdHMsIHRoaXMuYmFzaWNPcHRpb25zLCBvcHRpb25zKSk7XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBnZXRFbGVtZW50V2lkdGgoJGVsZW1lbnQ6IGFueSkge1xyXG4gICAgICAgIGlmICgkZWxlbWVudCA9PT0gd2luZG93KSB7XHJcbiAgICAgICAgICAgIHJldHVybiB3aW5kb3cuaW5uZXJXaWR0aCB8fCBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xpZW50V2lkdGggfHwgZG9jdW1lbnQuYm9keS5jbGllbnRXaWR0aDtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIHJldHVybiAkZWxlbWVudC5jbGllbnRXaWR0aDtcclxuICAgIH1cclxufVxyXG4iXX0=