Skip to content
This repository was archived by the owner on Nov 17, 2020. It is now read-only.

Commit 83f1a0d

Browse files
chadianchadian
authored
Add height dimension to breakpoint definitions (#23)
1 parent 959ca9c commit 83f1a0d

File tree

14 files changed

+291
-98
lines changed

14 files changed

+291
-98
lines changed

‎addon/components/fill-up.js

+32-19
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,38 @@ export default Component.extend({
2626
this.set('width', width);
2727
this.set('height', height);
2828

29-
this.onChange({
30-
element: this.fillUpElement,
31-
width: this.width,
32-
height: this.height,
33-
breakpoints: this.breakpointsMap
34-
});
35-
36-
if (this.breakpoints) {
37-
const map = definitionsMap(this.width, this.breakpoints);
38-
39-
this.set('breakpointsMap', map);
40-
41-
for (const key in map) {
42-
const breakpointIsSet = map[key];
43-
if (breakpointIsSet) {
44-
element.setAttribute(this.attributePrefix + key, '');
45-
} else {
46-
element.removeAttribute(this.attributePrefix + key);
47-
}
29+
this.triggerOnChangeHandler();
30+
this.handleBreakpointChanges();
31+
}
32+
},
33+
34+
triggerOnChangeHandler() {
35+
if (typeof this.onChange !== 'function') {
36+
return;
37+
}
38+
39+
this.onChange({
40+
element: this.fillUpElement,
41+
width: this.width,
42+
height: this.height,
43+
breakpoints: this.breakpointsMap
44+
});
45+
},
46+
47+
handleBreakpointChanges() {
48+
if (this.breakpoints) {
49+
const dimensions = { width: this.width, height: this.height };
50+
const map = definitionsMap(dimensions, this.breakpoints);
51+
52+
this.set('breakpointsMap', map);
53+
54+
// make changes to element
55+
for (const key in map) {
56+
const breakpointIsSet = map[key];
57+
if (breakpointIsSet) {
58+
this.fillUpElement.setAttribute(this.attributePrefix + key, '');
59+
} else {
60+
this.fillUpElement.removeAttribute(this.attributePrefix + key);
4861
}
4962
}
5063
}

‎addon/definitions.js

+31-16
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { assert } from '@ember/debug';
2+
13
import {
24
lt as _lt,
35
lte as _lte,
@@ -7,39 +9,52 @@ import {
79
betweenRightClosed
810
} from './utils';
911

10-
function buildDefinition(comparisonFunction) {
12+
function buildDefinition(comparisonFunction, dimension = 'width') {
13+
dimension = typeof dimension === 'string' ? dimension.toLowerCase() : dimension;
14+
15+
assert(
16+
`Breakpoint definition dimensions must be a string defined as 'width' or 'height', received ${dimension}`,
17+
dimension === 'width' || dimension === 'height'
18+
);
19+
1120
return {
12-
comparison: comparisonFunction
21+
comparison: comparisonFunction,
22+
dimension
1323
};
1424
}
1525

16-
export function lt(definedValue) {
17-
return buildDefinition(value => _lt(value, definedValue));
26+
export function lt(definedValue, { dimension } = {}) {
27+
return buildDefinition(value => _lt(value, definedValue), dimension);
1828
}
1929

20-
export function lte(definedValue) {
21-
return buildDefinition(value => _lte(value, definedValue));
30+
export function lte(definedValue, { dimension } = {}) {
31+
return buildDefinition(value => _lte(value, definedValue), dimension);
2232
}
2333

24-
export function gt(definedValue) {
25-
return buildDefinition(value => _gt(value, definedValue));
34+
export function gt(definedValue, { dimension } = {}) {
35+
return buildDefinition(value => _gt(value, definedValue), dimension);
2636
}
2737

28-
export function gte(definedValue) {
29-
return buildDefinition(value => _gte(value, definedValue));
38+
export function gte(definedValue, { dimension } = {}) {
39+
return buildDefinition(value => _gte(value, definedValue), dimension);
3040
}
3141

32-
export function eq(definedValue) {
33-
return buildDefinition(value => _eq(value, definedValue));
42+
export function eq(definedValue, { dimension } = {}) {
43+
return buildDefinition(value => _eq(value, definedValue), dimension);
3444
}
3545

36-
export function between(firstDefined, secondDefined) {
37-
return buildDefinition(value => betweenRightClosed(value, firstDefined, secondDefined));
46+
export function between(firstDefined, secondDefined, { dimension } = {}) {
47+
return buildDefinition(
48+
value => betweenRightClosed(value, firstDefined, secondDefined),
49+
dimension
50+
);
3851
}
3952

40-
export function definitionsMap(currentValue, definitions) {
53+
export function definitionsMap({ width, height }, definitions) {
4154
return Object.keys(definitions).reduce((map, breakpointLabel) => {
42-
const { comparison } = definitions[breakpointLabel];
55+
const { comparison, dimension } = definitions[breakpointLabel];
56+
const currentValue = dimension === 'width' ? width : height || 0;
57+
4358
return {
4459
...map,
4560
[breakpointLabel]: comparison(currentValue)

‎addon/helpers/fill-up-between.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { helper } from '@ember/component/helper';
22
import { between } from 'ember-fill-up/definitions';
33

4-
export function fillUpBetween([leftBound, rightBound]) {
5-
return between(leftBound, rightBound);
4+
export function fillUpBetween([leftBound, rightBound], { dimension } = {}) {
5+
return between(leftBound, rightBound, { dimension });
66
}
77

88
export default helper(fillUpBetween);

‎addon/helpers/fill-up-eq.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { helper } from '@ember/component/helper';
22
import { eq } from 'ember-fill-up/definitions';
33

4-
export function fillUpEq([value]) {
5-
return eq(value);
4+
export function fillUpEq([value], { dimension } = {}) {
5+
return eq(value, { dimension });
66
}
77

88
export default helper(fillUpEq);

‎addon/helpers/fill-up-gt.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { helper } from '@ember/component/helper';
22
import { gt } from 'ember-fill-up/definitions';
33

4-
export function fillUpGt([value]) {
5-
return gt(value);
4+
export function fillUpGt([value], { dimension } = {}) {
5+
return gt(value, { dimension });
66
}
77

88
export default helper(fillUpGt);

‎addon/helpers/fill-up-gte.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { helper } from '@ember/component/helper';
22
import { gte } from 'ember-fill-up/definitions';
33

4-
export function fillUpGte([value]) {
5-
return gte(value);
4+
export function fillUpGte([value], { dimension } = {}) {
5+
return gte(value, { dimension });
66
}
77

88
export default helper(fillUpGte);

‎addon/helpers/fill-up-lt.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { helper } from '@ember/component/helper';
22
import { lt } from 'ember-fill-up/definitions';
33

4-
export function fillUpLt([value]) {
5-
return lt(value);
4+
export function fillUpLt([value], { dimension } = {}) {
5+
return lt(value, { dimension });
66
}
77

88
export default helper(fillUpLt);

‎addon/helpers/fill-up-lte.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { helper } from '@ember/component/helper';
22
import { lte } from 'ember-fill-up/definitions';
33

4-
export function fillUpLte([value]) {
5-
return lte(value);
4+
export function fillUpLte([value], { dimension } = {}) {
5+
return lte(value, { dimension });
66
}
77

88
export default helper(fillUpLte);

‎tests/dummy/app/components/volume.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Component from '@ember/component';
2+
import layout from '../templates/components/volume';
3+
4+
export default Component.extend({
5+
layout,
6+
7+
tagName: ''
8+
});

‎tests/dummy/app/components/weather.js

+6
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export default Component.extend({
5858

5959
const city = faker.random.arrayElement(cities);
6060
this.set('city', city);
61+
6162
// remove city from the array so it's not reused
6263
cities.splice(cities.indexOf(city), 1);
6364

@@ -77,5 +78,10 @@ export default Component.extend({
7778
const fontSize = Math.min(Number(width) / 12, 65);
7879
this.set('fontSize', fontSize);
7980
}
81+
},
82+
83+
willDestroy() {
84+
// put the city back so we don't run out of cities
85+
cities.push(this.city);
8086
}
8187
});

‎tests/dummy/app/styles/app.css

+44
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,56 @@ body {
4343
width: 250px;
4444
}
4545

46+
.resize-area.vertical {
47+
resize: vertical;
48+
}
49+
4650
.resize-area > * {
4751
margin: auto;
4852
}
4953

5054
/* components */
5155

56+
/* volume */
57+
.volume {
58+
width: 150px;
59+
border: 1px solid black;
60+
display: flex;
61+
align-items: center;
62+
justify-items: center;
63+
text-align: center;
64+
min-height: 3rem;
65+
}
66+
67+
.volume[fill-up-off] {
68+
font-size: 3rem;
69+
background-color: #00044F;
70+
}
71+
72+
.volume[fill-up-quiet] {
73+
font-size: 5rem;
74+
background-color: #00077F;
75+
}
76+
77+
.volume[fill-up-loud] {
78+
font-size: 8rem;
79+
background-color: #000AAF;
80+
}
81+
82+
.volume[fill-up-loudest] {
83+
font-size: 13rem;
84+
background-color: #000FFF;
85+
}
86+
87+
.demo-volume-bottom-margin {
88+
margin-bottom: 400px;
89+
}
90+
91+
.demo-volume-bottom-margin > .resize-area {
92+
height: 100px;
93+
min-height: 100px;
94+
}
95+
5296
/* github card */
5397
.github-card {
5498
width: 100%;

‎tests/dummy/app/templates/components/volume.hbs

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<FillUp
2+
class="volume demo-bottom-margin"
3+
@breakpoints={{hash
4+
off=(fill-up-between 0 151 dimension="height")
5+
quiet=(fill-up-between 151 300 dimension="height")
6+
loud=(fill-up-between 300 450 dimension="height")
7+
loudest=(fill-up-gte 450 dimension="height")
8+
}}
9+
as |F|>
10+
{{#if F.breakpoints.off}}
11+
🔇
12+
{{else if F.breakpoints.quiet}}
13+
🔈
14+
{{else if F.breakpoints.loud}}
15+
🔉
16+
{{else if F.breakpoints.loudest}}
17+
🔊
18+
{{/if}}
19+
</FillUp>

‎tests/dummy/app/templates/single.hbs

+6
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,10 @@
88

99
<div class="resize-area">
1010
<Article />
11+
</div>
12+
13+
<div class="demo-volume-bottom-margin">
14+
<div class="resize-area vertical">
15+
<Volume/>
16+
</div>
1117
</div>

0 commit comments

Comments
 (0)