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