Skip to content

D
default2
Commit 115327c1 authored by Yuri Bondarenko's avatar Yuri Bondarenko
Browse files
Options

1

parent 4db2893f
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 190 deletions
gulpfile.js
View file @ 115327c1
...@@ -9,12 +9,7 @@ const clean = require( 'gulp-clean' ); // удаление файлов и ка ...@@ -9,12 +9,7 @@ const clean = require( 'gulp-clean' ); // удаление файлов и ка
const postcss = require( 'gulp-postcss' ); // Пост-обработка CSS const postcss = require( 'gulp-postcss' ); // Пост-обработка CSS
const postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next const postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next
const cssvariables = require('postcss-css-variables'); // полифил для CSS-переменных
const atImport = require('postcss-import'); // парсинг и включение импорта CSS const atImport = require('postcss-import'); // парсинг и включение импорта CSS
const apply = require('postcss-apply');
const postcssCustomMedia = require('postcss-custom-media');
const postcssMediaMinmax = require('postcss-media-minmax');
const postcssColorFunction = require('postcss-color-function');
const sourcemaps = require( 'gulp-sourcemaps' ); // карты исходного кода const sourcemaps = require( 'gulp-sourcemaps' ); // карты исходного кода
...@@ -42,32 +37,14 @@ const libCSS = [ ...@@ -42,32 +37,14 @@ const libCSS = [
const postcssOptions = [ const postcssOptions = [
atImport(), atImport(),
postcssPresetEnv({ postcssPresetEnv({
/* features: {
'custom-properties': false
}, */
stage: 0, stage: 0,
autoprefixer: { autoprefixer: {
grid: true, grid: true,
browsers: [ 'last 4 versions', 'ie >= 11', 'iOS >= 9' ] browsers: [ 'last 4 versions', 'ie >= 11', 'iOS >= 9' ]
} }
}), })
cssvariables(),
apply(),
postcssCustomMedia(),
postcssMediaMinmax(),
postcssColorFunction()
]; ];
/**
* Сделать один CSS
*/
const isOneCSS = true;
/**
* Сделать один JS
*/
const isOneJS = true;
/* ================================================================= */ /* ================================================================= */
/** /**
......
package-lock.json
View file @ 115327c1
...@@ -2944,17 +2944,6 @@ ...@@ -2944,17 +2944,6 @@
"object-visit": "^1.0.0" "object-visit": "^1.0.0"
} }
}, },
"color": {
"version": "0.11.4",
"resolved": "http://registry.npmjs.org/color/-/color-0.11.4.tgz",
"integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=",
"dev": true,
"requires": {
"clone": "^1.0.2",
"color-convert": "^1.3.0",
"color-string": "^0.3.0"
}
},
"color-convert": { "color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
...@@ -2970,15 +2959,6 @@ ...@@ -2970,15 +2959,6 @@
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true "dev": true
}, },
"color-string": {
"version": "0.3.0",
"resolved": "http://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
"integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=",
"dev": true,
"requires": {
"color-name": "^1.0.0"
}
},
"color-support": { "color-support": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
...@@ -3291,41 +3271,6 @@ ...@@ -3291,41 +3271,6 @@
"urix": "^0.1.0" "urix": "^0.1.0"
} }
}, },
"css-color-function": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/css-color-function/-/css-color-function-1.3.3.tgz",
"integrity": "sha1-jtJMLAIFBzM5+voAS8jBQfzLKC4=",
"dev": true,
"requires": {
"balanced-match": "0.1.0",
"color": "^0.11.0",
"debug": "^3.1.0",
"rgb": "~0.1.0"
},
"dependencies": {
"balanced-match": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.1.0.tgz",
"integrity": "sha1-tQS9BYabOSWd0MXvw12EMXbczEo=",
"dev": true
},
"debug": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
},
"ms": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
"dev": true
}
}
},
"css-prefers-color-scheme": { "css-prefers-color-scheme": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
...@@ -5508,8 +5453,7 @@ ...@@ -5508,8 +5453,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -5710,14 +5654,12 @@ ...@@ -5710,14 +5654,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -5736,7 +5678,6 @@ ...@@ -5736,7 +5678,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -5969,7 +5910,6 @@ ...@@ -5969,7 +5910,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -6013,8 +5953,7 @@ ...@@ -6013,8 +5953,7 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
...@@ -12067,41 +12006,6 @@ ...@@ -12067,41 +12006,6 @@
"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
"dev": true "dev": true
}, },
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
},
"postcss-apply": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/postcss-apply/-/postcss-apply-0.11.0.tgz",
"integrity": "sha512-Y/uBl3p0H3jby+N3kvSNyuyLKZaCElCMMFWXSfEL9llEeCKupJ9Wit5Ms7TsAXFINexkWWwjiYfqPZ1nedi1Jw==",
"dev": true,
"requires": {
"babel-runtime": "^6.26.0",
"balanced-match": "^1.0.0",
"postcss": "^7.0.2"
},
"dependencies": {
"postcss": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.6.tgz",
"integrity": "sha512-Nq/rNjnHFcKgCDDZYO0lNsl6YWe6U7tTy+ESN+PnLxebL8uBtYX59HZqvrj7YLK5UCyll2hqDsJOo3ndzEW8Ug==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.5.0"
}
}
}
},
"postcss-attribute-case-insensitive": { "postcss-attribute-case-insensitive": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.0.tgz", "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.0.tgz",
...@@ -12125,18 +12029,6 @@ ...@@ -12125,18 +12029,6 @@
} }
} }
}, },
"postcss-color-function": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-color-function/-/postcss-color-function-4.0.1.tgz",
"integrity": "sha1-QCs/LOvD9pR+YY+2vjZU++zvZEQ=",
"dev": true,
"requires": {
"css-color-function": "~1.3.3",
"postcss": "^6.0.1",
"postcss-message-helpers": "^2.0.0",
"postcss-value-parser": "^3.3.0"
}
},
"postcss-color-functional-notation": { "postcss-color-functional-notation": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz", "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
...@@ -12254,17 +12146,6 @@ ...@@ -12254,17 +12146,6 @@
} }
} }
}, },
"postcss-css-variables": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.11.0.tgz",
"integrity": "sha512-pjqWnJSy8zoentAhRIph/DiOX0EZmT/dpmVbpdSrCSdkdqstl2ViBlAfIIuHvHI+baTV8Gd+WzsVFjDZqVn4dg==",
"dev": true,
"requires": {
"escape-string-regexp": "^1.0.3",
"extend": "^3.0.1",
"postcss": "^6.0.8"
}
},
"postcss-custom-media": { "postcss-custom-media": {
"version": "7.0.7", "version": "7.0.7",
"resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.7.tgz", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.7.tgz",
...@@ -12715,12 +12596,6 @@ ...@@ -12715,12 +12596,6 @@
"integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=", "integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=",
"dev": true "dev": true
}, },
"postcss-message-helpers": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz",
"integrity": "sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4=",
"dev": true
},
"postcss-nesting": { "postcss-nesting": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.0.tgz", "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.0.tgz",
...@@ -13910,12 +13785,6 @@ ...@@ -13910,12 +13785,6 @@
"integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==", "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
"dev": true "dev": true
}, },
"rgb": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/rgb/-/rgb-0.1.0.tgz",
"integrity": "sha1-vieykej+/+rBvZlylyG/pA/AN7U=",
"dev": true
},
"rimraf": { "rimraf": {
"version": "2.6.2", "version": "2.6.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
......
src/components/component/index.js
View file @ 115327c1
...@@ -31,7 +31,7 @@ export default class Component { ...@@ -31,7 +31,7 @@ export default class Component {
/** /**
* Установка состояния * Установка состояния
*/ */
setState = ( newState = {} ) => { setState( newState = {} ){
console.log( 'Component setState(): Compare states', this.objectEquals( this.state, newState ), this.state, newState ); console.log( 'Component setState(): Compare states', this.objectEquals( this.state, newState ), this.state, newState );
...@@ -45,7 +45,7 @@ export default class Component { ...@@ -45,7 +45,7 @@ export default class Component {
/** /**
* Сравниваем два объекта * Сравниваем два объекта
*/ */
objectEquals = (x, y) => { objectEquals(x, y){
if (x === null || x === undefined || y === null || y === undefined) { return x === y; } if (x === null || x === undefined || y === null || y === undefined) { return x === y; }
// after this just checking type of one would be enough // after this just checking type of one would be enough
if (x.constructor !== y.constructor) { return false; } if (x.constructor !== y.constructor) { return false; }
...@@ -66,7 +66,7 @@ export default class Component { ...@@ -66,7 +66,7 @@ export default class Component {
// recursive object equality check // recursive object equality check
var p = Object.keys(x); var p = Object.keys(x);
return Object.keys(y).every(function (i) { return p.indexOf(i) !== -1; }) && return Object.keys(y).every(function (i) { return p.indexOf(i) !== -1; }) &&
p.every(function (i) { return objectEquals(x[i], y[i]); }); p.every(function (i) { return this.objectEquals(x[i], y[i]); });
} }
......
src/components/swiper/index.js
View file @ 115327c1
...@@ -17,18 +17,18 @@ export default class SwiperSlider extends Component { ...@@ -17,18 +17,18 @@ export default class SwiperSlider extends Component {
// If we need pagination // If we need pagination
pagination: { pagination: {
el: '.swiper-pagination', el: '.swiper-pagination',
}, },
// Navigation arrows // Navigation arrows
navigation: { navigation: {
nextEl: '.swiper-button-next', nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', prevEl: '.swiper-button-prev',
}, },
// And if we need scrollbar // And if we need scrollbar
scrollbar: { scrollbar: {
el: '.swiper-scrollbar', el: '.swiper-scrollbar',
}, },
} }
} ){ } ){
...@@ -41,7 +41,7 @@ export default class SwiperSlider extends Component { ...@@ -41,7 +41,7 @@ export default class SwiperSlider extends Component {
/** /**
* загружаем данные * загружаем данные
*/ */
loadData = () => { loadData(){
fetch( 'https://moscowseasons.com/graphql', { fetch( 'https://moscowseasons.com/graphql', {
method: 'POST', method: 'POST',
...@@ -87,30 +87,30 @@ export default class SwiperSlider extends Component { ...@@ -87,30 +87,30 @@ export default class SwiperSlider extends Component {
}` }`
}) })
}) })
.then( ( response ) => { .then( ( response ) => {
return response.json(); return response.json();
}) })
.then( ( data ) => { .then( ( data ) => {
let slides = []; let slides = [];
data.data.albums.edges.forEach( ( album, index ) => { data.data.albums.edges.forEach( ( album, index ) => {
const slide = `<div class="swiper-slide"> const slide = `<div class="swiper-slide">
<h3>Swiper ${index}</h3> <h3>Swiper ${index}</h3>
<p>Swiper ${index} slide</p> <p>Swiper ${index} slide</p>
<img src="${album.node.photos[0].resized.url}" alt="${album.node.title}" /> <img src="${album.node.photos[0].resized.url}" alt="${album.node.title}" />
</div>`; </div>`;
slides[index] = slide; slides[index] = slide;
}); });
this.setState({ this.setState({
slides: slides slides: slides
}); });
}); });
} }
render(){ render(){
......
src/components/swiper/swiper.css
View file @ 115327c1
...@@ -10,4 +10,45 @@ ...@@ -10,4 +10,45 @@
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
}
/* NEW CSS */
@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--secondaryColor: lab(32.5 38.5 -47.6 / 90%);
}
html {
overflow: hidden auto;
}
@media (--viewport-medium) {
body {
color: var(--mainColor);
font-family: system-ui;
font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
overflow-wrap: break-word;
padding-inline: calc(var(--fontSize) / 2 + 1px);
}
}
:--heading {
margin-block: 0;
}
.hero:matches(main, .main) {
background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x);
}
a {
color: rgb(0 0 100% / 90%);
&:hover {
color: rebeccapurple;
}
} }
\ No newline at end of file
webpack.dev.js
View file @ 115327c1
...@@ -24,9 +24,6 @@ module.exports = { ...@@ -24,9 +24,6 @@ module.exports = {
[ '@babel/preset-env', { [ '@babel/preset-env', {
useBuiltIns: 'usage' useBuiltIns: 'usage'
} ] } ]
],
'plugins': [
'@babel/plugin-proposal-class-properties',
] ]
} }
} }
......
webpack.prod.js
View file @ 115327c1
...@@ -24,9 +24,6 @@ module.exports = { ...@@ -24,9 +24,6 @@ module.exports = {
[ '@babel/preset-env', { [ '@babel/preset-env', {
useBuiltIns: 'usage' useBuiltIns: 'usage'
} ] } ]
],
'plugins': [
'@babel/plugin-proposal-class-properties',
] ]
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment