diff --git a/gulpfile.js b/gulpfile.js index d02ddb1..cacd98e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,4 +1,4 @@ -const {task, src, dest, parallel, watch} = require('gulp'); +const {src, dest, parallel, watch} = require('gulp'); const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); const browser = require('browser-sync'); @@ -13,45 +13,64 @@ const sourcemaps = require('gulp-sourcemaps'); const uglify = require('gulp-uglify-es').default; const del = require('del'); const header = require('gulp-header'); +const argv = require('yargs').argv; +const gulpif = require('gulp-if'); +const isDevelop = !!argv.develop +const isProd = !!argv.production; -const getCss = async (mode = 'develop') => { +const pathConfig = { + src: { + sass: 'src/sass', + js: 'src/js', + img: 'src/img', + fonts: 'src/fonts', + libs: 'src/libs', + }, + assets: { + css: 'assets/css', + js: 'assets/js', + img: 'assets/img', + fonts: 'assets/fonts', + libs: 'assets/libs', + }, +} - if (mode == 'build') { - return src('src/sass/**/*.sass', {ignore: 'src/sass/parts/**'}) - .pipe(sass()) - .pipe(cleanCSS({compatibility: 'ie8'})) - .pipe(autoprefixer()) - .pipe(dest('assets/css')) - } +const getCss = async () => { + return src(`${pathConfig.src.sass}/**/*.sass`) - return src('src/sass/**/*.sass') .pipe(newer('*')) - .pipe(sourcemaps.init()) + .pipe(gulpif(isDevelop, sourcemaps.init())) .pipe(sass.sync().on('error', sass.logError)) - .pipe(sourcemaps.write('./maps')) - .pipe(dest('assets/css')) + .pipe(gulpif(isProd, cleanCSS({compatibility: 'ie8'}))) + .pipe(gulpif(isProd, autoprefixer())) + .pipe(gulpif(isDevelop, sourcemaps.write('../sourcemaps/css'))) + .pipe(dest(pathConfig.assets.css)) + .pipe(browser.reload({stream: true})); } function getJs() { - return src('src/js/**/*.js') - .pipe(sourcemaps.init()) - .pipe(uglify()) - .pipe(sourcemaps.write('./')) - .pipe(dest('./assets/js')) + return src(`${pathConfig.src.js}/**/*.js`) + + .pipe(gulpif(isDevelop, sourcemaps.init())) + .pipe(gulpif(isProd, uglify())) + .pipe(gulpif(isDevelop, sourcemaps.write('../sourcemaps/js'))) + + .pipe(dest(pathConfig.assets.js)) } function getFonts() { - return src('src/fonts/**/*.{ttf,woff,woff2,svg,eot}') - .pipe(dest('assets/fonts/')) + return src(`${pathConfig.src.fonts}/**/*.{ttf,woff,woff2,svg,eot}`) + + .pipe(dest(pathConfig.assets.fonts)) } function check() { - watch('src/sass/**/*.sass', getCss.bind(null, 'develop')).on('change', browser.reload.bind(null, {stream: true})); - watch('src/js/**/*.js', getJs).on('change', browser.reload); - watch('src/img/*', compressImages).on('change', browser.reload); - watch('src/fonts/**/*.{ttf,woff,woff2,svg,eot}', getFonts).on('change', browser.reload); + watch(`${pathConfig.src.sass}/**/*.sass`, getCss).on('change', browser.reload.bind(null, {stream: true})); + watch(`${pathConfig.src.js}/**/*.js`, getJs).on('change', browser.reload); + watch(`${pathConfig.src.img}/*`, compressImages).on('change', browser.reload); + watch(`${pathConfig.src.fonts}/**/*.{ttf,woff,woff2,svg,eot}`, getFonts).on('change', browser.reload); watch('**/*.php').on('change', browser.reload); watch('templates/*.php').on('add', checkNewTemplates); @@ -60,17 +79,16 @@ function check() { const build = async () => { console.log('\x1b[32m*** START BUILD ***'); - clean('assets/css'); + clean(pathConfig.assets.css); await getCss('build') console.log('\x1b[33m*** END BUILD ***\x1b[37m'); } function clean(path) { - return del.sync(path); + return del.sync(path); } - function startServer(){ browser.init({ // server: './', @@ -80,7 +98,8 @@ function startServer(){ } function compressImages(){ - return src('src/img/*/**') + return src(`${pathConfig.src.img}/*/**`) + // .pipe(newer('assets/img')) .pipe(imagemin([ imageminGiflossy({ @@ -112,7 +131,8 @@ function compressImages(){ ] }) ])) - .pipe(dest('assets/img')) + + .pipe(dest(pathConfig.assets.img)) } function checkNewTemplates(event) { @@ -137,4 +157,4 @@ exports.getcss = getCss; exports.getjs = getJs; exports.check = check; exports.build = build; -exports.start = parallel(check, startServer); \ No newline at end of file +exports.develop = parallel(check, startServer); diff --git a/package-lock.json b/package-lock.json index ad0189e..177c5a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "gulp-autoprefixer": "^7.0.1", "gulp-clean-css": "^4.3.0", "gulp-header": "^2.0.9", + "gulp-if": "^3.0.0", "gulp-imagemin": "^7.1.0", "gulp-newer": "^1.4.0", "gulp-sass": "^4.1.0", @@ -24,7 +25,8 @@ "imagemin-pngquant": "^9.0.2", "imagemin-zopfli": "^7.0.0", "module-alias": "^2.2.2", - "node-sass": "^5.0.0" + "node-sass": "^5.0.0", + "yargs": "^15.4.1" } }, "node_modules/@gulp-sourcemaps/identity-map": { @@ -4717,6 +4719,12 @@ "node": "*" } }, + "node_modules/fork-stream": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/fork-stream/-/fork-stream-0.0.4.tgz", + "integrity": "sha1-24Sfznf2cIpfjzhq5TOgkHtUrnA=", + "dev": true + }, "node_modules/form-data": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz", @@ -6773,6 +6781,17 @@ "xtend": "~4.0.1" } }, + "node_modules/gulp-if": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/gulp-if/-/gulp-if-3.0.0.tgz", + "integrity": "sha512-fCUEngzNiEZEK2YuPm+sdMpO6ukb8+/qzbGfJBXyNOXz85bCG7yBI+pPSl+N90d7gnLvMsarthsAImx0qy7BAw==", + "dev": true, + "dependencies": { + "gulp-match": "^1.1.0", + "ternary-stream": "^3.0.0", + "through2": "^3.0.1" + } + }, "node_modules/gulp-imagemin": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz", @@ -7639,6 +7658,15 @@ "node": "*" } }, + "node_modules/gulp-match": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/gulp-match/-/gulp-match-1.1.0.tgz", + "integrity": "sha512-DlyVxa1Gj24DitY2OjEsS+X6tDpretuxD6wTfhXE/Rw2hweqc1f6D/XtsJmoiCwLWfXgR87W9ozEityPCVzGtQ==", + "dev": true, + "dependencies": { + "minimatch": "^3.0.3" + } + }, "node_modules/gulp-newer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/gulp-newer/-/gulp-newer-1.4.0.tgz", @@ -17159,6 +17187,50 @@ "uuid": "bin/uuid" } }, + "node_modules/ternary-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ternary-stream/-/ternary-stream-3.0.0.tgz", + "integrity": "sha512-oIzdi+UL/JdktkT+7KU5tSIQjj8pbShj3OASuvDEhm0NT5lppsm7aXWAmAq4/QMaBIyfuEcNLbAQA+HpaISobQ==", + "dev": true, + "dependencies": { + "duplexify": "^4.1.1", + "fork-stream": "^0.0.4", + "merge-stream": "^2.0.0", + "through2": "^3.0.1" + } + }, + "node_modules/ternary-stream/node_modules/duplexify": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.1.tgz", + "integrity": "sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==", + "dev": true, + "dependencies": { + "end-of-stream": "^1.4.1", + "inherits": "^2.0.3", + "readable-stream": "^3.1.1", + "stream-shift": "^1.0.0" + } + }, + "node_modules/ternary-stream/node_modules/merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true + }, + "node_modules/ternary-stream/node_modules/readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "dev": true, + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/terser": { "version": "4.8.0", "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz", @@ -22805,6 +22877,12 @@ "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=", "dev": true }, + "fork-stream": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/fork-stream/-/fork-stream-0.0.4.tgz", + "integrity": "sha1-24Sfznf2cIpfjzhq5TOgkHtUrnA=", + "dev": true + }, "form-data": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz", @@ -24487,6 +24565,17 @@ } } }, + "gulp-if": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/gulp-if/-/gulp-if-3.0.0.tgz", + "integrity": "sha512-fCUEngzNiEZEK2YuPm+sdMpO6ukb8+/qzbGfJBXyNOXz85bCG7yBI+pPSl+N90d7gnLvMsarthsAImx0qy7BAw==", + "dev": true, + "requires": { + "gulp-match": "^1.1.0", + "ternary-stream": "^3.0.0", + "through2": "^3.0.1" + } + }, "gulp-imagemin": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz", @@ -25191,6 +25280,15 @@ } } }, + "gulp-match": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/gulp-match/-/gulp-match-1.1.0.tgz", + "integrity": "sha512-DlyVxa1Gj24DitY2OjEsS+X6tDpretuxD6wTfhXE/Rw2hweqc1f6D/XtsJmoiCwLWfXgR87W9ozEityPCVzGtQ==", + "dev": true, + "requires": { + "minimatch": "^3.0.3" + } + }, "gulp-newer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/gulp-newer/-/gulp-newer-1.4.0.tgz", @@ -32757,6 +32855,49 @@ } } }, + "ternary-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ternary-stream/-/ternary-stream-3.0.0.tgz", + "integrity": "sha512-oIzdi+UL/JdktkT+7KU5tSIQjj8pbShj3OASuvDEhm0NT5lppsm7aXWAmAq4/QMaBIyfuEcNLbAQA+HpaISobQ==", + "dev": true, + "requires": { + "duplexify": "^4.1.1", + "fork-stream": "^0.0.4", + "merge-stream": "^2.0.0", + "through2": "^3.0.1" + }, + "dependencies": { + "duplexify": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.1.tgz", + "integrity": "sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==", + "dev": true, + "requires": { + "end-of-stream": "^1.4.1", + "inherits": "^2.0.3", + "readable-stream": "^3.1.1", + "stream-shift": "^1.0.0" + } + }, + "merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true + }, + "readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + } + } + }, "terser": { "version": "4.8.0", "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz", diff --git a/package.json b/package.json index a9afd02..b39645d 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "gulp-autoprefixer": "^7.0.1", "gulp-clean-css": "^4.3.0", "gulp-header": "^2.0.9", + "gulp-if": "^3.0.0", "gulp-imagemin": "^7.1.0", "gulp-newer": "^1.4.0", "gulp-sass": "^4.1.0", @@ -20,10 +21,14 @@ "imagemin-pngquant": "^9.0.2", "imagemin-zopfli": "^7.0.0", "module-alias": "^2.2.2", - "node-sass": "^5.0.0" + "node-sass": "^5.0.0", + "yargs": "^15.4.1" }, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "dev": "gulp develop --develop", + "dev::prod": "gulp develop --production", + "build::dev": "gulp build --develop", + "build::prod": "gulp build --production" }, "keywords": [], "author": "", diff --git a/parts/home/main.php b/parts/home/main.php index 7d5892a..8627759 100644 --- a/parts/home/main.php +++ b/parts/home/main.php @@ -1,51 +1,16 @@
- - - - -
\ No newline at end of file diff --git a/src/js/components/certificates.js b/src/js/components/certificates.js index a6538b8..a3c374e 100644 --- a/src/js/components/certificates.js +++ b/src/js/components/certificates.js @@ -1,22 +1,3 @@ - const certText = document.querySelector('.cert-text'), - holidayDescrBtn = document.querySelector('.holiday-descr a'); +const holidayDescrBtn = document.querySelector('.holiday-descr a'); -holidayDescrBtn.innerHTML = ''; - - -// if(certText){ -// const holidayDescr = holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').offsetHeight; -// holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height = holidayDescr/3 + 'px'; -// holidayDescrBtn.addEventListener('click', (e) => { -// e.preventDefault(); - -// let currentHeight = holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height.slice(0, -2); -// if(currentHeight == holidayDescr){ -// holidayDescrBtn.textContent = 'Читать далее'; -// holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height = holidayDescr/3 + 'px'; -// }else{ -// holidayDescrBtn.textContent = 'Свернуть'; -// holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height = holidayDescr + 'px'; -// } -// }) -// } \ No newline at end of file +holidayDescrBtn.innerHTML = ''; \ No newline at end of file diff --git a/src/js/components/form.js b/src/js/components/form.js index ee2d381..385d676 100644 --- a/src/js/components/form.js +++ b/src/js/components/form.js @@ -1,68 +1,163 @@ -$('.btn-number').click(function(e){ - e.preventDefault(); - - fieldName = $(this).attr('data-field'); - type = $(this).attr('data-type'); - var input = $("input[name='"+fieldName+"']"); - var currentVal = parseInt(input.val()); - if (!isNaN(currentVal)) { - if(type == 'minus') { - - if(currentVal > input.attr('min')) { - input.val(currentVal - 1).change(); - } - if(parseInt(input.val()) == input.attr('min')) { - $(this).attr('disabled', true); - } +$(document).ready(() => { - } else if(type == 'plus') { + // Variables + const mainForm = document.querySelector('.main-form'); + const guestHoliday = document.getElementById('guest-holiday'); + const guestBirthdayName = document.getElementById('guest-birthday-name'); + const guestBirthdayDate = document.getElementById('datapicker'); + const guestQuestList = document.getElementById('guest-quest'); + const guestQuest = document.querySelectorAll('#guest-quest option'); + const guestRoom = document.querySelectorAll('#guest-room option'); + const guestRooms = document.getElementById('guest-room'); + const guestText = document.querySelectorAll('.guest-img .col-md-6'); + const formAddItem = document.querySelectorAll('.form-add__item'); + const childCountInput = document.querySelector('.input-number'); + const changeChildCountBtn = document.querySelectorAll('.btn-number'); + const orderModal = document.querySelector('.order-modal'); - if(currentVal < input.attr('max')) { - input.val(currentVal + 1).change(); - } - if(parseInt(input.val()) == input.attr('max')) { - $(this).attr('disabled', true); - } + const formData = { + name: '', + phone: '', + holidayType: 'Birthday', + birthdayName: '', + birthdayDate: '', + questName: '', + questRoom: '', + guestCount: 1, + date: '', + addingItems: [], + startSum: 2500, + addingSum: 0, + sum: 0, + getSum() { + this.sum = 0; + + let date = formData.date.split('.'), + day = date[0], + month = date[1], + year = date[2], + currentDate = new Date(year, month-1, day), + addingSum = 0, + maxPlayerSum = 0; + + if(currentDate.getDay() === 0 || currentDate.getDay() === 6 || currentDate.getDay() === 5){ + this.startSum = 3500; + }else{ + this.startSum = 2500; + } + + formData.addingItems.forEach(currentItem => { + addingSum += +currentItem.price; + }); + + if(this.questName){ + + if (this.questName === 'Аркидс' && this.guestCount > 4) { + maxPlayerSum = 500 * (this.guestCount - 4) + } else if (this.guestCount > 5) { + maxPlayerSum = 500 * (this.guestCount - 5) + } } - } else { - input.val(0); - } -}); -$('.input-number').focusin(function(){ - $(this).data('oldValue', $(this).val()); -}); -$('.input-number').change(function() { - - minValue = parseInt($(this).attr('min')); - maxValue = parseInt($(this).attr('max')); - valueCurrent = parseInt($(this).val()); - this.closest('input').value = valueCurrent - name = $(this).attr('name'); - if(valueCurrent >= minValue) { - $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled') - } else { - alert('Sorry, the minimum value was reached'); - $(this).val($(this).data('oldValue')); - } - if(valueCurrent <= maxValue) { - $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled') - } else { - alert(`Извините, больше ${maxValue} нельзя`); - $(this).val($(this).data('oldValue')); - } - - updateForm(); -}); -$(".input-number").keydown(function (e) { + + switch (this.questRoom){ + case 'Лофт': + addingSum += 2500 + break; + + case 'Большой зал': + addingSum += 2000 + break; + + case 'Малый зал': + addingSum += 1000 + break; + } + + this.sum += this.startSum + addingSum + maxPlayerSum; + } + }; + let questSlug = 'none'; + + // Init styles + $(guestHoliday).selectpicker(); + $(guestQuestList).selectpicker(); + $(guestRooms).selectpicker(); + + $(guestRooms).hide(); + $(guestText[0]).hide(); + $(guestText[1]).hide(); + + // Add listeners + $(changeChildCountBtn).click(function(e){ + e.preventDefault(); + + fieldName = $(this).attr('data-field'); + type = $(this).attr('data-type'); + var input = $("input[name='"+fieldName+"']"); + var currentVal = parseInt(input.val()); + + if (!isNaN(currentVal)) { + if(type === 'minus') { + + if(currentVal > input.attr('min')) { + input.val(currentVal - 1).change(); + } + if(parseInt(input.val()) === input.attr('min')) { + $(this).attr('disabled', true); + } + + } else if(type === 'plus') { + + if(currentVal < input.attr('max')) { + input.val(currentVal + 1).change(); + } + if(parseInt(input.val()) === input.attr('max')) { + $(this).attr('disabled', true); + } + + } + } else { + input.val(0); + } + }); + + $(childCountInput).focusin(function(){ + $(this).data('oldValue', $(this).val()); + }); + + $(childCountInput).change(function() { + + minValue = parseInt($(this).attr('min')); + maxValue = parseInt($(this).attr('max')); + valueCurrent = parseInt($(this).val()); + this.closest('input').value = valueCurrent + name = $(this).attr('name'); + if(valueCurrent >= minValue) { + $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled') + } else { + alert('Sorry, the minimum value was reached'); + $(this).val($(this).data('oldValue')); + } + if(valueCurrent <= maxValue) { + $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled') + } else { + alert(`Извините, больше ${maxValue} нельзя`); + $(this).val($(this).data('oldValue')); + } + + updateForm(); + }); + + $(childCountInput).keydown(function (e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 || - // Allow: Ctrl+A - (e.keyCode == 65 && e.ctrlKey === true) || - // Allow: home, end, left, right + // Allow: Ctrl+A + (e.keyCode === 65 && e.ctrlKey === true) || + // Allow: home, end, left, right (e.keyCode >= 35 && e.keyCode <= 39)) { - // let it happen, don't do anything - return; + // let it happen, don't do anything + return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { @@ -70,275 +165,23 @@ $(".input-number").keydown(function (e) { } }); -$('#guest-holiday').selectpicker(); -$('#guest-quest').selectpicker(); -$('#guest-room').selectpicker(); + $("#datapicker").on("dp.change", updateForm); + $("#datapicker2").on("dp.change", updateForm); -const mainForm = document.querySelector('.main-form'), - guestHoliday = document.getElementById('guest-holiday'), - guestBirthdayName = document.getElementById('guest-birthday-name'), - guestBirthdayDate = document.getElementById('datapicker'), - guestQuestList = document.getElementById('guest-quest'), - guestQuest = document.querySelectorAll('#guest-quest option'), - guestRoom = document.querySelectorAll('#guest-room option'), - guestRooms = document.getElementById('guest-room'), - guestText = document.querySelectorAll('.guest-img .col-md-6'), - formAddItem = document.querySelectorAll('.form-add__item'); - -let questSlug = 'none'; -document.querySelector('.guest-room').style.display = 'none'; -guestText[0].style.display = 'none'; -guestText[1].style.display = 'none'; -const formData = { - name: '', - phone: '', - holidayType: 'Birthday', - birthdayName: '', - birthdayDate: '', - questName: '', - questRoom: '', - guestCount: 1, - date: '', - addingItems: [], - startSum: 2500, - addingSum: 0, - sum: 0, - getSum(){ - this.sum = 0; - - let date = formData.date.split('.'), - day = date[0], - month = date[1], - year = date[2], - currentDate = new Date(year, month-1, day), - addingSum = 0, - maxPlayerSum = 0; + mainForm.addEventListener('change', updateForm); - if(currentDate.getDay() == 0 || currentDate.getDay() == 6 || currentDate.getDay() == 5){ - this.startSum = 3500; - }else{ - this.startSum = 2500; - } + mainForm.addEventListener('submit', (e) =>{ + e.preventDefault(); - formData.addingItems.forEach(currentItem => { - addingSum += +currentItem.price; - }); - - if(this.questName){ - - if (this.questName == 'Аркидс' && this.guestCount > 4) { - maxPlayerSum = 500 * (this.guestCount - 4) - } else if (this.guestCount > 5) { - maxPlayerSum = 500 * (this.guestCount - 5) - } - - } - - switch (this.questRoom){ - case 'Лофт': - addingSum += 2500 - break; - - case 'Большой зал': - addingSum += 2000 - break; - - case 'Малый зал': - addingSum += 1000 - break; - - - } - this.sum += this.startSum + addingSum + maxPlayerSum; - } -}; - -const checkForm = () => { - formData.name = document.getElementById('guest-name').value; - formData.phone = document.getElementById('guest-phone').value; - formData.birthdayName = document.getElementById('guest-birthday-name').value; - formData.birthdayDate = $("#datapicker").val(); - formData.date = $("#datapicker2").val(); - formData.guestCount = document.getElementById('guest-count').value; - guestHoliday.addEventListener('change', (e) => { - if(!e.target.selectedIndex){ - guestBirthdayName.style.display = 'block' - guestBirthdayDate.style.display = 'block' - formData.holidayType = 'Birthday' - }else{ - guestBirthdayName.style.display = 'none' - guestBirthdayDate.style.display = 'none' - formData.holidayType = 'Graduate'; - delete formData.birthdayName; - delete formData.birthdayDate; - } - }) - guestRooms.addEventListener('change', (e) => { - let index = e.target.selectedIndex, - imgURL = guestRoom[index].dataset.img, - roomName = guestRoom[index].textContent, - roomDescr = guestRoom[index].dataset.descr; - formData.questRoom = roomName; - document.querySelector('.guest-room-name').textContent = roomName; - document.querySelector('.guest-room-descr').innerHTML = roomDescr; - let imgRoom = document.querySelectorAll('.guest-img .col-md-6 img')[1]; - - if(index !== 0){ - guestText[1].style.display = 'flex' - }else{ - guestText[1].style.display = 'none' - } - imgRoom.setAttribute('src', imgURL) - }) - - guestQuestList.addEventListener('change', (e) => { - document.querySelector('.cheque-label h3').textContent = 'Ваш заказ'; - let index = e.target.selectedIndex, - imgURL = guestQuest[index].dataset.img, - questName = guestQuest[index].textContent, - maxPlayer = guestQuest[index].dataset.maxplayer; - document.querySelector('.guest-quest-name').textContent = questName; - questSlug = guestQuest[index].dataset.quest; - if (questSlug !== 'none'){ - document.querySelector('.guest-room').style.display = 'block' - $('#guest-room').selectpicker('val', 'default'); - guestText[0].style.display = 'flex' - guestText[1].style.display = 'none' - - - if (questName != formData.questName) { - formData.questName = questName; - formData.maxPlayer = maxPlayer; - - // if (questName == 'Аркидс') { - // document.getElementById('guest-count').max = 6; - - // document.getElementById('guest-count').value = Math.min(6, document.getElementById('guest-count').value) - // } else { - // document.getElementById('guest-count').max = 8 - // } - } - - document.querySelector('[data-type="plus"]').disabled = false; - - delete formData.questRoom; - }else{ - document.querySelector('.guest-room').style.display = 'none' - guestText[0].style.display = 'none' - guestText[1].style.display = 'none' - delete formData.questName; - delete formData.questRoom; - } - let imgQuest = document.querySelector('.guest-img .col-md-6 img'); - imgQuest.setAttribute('src', imgURL) - - }) - let addItems = document.querySelectorAll('.btn-adding'); - formData.addingItems = []; - addItems.forEach(currentItem => { - let add = currentItem.closest('.form-add__item').querySelector('.form-add__item-text'); - let item = { - name: add.querySelector('h6').textContent, - price: add.querySelector('span').textContent.slice(0, -3), - } - formData.addingItems.push(item) - }); - - return formData -} -const updateForm = () => { - checkForm(); - formData.getSum(); - let chequeQuest = document.querySelector('.cheque-quest p'), - chequeDate = document.querySelector('.cheque-date p'), - chequeGuests = document.querySelector('.cheque-guests p span'), - chequeAddItems = document.querySelector('.cheque-adding'), - chequeSum = document.querySelector('.cheque-sum'), - chequeInfo = document.querySelector('.cheque-info'), - span = document.createElement('span') - if(!formData.questName){ - chequeQuest.closest('div').style.display = 'none' - }else{ - chequeQuest.closest('div').style.display = 'block'; - chequeQuest.textContent = `${formData.questName} - ` - span.textContent = `${formData.startSum} р.`; - chequeQuest.insertAdjacentElement('beforeend', span); - } - if(!formData.date){ - chequeDate.closest('div').style.display = 'none' - }else{ - chequeDate.closest('div').style.display = 'block'; - chequeDate.textContent = `${formData.date}` - } - if(formData.guestCount == 1){ - chequeGuests.closest('div').style.display = 'none' - }else{ - chequeGuests.closest('div').style.display = 'block' - chequeGuests.textContent = formData.guestCount; - } - if(!formData.addingItems.length){ - chequeAddItems.style.display = 'none' - }else{ - chequeAddItems.style.display = 'block'; - chequeAddItems.querySelectorAll('p').forEach(currentItem => { - currentItem.remove() - }); - formData.addingItems.forEach(item => { - const p = document.createElement('p'), - span = document.createElement('span'); - p.textContent = `${item.name} - ` - span.textContent = `${item.price} р.` - p.appendChild(span); - chequeAddItems.insertAdjacentElement('beforeend', p) - }); - } - if(!formData.sum){ - chequeSum.style.display = 'none'; - }else{ - chequeSum.style.display = 'block'; - chequeInfo.style.display = 'none' - chequeSum.querySelector('span').textContent = `${formData.sum} р.` - } -} - -formAddItem.forEach(item => { - item.addEventListener('click', (e) => { - let addBtn = e.target.closest('label'); - if(!addBtn){ - return - } - addBtn.classList.toggle('btn-adding'); - if(addBtn.classList.contains('btn-adding')){ - addBtn.textContent = 'Убрать'; - addBtn.setAttribute('checked', 'true'); - }else{ - addBtn.textContent = 'Добавить'; - addBtn.removeAttribute('checked'); - } updateForm(); - - }) -}); -checkForm(); - -$("#datapicker").on("dp.change", updateForm); -$("#datapicker2").on("dp.change", updateForm); - -mainForm.addEventListener('change', updateForm); -mainForm.addEventListener('submit', (e) =>{ - e.preventDefault(); - updateForm(); - var action = $('.main-form').attr('action'); - console.log(formData); - $.ajax({ - url: action, + url: $(mainForm).attr('action'), type: 'POST', data: formData, - success: function (response) { - $('.order-modal').show(); - $("body").css("overflow","hidden"); + success: function () { + $(orderModal).show(); + $("body").css("overflow","hidden"); }, error: function(request, txtstatus, errorThrown){ console.log(request); @@ -346,11 +189,184 @@ mainForm.addEventListener('submit', (e) =>{ console.log(errorThrown); } }); - document.querySelector('.order-modal').addEventListener('click', (e) => { - if (!e.target.closest('.container')){ - $('.order-modal').hide(); + + orderModal.addEventListener('click', (e) => { + if (!e.target.closest('.container')) { + $(orderModal).hide(); $("body").css("overflow","auto"); - location = '/'; + location = '/'; } }) -}); \ No newline at end of file + }); + + formAddItem.forEach(item => { + item.addEventListener('click', (e) => { + let addBtn = e.target.closest('label'); + if(!addBtn){ + return + } + addBtn.classList.toggle('btn-adding'); + if(addBtn.classList.contains('btn-adding')){ + addBtn.textContent = 'Убрать'; + addBtn.setAttribute('checked', 'true'); + }else{ + addBtn.textContent = 'Добавить'; + addBtn.removeAttribute('checked'); + } + updateForm(); + + }) + }); + + function checkForm() { + formData.name = document.getElementById('guest-name').value; + formData.phone = document.getElementById('guest-phone').value; + formData.birthdayName = document.getElementById('guest-birthday-name').value; + formData.birthdayDate = $("#datapicker").val(); + formData.date = $("#datapicker2").val(); + formData.guestCount = document.getElementById('guest-count').value; + guestHoliday.addEventListener('change', (e) => { + if(!e.target.selectedIndex){ + guestBirthdayName.style.display = 'block' + guestBirthdayDate.style.display = 'block' + formData.holidayType = 'Birthday' + }else{ + guestBirthdayName.style.display = 'none' + guestBirthdayDate.style.display = 'none' + formData.holidayType = 'Graduate'; + delete formData.birthdayName; + delete formData.birthdayDate; + } + }) + + guestRooms.addEventListener('change', (e) => { + let index = e.target.selectedIndex, + imgURL = guestRoom[index].dataset.img, + roomName = guestRoom[index].textContent, + roomDescr = guestRoom[index].dataset.descr; + formData.questRoom = roomName; + document.querySelector('.guest-room-name').textContent = roomName; + document.querySelector('.guest-room-descr').innerHTML = roomDescr; + let imgRoom = document.querySelectorAll('.guest-img .col-md-6 img')[1]; + + if(index !== 0){ + guestText[1].style.display = 'flex' + }else{ + guestText[1].style.display = 'none' + } + imgRoom.setAttribute('src', imgURL) + }) + + guestQuestList.addEventListener('change', (e) => { + document.querySelector('.cheque-label h3').textContent = 'Ваш заказ'; + let index = e.target.selectedIndex, + imgURL = guestQuest[index].dataset.img, + questName = guestQuest[index].textContent, + maxPlayer = guestQuest[index].dataset.maxplayer; + document.querySelector('.guest-quest-name').textContent = questName; + questSlug = guestQuest[index].dataset.quest; + if (questSlug !== 'none'){ + document.querySelector('.guest-room').style.display = 'block' + $('#guest-room').selectpicker('val', 'default'); + guestText[0].style.display = 'flex' + guestText[1].style.display = 'none' + + + if (questName !== formData.questName) { + formData.questName = questName; + formData.maxPlayer = maxPlayer; + + // if (questName == 'Аркидс') { + // document.getElementById('guest-count').max = 6; + + // document.getElementById('guest-count').value = Math.min(6, document.getElementById('guest-count').value) + // } else { + // document.getElementById('guest-count').max = 8 + // } + } + + document.querySelector('[data-type="plus"]').disabled = false; + + delete formData.questRoom; + }else{ + document.querySelector('.guest-room').style.display = 'none' + guestText[0].style.display = 'none' + guestText[1].style.display = 'none' + delete formData.questName; + delete formData.questRoom; + } + let imgQuest = document.querySelector('.guest-img .col-md-6 img'); + imgQuest.setAttribute('src', imgURL) + + }) + let addItems = document.querySelectorAll('.btn-adding'); + formData.addingItems = []; + addItems.forEach(currentItem => { + let add = currentItem.closest('.form-add__item').querySelector('.form-add__item-text'); + let item = { + name: add.querySelector('h6').textContent, + price: add.querySelector('span').textContent.slice(0, -3), + } + formData.addingItems.push(item) + }); + + return formData + } + + function updateForm() { + checkForm(); + formData.getSum(); + let chequeQuest = document.querySelector('.cheque-quest p'), + chequeDate = document.querySelector('.cheque-date p'), + chequeGuests = document.querySelector('.cheque-guests p span'), + chequeAddItems = document.querySelector('.cheque-adding'), + chequeSum = document.querySelector('.cheque-sum'), + chequeInfo = document.querySelector('.cheque-info'), + span = document.createElement('span') + if(!formData.questName){ + chequeQuest.closest('div').style.display = 'none' + }else{ + chequeQuest.closest('div').style.display = 'block'; + chequeQuest.textContent = `${formData.questName} - ` + span.textContent = `${formData.startSum} р.`; + chequeQuest.insertAdjacentElement('beforeend', span); + } + if(!formData.date){ + chequeDate.closest('div').style.display = 'none' + }else{ + chequeDate.closest('div').style.display = 'block'; + chequeDate.textContent = `${formData.date}` + } + if(formData.guestCount === 1){ + chequeGuests.closest('div').style.display = 'none' + }else{ + chequeGuests.closest('div').style.display = 'block' + chequeGuests.textContent = formData.guestCount; + } + if(!formData.addingItems.length){ + chequeAddItems.style.display = 'none' + }else{ + chequeAddItems.style.display = 'block'; + chequeAddItems.querySelectorAll('p').forEach(currentItem => { + currentItem.remove() + }); + formData.addingItems.forEach(item => { + const p = document.createElement('p'), + span = document.createElement('span'); + p.textContent = `${item.name} - ` + span.textContent = `${item.price} р.` + p.appendChild(span); + chequeAddItems.insertAdjacentElement('beforeend', p) + }); + } + if(!formData.sum){ + chequeSum.style.display = 'none'; + }else{ + chequeSum.style.display = 'block'; + chequeInfo.style.display = 'none' + chequeSum.querySelector('span').textContent = `${formData.sum} р.` + } + } + + checkForm(); +}) diff --git a/src/js/components/holiday.js b/src/js/components/holiday.js index bd8c3e2..7871744 100644 --- a/src/js/components/holiday.js +++ b/src/js/components/holiday.js @@ -1,28 +1,29 @@ -const holidayDescrBtn = document.querySelector('.holiday-descr .turn'), - addingService = document.querySelector('.adding-service'); +const holidayDescrBtn = document.querySelector('.holiday-descr .turn'); +const addingService = document.querySelector('.adding-service'); +const entContainerHeader = document.querySelector('.ent-container h2'); +const packageSlider = document.querySelector('.packages-slider'); -if(holidayDescrBtn && document.querySelector('.ent-container h2')){ +if (holidayDescrBtn && entContainerHeader) { const holidayDescr = holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').offsetHeight; holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height = holidayDescr/3 + 'px'; - console.log('A', holidayDescrBtn); - holidayDescrBtn.addEventListener('click', (e) => { e.preventDefault(); let currentHeight = holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height.slice(0, -2); - if(currentHeight == holidayDescr){ + + if (currentHeight === holidayDescr) { holidayDescrBtn.textContent = 'Читать далее'; holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height = holidayDescr/3 + 'px'; - }else{ + } else { holidayDescrBtn.textContent = 'Свернуть'; holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height = holidayDescr + 'px'; } }) } -if(addingService){ - $('.packages-slider').owlCarousel({ +if (addingService) { + $(packageSlider).owlCarousel({ responsive: { 0 : { margin: 10, @@ -43,12 +44,9 @@ if(addingService){ margin: 10, stagePadding: 60, items: 1, - normal: false, nav: false, dots: false, - // autoWidth: true, normal: true - // stagePadding: 30, }, 769 : { margin: 30, @@ -56,7 +54,6 @@ if(addingService){ normal: true, nav: false, dots: false - // stagePadding: 30, }, 1025 : { margin: 30, @@ -64,8 +61,7 @@ if(addingService){ normal: true, nav: false, dots: false - // stagePadding: 30, } } }); -} \ No newline at end of file +} diff --git a/src/js/components/main.js b/src/js/components/main.js index c603c4d..622296d 100644 --- a/src/js/components/main.js +++ b/src/js/components/main.js @@ -1,304 +1,318 @@ -const discountModal = document.querySelector('.discount-modal'), - discountClose = document.querySelector('.discount-modal-close'), - discountOpen = document.querySelectorAll('.discount-item__content button'), - places = document.querySelectorAll('.places .owl-item'); - -$('#orderTel').mask('+7 (900) 000-00-00'); -$('[data-toggle="popover"]').popover(); -$('.main-slider').owlCarousel({ - responsive: { - 0 : { - smartSpeed: 400, - margin: 10, - items: 1, - stagePadding: 0, - dots: true, - loop: true, - center: true, - normal: false, - lazyLoad: true, - lazyLoadEager: 1 - // autoWidth: true - }, - 480 : { - smartSpeed: 400, - items: 6, - margin: 0 - }, - 768 : { - smartSpeed: 400, - items: 1, - margin: 30, - loop: true, - autoWidth: true, - center: true, - dots: true, - dotsEach: true, - // autoplay: true, - autoplayTimeout: 3000, - autoplaySpeed: 1000, - autoplayHoverPause: true - // nav: true, - // navText: ['
','
'], - } - } -}); -$('.ent-slider').owlCarousel({ - responsive: { - 0 : { - smartSpeed: 400, - margin: 80, - items: 1, - stagePadding: 60, - dots: false, - autoWidth: false, - loop:true - }, - 360 : { - smartSpeed: 400, - margin: 10, - items: 1, - stagePadding: 60, - dots: false, - loop:true, - autoWidth: false - }, - 480 : { - smartSpeed: 400, - items: 1, - stagePadding: 60, - margin: 20, - loop: true, - dots: false, - autoWidth: false - }, - 768 : { - smartSpeed: 400, - margin: 50, - items: 3, - // stagePadding: 30, - } -} -}); -$('.places-slider').owlCarousel({ - responsive : { - 0 : { - smartSpeed: 400, - margin: 10, - items: 1, - stagePadding: 60, - dots: false, - loop:true, - autoWidth: false - }, - 360 : { - smartSpeed: 400, - margin: 10, - items: 1, - stagePadding: 60, - dots: false, - loop:true, - autoWidth: false - }, - 480 : { - smartSpeed: 400, - margin: 10, - items: 1, - stagePadding: 60, - dots: false, - loop:true, - autoWidth: false - }, - 768: { - smartSpeed: 400, - margin: 150, - item: 1, - autoWidth: true, - nav: true, - dots: false, - loop: true, - } - } - -}); -$('.discount-slider').owlCarousel({ - responsive : { - 0 : { - smartSpeed: 400, - margin: 80, - items: 1, - stagePadding: 60, - dots: false, - loop:true - }, - 360 : { - smartSpeed: 400, - margin: 35, - items: 1, - stagePadding: 60, - dots: false, - loop:true - }, - 480 : { - smartSpeed: 400, - items: 1, - stagePadding: 60, - margin: 20, - loop: true, - dots: false, - autoWidth: false - }, - 1200: { - margin: 10, - smartSpeed: 400, - item: 3, - // autoWidth: true, - nav: true, - navText: ['
','
'], - dots: false, - loop: true, - } - } - -}); -$('.discount-modal-slider').owlCarousel({ - responsive: { - 0 : { - smartSpeed: 400, - margin: 10, - items: 1, - stagePadding: 0, - dots: false, - loop: true, - center: true, - normal: false, - // lazyLoad: true, - // lazyLoadEager: 1 - // autoWidth: true - }, - 480 : { - smartSpeed: 400, - items: 6, - margin: 0 - }, - 768 : { - smartSpeed: 400, - items: 1, - margin: 30, - nav: false, - dots: false, - loop: true - // loop: true, - // autoWidth: true, - // center: true, - // dots: true, - // dotsEach: true, - // autoplay: true, - // autoplayTimeout: 3000, - // autoplaySpeed: 1000, - // autoplayHoverPause: true - // nav: true, - // navText: ['
','
'], - } - } -}); -$('.principals-slider').owlCarousel({ - responsive: { - 0 : { - smartSpeed: 400, - margin: 30, - items: 1, - stagePadding: 40, - dots: false, - loop: true, - // center: true, - autoWidth: true, - // normal: false - }, - 480 : { - smartSpeed: 400, - items: 2, - stagePadding: 10, - margin: 30, - loop: true, - dots: false, - autoWidth: false - }, - 1200 : { - smartSpeed: 400, - dots: false, - items: 6, - margin: 30, - loop: true, - autoWidth: false, - nav: true, - navText: ['
','
'], - } - -} -}); - -var owl=$(".discount-modal-slider"); -owl.owlCarousel(); -if(discountClose){ - discountOpen.forEach((item, index) => { - item.addEventListener('click', () => { - discountModal.style.display = 'block'; - owl.trigger("to.owl.carousel", index, 100); - }); - }); - discountModal.addEventListener('click', (e) => { - let target = e.target; - if(target.classList.contains('discount-modal-layout')){ - discountModal.style.display = 'none'; - } - }) - discountClose.addEventListener('click', () => { - discountModal.style.display = 'none'; - }) - $(".discount-modal-slider-nav-next").click(function(){ - owl.trigger("next.owl.carousel"); - }); - $(".discount-modal-slider-nav-prev").click(function(){ - owl.trigger("prev.owl.carousel"); - }); -} - -if(places){ - const placesItems = [...document.querySelectorAll('.places .owl-item')].filter(item => !item.classList.contains('cloned')); - - placesItems.forEach((currentItem, index) => { - const placesSpans = currentItem.querySelectorAll('.places-img span'); - placesSpans[0].textContent = index + 1; - placesSpans[1].textContent = placesItems.length; - // console.log(currentItem, index); - - // placesSpans[1] = placesItems.length(); - }); - - -} $(document).ready(function () { - var form = $('.order__form'), - action = $('.order__form').attr('action'); - form.on('submit', (e) => { - - var formData = { - orderName: $('#orderName').val(), - orderTel: $('#orderTel').val(), - orderEmail: $('#orderEmail').val(), - orderOthers: $('#orderOthers').val(), + + // Variables + const discountModal = document.querySelector('.discount-modal'); + const discountClose = document.querySelector('.discount-modal-close'); + const discountOpen = document.querySelectorAll('.discount-item__content button'); + const discountSlider = document.querySelector('.discount-slider') + const discountModalSlider = document.querySelector('.discount-modal-slider'); + const places = document.querySelectorAll('.places .owl-item'); + + const orderForm = document.querySelector('.order__form'); + const orderPhone = document.getElementById('orderTel'); + const orderName = document.getElementById('orderName'); + const orderEmail = document.getElementById('orderEmail'); + const orderOthers = document.getElementById('orderOthers'); + const orderModal = document.querySelector('.order-modal'); + + const mainSlider = document.querySelector('.main-slider'); + const entSlider = document.querySelector('.ent-slider'); + const placesSlider = document.querySelector('.places-slider'); + const principalsSlider = document.querySelector('.principals-slider'); + + $(orderPhone).mask('+7 (900) 000-00-00'); + + $('[data-toggle="popover"]').popover(); + + // Init sliders + $(mainSlider).owlCarousel({ + responsive: { + 0 : { + smartSpeed: 400, + margin: 10, + items: 1, + stagePadding: 0, + dots: true, + loop: true, + center: true, + normal: false, + lazyLoad: true, + lazyLoadEager: 1 + // autoWidth: true + }, + 480 : { + smartSpeed: 400, + items: 6, + margin: 0 + }, + 768 : { + smartSpeed: 400, + items: 1, + margin: 30, + loop: true, + autoWidth: true, + center: true, + dots: true, + dotsEach: true, + // autoplay: true, + autoplayTimeout: 3000, + autoplaySpeed: 1000, + autoplayHoverPause: true + // nav: true, + // navText: ['
','
'], + } } - console.log(formData); - + }); + $(entSlider).owlCarousel({ + responsive: { + 0 : { + smartSpeed: 400, + margin: 80, + items: 1, + stagePadding: 60, + dots: false, + autoWidth: false, + loop:true + }, + 360 : { + smartSpeed: 400, + margin: 10, + items: 1, + stagePadding: 60, + dots: false, + loop:true, + autoWidth: false + }, + 480 : { + smartSpeed: 400, + items: 1, + stagePadding: 60, + margin: 20, + loop: true, + dots: false, + autoWidth: false + }, + 768 : { + smartSpeed: 400, + margin: 50, + items: 3, + // stagePadding: 30, + } + } + }); + $(placesSlider).owlCarousel({ + responsive : { + 0 : { + smartSpeed: 400, + margin: 10, + items: 1, + stagePadding: 60, + dots: false, + loop:true, + autoWidth: false + }, + 360 : { + smartSpeed: 400, + margin: 10, + items: 1, + stagePadding: 60, + dots: false, + loop:true, + autoWidth: false + }, + 480 : { + smartSpeed: 400, + margin: 10, + items: 1, + stagePadding: 60, + dots: false, + loop:true, + autoWidth: false + }, + 768: { + smartSpeed: 400, + margin: 150, + item: 1, + autoWidth: true, + nav: true, + dots: false, + loop: true, + } + } + + }); + $(discountSlider).owlCarousel({ + responsive : { + 0 : { + smartSpeed: 400, + margin: 80, + items: 1, + stagePadding: 60, + dots: false, + loop:true + }, + 360 : { + smartSpeed: 400, + margin: 35, + items: 1, + stagePadding: 60, + dots: false, + loop:true + }, + 480 : { + smartSpeed: 400, + items: 1, + stagePadding: 60, + margin: 20, + loop: true, + dots: false, + autoWidth: false + }, + 1200: { + margin: 10, + smartSpeed: 400, + item: 3, + // autoWidth: true, + nav: true, + navText: ['
','
'], + dots: false, + loop: true, + } + } + + }); + $(discountModalSlider).owlCarousel({ + responsive: { + 0 : { + smartSpeed: 400, + margin: 10, + items: 1, + stagePadding: 0, + dots: false, + loop: true, + center: true, + normal: false, + // lazyLoad: true, + // lazyLoadEager: 1 + // autoWidth: true + }, + 480 : { + smartSpeed: 400, + items: 6, + margin: 0 + }, + 768 : { + smartSpeed: 400, + items: 1, + margin: 30, + nav: false, + dots: false, + loop: true + // loop: true, + // autoWidth: true, + // center: true, + // dots: true, + // dotsEach: true, + // autoplay: true, + // autoplayTimeout: 3000, + // autoplaySpeed: 1000, + // autoplayHoverPause: true + // nav: true, + // navText: ['
','
'], + } + } + }); + $(principalsSlider).owlCarousel({ + responsive: { + 0 : { + smartSpeed: 400, + margin: 30, + items: 1, + stagePadding: 40, + dots: false, + loop: true, + // center: true, + autoWidth: true, + // normal: false + }, + 480 : { + smartSpeed: 400, + items: 2, + stagePadding: 10, + margin: 30, + loop: true, + dots: false, + autoWidth: false + }, + 1200 : { + smartSpeed: 400, + dots: false, + items: 6, + margin: 30, + loop: true, + autoWidth: false, + nav: true, + navText: ['
','
'], + } + + } + }); + $(discountModalSlider).owlCarousel(); + + if(discountClose){ + discountOpen.forEach((item, index) => { + item.addEventListener('click', () => { + $(discountModal).show(); + owl.trigger("to.owl.carousel", index, 100); + }); + }); + + discountModal.addEventListener('click', (e) => { + let target = e.target; + if(target.classList.contains('discount-modal-layout')){ + $(discountModal).hide(); + } + }) + + discountClose.addEventListener('click', $(discountModal).hide) + + $(".discount-modal-slider-nav-next").click(function() { + owl.trigger("next.owl.carousel"); + }); + + $(".discount-modal-slider-nav-prev").click(function() { + owl.trigger("prev.owl.carousel"); + }); + } + + if (places) { + const placesItems = Array.from(places).filter(item => !item.classList.contains('cloned')); + + placesItems.forEach((currentItem, index) => { + const placesSpans = currentItem.querySelectorAll('.places-img span'); + + placesSpans[0].textContent = index + 1; + placesSpans[1].textContent = placesItems.length; + }); + } + + $(orderForm).on('submit', (e) => { + e.preventDefault(); + + var formData = { + orderName: orderName.value, + orderTel: orderPhone.value, + orderEmail: orderEmail.value, + orderOthers: orderOthers.value, + } + $.ajax({ - url: action, + url: $(orderForm).attr('action'), type: 'POST', data: formData, - success: function (response) { - // form.html("Ваш запрос отправлен, спрсибо !"); - $('.order-modal').show(); - $("body").css("overflow","hidden"); + success: function () { + $(orderModal).show(); + $("body").css("overflow","hidden"); }, error: function(request, txtstatus, errorThrown){ console.log(request); @@ -306,62 +320,26 @@ $(document).ready(function () { console.log(errorThrown); } }); - e.preventDefault(); - }) - document.querySelector('.order-modal').addEventListener('click', (e) => { + + orderModal && orderModal.addEventListener('click', (e) => { if (!e.target.closest('.container')){ - $('.order-modal').hide(); - $("body").css("overflow","auto"); + $(orderModal).hide(); + $("body").css("overflow","auto"); } }) - $('.packages-item a').on( 'click', function(){ + + $('.packages-item a').on( 'click', function(){ var el = $(this); var dest = el.attr('href'); // получаем направление if(dest !== undefined && dest !== '') { // проверяем существование - $('html').animate({ + $('html').animate({ scrollTop: $(dest).offset().top // прокручиваем страницу к требуемому элементу }, 500 // скорость прокрутки ); } return false; }); - - const mainSlider = $("#carousel").waterwheelCarousel({ - // separation: 135, - separation: 435, - }); - - $("#carousel").swipe( { - //Generic swipe handler for all directions - swipe:function(event, direction, distance, duration, fingerCount, fingerData) { - if(direction === 'right'){ - mainSlider.prev(); - } - if(direction === 'left'){ - mainSlider.next(); - } - }, - //Default is 75px, set to 0 for demo so any distance triggers swipe - threshold:0 - }); - $('#carousel-mobile').slick({ - responsive: { - 0 : { - infinite: true, - dots: false, - arrows: false, - adaptiveHeight: true - - }, - 1200: { - arrows: false, - dots: true - } - } - }); - document.querySelector('#carousel-mobile .slick-prev').innerHTML = ''; - document.querySelector('#carousel-mobile .slick-next').innerHTML = ''; }); diff --git a/src/js/components/quests.js b/src/js/components/quests.js index 8336a55..dc3e630 100644 --- a/src/js/components/quests.js +++ b/src/js/components/quests.js @@ -1,24 +1,29 @@ -const compoundTurn = document.querySelector('.compound .turn'), - compoundText = document.querySelector('.compound__text'), - questItem = document.querySelectorAll('.quests-content__item .quest-level'); -if(compoundTurn){ +const compoundTurn = document.querySelector('.compound .turn'); +const compoundText = document.querySelector('.compound__text'); +const questItem = document.querySelectorAll('.quests-content__item .quest-level'); + +if (compoundTurn) { const compoundTextHeight = compoundText.offsetHeight; + questItem.forEach(item => { let levelIcons = item.querySelectorAll('img'); - for(let i = 0; i < item.dataset.level; i++){ + + for (let i = 0; i < item.dataset.level; i++) { levelIcons[i].classList.remove('icon-hidden') } }); - + compoundText.style.height = compoundTextHeight/3 + 'px'; + compoundTurn.addEventListener('click', () => { let currentHeight = compoundText.style.height.slice(0, -2); - if(currentHeight == compoundTextHeight){ + + if (currentHeight === compoundTextHeight) { compoundTurn.textContent = 'Читать далее'; compoundText.style.height = compoundTextHeight/3 + 'px'; - }else{ + } else{ compoundTurn.textContent = 'Свернуть'; compoundText.style.height = compoundTextHeight + 'px'; } }) -} \ No newline at end of file +} diff --git a/src/js/components/sales.js b/src/js/components/sales.js index 9d73934..3df70e3 100644 --- a/src/js/components/sales.js +++ b/src/js/components/sales.js @@ -1,22 +1,9 @@ -const holidayDescrBtn = document.querySelector('.holiday-descr a'), - sales = document.querySelector('.sales'); -if(sales){ - $('.discount-slider').owlCarousel().trigger('destroy.owl.carousel'); - document.querySelector('.discount-slider').classList.remove('owl-carousel'); - document.querySelector('.discount-slider').classList.add('sales-block'); +const sales = document.querySelector('.sales'); +const discountSlider = document.querySelector('.discount-slider'); - const holidayDescr = holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').offsetHeight; - holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height = holidayDescr/3 + 'px'; - holidayDescrBtn.addEventListener('click', (e) => { - e.preventDefault(); +if (sales) { + $(discountSlider).owlCarousel().trigger('destroy.owl.carousel'); - let currentHeight = holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height.slice(0, -2); - if(currentHeight == holidayDescr){ - holidayDescrBtn.textContent = 'Читать далее'; - holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height = holidayDescr/3 + 'px'; - }else{ - holidayDescrBtn.textContent = 'Свернуть'; - holidayDescrBtn.closest('.holiday-descr').querySelector('.holiday-descr__text').style.height = holidayDescr + 'px'; - } - }) + discountSlider.classList.remove('owl-carousel'); + discountSlider.classList.add('sales-block'); } \ No newline at end of file diff --git a/src/js/script.js b/src/js/script.js index 3b16057..8c82f32 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -1,142 +1,72 @@ $(document).ready(function(){ - const footerLinks = document.querySelectorAll('.footer__menu .footer-open'), - headerContainer = document.querySelector('.header-wrapper'), - - aboutJoki = document.querySelector('.about-joki'); + // Variables + const headerContainer = document.querySelector('.header-wrapper'); + const submenu = document.querySelector('.header-submenu'); + const openSubMenu = document.querySelector('.header-navmenu__item .fa-bars'); + const sub = document.querySelectorAll('.header-submenu')[1]; - if(aboutJoki){ + const aboutJoki = document.querySelector('.about-joki'); + const aboutHeaders = document.querySelectorAll('.about-joki__header h3'); + const aboutContent = document.querySelectorAll('.about-joki__body-item'); + const containers = document.querySelectorAll('.about-joki__body-item') - const aboutHeaders = document.querySelectorAll('.about-joki__header h3'), - aboutContent = document.querySelectorAll('.about-joki__body-item'); + const orderModal = document.querySelector('.order-modal'); + const orderModalOverlay = document.querySelector('.order-modal__overlay'); - let content = 'about'; + const callBackBtn = document.querySelector('.order-call'); + const callBackForm = document.querySelector('.callback-modal form'); + const callBackModal = document.querySelector('.callback-modal'); + const callBackLayout = document.querySelector('.callback-modal__layout'); + const callBackClose = document.querySelector('.callback-modal__close'); + const callbackName = document.getElementById('callback-name'); + const callbackPhone = document.getElementById('callback-phone'); - aboutHeaders.forEach(item => { - item.addEventListener('click', (e) => { - aboutHeaders.forEach(header => { - header.classList.remove('active'); - }) - item.classList.add('active'); - content = item.dataset.content; - aboutContent.forEach(currentItem => { - if(currentItem.dataset.content === content){ - currentItem.style.display = 'block' - }else{ - currentItem.style.display = 'none'; - } - }); - }) - }); - } + let scrollPos = 0; - if(document.documentElement.clientWidth <= '425'){ - const submenu = document.querySelector('.header-submenu'), - openSubMenu = document.querySelector('.header-navmenu__item .fa-bars'), - closeSubmenu = document.createElement('a'); - closeSubmenu.classList.add('header-submenu-close-sub'); - closeSubmenu.innerHTML = `
    • ` - submenu.insertAdjacentElement('afterbegin', closeSubmenu); - closeSubmenu.addEventListener('click', (e)=>{ - document.querySelector('.header-submenu').style.display = 'none'; - }) + // Add styles + $('#datapicker').datetimepicker({locale: 'ru', format: 'DD.MM.YYYY'}); + $('#datapicker2').datetimepicker({locale: 'ru', format: 'DD.MM.YYYY'}); + $(callbackPhone).mask('+7 (900) 000-00-00'); - openSubMenu.closest('li').addEventListener('click', (e) => { - const sub = document.querySelectorAll('.header-submenu')[1] - - if (sub.style.display === 'block') { - sub.style.display = 'none' - openSubMenu.closest('li').style.background = '#fff' - } else { - sub.style.display = 'block'; - openSubMenu.closest('li').style.background = '#f2f2f2' - } - - }) - } - - $('#datapicker').datetimepicker({ - locale: 'ru', - format: 'DD.MM.YYYY' - }); - $('#datapicker2').datetimepicker({ - locale: 'ru', - format: 'DD.MM.YYYY' - }); - - // footerLinks.forEach(item => { - // item.querySelector('a').addEventListener('click', (e) => { - // e.preventDefault(); - // e.target.nextElementSibling.classList.toggle('footer__submenu__hide'); - // }) - // }); - var scrollPos = 0; - - $(window).scroll(function(){ - if (!headerContainer) return - var st = $(this).scrollTop(); - if (!st) return; - if(st < 199){ - return - } - if (st > scrollPos){ - headerContainer && headerContainer.classList.add('header-menu__hide'); - } else { - headerContainer && headerContainer.classList.remove('header-menu__hide'); - } - scrollPos = st; - }); - - const callBackBtn = document.querySelector('.order-call'), - callBackForm = document.querySelector('.callback-modal form'), - callBackModal = document.querySelector('.callback-modal'), - callBackLayout = document.querySelector('.callback-modal__layout'), - callBackClose = document.querySelector('.callback-modal__close'); - - $('#callback-phone').mask('+7 (900) 000-00-00'); + // Add listeners callBackBtn.addEventListener('click', (e) => { - e.preventDefault() + e.preventDefault(); + callBackModal.style.display = 'block' - $("body").css("overflow","hidden"); - + $(document.body).css("overflow","hidden"); }) callBackLayout.addEventListener('click', () => { - callBackModal.style.display = 'none' - $("body").css("overflow","auto"); + callBackModal.style.display = 'none'; + $(document.body).css("overflow","auto"); }) callBackClose.addEventListener('click', () => { callBackModal.style.display = 'none' - $("body").css("overflow","auto"); + $(document.body).css("overflow","auto"); }) callBackForm.addEventListener('submit', (e) => { e.preventDefault(); - + const formData = { - name: '', - phone: '' + name: callbackName.value, + phone: callbackPhone.value, } - formData.name = document.getElementById('callback-name').value - formData.phone = document.getElementById('callback-phone').value - console.log(formData); - var action = $('.callback-modal form').attr('action'); ; - - + const action = $(callBackForm).attr('action'); + $.ajax({ url: action, type: 'POST', data: formData, - success: function (response) { + success: function () { callBackModal.style.display = 'none' - $('.order-modal').show(); - document.getElementById('callback-name').value = '' - document.getElementById('callback-phone').value = '' - $('.order-modal__overlay').on('click', () => { - $('.order-modal').hide(); - }) + + $(orderModal).show(); + callbackName.value = '' + callbackPhone.value = '' }, error: function(request, txtstatus, errorThrown){ console.error(request); @@ -146,20 +76,71 @@ $(document).ready(function(){ }); }) + + orderModalOverlay && orderModalOverlay.addEventListener('click', $(orderModal).hide); + + window.addEventListener('scroll', () => { + if (!headerContainer) return + + let st = $(this).scrollTop(); + if (!st || st < 199) return; + + if (st > scrollPos) headerContainer && headerContainer.classList.add('header-menu__hide'); + else headerContainer && headerContainer.classList.remove('header-menu__hide'); + + scrollPos = st; + }) + + if (aboutJoki) { + let content = 'about'; + + aboutHeaders.forEach(item => { + item.addEventListener('click', () => { + aboutHeaders.forEach(header => header.classList.remove('active')) + + item.classList.add('active'); + content = item.dataset.content; + + aboutContent.forEach(currentItem => { + if (currentItem.dataset.content === content) { + $(currentItem).show(); + } else{ + $(currentItem).hide(); + } + }); + }) + }); + } + + if (document.documentElement.clientWidth <= '425') { + const closeSubmenu = document.createElement('a'); + + closeSubmenu.classList.add('header-submenu-close-sub'); + closeSubmenu.innerHTML = `
    • ` + + submenu.insertAdjacentElement('afterbegin', closeSubmenu); + + closeSubmenu.addEventListener('click', $(submenu).show) + + openSubMenu.closest('li').addEventListener('click', () => { + if (sub.style.display === 'block') { + $(sub).hide(); + openSubMenu.closest('li').style.background = '#fff'; + } else { + $(sub).show(); + openSubMenu.closest('li').style.background = '#f2f2f2'; + } + }); + } + + if (window.location.hash === '#feedback') { + aboutHeaders.forEach(header => header.classList.remove('active')) + + document.querySelector(`.about-joki__header [data-content='feedback']`).classList.add('active') + + containers.forEach(cont => cont.style.display = 'none') + + document.querySelector(`.about-joki__body-item[data-content='feedback']`).style.display = 'block' + } + }); - -if (window.location.hash == '#feedback') { - const headers = document.querySelectorAll('.about-joki__header h3') - - headers.forEach(header => header.classList.remove('active')) - - document.querySelector(`.about-joki__header [data-content='feedback']`).classList.add('active') - - const containers = document.querySelectorAll('.about-joki__body-item') - - containers.forEach(cont => cont.style.display = 'none') - - document.querySelector(`.about-joki__body-item[data-content='feedback']`).style.display = 'block' - -} - diff --git a/src/sass/other.sass b/src/sass/other.sass index 659f579..121afb3 100644 --- a/src/sass/other.sass +++ b/src/sass/other.sass @@ -46,15 +46,6 @@ a display: none -#carousel-mobile - display: none - img - margin: 0 auto - display: block !important - width: 100% - height: 100% - max-width: 435px - .map-block-in-home &::after background-color: #f2f2f2 !important @@ -145,26 +136,7 @@ @media screen and (max-width: 1024px) .main height: 250px !important - #carousel - display: none - #carousel-mobile - display: flex - justify-content: space-around - align-items: center - .slick-arrow - border-radius: 50% - outline: none - width: 36px !important - height: 36px !important - display: flex - justify-content: center - align-items: center - border: none - opacity: 0.5 - transition: opacity .3s ease-in-out - padding: 1px 12px - &:hover - opacity: 1 + .present .container &::after right: 0 !important @@ -200,9 +172,7 @@ h1 font-size: 28px line-height: 1.2 - #carousel-mobile - .slick-arrow - display: none !important + .main height: 200px !important padding: 0 !important @@ -312,9 +282,6 @@ .hide-menu display: block !important -#carousel img - transform: scale(1.2) - @media (min-width: 1200px) .container, .container-lg, .container-md, .container-sm, .container-xl max-width: 1195px @@ -341,7 +308,7 @@ height: auto !important display: none .callback-modal__body - width: 80% + width: 80% .form-block padding-bottom: 10px diff --git a/templates/certificates.php b/templates/certificates.php index 8f78d2c..d4c008e 100644 --- a/templates/certificates.php +++ b/templates/certificates.php @@ -24,10 +24,8 @@ get_template_part('parts/certificates/modal'); ?>