Skip to content

N
NAP-wordpress
Commit 59cf2f6f authored by imac's avatar imac
Browse files
Options

[Bugfix]Scroll Phototheque

parent 9a8e881c
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 94 deletions
wp-content/themes/nap/assets/css/main.css
View file @ 59cf2f6f
......@@ -1642,10 +1642,16 @@ label.chevron.bottom::first-letter {
}
.phototheque-content .header h2{
padding-top: 26px;
border-bottom: 1.4px solid rgba(24,37,102,0.3);
padding-bottom: 19px;
margin-bottom: 22px;
margin-bottom: 22px;.
}
.phototheque-content .header h2:after{
content: '';
width: 100%;
max-width: 205px;
height: 2px;
background: rgba(24,37,102,0.3);
display: block;
margin-top: 19px;
}
.phototheque-content nav{
padding-left: 24px;
......@@ -1669,6 +1675,9 @@ label.chevron.bottom::first-letter {
.phototheque-content nav ul li.current ul{
/*display: block;*/
}
.nav-phototeque .nav-content{
overflow: auto;
}
.gallery-wrapper {
padding: 0px 30px 80px;
width: 65%;
......
wp-content/themes/nap/assets/css/responsive.css
View file @ 59cf2f6f
......@@ -177,12 +177,29 @@
.nav-slider ul{
margin-left: 15px;
}
/* Phototheque */
.phototheque-content .header h2{
font-size: 30px;
line-height: 36px;
}
.phototheque-content .nav-phototeque {
padding: 40px 20px;
}
.phototheque-content nav{
padding-left: 0px;
}
.nav-phototeque .nav-content{
padding: 15px;
}
}
/* ------------------------*/ /* ---------->>> 860 <<<-----------*/ /* ------------------------*/
@media screen and (min-width: 861px) {
.nav-content{
display: block !important;
}
.main-nav .footer{
display: none;
}
.right-container{
padding-top: 0 !important;
}
......@@ -784,6 +801,14 @@
padding-top: 10px;
max-width: 80%;
}
/* Phototheque */
.nav-phototeque .nav-content{
display: block;
height: auto !important;
}
.phototheque-content nav ul ul{
display: none ;
}
/* form */
.form-wrapper{
padding: 23px 20px 20px;
......
wp-content/themes/nap/assets/js/main.js
View file @ 59cf2f6f
......@@ -6,7 +6,7 @@ $(function(){
$(document).find('a[href^="#"], .easyzoom a').click(function(e){
e.preventDefault();
});
$(document).find('.contact-form .open-filter').on('click touchend', function(){
$(document).find('.contact-form .open-filter').on('click', function(){
$('.contact-form form').slideToggle();
$(this).parent().toggleClass('on');
checkFilterContactWrapper();
......@@ -19,7 +19,7 @@ $(function(){
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click touchend", function(e) {
toggle.addEventListener( "click", function(e) {
var nav = $('.main-nav .nav-content');
//(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
$(".c-hamburger").toggleClass('is-active');
......@@ -51,10 +51,17 @@ $(function(){
// TODO: Remove init classes , init attr on html
product.find('figure img,ul,h3,.new,.download-btn').attr( { 'data-animate':"", 'data-animation-classes':"animated fadeIn" } );
animateOnScroll();
scrollAnchor("#load-page", true);
$("#load-page").on("scroll",{ items: "ul.phototheque li .subcat a"},onScroll);
if ($(document).find('#load-page').children().length){
scrollAnchor("#load-page", true);
elemToScroll = $(document).find("#load-page");
}else{
elemToScroll = $(document).find(".main");
scrollAnchor('body', true);
}
elemToScroll.on("scroll",{ items: "ul.phototheque li .subcat a"},onScroll);
document.getElementById('load-page').addEventListener('scroll', window.scrollAnimation.throttledEvent, false);
$('ul.phototheque').on('click',' li.parent-cat>a',function(e){
$(document).find('ul.phototheque').on('click',' li.parent-cat>a',function(e){
var windowWidth = $(window).width();
e.preventDefault();
e.stopPropagation();
$('.phototheque>li').removeClass('current');
......@@ -62,6 +69,15 @@ $(function(){
$(this).parent().addClass('current');
$('.phototheque .off .subcat').slideUp();
$(this).parent().find('.subcat').slideDown('slow');
if (windowWidth < 860){
$('.nav-phototeque .nav-content>ul>li').addClass('animated fadeOutLeft');
$('.nav-phototeque .nav-content li.current').removeClass('fadeOutLeft').addClass('fadeInRight');
$('.nav-phototeque .nav-content li.current ul').removeClass('fadeOutLeft').addClass('fadeInRight');
$('.nav-phototeque .nav-content li.current ul').css('display','block','important');
//.phototheque-content nav li
}
});
setTimeout(function(){
$('.gallery-wrapper').removeClass('hidden-elem').addClass('animated visible-elem fadeInUp');
......@@ -72,16 +88,19 @@ $(function(){
$('html').css('overflow','hidden');
e.preventDefault();
var link = $(this).attr("href");
var link = $(this).attr("href"),
windowWidth = $(window).width();
$('.load-page').parent().addClass('active');
history.pushState(null, null, link);
$('.load-page').load(link,function(){
$.fn.loadPageContent();
});
$( ".c-hamburger" ).trigger( "click" );
if (windowWidth < 860){
$( ".c-hamburger" ).trigger( "click" );
}
});
var div = $('.nav-content');
$('.footer-home-content').on('click touchend','.home-down:not(.scrolled)',function(e){
$('.footer-home-content').on('click','.home-down:not(.scrolled)',function(e){
TweenMax.killTweensOf('.nav-content');
var mainHeight = $('.main').outerHeight();
$(this).addClass('scrolled');
......@@ -392,6 +411,7 @@ $(function(){
navHeader = $('.nav-header').outerHeight(),
containerHeight = windowHeight - footerHeight ,
navPhototequeWidth = $('.nav-phototeque').outerWidth(),
navPhototequeHeight = $('.nav-phototeque').height(),
maxHeight = productHeight > windowHeight ? productHeight : containerHeight,
galleryWidth = windowWidth - navPhototequeWidth,
filterWidth = $('.right-container .left-panel').outerWidth(),
......@@ -411,6 +431,7 @@ $(function(){
var lastSection = $('#catalogue .panel-content section').last();
lastSection.height(2 * windowHeight/3 + lastSection.find('h2') - footerHeight );
}
$('.nav-phototeque .nav-content').outerHeight(navPhototequeHeight - $('.circle-btn').outerHeight()- $('.phototheque-content .header h2').outerHeight() - footerHeight);
if (windowWidth > 860){
$('#fullpage .chevron').css('left',navMenuWidth);
$('.container-bg').css({'height':'100%' , 'width' : navMenuWidth});
......@@ -526,17 +547,19 @@ $(items).each(function () {
var refElement = $(currLink.attr("href"));
//console.log(currLink);
if (refElement.length && refElement.position().top - ( $(".main").outerHeight() / 2 - titleHeight - $(".footer").outerHeight() ) <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
if ( timer ) clearTimeout(timer);
timer = setTimeout(function(){
$('.subcat a').removeClass("active");
currLink.addClass("active");
if ($('nav ul ul').find('li.active')){
$('nav ul li').removeClass('current').addClass('off');
parent = currLink.parent().parent().parent();
parent.addClass('current').removeClass('off');
setTimeout(function(){
$('.phototheque .off .subcat').slideUp();
parent.find('ul').slideDown();
},300)
$('.phototheque .off .subcat').stop().slideUp();
parent.find('ul').stop().slideDown();
}
}, 330);
}
else{
currLink.removeClass("active");
......@@ -544,23 +567,26 @@ $(items).each(function () {
});
}
function scrollAnchor(elemId, skipZero){
$('.subcat a[href^="#"]').on('click', function (e) {
e.preventDefault();
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target,
temp = 0;
$target = $(target);
$parent = $('#load-page');
$(elemId).stop().animate({
'scrollTop': $target.position().top //- $parent.offset().top
}, 1000, 'swing', function () {
window.location.hash = target;
$('.subcat').each(function(){
$(this).find('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target,
temp = 0;
$target = $(target);
//$parent = $('#load-page');
$(elemId).stop().animate({
'scrollTop': $target.position().top //- $parent.offset().top
}, 1000, 'swing', function () {
window.location.hash = target;
});
});
});
})
}
function checkFooterNavPosition(){
var mainHeight = $('.main-nav .nav-content').height(),
......@@ -630,7 +656,12 @@ $(document).ready(function(){
onScrollCover();
}, 330);
$.fn.open_nav();
scrollAnchor('html, body', false);
if ($(document).find('#load-page').children().length){
scrollAnchor("#load-page", true);
}else{
scrollAnchor('html,body', false);
}
$('.news-btn').open_news();
$('.close-btn').close_news();
$('.filter-wrapper').open_filter();
......
wp-content/themes/nap/functions.php
View file @ 59cf2f6f
......@@ -303,7 +303,7 @@ function nap_menu() {
foreach ($all_categories as $cat) {
if ($cat->category_parent == 0) {
$category_id = $cat->term_id;
$menu.= '<li data-page = "' . $category_id . '" data-img = "' . nap_category_image($category_id) . '"><a href="' . get_term_link($cat->slug, 'product_cat') . '">' . $cat->name . '</a>';
$menu.= '<li class ="parent-cat" data-page = "' . $category_id . '" data-img = "' . nap_category_image($category_id) . '"><a href="' . get_term_link($cat->slug, 'product_cat') . '">' . $cat->name . '</a>';
$args2 = array(
'taxonomy' => $taxonomy,
......
wp-content/themes/nap/nav-list.php
View file @ 59cf2f6f
......@@ -2,7 +2,7 @@
<?php
$arrow = 'arrow-white';
if (isset($current_page) and $current_page == 'phototheque') {
$arrow = 'arrow-blue';
$arrow = 'arrow-blue phototheque';
}
?>
......
wp-content/themes/nap/phototheque.php
View file @ 59cf2f6f
......@@ -25,7 +25,7 @@ if(!$ext_ref) {
<h2 class = "crete big-title">Photothèque</h2>
<?php include('nav-list.php'); ?>
</nav>
</nav>
</div>
</div>
......@@ -49,73 +49,74 @@ if(!$ext_ref) {
'hide_empty' => $empty
);
$all_categories = get_categories($args);
foreach ($all_categories as $cat) {
if ($cat->category_parent == 0) {
$category_id = $cat->term_id;
?>
<div class="gallery-wrapper right row">
<div class="panel panel-content product-list transition clearfix list-animation">
<?php foreach ($all_categories as $cat) {
if ($cat->category_parent == 0) {
$category_id = $cat->term_id;
$args2 = array(
'taxonomy' => $taxonomy,
'child_of' => 0,
'parent' => $category_id,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
$sub_cats = get_categories($args2);
?>
<div class="gallery-wrapper right row">
<div class="panel panel-content product-list transition clearfix list-animation">
<?php
if ($sub_cats) {
$i=0;
foreach ($sub_cats as $sub_category) :
?>
<section id = "cat<?php echo $i ?>-<?php echo $current_page; ?>">
<h2 class="crete small-title"><?php echo $sub_category->name ?></h2>
<div class="product-list">
$args2 = array(
'taxonomy' => $taxonomy,
'child_of' => 0,
'parent' => $category_id,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
$sub_cats = get_categories($args2);
?>
<?php
$args = array('post_type' => 'product', 'stock' => 1, 'posts_per_page' => -1, 'product_cat' => $sub_category->name, 'orderby' => 'title', 'order' => 'ASC');
$naps_posts = new WP_Query($args);
$options = array();
if ($sub_cats) {
$i=0;
foreach ($sub_cats as $sub_category) :
?>
<section id = "cat<?php echo $sub_category->term_id ?>"> <!--cat<?php // echo $i ?>-<?php // echo $current_page; ?>-->
<h2 class="crete small-title"><?php echo $sub_category->name ?></h2>
<div class="product-list">
<?php
$args = array('post_type' => 'product', 'stock' => 1, 'posts_per_page' => -1, 'product_cat' => $sub_category->name, 'orderby' => 'title', 'order' => 'ASC');
$naps_posts = new WP_Query($args);
$options = array();
while ($naps_posts->have_posts()) : $naps_posts->the_post();
$id = get_the_ID();
while ($naps_posts->have_posts()) : $naps_posts->the_post();
$id = get_the_ID();
$options['size'] = 'big';
$options['image'] =
$args = array(
'post_type' => array('product', 'product_variation'),
'post_status' => array('private', 'publish'),
'numberposts' => -1,
'orderby' => 'menu_order',
'order' => 'asc',
'post_parent' => $id
);
$options['size'] = 'big';
$options['image'] =
$args = array(
'post_type' => array('product', 'product_variation'),
'post_status' => array('private', 'publish'),
'numberposts' => -1,
'orderby' => 'menu_order',
'order' => 'asc',
'post_parent' => $id
);
echo nap_get_item($id, $args, $current_page, $options);
echo nap_get_item($id, $args, $current_page, $options);
endwhile;
wp_reset_query();
?>
</div>
</section>
<?php
$i++;
endforeach;
}
?>
</div><!-- /product-list -->
</div><!-- /product-list -->
<?php
}
}
?>
endwhile;
wp_reset_query();
?>
</div>
</section>
<?php
$i++;
endforeach;
}
?>
<?php
}
} //END foreach
?>
</div><!-- /product-list -->
</div><!-- /product-list -->
</div>
</div>
<?php
......
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