Skip to content

Commit

Permalink
DRY implementation of sidebar
Browse files Browse the repository at this point in the history 
Much better results and  much less code
  • Loading branch information
@LebCit
LebCit committed Nov 13, 2018
1 parent 353de03 commit 1f4bca1
Show file tree
Hide file tree
Showing 9 changed files with 88 additions and 139 deletions.
62 changes: 0 additions & 62 deletions assets/js/customizer.js
View file
Expand Up @@ -20,66 +20,4 @@
});
});

// Site layouts.
wp.customize( 'site_layouts', function( value ) {
value.bind( function( to ) {
if ( 'sidebar-right' === to ) {
if ($('#primary').hasClass('col-md-push-4')) {$('#primary').removeClass('col-md-push-4')} // Case sidebar-left to sidebar-right
$( '#primary' ).addClass( 'col-md-8' ).removeClass( 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1' );
if ($('#secondary').hasClass('col-md-pull-8')) {$('#secondary').removeClass('col-md-pull-8');} // Case sidebar-left to sidebar-right
$( '#secondary' ).show(); // show() the .sidebar in the customize preview iframe @see the-clean-blog.js - Site layout
} else if ( 'sidebar-left' === to ) {
if($('#primary').is(':not(.col-md-8)')) {$('#primary').addClass('col-md-8')} // Case fullwidth to sidebar-left
$( '#primary' ).addClass( 'col-md-push-4' ).removeClass( 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1' ); // Case sidebar-right to sidebar-left or fullwidth to sidebar-left
$('#secondary').addClass('col-md-pull-8'); // Case sidebar-right to sidebar-left or fullwidth to sidebar-left
$( '#secondary' ).show(); // show() the .sidebar in the customize preview iframe @see the-clean-blog.js - Site layout
} else { // ( 'fullwidth' === to )
if($('#primary').hasClass('col-md-push-4')) {$('#primary').removeClass('col-md-push-4')} // Case sidebar-left to fullwidth
$( '#primary' ).removeClass( 'col-md-8' ).addClass( 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1' ); // Case sidebar-left to fullwidth or sidebar-right to fullwidth
$( '#secondary' ).hide(); // hide() the .sidebar from the customize preview iframe @see the-clean-blog.js - Site layout
}
} );
} );

// Posts layouts.
wp.customize( 'posts_layouts', function( value ) {
value.bind( function( to ) {
if ( 'sidebar-right-posts' === to ) {
if ($('#primary').hasClass('col-md-push-4')) {$('#primary').removeClass('col-md-push-4')} // Case sidebar-left to sidebar-right
$( '#primary' ).addClass( 'col-md-8' ).removeClass( 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1' );
if ($('#secondary').hasClass('col-md-pull-8')) {$('#secondary').removeClass('col-md-pull-8');} // Case sidebar-left to sidebar-right
$( '#secondary' ).show(); // show() the .sidebar in the customize preview iframe @see the-clean-blog.js - Site layout
} else if ( 'sidebar-left-posts' === to ) {
if($('#primary').is(':not(.col-md-8)')) {$('#primary').addClass('col-md-8')} // Case fullwidth to sidebar-left
$( '#primary' ).addClass( 'col-md-push-4' ).removeClass( 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1' ); // Case sidebar-right to sidebar-left or fullwidth to sidebar-left
$('#secondary').addClass('col-md-pull-8'); // Case sidebar-right to sidebar-left or fullwidth to sidebar-left
$( '#secondary' ).show(); // show() the .sidebar in the customize preview iframe @see the-clean-blog.js - Site layout
} else { // ( 'fullwidth-posts' === to )
if($('#primary').hasClass('col-md-push-4')) {$('#primary').removeClass('col-md-push-4')} // Case sidebar-left to fullwidth
$( '#primary' ).removeClass( 'col-md-8' ).addClass( 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1' ); // Case sidebar-left to fullwidth or sidebar-right to fullwidth
$( '#secondary' ).hide(); // hide() the .sidebar from the customize preview iframe @see the-clean-blog.js - Site layout
}
} );
} );

// Pages layouts.
wp.customize( 'pages_layouts', function( value ) {
value.bind( function( to ) {
if ( 'sidebar-right-pages' === to ) {
if ($('#primary').hasClass('col-md-push-4')) {$('#primary').removeClass('col-md-push-4')} // Case sidebar-left to sidebar-right
$( '#primary' ).addClass( 'col-md-8' ).removeClass( 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1' );
if ($('#secondary').hasClass('col-md-pull-8')) {$('#secondary').removeClass('col-md-pull-8');} // Case sidebar-left to sidebar-right
$( '#secondary' ).show(); // show() the .sidebar in the customize preview iframe @see the-clean-blog.js - Site layout
} else if ( 'sidebar-left-pages' === to ) {
if($('#primary').is(':not(.col-md-8)')) {$('#primary').addClass('col-md-8')} // Case fullwidth to sidebar-left
$( '#primary' ).addClass( 'col-md-push-4' ).removeClass( 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1' ); // Case sidebar-right to sidebar-left or fullwidth to sidebar-left
$('#secondary').addClass('col-md-pull-8'); // Case sidebar-right to sidebar-left or fullwidth to sidebar-left
$( '#secondary' ).show(); // show() the .sidebar in the customize preview iframe @see the-clean-blog.js - Site layout
} else { // ( 'fullwidth-pages' === to )
if($('#primary').hasClass('col-md-push-4')) {$('#primary').removeClass('col-md-push-4')} // Case sidebar-left to fullwidth
$( '#primary' ).removeClass( 'col-md-8' ).addClass( 'col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1' ); // Case sidebar-left to fullwidth or sidebar-right to fullwidth
$( '#secondary' ).hide(); // hide() the .sidebar from the customize preview iframe @see the-clean-blog.js - Site layout
}
} );
} );
})(jQuery);
57 changes: 2 additions & 55 deletions assets/js/the-clean-blog.js
View file
Expand Up @@ -342,62 +342,9 @@ jQuery(document).ready(function ($) {
});
//End 11.

//12. Site, Posts and Pages layout
var siteLayoutName = thecleanblog_set.thecleanblog_site_layouts;
var postsLayoutName = thecleanblog_set.thecleanblog_posts_layouts;
var pagesLayoutName = thecleanblog_set.thecleanblog_pages_layouts;
if ($('body').hasClass('page-template-generic-full-template') || $('body').hasClass('post-template-generic-full-template')){
$('#secondary').hide(); // hide() the .sidebar from the live site
} else if ($('body').hasClass('page-template-generic-left-template') || $('body').hasClass('post-template-generic-left-template')) {
$('#primary').addClass('col-md-push-4');
$('#secondary').addClass('col-md-pull-8');
$('#secondary').show(); // show() the .sidebar in the live site
} else if ($('body').hasClass('page-template-generic-rigth-template') || $('body').hasClass('post-template-generic-rigth-template')) {
$('#primary').removeClass('col-md-push-4');
$('#secondary').removeClass('col-md-pull-8');
$('#secondary').show(); // show() the .sidebar in the live site
} else if ($('body').hasClass('post-template-default')){
if(postsLayoutName == 'fullwidth-posts') {
$('#secondary').hide(); // hide() the .sidebar from the live site @see customizer.js - Posts layouts.
} else if (postsLayoutName == 'sidebar-left-posts') {
$('#primary').addClass('col-md-push-4');
$('#secondary').addClass('col-md-pull-8');
$('#secondary').show(); // show() the .sidebar in the live site @see customizer.js - Posts layouts.
} else { //(postsLayoutName == 'sidebar-right-posts')
$('#primary').removeClass('col-md-push-4');
$('#secondary').removeClass('col-md-pull-8');
$('#secondary').show(); // show() the .sidebar in the live site @see customizer.js - Posts layouts.
}
} else if ($('body').hasClass('page-template-default')){
if(pagesLayoutName == 'fullwidth-pages') {
$('#secondary').hide(); // hide() the .sidebar from the live site @see customizer.js - Pages layouts.
} else if (pagesLayoutName == 'sidebar-left-pages') {
$('#primary').addClass('col-md-push-4');
$('#secondary').addClass('col-md-pull-8');
$('#secondary').show(); // show() the .sidebar in the live site @see customizer.js - Pages layouts.
} else { //(pagesLayoutName == 'sidebar-right-pages')
$('#primary').removeClass('col-md-push-4');
$('#secondary').removeClass('col-md-pull-8');
$('#secondary').show(); // show() the .sidebar in the live site @see customizer.js - Pages layouts.
}
} else {
if(siteLayoutName == 'fullwidth') {
$('#secondary').hide(); // hide() the .sidebar from the live site @see customizer.js - Site layout
} else if (siteLayoutName == 'sidebar-left') {
$('#primary').addClass('col-md-push-4');
$('#secondary').addClass('col-md-pull-8');
$('#secondary').show(); // show() the .sidebar in the live site @see customizer.js - Site layout
} else { //(siteLayoutName == 'sidebar-right')
$('#primary').removeClass('col-md-push-4');
$('#secondary').removeClass('col-md-pull-8');
$('#secondary').show(); // show() the .sidebar in the live site @see customizer.js - Site layout
}
}
//End 12.

//13. Some styles for the calendar widget
//12. Some styles for the calendar widget
// Modified linear-gradient to work in IE and Edge.
$('.widget_calendar #today').parent().prevAll().children(':not(.pad)').css('background-image', 'linear-gradient(to right bottom, transparent 49%, red 50%, transparent 51%)');
$('.widget_calendar #today').prevAll().css('background-image', 'linear-gradient(to right bottom, transparent 49%, red 50%, transparent 51%)');
//End 13.
//End 12.
});
12 changes: 6 additions & 6 deletions components/main/main-template.php
View file
Expand Up @@ -16,11 +16,11 @@
?>
<div id="primary" class="content-area col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

<?php elseif ( 'sidebar-right-posts' === $layout_value ) : ?>
<?php elseif ( 'sidebar-right-posts' === $layout_value ) : ?>
<div id="primary" class="content-area col-md-8">

<?php elseif ( 'sidebar-left-posts' === $layout_value ) : ?>
<div id="primary" class="col-md-8 col-md-push-4">
<div id="primary" class="content-area col-md-8 col-md-push-4">

<?php
endif;
Expand All @@ -32,11 +32,11 @@
?>
<div id="primary" class="content-area col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

<?php elseif ( 'sidebar-right-pages' === $layout_value ) : ?>
<?php elseif ( 'sidebar-right-pages' === $layout_value ) : ?>
<div id="primary" class="content-area col-md-8">

<?php elseif ( 'sidebar-left-pages' === $layout_value ) : ?>
<div id="primary" class="col-md-8 col-md-push-4">
<div id="primary" class="content-area col-md-8 col-md-push-4">

<?php
endif;
Expand All @@ -48,11 +48,11 @@
?>
<div id="primary" class="content-area col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

<?php elseif ( 'sidebar-right' === $layout_value ) : ?>
<?php elseif ( 'sidebar-right' === $layout_value ) : ?>
<div id="primary" class="content-area col-md-8">

<?php elseif ( 'sidebar-left' === $layout_value ) : ?>
<div id="primary" class="col-md-8 col-md-push-4">
<div id="primary" class="content-area col-md-8 col-md-push-4">

<?php endif;
}
Expand Down
9 changes: 3 additions & 6 deletions inc/customizer.php
View file
Expand Up @@ -2681,7 +2681,6 @@ function is_preloader_activated() {
'sidebar-right' => plugins_url() . '/kirki/assets/images/2cr.png',
'sidebar-left' => plugins_url() . '/kirki/assets/images/2cl.png',
),
'transport' => 'postMessage',
'active_callback' => 'is_home',
)
);
Expand All @@ -2704,7 +2703,7 @@ function is_only_single_no_template() {
// Check if is_single returns true and is_page-template is false.
return is_single() === true && ! is_page_template();
}
// 10.2.1- Post Layouts
// 10.2.1- Posts Layouts
The_Clean_Blog_Kirki::add_field(
'thecleanblog',
array(
Expand All @@ -2720,7 +2719,6 @@ function is_only_single_no_template() {
'sidebar-right-posts' => plugins_url() . '/kirki/assets/images/2cr.png',
'sidebar-left-posts' => plugins_url() . '/kirki/assets/images/2cl.png',
),
'transport' => 'postMessage',
'active_callback' => 'is_only_single_no_template',
)
);
Expand All @@ -2740,10 +2738,10 @@ function is_only_single_no_template() {
* Function to check if we are viewing a page with no template.
*/
function is_only_page_no_template() {
// Check if is_single returns true and is_page-template is false.
// Check if is_page returns true and is_page-template is false.
return is_page() === true && ! is_page_template();
}
// 10.3.1- Post Layouts
// 10.3.1- Pages Layouts
The_Clean_Blog_Kirki::add_field(
'thecleanblog',
array(
Expand All @@ -2759,7 +2757,6 @@ function is_only_page_no_template() {
'sidebar-right-pages' => plugins_url() . '/kirki/assets/images/2cr.png',
'sidebar-left-pages' => plugins_url() . '/kirki/assets/images/2cl.png',
),
'transport' => 'postMessage',
'active_callback' => 'is_only_page_no_template',
)
);
1 change: 0 additions & 1 deletion page-templates/generic-full-template.php
View file
Expand Up @@ -41,5 +41,4 @@
</div>
<!-- #primary .content-area -->
<?php
get_sidebar();
get_footer();
8 changes: 6 additions & 2 deletions page-templates/generic-left-template.php
View file
Expand Up @@ -13,7 +13,7 @@
get_header();

?>
<div id="primary" class="col-md-8 col-md-push-4">
<div id="primary" class="content-area col-md-8 col-md-push-4">
<main id="main" class="site-main" role="main">

<?php
Expand All @@ -40,6 +40,10 @@
</main>
</div>
<!-- #primary .content-area -->
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="sidebar widget-area col-md-4 col-md-pull-8" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .col-md-4 .col-md-pull-8 -->
<?php endif; ?>
<?php
get_sidebar();
get_footer();
6 changes: 5 additions & 1 deletion page-templates/generic-rigth-template.php
View file
Expand Up @@ -40,6 +40,10 @@
</main>
</div>
<!-- #primary .content-area -->
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="sidebar widget-area col-md-4" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .col-md-4 -->
<?php endif; ?>
<?php
get_sidebar();
get_footer();
71 changes: 66 additions & 5 deletions sidebar.php
View file
Expand Up @@ -8,8 +8,69 @@

?>

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="sidebar widget-area col-md-4" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .col-md-4 -->
<?php endif; ?>
<?php

if ( is_active_sidebar( 'sidebar-1' ) ) :
if ( is_single() ) {

$layout_value = get_theme_mod( 'posts_layouts', 'fullwidth-posts' );

if ( 'fullwidth-posts' === $layout_value ) :
?>
<aside id="secondary" style="display:none">

<?php elseif ( 'sidebar-right-posts' === $layout_value ) : ?>
<aside id="secondary" class="sidebar widget-area col-md-4" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .col-md-4 -->

<?php elseif ( 'sidebar-left-posts' === $layout_value ) : ?>
<aside id="secondary" class="sidebar widget-area col-md-4 col-md-pull-8" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .col-md-4 .col-md-pull-8 -->

<?php
endif;
} elseif ( is_page() ) {

$layout_value = get_theme_mod( 'pages_layouts', 'fullwidth-pages' );

if ( 'fullwidth-pages' === $layout_value ) :
?>
<aside id="secondary" style="display:none">

<?php elseif ( 'sidebar-right-pages' === $layout_value ) : ?>
<aside id="secondary" class="sidebar widget-area col-md-4" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .col-md-4 -->

<?php elseif ( 'sidebar-left-pages' === $layout_value ) : ?>
<aside id="secondary" class="sidebar widget-area col-md-4 col-md-pull-8" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .col-md-4 .col-md-pull-8 -->

<?php
endif;
} else {

$layout_value = get_theme_mod( 'site_layouts', 'fullwidth' );

if ( 'fullwidth' === $layout_value ) :
?>
<aside id="secondary" style="display:none">

<?php elseif ( 'sidebar-right' === $layout_value ) : ?>
<aside id="secondary" class="sidebar widget-area col-md-4" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .col-md-4 -->

<?php elseif ( 'sidebar-left' === $layout_value ) : ?>
<aside id="secondary" class="sidebar widget-area col-md-4 col-md-pull-8" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .col-md-4 .col-md-pull-8 -->

<?php
endif;
}
endif;
?>
1 change: 0 additions & 1 deletion style.css
View file
Expand Up @@ -809,7 +809,6 @@ body {
# Widgets
--------------------------------------------------------------*/
.sidebar {
display: none; /* Hide sidebar-left before displaying it or we will see it as sidebar-right for 1s */
margin-top: 20px;
}

Expand Down

0 comments on commit 1f4bca1

Please sign in to comment.