| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- import { BreakPointString } from '../models'
- interface BreakPointTypeOption<T> {
- xs?: T
- sm?: T
- md?: T
- lg?: T
- }
- export class BreakPointType<T> {
- private readonly options: BreakPointTypeOption<T>
- constructor(option: BreakPointTypeOption<T>) {
- this.options = option
- }
- getValue(currentBreakPoint: BreakPointString) {
- switch (currentBreakPoint) {
- case 'xs':
- return this.options.xs;
- case 'sm':
- return this.options.sm;
- case 'md':
- return this.options.md;
- case 'lg':
- return this.options.lg;
- default:
- return undefined;
- }
- }
- }
- export class YTBreakPoint {
- static readonly KEY = 'bp'
- private static declare instance: YTBreakPoint
- static getInstance() {
- if (!YTBreakPoint.instance) {
- YTBreakPoint.instance = new YTBreakPoint()
- }
- return YTBreakPoint.instance
- }
- setBreakPoint(width: number) {
- const vpWidth = px2vp(width)
- let bp = ''
- if (vpWidth < 320) {
- bp = 'xs'
- } else if (vpWidth < 600) {
- bp = 'sm'
- } else if (vpWidth < 840) {
- bp = 'md'
- } else {
- bp = 'lg'
- }
- AppStorage.setOrCreate<string>(YTBreakPoint.KEY, bp)
- }
- getBreakPoint() {
- return AppStorage.get<string>(YTBreakPoint.KEY)
- }
- }
|