Skip to content

Commit 33ae68f

Browse files
ZeeCoderZeeCoder
committed
Improved browser support
- Improved browser support: - Object.assign replacement - Removed forEach calls on NodeList objects - Started works on a new demo
1 parent 310152c commit 33ae68f

15 files changed

+132
-31
lines changed

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# CHANGELOG
22

3+
## 1.2.2 (2017-03-02)
4+
5+
- Improved browser support:
6+
- Object.assign replacement
7+
- Removed forEach calls on NodeList objects
8+
- Started works on a new demo
9+
310
## 1.2.1 (2017-03-01)
411

512
- README update

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ anything in it can change at any time. (Including minor / patch releases.)
3434

3535
## Supported Browsers
3636

37-
- Works with all modern browsers
37+
- Works with all modern browsers and IE9+
3838

3939
## Notes
4040
- Lead with ## WHAT (image) followed by ## WHY

‎demo/browserslist

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
IE > 9
2+
> 1%

‎demo/gulpfile.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,17 @@ const path = require('path');
66
const postcss = require('gulp-postcss');
77
const rename = require('gulp-rename');
88
const nested = require('postcss-nested');
9+
const autoprefixer = require('autoprefixer');
910
const postcssImport = require('postcss-import');
10-
const containerQuery = require('../containerQuery');
11+
const containerQuery = require('@zeecoder/container-query/containerQuery');
1112
const writeFileSync = require('fs').writeFileSync;
1213

