Commit 26162d30 authored by Yuri Bondarenko's avatar Yuri Bondarenko

header

parent e614d75f
{ {
"parserOptions": { "parserOptions": {
"ecmaVersion": 7, "ecmaVersion": 8,
"sourceType": "module", "sourceType": "module",
"ecmaFeatures": {} "ecmaFeatures": {}
}, },
......
{ {
"printWidth": 9999,
"useTabs": true, "useTabs": true,
"tabWidth": 4 "tabWidth": 4
} }
{ {
"editor.insertSpaces": false, "editor.insertSpaces": false,
"html.format.indentInnerHtml": true, "html.format.indentInnerHtml": true,
"cSpell.words": [ "editor.wordWrap": "on",
"context" "git.confirmSync": false,
] "git.autofetch": true,
"javascript.validate.enable": false,
"explorer.confirmDelete": false,
"html.autoClosingTags": false,
"editor.formatOnSave": true,
"css.validate": false
} }
...@@ -45,9 +45,7 @@ const postcssOptions = [ ...@@ -45,9 +45,7 @@ const postcssOptions = [
*/ */
const Clean = cb => { const Clean = cb => {
cb(); cb();
return src(["./dev", "./prod"], { read: false, allowEmpty: true }).pipe( return src(["./dev", "./prod"], { read: false, allowEmpty: true }).pipe(clean());
clean()
);
}; };
task("CLEAN", Clean); task("CLEAN", Clean);
...@@ -60,7 +58,7 @@ const devCss = cb => { ...@@ -60,7 +58,7 @@ const devCss = cb => {
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
.pipe(postcss(postcssOptions)) .pipe(postcss(postcssOptions))
.pipe(sourcemaps.write(".")) .pipe(sourcemaps.write("."))
.pipe(dest("../prodalim/frontend/web/assets/css")) .pipe(dest("./dev/assets/css"))
.pipe(browsersync.stream()); .pipe(browsersync.stream());
}; };
...@@ -76,20 +74,14 @@ const prodCss = cb => { ...@@ -76,20 +74,14 @@ const prodCss = cb => {
// Компилируем и собираем все js файлы проекта // Компилируем и собираем все js файлы проекта
const devJs = cb => { const devJs = cb => {
cb(); cb();
return ( return src("./src/assets/js/*.js")
src("./src/assets/js/*.js")
.pipe( .pipe(
webpack(require("./webpack.dev.js"), compiler, function( webpack(require("./webpack.dev.js"), compiler, function(err, stats) {
err,
stats
) {
// console.log( err, stats ); // console.log( err, stats );
}) })
) )
// .pipe( dest( './dev/assets/js' ) ) .pipe(dest("./dev/assets/js"))
.pipe(dest("../prodalim/frontend/web/assets/js")) .pipe(browsersync.stream());
.pipe(browsersync.stream())
);
}; };
// Обрабатываем js файлы библиотек и проекта // Обрабатываем js файлы библиотек и проекта
...@@ -97,10 +89,7 @@ const prodJs = cb => { ...@@ -97,10 +89,7 @@ const prodJs = cb => {
cb(); cb();
return src("./src/assets/js/*.js") return src("./src/assets/js/*.js")
.pipe( .pipe(
webpack(require("./webpack.prod.js"), compiler, function( webpack(require("./webpack.prod.js"), compiler, function(err, stats) {
err,
stats
) {
// console.log( err, stats ); // console.log( err, stats );
}) })
) )
...@@ -109,63 +98,17 @@ const prodJs = cb => { ...@@ -109,63 +98,17 @@ const prodJs = cb => {
// ================== IMG ============================ // ================== IMG ============================
// Оптимизация картинок для dev // Оптимизация картинок для dev
const devImgCommon = cb => {
cb();
return src([
"!./src/favicon/**/*",
"!./src/assets/**/*",
"!./src/components/**/*",
"./src/**/*.png",
"./src/**/*.jpg",
"./src/**/*.jpeg",
"./src/**/*.gif",
"./src/**/*.svg"
])
.pipe(cache(imagemin()))
.pipe(dest("./dev"));
};
const devImgComponents = cb => { const devImgComponents = cb => {
cb(); cb();
return src([ return src(["./src/assets/img/**/*", "./src/components/**/*.png", "./src/components/**/*.jpg", "./src/components/**/*.jpeg", "./src/components/**/*.gif", "./src/components/**/*.svg"])
"./src/assets/img/**/*",
"./src/components/**/*.png",
"./src/components/**/*.jpg",
"./src/components/**/*.jpeg",
"./src/components/**/*.gif",
"./src/components/**/*.svg"
])
.pipe(cache(imagemin())) .pipe(cache(imagemin()))
.pipe(dest("./dev/assets/img")); .pipe(dest("./dev/assets/img"));
}; };
// Оптимизация картинок для prod // Оптимизация картинок для prod
const prodImgCommon = cb => {
cb();
return src([
"src/**/*.png",
"src/**/*.jpg",
"src/**/*.jpeg",
"src/**/*.gif",
"src/**/*.svg",
"!src/favicon/",
"!src/assets/",
"!src/components/"
])
.pipe(cache(imagemin()))
.pipe(dest("prod"));
};
const prodImgComponents = cb => { const prodImgComponents = cb => {
cb(); cb();
return src([ return src(["src/assets/img/**/*", "src/components/**/*.png", "src/components/**/*.jpg", "src/components/**/*.jpeg", "src/components/**/*.gif", "src/components/**/*.svg"])
"src/assets/img/**/*",
"src/components/**/*.png",
"src/components/**/*.jpg",
"src/components/**/*.jpeg",
"src/components/**/*.gif",
"src/components/**/*.svg"
])
.pipe(cache(imagemin())) .pipe(cache(imagemin()))
.pipe(dest("prod/assets/img")); .pipe(dest("prod/assets/img"));
}; };
...@@ -173,11 +116,7 @@ const prodImgComponents = cb => { ...@@ -173,11 +116,7 @@ const prodImgComponents = cb => {
// ================== HTML ============================ // ================== HTML ============================
// HTML для dev // HTML для dev
const devHtml = () => { const devHtml = () => {
return src([ return src(["src/**/*.html", "!src/assets/*.html", "!src/components/**/*.html"])
"src/**/*.html",
"!src/assets/*.html",
"!src/components/**/*.html"
])
.pipe( .pipe(
include({ include({
prefix: "@@", prefix: "@@",
...@@ -203,11 +142,7 @@ const devHtml = () => { ...@@ -203,11 +142,7 @@ const devHtml = () => {
// HTML для prod // HTML для prod
const prodHtml = cb => { const prodHtml = cb => {
cb(); cb();
return src([ return src(["src/**/*.html", "!src/assets/*.html", "!src/components/**/*.html"])
"src/**/*.html",
"!src/assets/*.html",
"!src/components/**/*.html"
])
.pipe( .pipe(
include({ include({
prefix: "@@", prefix: "@@",
...@@ -234,11 +169,10 @@ const prodHtml = cb => { ...@@ -234,11 +169,10 @@ const prodHtml = cb => {
// Слежение за dev // Слежение за dev
function browserSync() { function browserSync() {
browsersync.init({ browsersync.init({
/* server: { server: {
baseDir: '../prodalim/frontend/web/' baseDir: "./dev/"
}, */ },
proxy: "prodalim.local" port: 3000
// port: 3000
}); });
} }
...@@ -249,24 +183,14 @@ function browserSyncReload(done) { ...@@ -249,24 +183,14 @@ function browserSyncReload(done) {
task( task(
"DEV", "DEV",
series(devImgCommon, devImgComponents, devCss, devJs, devHtml, () => { series(devImgComponents, devCss, devJs, devHtml, () => {
watch(["./src/assets/css/*.css", "./src/components/**/*.css"], devCss); watch(["./src/assets/css/*.css", "./src/components/**/*.css"], devCss);
watch(["./src/assets/js/*.js", "./src/components/**/*.js"], devJs); watch(["./src/assets/js/*.js", "./src/components/**/*.js"], devJs);
watch("./src/**/*.html", series(devHtml, browserSyncReload)); watch("./src/**/*.html", series(devHtml, browserSyncReload));
watch( watch(["./src/assets/img/**/*", "./src/components/**/*.gif", "./src/components/**/*.jpg", "./src/components/**/*.jpeg", "./src/components/**/*.png", "./src/components/**/*.svg"], parallel(devImgComponents));
[
"./src/assets/img/**/*",
"./src/components/**/*.gif",
"./src/components/**/*.jpg",
"./src/components/**/*.jpeg",
"./src/components/**/*.png",
"./src/components/**/*.svg"
],
parallel(devImgCommon, devImgComponents)
);
browserSync(); browserSync();
}) })
...@@ -274,7 +198,4 @@ task( ...@@ -274,7 +198,4 @@ task(
// ================== PROD ============================ // ================== PROD ============================
// Публикация на prod // Публикация на prod
task( task("PROD", series(prodImgComponents, prodCss, prodJs, prodHtml));
"PROD",
series(prodImgCommon, prodImgComponents, prodCss, prodJs, prodHtml)
);
This diff is collapsed.
/* CSS */ /* CSS */
@import url('../../components/common/common.css'); @import url("../../components/ms-header/ms-header.css");
/* Custom media query */
@custom-media --s (width <= 640px);
@custom-media --m (width <= 1200px);
:root {
font-family: system-ui;
}
import SwiperSlider from '../../components/swiper'; (async () => {
import YMaps from '../../components/ymaps';
document.addEventListener( 'DOMContentLoaded', () => { })();
const swiperSlider = new SwiperSlider(); \ No newline at end of file
const ymaps = new YMaps();
});
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- Index -->
<xsl:template match="Index">
<h1>
Index
</h1>
</xsl:template>
</xsl:stylesheet>
\ No newline at end of file
:root {
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html {
font-size: 16px;
}
body {
padding: 0;
margin: 0;
font-family: var(--font);
font-size: 1rem;
}
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- Импорты -->
<xsl:import href="./src/components/Index/Index.xsl" />
<!-- Базовый шаблон -->
<xsl:template match="/">
<html lang="ru">
<head>
<title>Default 2</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/assets/css/app.css" />
</head>
<body>
<xsl:apply-templates select="Index" />
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>
<script src="/assets/js/app.js"></script>
</body>
</html>
</xsl:template>
<!--
Идентичное преобразование
-->
<xsl:template match="*" priority="0.5">
<xsl:element name="{name()}">
<xsl:apply-templates select="* | @* | text()" />
</xsl:element>
</xsl:template>
<xsl:template match="@*" priority="0.5">
<xsl:attribute name="{name()}">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:template>
</xsl:stylesheet>
\ No newline at end of file
/**
* Базовый компонент
*/
export default class Component {
/**
* Конструктор
*/
constructor( props = {} ){
/**
* Параметры компонента:
* scopeSelector - корневой селектор
* selectors - селекторы перерисовываемых данных
*/
this.props = {
};
// объединяем с переданными параметрами
Object.assign( this.props, props );
// дефолтное состояние
this.state = {};
this.setState();
}
/**
* Установка состояния
*/
setState( newState = {} ){
// если состояния различаются - обновляем состояние и рендерим
if( !this.objectEquals( this.state, newState ) ){
Object.assign( this.state, newState );
this.render();
}
}
/**
* Сравниваем два объекта
*/
objectEquals(x, y){
if (x === null || x === undefined || y === null || y === undefined) { return x === y; }
// after this just checking type of one would be enough
if (x.constructor !== y.constructor) { return false; }
// if they are functions, they should exactly refer to same one (because of closures)
if (x instanceof Function) { return x === y; }
// if they are regexps, they should exactly refer to same one (it is hard to better equality check on current ES)
if (x instanceof RegExp) { return x === y; }
if (x === y || x.valueOf() === y.valueOf()) { return true; }
if (Array.isArray(x) && x.length !== y.length) { return false; }
// if they are dates, they must had equal valueOf
if (x instanceof Date) { return false; }
// if they are strictly equal, they both need to be object at least
if (!(x instanceof Object)) { return false; }
if (!(y instanceof Object)) { return false; }
// recursive object equality check
let p = Object.keys(x);
return Object.keys(y).every(function (i) { return p.indexOf(i) !== -1; }) &&
p.every(function (i) { return this.objectEquals(x[i], y[i]); });
}
/**
* обновляем компонент
*/
render(){
return false;
}
}
\ No newline at end of file
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="@@description" />
<link rel="shortcut icon" type="image/x-icon" href="https://www.mos.ru/static/images/favicon/favicon.ico?RMD-665.6" />
<link href="https://www.mos.ru/static/images/favicon/icon76x76.png?RMD-665.6" rel="apple-touch-icon" sizes="76x76" />
<link href="https://www.mos.ru/static/images/favicon/icon96x96.png?RMD-665.6" rel="apple-touch-icon" sizes="96x96" />
<link href="https://www.mos.ru/static/images/favicon/icon120x120.png?RMD-665.6" rel="apple-touch-icon" sizes="120x120" />
<link href="https://www.mos.ru/static/images/favicon/icon152x152.png?RMD-665.6" rel="apple-touch-icon" sizes="152x152" />
<link href="https://www.mos.ru/static/images/favicon/icon180x180.png?RMD-665.6" rel="apple-touch-icon" sizes="180x180" />
<link href="https://www.mos.ru/static/images/favicon/icon192x192.png?RMD-665.6" rel="icon" sizes="192x192" />
<link href="https://www.mos.ru/static/images/favicon/icon128x128.png?RMD-665.6" rel="icon" sizes="128x128" />
<title>@@title</title>
<meta name="og:title" content="@@title" />
<meta name="og:type" content="article" />
<meta name="og:image" content="https://www.mos.ru/city/festivals/seasons/newyear2019/assets/img/share_ru.png" />
<meta name="og:url" content="https://www.mos.ru/city/festivals/seasons/newyear2019/" />
<meta name="og:site_name" content="Московские сезоны" />
<meta name="description" content="@@description" />
@@if (env == 'DEV') {
<link href="@@path/css/vendor.css" rel="stylesheet" />
<link href="@@path/css/app.css" rel="stylesheet" />
} @@if (env == 'MOS') {
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function(d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter32628510 = new Ya.Metrika2({
id: 32628510,
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true,
trackHash: true
});
} catch (e) {}
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function() {
n.parentNode.insertBefore(s, n);
};
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/tag.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else {
f();
}
})(document, window, "yandex_metrika_callbacks2");
</script>
<noscript
><div>
<img src="https://mc.yandex.ru/watch/32628510" style="position: absolute; left: -9999px;" alt="" /></div
></noscript>
<!-- /Yandex.Metrika counter -->
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function(d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter14112952 = new Ya.Metrika2({
id: 14112952,
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true,
trackHash: true
});
} catch (e) {}
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function() {
n.parentNode.insertBefore(s, n);
};
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/tag.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else {
f();
}
})(document, window, "yandex_metrika_callbacks2");
</script>
<noscript
><div>
<img src="https://mc.yandex.ru/watch/14112952" style="position: absolute; left: -9999px;" alt="" /></div
></noscript>
<!-- /Yandex.Metrika counter -->
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function(d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter47587534 = new Ya.Metrika({
id: 47587534,
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true,
trackHash: true
});
} catch (e) {}
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function() {
n.parentNode.insertBefore(s, n);
};
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else {
f();
}
})(document, window, "yandex_metrika_callbacks");
</script>
<!-- /Yandex.Metrika counter -->
}
</head>
.ms-header {
background: url("@@path/img/ms-header/kit6.jpg") no-repeat;
background-size: cover;
background-position: center;
max-height: 580px;
height: 40vw;
@media (--m) {
height: 440 / 788 * 100vw;
}
@media (--s) {
height: 300 / 320 * 100vw;
}
}
<section class="ms-header">
</section>
\ No newline at end of file
@@if( env == 'DEV' || env == 'MOS' || env == 'BNWEB' ) {
<!DOCTYPE html>
<html lang="en">
<!-- HEAD метаинформация -->
@@include( './components/head/head.html', { "title": "Николин день 2019", "description": "Николин день 2019" })
<body>
} @@if( env == 'MS' || env == 'MOS' || env == 'BNWEB') {
<!-- Vendor styles -->
<style>
@@include( '../prod/assets/css/vendor.css', {
"path": "@@path"
})
</style>
<!-- App styles -->
<style>
@@include( '../prod/assets/css/app.css', {
"path": "@@path"
})
</style>
}
<div class="ms-page">
<!-- Шапка -->
@@include( './components/ms-header/ms-header.html' )
<!-- О фестивале -->
<!-- @ @include( './components/ms-about/ms-about.html' ) -->
<!-- Мини-Галерея -->
<!-- @ @include( './components/ms-mini-gallery/ms-mini-gallery.html' ) -->
<!-- Инфо слайдер -->
<!-- @ @include( './components/ms-info-carousel/ms-info-carousel.html' ) -->
<!-- Карта -->
<!-- @ @include( './components/ms-map/ms-map.html' ) -->
<!-- Коломенское -->
<!-- @ @include( './components/ms-koloma/ms-koloma.html' ) -->
<!-- Афиша -->
<!-- @ @include( './components/ms-events/ms-events.html' ) -->
<!-- Цыфры -->
<!--@ @include( './components/ms-numbers/ms-numbers.html' )-->
<!-- Флешмоб -->
<!-- @ @include( './components/ms-flash/ms-flash.html' ) -->
<!-- Подробности -->
<!-- @ @include( './components/ms-more/ms-more.html' ) -->
<!-- Галерея -->
<!--@ @include( './components/ms-gallery/ms-gallery.html' )-->
<!-- Партнеры -->
<!--@ @include( './components/ms-partners/ms-partners.html' )-->
<!-- похожие события -->
<!-- @ @include(
'./components/ms-upcoming-events/ms-upcoming-events.html' ) -->
<!-- Футер -->
<!-- @ @include( './components/ms-contacts/ms-contacts.html' ) -->
</div>
@@if ( env === 'MOS') {
<script data-lang="ru" data-domain="https://www.mos.ru" src="https://www.mos.ru/front/markup/header-footer/js/boot.js" id="mos-layouts-boot"></script>
} @@if( env == 'DEV' || env == 'MOS' || env === 'BNWEB') {
<script src="//api-maps.yandex.ru/2.1?lang=ru"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
}
<?xml version="1.0"?>
<Index>
<Topbar>
<Logo href="/" src="logo.svg" />
</Topbar>
</Index>
\ No newline at end of file
This diff is collapsed.
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