https://utunote.com/_content/Microsoft.FluentUI.AspNetCore.Compone…/Grid/FluentGrid.hi1gwvth64.razor.js

1function GetMediaQueries() {
2    return [
3        { id: 'xs', items: document._fluentGrid.mediaXS, query: '(max-width: 599.98px)' },
4        { id: 'sm', items: document._fluentGrid.mediaSM, query: '(min-width: 600px) and (max-width: 959.98px)' },
5        { id: 'md', items: document._fluentGrid.mediaMD, query: '(min-width: 960px) and (max-width: 1279.98px)' },
6        { id: 'lg', items: document._fluentGrid.mediaLG, query: '(min-width: 1280px) and (max-width: 1919.98px)' },
7        { id: 'xl', items: document._fluentGrid.mediaXL, query: '(min-width: 1920px) and (max-width: 2559.98px)' },
8        { id: 'xxl', items: document._fluentGrid.mediaXXL, query: '(min-width: 2560px)' },
9    ];
10}
11
12export function FluentGridInitialize(id, dotNetHelper) {
13
14    // Create a single instance of the media queries
15    if (!document._fluentGrid) {
16        document._fluentGrid = {
17            mediaXS: [],
18            mediaSM: [],
19            mediaMD: [],
20            mediaLG: [],
21            mediaXL: [],
22            mediaXXL: [],
23        }
24
25        // Add event listeners for each media query
26        GetMediaQueries().forEach((mediaQuery) => {

27            window.matchMedia(mediaQuery.query)
28                  .addEventListener('change', media => {
29                      if (media.matches) {
30                          mediaQuery.items.forEach((item) => {
31                              item.dotNetHelper.invokeMethodAsync('FluentGrid_MediaChangedAsync', mediaQuery.id);
32                          });
33                      }
34                  });
35        });
36    }
37
38    // Add the item to each media query
39    document._fluentGrid.mediaXS.push({ id: id, dotNetHelper: dotNetHelper });
40    document._fluentGrid.mediaSM.push({ id: id, dotNetHelper: dotNetHelper });
41    document._fluentGrid.mediaMD.push({ id: id, dotNetHelper: dotNetHelper });
42    document._fluentGrid.mediaLG.push({ id: id, dotNetHelper: dotNetHelper });
43    document._fluentGrid.mediaXL.push({ id: id, dotNetHelper: dotNetHelper });
44    document._fluentGrid.mediaXXL.push({ id: id, dotNetHelper: dotNetHelper });
45
46    // First check
47    GetMediaQueries().forEach((mediaQuery) => {
48        if (window.matchMedia(mediaQuery.query

48).matches) {
49            dotNetHelper.invokeMethodAsync('FluentGrid_MediaChangedAsync', mediaQuery.id);
50        }
51    });
52}
53
54export function FluentGridCleanup(id) {
55    if (document._fluentGrid) {
56        RemoveItem(document._fluentGrid.mediaXS, id);
57        RemoveItem(document._fluentGrid.mediaSM, id);
58        RemoveItem(document._fluentGrid.mediaMD, id);
59        RemoveItem(document._fluentGrid.mediaLG, id);
60        RemoveItem(document._fluentGrid.mediaXL, id);
61        RemoveItem(document._fluentGrid.mediaXXL, id);
62    }
63}
64
65// Remove the Array item where item.id is found
66function RemoveItem(array, id) {
67    for (var i = array.length - 1; i >= 0; i--) {
68        if (array[i].id === id) {
69            array.splice(i, 1);
70        }
71    }
72}