1314
gulp.task('css', function () {
1415
return gulp.src('src/css/main.pcss')
1516
.pipe(postcss([
16-
nested(),
1717
postcssImport(),
18+
nested(),
19+
autoprefixer(),
1820
containerQuery({
1921
getJSON: (cssPath, containers) => {
2022
for (let containerSelector in containers) {
@@ -32,5 +34,5 @@ gulp.task('css', function () {
3234
});
3335

3436
gulp.task('watch', function() {
35-
gulp.watch('*.css', ['css']);
37+
gulp.watch('src/**/*.pcss', ['css']);
3638
});

‎demo/package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,21 @@
55
"author": "Viktor Hubert <[email protected]>",
66
"license": "MIT",
77
"devDependencies": {
8+
"@zeecoder/container-query": "^1.0.3",
89
"babel-core": "^6.23.1",
910
"babel-loader": "^6.3.2",
1011
"gulp": "^3.9.1",
1112
"gulp-postcss": "^6.3.0",
13+
"gulp-rename": "^1.2.2",
1214
"postcss": "^5.2.13",
15+
"postcss-import": "^9.1.0",
1316
"postcss-nested": "^1.0.0",
14-
"webpack": "^2.2.1",
15-
"postcss-import": "^9.1.0"
17+
"webpack": "^2.2.1"
1618
},
1719
"scripts": {
1820
"build": "gulp css && webpack"
21+
},
22+
"dependencies": {
23+
"autoprefixer": "^6.7.6"
1924
}
2025
}

‎demo/src/css/components/social-link/social-link.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"selector":".social-link","queries":[{"elements":[{"selector":".social-link","styles":{"border":"calc(0.2chpx + 0.2cwpx) solid #999","borderRadius":"calc(0.3chpx + 0.3cwpx)","fontSize":"85cminpx"}},{"selector":".social-link__icon","styles":{"marginLeft":""}},{"selector":".social-link__name","styles":{"display":"","marginLeft":"","marginRight":""}}]},{"conditions":[[["aspect-ratio",">",2]]],"elements":[{"selector":".social-link","styles":{"fontSize":"60chpx"}},{"selector":".social-link__icon","styles":{"marginLeft":"20chpx"}},{"selector":".social-link__name","styles":{"display":"block","marginLeft":"5cwpx","marginRight":"20chpx"}}]}]}

‎demo/src/css/components/social-link/social-link.pcss

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.social-link {
2+
@define-container;
3+
4+
overflow: hidden;
5+
position: fixed;
6+
top: 50%;
7+
left: 50%;
8+
width: 50%;
9+
height: 50%;
10+
background: #ccc;
11+
border: calc(0.2chpx + 0.2cwpx) solid #999;
12+
border-radius: calc(0.3chpx + 0.3cwpx);
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
text-decoration: none;
17+
color: #333;
18+
font-size: 85cminpx;
19+
transform: translate(-50%, -50%);
20+
21+
&__icon {
22+
}
23+
24+
&__name {
25+
display: none;
26+
overflow: hidden;
27+
text-overflow: ellipsis;
28+
}
29+
}
30+
31+
/*@container (width > 100px) {*/
32+
/*.social-link {*/
33+
/*font-size: calc(30chpx + 30cwpx);*/
34+
/*}*/
35+
36+
/*.social-link__name {*/
37+
/*display: block;*/
38+
/*}*/
39+
/*}*/
40+
41+
/*@container (height > 100px) {*/
42+
/*.social-link {*/
43+
/*font-size: calc(30chpx + 30cwpx);*/
44+
/*}*/
45+
46+
/*.social-link__name {*/
47+
/*display: block;*/
48+
/*}*/
49+
/*}*/
50+
51+
@container (aspect-ratio > 2) {
52+
.social-link {
53+
font-size: 60chpx;
54+
}
55+
56+
.social-link__icon {
57+
margin-left: 20chpx;
58+
}
59+
60+
.social-link__name {
61+
display: block;
62+
margin-left: 5cwpx;
63+
margin-right: 20chpx;
64+
}
65+
}

‎demo/src/css/components/user/user.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"selector":".user","queries":[{"elements":[{"selector":".user","styles":{"border":"calc(1chpx + 1cwpx) solid","background":""}},{"selector":".user__tag","styles":{"height":"1ch%","width":"5cw%"}},{"selector":".user__line1","styles":{"height":"100chpx","flexDirection":""}},{"selector":".user__image-wrapper","styles":{"flex":"","height":""}},{"selector":".user__image","styles":{"border":"calc(1chpx + 1cwpx / 5) solid #ccc","maxWidth":"","maxHeight":""}},{"selector":".user__name","styles":{"fontSize":"calc(4chpx + 4cwpx)","display":"","margin":"","lineHeight":"","flex":"","textAlign":""}}]},{"conditions":[["width",">=",250],["height",">=",250]],"elements":[{"selector":".user__image-wrapper","styles":{"flex":"0 0 40%","height":"auto"}},{"selector":".user__image","styles":{"maxWidth":"100%","maxHeight":"100ch"}},{"selector":".user__name","styles":{"display":"block"}}]},{"conditions":[["orientation",":","landscape"]],"elements":[{"selector":".user__name","styles":{"margin":"0 5cwpx","lineHeight":"100chpx"}}]},{"conditions":[["orientation",":","portrait"]],"elements":[{"selector":".user__line1","styles":{"flexDirection":"column","height":"100chpx"}},{"selector":".user__image-wrapper","styles":{"flex":"1 0 0"}},{"selector":".user__image","styles":{"maxHeight":"75chpx"}},{"selector":".user__name","styles":{"flex":"0 0 20chpx","lineHeight":"20chpx","textAlign":"center"}}]},{"conditions":[["width",">",300]],"elements":[{"selector":".user","styles":{"background":"#ccc"}}]},{"conditions":[["width",">",400]],"elements":[{"selector":".user","styles":{"background":"#bbb"}}]},{"conditions":[["width",">",500]],"elements":[{"selector":".user","styles":{"background":"#aaa"}}]},{"conditions":[["width",">",600]],"elements":[{"selector":".user","styles":{"background":"#999"}}]},{"conditions":[["width",">",700]],"elements":[{"selector":".user","styles":{"background":"#888"}}]},{"conditions":[["width",">",800]],"elements":[{"selector":".user","styles":{"background":"#999"}}]}]}
1+
{"selector":".user","queries":[{"elements":[{"selector":".user","styles":{"border":"calc(1chpx + 1cwpx) solid","background":""}},{"selector":".user__tag","styles":{"height":"1ch%","width":"5cw%"}},{"selector":".user__line1","styles":{"height":"100chpx","webkitBoxOrient":"","webkitBoxDirection":"","msFlexDirection":"","flexDirection":""}},{"selector":".user__image-wrapper","styles":{"webkitBoxFlex":"","msFlex":"","flex":"","height":""}},{"selector":".user__image","styles":{"border":"calc(1chpx + 1cwpx / 5) solid #ccc","maxWidth":"","maxHeight":""}},{"selector":".user__name","styles":{"fontSize":"calc(4chpx + 4cwpx)","display":"","margin":"","lineHeight":"","webkitBoxFlex":"","msFlex":"","flex":"","textAlign":""}}]},{"conditions":[[["width",">=",250],["height",">=",250]]],"elements":[{"selector":".user__image-wrapper","styles":{"webkitBoxFlex":"0","msFlex":"0 0 40%","flex":"0 0 40%","height":"auto"}},{"selector":".user__image","styles":{"maxWidth":"100%","maxHeight":"100ch"}},{"selector":".user__name","styles":{"display":"block"}}]},{"conditions":[[["orientation",":","landscape"]]],"elements":[{"selector":".user__name","styles":{"margin":"0 5cwpx","lineHeight":"100chpx"}}]},{"conditions":[[["orientation",":","portrait"]]],"elements":[{"selector":".user__line1","styles":{"webkitBoxOrient":"vertical","webkitBoxDirection":"normal","msFlexDirection":"column","flexDirection":"column","height":"100chpx"}},{"selector":".user__image-wrapper","styles":{"webkitBoxFlex":"1","msFlex":"1 0 0px","flex":"1 0 0"}},{"selector":".user__image","styles":{"maxHeight":"75chpx"}},{"selector":".user__name","styles":{"webkitBoxFlex":"0","msFlex":"0 0 20chpx","flex":"0 0 20chpx","lineHeight":"20chpx","textAlign":"center"}}]},{"conditions":[[["width",">",300]]],"elements":[{"selector":".user","styles":{"background":"#ccc"}}]},{"conditions":[[["width",">",400]]],"elements":[{"selector":".user","styles":{"background":"#bbb"}}]},{"conditions":[[["width",">",500]]],"elements":[{"selector":".user","styles":{"background":"#aaa"}}]},{"conditions":[[["width",">",600]]],"elements":[{"selector":".user","styles":{"background":"#999"}}]},{"conditions":[[["width",">",700]]],"elements":[{"selector":".user","styles":{"background":"#888"}}]},{"conditions":[[["width",">",800]]],"elements":[{"selector":".user","styles":{"background":"#999"}}]}]}

‎demo/src/js/main.js

+14-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1-
import Container from '../../../Container';
1+
import Container from '@zeecoder/container-query/Container';
22

3-
const userJSON = require('../css/components/user/user.json');
3+
function initialiseContainer (jsonData) {
4+
/**
5+
* @type NodeList
6+
*/
7+
const htmlElements = document.querySelectorAll(jsonData.selector);
8+
const htmlElementsLength = htmlElements.length;
49

5-
const userContainer = new Container(
6-
document.getElementById('user'),
7-
userJSON
8-
);
10+
for (let i = 0; i < htmlElementsLength; i++) {
11+
const containerInstance = new Container(htmlElements[i], jsonData);
12+
window.addEventListener('resize', containerInstance.adjust);
13+
}
14+
}
915

10-
window.addEventListener('resize', userContainer.adjust);
16+
initialiseContainer(require('../css/components/user/user.json'));
17+
initialiseContainer(require('../css/components/social-link/social-link.json'));
1118

1219

1320
// import initialiseAllContainers from '../initialiseAllContainers';

‎demo/web/index.html

+15-9
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,25 @@
55
<title>Document</title>
66

77
<link rel="stylesheet" href="dist/main.css">
8+
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css">
89
</head>
910
<body>
1011

1112

12-
<div class="user" id="user">
13-
<div class="user__tag">tag</div>
14-
<div class="user__line1">
15-
<div class="user__image-wrapper">
16-
<img class="user__image" src="https://avatars3.githubusercontent.com/u/3679506?v=3&s=460">
17-
</div>
18-
<h1 class="user__name">Viktor Hubert</h1>
19-
</div>
20-
</div>
13+
<!--<div class="user" id="user">-->
14+
<!--<div class="user__tag">tag</div>-->
15+
<!--<div class="user__line1">-->
16+
<!--<div class="user__image-wrapper">-->
17+
<!--<img class="user__image" src="https://avatars3.githubusercontent.com/u/3679506?v=3&s=460">-->
18+
<!--</div>-->
19+
<!--<h1 class="user__name">Viktor Hubert</h1>-->
20+
<!--</div>-->
21+
<!--</div>-->
22+
23+
<a class="social-link" href="https://twitter.com/ZeeCoder">
24+
<i class="social-link__icon fa fa-twitter"></i>
25+
<div class="social-link__name">Twitter</div>
26+
</a>
2127

2228

2329
<script src="dist/main.js"></script>

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@zeecoder/container-query",
3-
"version": "1.2.1",
3+
"version": "1.2.2",
44
"description": "A PostCSS plugin and Javascript runtime combination, which allows you to write @container queries in your CSS the same way you would write @media queries.",
55
"main": "index.js",
66
"author": "Viktor Hubert <[email protected]>",
@@ -27,6 +27,7 @@
2727
"dependencies": {
2828
"lodash.camelcase": "^4.3.0",
2929
"lodash.trim": "^4.5.1",
30+
"object-assign": "^4.1.1",
3031
"postcss": "^5.2.13"
3132
},
3233
"repository": {

‎src/runtime/adjustContainer.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import objectAssign from 'object-assign';
12
import getContainerDimensions from './getContainerDimensions';
23
import adjustValueObjectByContainerDimensions from './adjustValueObjectByContainerDimensions';
34
import applyStylesToElements from "./applyStylesToElements";
@@ -36,7 +37,7 @@ export default function adjustContainer (container, config) {
3637
};
3738
}
3839

39-
Object.assign(
40+
objectAssign(
4041
changeSets[elementData.selector].change,
4142
adjustValueObjectByContainerDimensions(containerDimensions, elementData.styles)
4243
);

‎src/runtime/adjustValueObjectByContainerDimensions.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import objectAssign from 'object-assign';
12
import convertCompositValue from './convertCompositValue';
23

34
/**
@@ -17,7 +18,7 @@ import convertCompositValue from './convertCompositValue';
1718
* }`
1819
*/
1920
export default function adjustValueObjectByContainerDimensions (containerDimensions, valueDefinition) {
20-
let values = Object.assign({}, valueDefinition);
21+
let values = objectAssign({}, valueDefinition);
2122

2223
for (let cssRule in values) {
2324
values[cssRule] = convertCompositValue(containerDimensions, values[cssRule]);

‎src/runtime/applyStylesToElements.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
/**
22
* @param {Object} styles
3-
* @param {HTMLElement[]} elements
3+
* @param {NodeList<HTMLElement>} elements
44
*/
55
export default function applyStylesToElements (styles, elements) {
6-
elements.forEach((element) => {
6+
const elementsLength = elements.length;
7+
8+
for (let i = 0; i < elementsLength; i++) {
79
for (let prop in styles) {
8-
element.style[prop] = styles[prop];
10+
elements[i].style[prop] = styles[prop];
911
}
10-
});
12+
}
1113
}

‎src/runtime/processConfig.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import objectAssign from 'object-assign';
12
import getConditionFunction from './getConditionFunction';
23

34
/**
@@ -10,7 +11,7 @@ import getConditionFunction from './getConditionFunction';
1011
* @returns {Object}
1112
*/
1213
export default function processConfig (origConfig) {
13-
let config = Object.assign({}, origConfig);
14+
let config = objectAssign({}, origConfig);
1415

1516
config.queries.forEach((queryData) => {
1617
queryData.conditionFunction = getConditionFunction(queryData.conditions);

0 commit comments

Comments
 (0)