work/armanty-quests
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add javascript scroll functions

Browse Source
This commit is contained in:
Sergey Krylov 2021-03-20 20:53:44 +03:00
parent 1881c08e78
commit 1fa9461f62
8 changed files with 102 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
functions.php
View File

@ -64,15 +64,17 @@ function armanty_get_styles(){
}
function armanty_get_scripts(){
if (!is_page_template('templates/graduation.php')) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_template_directory_uri() . '/assets/libs/jquery-3.4.1/jquery-3.4.1.min.js');
wp_enqueue_script('jquery');
wp_enqueue_script( 'jqmask', get_template_directory_uri( ) . '/assets/libs/jQuery-Mask-Plugin-master/dist/jquery.mask.min.js', ['jquery'], null, true);
if (!is_page_template('templates/graduation.php')) {
wp_enqueue_script( 'poper', get_template_directory_uri( ) . '/assets/libs/bootstrap-4.4.1-dist/js/popper.min.js', ['jquery'], null, true);
wp_enqueue_script( 'bootstrap', get_template_directory_uri( ) . '/assets/libs/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js', ['jquery'], null, true);
wp_enqueue_script( 'owlcarousel', get_template_directory_uri( ) . '/assets/libs/OwlCarousel2-2.3.4/dist/owl.carousel.js', ['jquery'], null, true);
wp_enqueue_script( 'jqmask', get_template_directory_uri( ) . '/assets/libs/jQuery-Mask-Plugin-master/dist/jquery.mask.min.js', ['jquery'], null, true);
wp_enqueue_script( 'moment', get_template_directory_uri( ) . '/assets/libs/bootstrap_datetimepicker/js/moment-with-locales.min.js', ['jquery'], null, true);
wp_enqueue_script( 'bootstrap', get_template_directory_uri( ) . '/assets/libs/bootstrap_datetimepicker/js/bootstrap.min.js', ['jquery', 'moment'], null, true);
wp_enqueue_script( 'dtpicker', get_template_directory_uri( ) . '/assets/libs/bootstrap_datetimepicker/js/bootstrap-datetimepicker.min.js', ['jquery', 'moment'], null, true);
@ -102,6 +104,9 @@ function armanty_get_scripts(){
wp_enqueue_script( 'form', get_template_directory_uri( ) . '/assets/js/components/form.js', ['jquery'], null, true);
}
}
if (is_page_template('templates/graduation.php')) {
wp_enqueue_script( 'graduation', get_template_directory_uri( ) . '/assets/js/components/graduation.js');
}
}
function armanty_register_menus(){

6
parts/landings/graduation/callback.php
View File

@ -6,12 +6,12 @@
</div>
<form action="callback.php" method="POST">
<label>
<input type="text" placeholder="Введите телефон">
<input type="text" placeholder="Введите телефон" id="phone">
</label>
<label>
<input type="text" placeholder="Введите ФИО">
<input type="text" placeholder="Введите ФИО" id="name">
</label>
<button class="graduation-btn">Отправить</button>
<button class="graduation-btn" id="callback-btn">Отправить</button>
</form>
<div class="copyright">
<span>© Copyright. Все права защищены</span>

2
parts/landings/graduation/main.php
View File

@ -2,7 +2,7 @@
<div class="main-information">
<h1>Эмоции<br> в центре событий</h1>
<p>Праздничные тарифы на детский выпускной <wbr>для незабываемых впечатлений</p>
<button class="graduation-btn">
<button class="graduation-btn" id="main-btn">
<span></span>
Хочу праздник
<span></span>

2
parts/landings/graduation/offer-packet.php
View File

@ -14,5 +14,5 @@
?>
</ul>
</div>
<button class="graduation-btn">Заказать</button>
<button class="graduation-btn" id="offer-btn">Заказать</button>
</div>

2
parts/landings/graduation/offers.php
View File

@ -10,7 +10,7 @@
<?php get_template_part('parts/landings/graduation/offer-packet', null, array(
title => 'Базовый',
price => 900,
description => ['1 квест', '3 часа лофта', 'Украшение шарами', 'Аниматор', 'Диплом выпускника']
description => ['1 квест', '3 часа лофта', 'Украшение шарами', 'Аниматор', 'Диплом выпускника', '2 проститутки', '3 грамма кокаина и гашиша']
)); ?>
</div>
<div class="col-4 packet">

9
parts/landings/graduation/top-menu.php
View File

@ -1,7 +1,14 @@
<div class="top__menu">
<div class="layer"></div>
<div class="content">
<span>Назад</span>
<a href="<?php echo get_home_url() ?>">Назад</a>
<div><i class="fa fa-map-marker" aria-hidden="true"></i> <span>Подольск</span></div>
</div>
</div>
<?php
if (is_page_template('templates/graduation.php')) {
wp_enqueue_script( 'graduation', get_template_directory_uri( ) . '/assets/js/components/graduation.js');
}
?>

54
src/js/components/graduation.js Normal file
View File

@ -0,0 +1,54 @@
$(document).ready(function () {
// Constansts
const TIME_FOR_SCROLL = 1000;
// Buttons
const mainBtn = document.getElementById('main-btn');
const offerBtns = document.querySelectorAll('#offer-btn');
const callbackBtn = document.getElementById('callback-btn');
const getMoreBtn = document.querySelector('.main-more')
const toFormBtns = [mainBtn, ...Array.from(offerBtns)]
// Inputs
const phoneInput = document.querySelector('form #phone');
const nameInput = document.querySelector('form #name');
// Blocks
const formBlock = document.querySelector('.graduation__block.callback');
const descriptionBlock = document.querySelector('.description')
// Add event listeners
toFormBtns.forEach(x => x.addEventListener('click', btnClickHandler.bind(null, formBlock)));
getMoreBtn.addEventListener('click', scrollToElem.bind(null, descriptionBlock));
callbackBtn.addEventListener('click', submitForm);
//Handlers
function btnClickHandler(elem) {
scrollToElem(elem);
phoneInput.focus();
}
// Function with jQuery
$(phoneInput).mask('+7 (000) 000-00-00');
function scrollToElem(element) {
$([document.documentElement, document.body]).animate({
scrollTop: $(element).offset().top
}, TIME_FOR_SCROLL);
}
function submitForm(event) {
event.preventDefault();
const name = nameInput.value;
const phone = phoneInput.value;
if (!name || !phone) return;
//AJAX send
}
})

29
src/sass/pages/graduation.sass
View File

@ -13,13 +13,15 @@ body
.graduation-btn
display: block
padding: 35px 65px
background: $btn-color
padding: 35px 71px
background: url('../../img/graduation/btn_bg.png') center no-repeat
outline: none
border: none
font-family: 'Shadow Regular'
color: #fff
font-size: 18px
&:active, &:focus
outline: none
main
background: center url('../../img/graduation/main_bg.png')
@ -105,7 +107,8 @@ main
text-align: center
&.offers
background: url('../../img/graduation/offers_bg.png') center no-repeat
// background: url('../../img/graduation/offers_bg.png') center no-repeat
background: url('../../img/graduation/offers_2x.jpg') center no-repeat
background-size: cover
.packets
@ -126,8 +129,9 @@ main
.graduation-btn
padding: 26px 50px
padding: 26px 70px
margin: 0 auto
background: url('../../img/graduation/btn_bg_packet.png') center no-repeat
.text
width: 263.01px
@ -199,12 +203,18 @@ main
text-align: center
&.callback
background: url('../../img/graduation/callback_bg.png')
// background: url('../../img/graduation/callback_bg.png')
background: url('../../img/graduation/callback_2x.jpg')
background-size: 100%
background-position: left bottom
position: relative
height: 100vh
.content
.graduation-btn
min-width: 300px
form
label
@ -213,6 +223,7 @@ main
margin: 0 auto 20px auto
padding: 14px
background: #fff
border-radius: 5px
input
width: 100%
@ -264,12 +275,16 @@ main
justify-content: space-between
align-self: center
span
&:first-child
a
font-family: Shadow
font-size: 24px
cursor: pointer
color: #fff
outline: none
&:hover
// text-decoration: none
span
&:last-child
font-family: Montserrat
font-weight: 600