Skip to content

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

[Bugfix]Scroll Phototheque

parent 9a8e881c
Show 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();
if ($(document).find('#load-page').children().length){
scrollAnchor("#load-page", true); scrollAnchor("#load-page", true);
$("#load-page").on("scroll",{ items: "ul.phototheque li .subcat a"},onScroll); 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();
}); });
if (windowWidth < 860){
$( ".c-hamburger" ).trigger( "click" ); $( ".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,7 +567,8 @@ $(items).each(function () { ...@@ -544,7 +567,8 @@ $(items).each(function () {
}); });
} }
function scrollAnchor(elemId, skipZero){ function scrollAnchor(elemId, skipZero){
$('.subcat a[href^="#"]').on('click', function (e) { $('.subcat').each(function(){
$(this).find('a[href^="#"]').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$('a').each(function () { $('a').each(function () {
$(this).removeClass('active'); $(this).removeClass('active');
...@@ -554,13 +578,15 @@ function scrollAnchor(elemId, skipZero){ ...@@ -554,13 +578,15 @@ function scrollAnchor(elemId, skipZero){
menu = target, menu = target,
temp = 0; temp = 0;
$target = $(target); $target = $(target);
$parent = $('#load-page'); //$parent = $('#load-page');
$(elemId).stop().animate({ $(elemId).stop().animate({
'scrollTop': $target.position().top //- $parent.offset().top 'scrollTop': $target.position().top //- $parent.offset().top
}, 1000, 'swing', function () { }, 1000, 'swing', function () {
window.location.hash = target; 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
...@@ -49,7 +49,10 @@ if(!$ext_ref) { ...@@ -49,7 +49,10 @@ if(!$ext_ref) {
'hide_empty' => $empty 'hide_empty' => $empty
); );
$all_categories = get_categories($args); $all_categories = get_categories($args);
foreach ($all_categories as $cat) { ?>
<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) { if ($cat->category_parent == 0) {
$category_id = $cat->term_id; $category_id = $cat->term_id;
...@@ -66,14 +69,12 @@ if(!$ext_ref) { ...@@ -66,14 +69,12 @@ if(!$ext_ref) {
); );
$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 <?php
if ($sub_cats) { if ($sub_cats) {
$i=0; $i=0;
foreach ($sub_cats as $sub_category) : foreach ($sub_cats as $sub_category) :
?> ?>
<section id = "cat<?php echo $i ?>-<?php echo $current_page; ?>"> <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> <h2 class="crete small-title"><?php echo $sub_category->name ?></h2>
<div class="product-list"> <div class="product-list">
...@@ -110,12 +111,12 @@ if(!$ext_ref) { ...@@ -110,12 +111,12 @@ if(!$ext_ref) {
endforeach; endforeach;
} }
?> ?>
</div><!-- /product-list -->
</div><!-- /product-list -->
<?php <?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