forked from code-dot-org/code-dot-org
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathresponsive.jsx
More file actions
118 lines (107 loc) · 3.38 KB
/
Copy pathresponsive.jsx
File metadata and controls
118 lines (107 loc) · 3.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/* A very simple responsive layout system.
*/
import $ from 'jquery';
import * as utils from '../utils';
/**
* Gets the container width.
* Returns either a number (e.g. 1170) or a string (e.g. "97%").
*/
export function getResponsiveContainerWidth() {
const windowWidth = $(window).width();
if (windowWidth >= 1200) {
return 1170;
} else {
return '97%';
}
}
// makeEnum comes from apps/src/utils
const ResponsiveSize = utils.makeEnum('lg', 'md', 'sm', 'xs');
// Window widths that are the starting points for each width category.
const responsiveWindowWidth = {
[ResponsiveSize.lg]: 1024,
[ResponsiveSize.md]: 820,
[ResponsiveSize.sm]: 650,
[ResponsiveSize.xs]: 0,
};
/**
* Returns the window width that is the starting point for a width category.
*
* @param {string} id - "xs", "sm", "md", or "lg"
*/
export function getResponsiveWindowWidth(category) {
return responsiveWindowWidth[category];
}
/**
* Returns whether provided category is active, given current window width.
* e.g. called with "md" when window width >= 820px returns true.
*
* @param {string} id - "xs", "sm", "md", or "lg"
*/
export function isResponsiveCategoryActive(category) {
return $(window).width() >= responsiveWindowWidth[category];
}
/**
* Returns whether provided category is inactive, given current window width.
* e.g. called with "md" when window width < 820px returns false.
*
* @param {string} id - "xs", "sm", "md", or "lg"
*/
export function isResponsiveCategoryInactive(category) {
return $(window).width() < responsiveWindowWidth[category];
}
/**
* From a set of values provided, returns the appropriate one for the current
* window width.
* Note that we default to the largest-provided value that is not for a width
* that's greater than the current window width. e.g. If the window width is
* "md" then we use the provided "md" width, otherwise the provided "sm" width,
* otherwise the provided "xs" width.
* Note also that when the value being returned is a number, it's converted into
* a percentage string. e.g. 4 becomes "4%"
*
* @param {Object} values - A set of values from which we want one.
* @param {number|string} values.xs - Value returned on extra-small layout.
* @param {number|string} values.sm - Value returned on small layout.
* @param {number|string} values.md - Value returned on medium layout.
* @param {number|string} values.lg - Value returned on large layout.
*/
export function getResponsiveValue(values) {
const windowWidth = $(window).width();
let value;
if (windowWidth >= responsiveWindowWidth[ResponsiveSize.lg]) {
if (values.lg) {
value = values.lg;
} else if (values.md) {
value = values.md;
} else if (values.sm) {
value = values.sm;
} else {
value = values.xs;
}
} else if (windowWidth >= responsiveWindowWidth[ResponsiveSize.md]) {
if (values.md) {
value = values.md;
} else if (values.sm) {
value = values.sm;
} else {
value = values.xs;
}
} else if (windowWidth >= responsiveWindowWidth[ResponsiveSize.sm]) {
if (values.sm) {
value = values.sm;
} else {
value = values.xs;
}
} else if (values.xs) {
value = values.xs;
}
if (value) {
if (typeof value === 'number') {
return `${value}%`;
} else if (typeof value === 'string') {
return value;
} else if (typeof value === 'object') {
return value;
}
}
}