book_test

book_test

add_shortcode('isotope',function($atts,$content=null){
	
	wp_enqueue_script('isotope-js','https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js',array(),true);
	
	$query = new WP_Query(array(
		'post_type'=>'post',
		'posts_per_page'=>9
	));
	
	if($query->have_posts()){
		$posts = [];
		$all_categories=[];
		$all_tags = [];
		while($query->have_posts()){
			$query->the_post();
			global $post;
			$category = wp_get_object_terms($post->ID,'category');
			$tag = wp_get_object_terms($post->ID,'post_tag');
			if(!empty($category)){
				$post->cats=[];
				foreach($category as $cat){
                     $post->cats[]=$cat->slug;
					if(!in_array($cat->term_id,array_keys($all_categories))){
						$all_categories[$cat->term_id]=$cat;
					}
				}
			}
			if(!empty($tag)){
				$post->tags=[];
				foreach($tag as $t){
					$post->tags[] = $t->slug;
					if(!in_array($t->term_id,array_keys($all_tags))){
						$all_tags[$t->term_id]=$t;
					}
				}
			}
			$posts[] = $post;
		}
		wp_reset_postdata();

		echo '<div class="isotope_wrapper"><div>';
		if(!empty($all_categories)){
			?>
			<ul class="post_categories">
			<?php
			 	foreach($all_categories as $category){
					?>
				<li class="grid-selector" data-filter="<?php echo $category->slug; ?>"><?php echo $category->name; ?></li>
				     <?php
				}
			?>
			</ul>
			<?php
		}
		if(!empty($all_tags)){
			?>
			<ul class="post_tags">
			<?php
			 	foreach($all_tags as $category){
					?>
				<li class="grid-subselector" data-filter="<?php echo $category->slug; ?>"><?php echo $category->name; ?></li>
				     <?php
				}
			?>
			</ul>
			<?php
		}
		?>
		</div>
		<div class="grid">
		<?php
		foreach($posts as $post){
			
			?>
			<div class="grid-item <?php echo empty($post->cats)?'':implode(',',$post->cats); ?> <?php echo empty($post->tags)?'':implode(',',$post->tags); ?>">
				
				<h2>
					<a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title; ?></a>
				</h2>
			</div>
			<?php
		}
		?>
		</div></div>
		<script>
			window.addEventListener('load',function(){


				var iso = new Isotope( document.querySelector('.grid'), {
				  itemSelector: '.grid-item',
				  layoutMode: 'fitRows'
				});

				
				document.querySelectorAll('.grid-selector').forEach(function(el){

					el.addEventListener('click',function(){
						
						let sfilter = el.getAttribute('data-filter');

						iso.arrange({
						  filter: function( gridIndex, itemElem ) {
						    return itemElem.classList.contains(sfilter);
						  }
						});
						
					});
				});


				document.querySelectorAll('.grid-subselector').forEach(function(el){

					el.addEventListener('click',function(){
						
						let sfilter = el.getAttribute('data-filter');

						iso.arrange({
						  filter: function( gridIndex, itemElem ) {
						    return itemElem.classList.contains(sfilter);
						  }
						});
						
					});
				});
				
			});


		</script>
		<style>
			.isotope_wrapper {
			    display: flex;
			    flex-direction: column;
			}

			.isotope_wrapper > div {
			    display: flex;
			    flex-direction: row;
			    flex-wrap: wrap;
			    margin: 0 -1rem;
			    justify-content: space-between;
			}

			.isotope_wrapper > div > ul {
			    display: flex;
			    flex-wrap: wrap;
			    margin: 1rem;
			}

			.isotope_wrapper > div>div {
			    padding: 1rem;
			    border: 1px solid #eee;
			    margin: 1rem;
			}

			.isotope_wrapper > div > ul > li {
			    padding: 0.5rem 1rem;
			    background: #eee;
			    margin: 2px;cursor:pointer;
			    border-radius: 4px;
			}
		</style>
		<?php
	}
});