umkasanki · September 11, 2018 17:46
diff --git a/tagged-entries.twig b/tagged-entries.twig
 {% if not craft.request.isAjax %}
    <!DOCTYPE html>
    <html>
    <head>
        <title>Tag page</title>
        <style type="text/css">
            .loading {
                display: none;
            }
            .is-loading + .loading {
                display: block;
            }
        </style>
    </head>
    <body>
        <p><a href="{{ url('blog') }}">&larr; Blog</a></p>
        <aside>
            <b>All Tags</b>
            <nav id="js-tags">
                {% for tag in craft.tags.group('department').all() %}
                    <a href="{{ url('blog?tags=' ~ tag.slug) }}" data-slug="{{ tag.slug }}">{{ tag }}</a>{{ not loop.last ? ',' }}
                {% endfor %}
            </nav>
        </aside>        
        <div id="js-list">
 {% endif %}  

        {% set tagsString = craft.app.request.getParam('tags') %}
        {% set tagsArr = tagsString|split('_') %}
        {% set tagsTitles = '' %}
        {# {{ d(tagsArr) }} #}

        {% set combineType = 'or' %}
        {# {% set combineType = 'and' %} #}
        {% set relationParam = [combineType] %}

        {% for tagSlug in tagsArr %}

            {% set tag = craft.tags.slug(tagSlug).one() %}
            {% if tag != null %}            
                {% set relationParam = relationParam|merge([{ targetElement: tag }]) %}
                {% set tagsTitles = tagsTitles ~ tag.title|ucfirst %}
                {% if not loop.last %}
                    {% set tagsTitles = tagsTitles ~ ', ' %}
                {% endif %}
            {% endif %}
            
        {% endfor %}
        {# {{ d(relationParam) }} #}

        {% if tagsArr|length %}
            <h1>Entries tagged with “{{ tagsTitles }}”</h1>            
        {% else %}
            <h1>All Entries</h1>
        {% endif %}

        {% set entries = craft.entries.relatedTo(relationParam).order('title') %}

        {% if entries | length %}
            <ul>
                {% for entry in entries %}
                    <li>
                        <b>{{ entry|ucfirst }}</b><br>
                        {% for tag in entry.tags.all() %}
                            <a href="{{ url('blog/tag/' ~ tag.slug) }}">{{ tag }}</a>
                        {% endfor %}
                    </li>               
                {% endfor %}
            </ul>
        {% else %}
            <p>No entries could be found with that tag.</p>
        {% endif %}


 {% if not craft.request.isAjax %}
        </div>
        <div class="loading">Loading...</div>
        <button id="js-show-more">Show more</button>

        <script
              src="https://code.jquery.com/jquery-3.3.1.js"
              integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
              crossorigin="anonymous"></script>
        
        {% js on ready %}  
                  
            var $tags = $('#js-tags a');
            var $container = $('#js-list');
            var $loading = $('#js-loading');
            var path = location.pathname;
            var lastSegment = path.substr(path.lastIndexOf('/') + 1);
            var activeTags = [];
            var activeTagsString = '';
            var page = 2;

            $tags.click(function(event) {
                event.preventDefault();
                
                var tagSlug = $(this).attr('data-slug');    
                var tagIndex = activeTags.indexOf(tagSlug);
                console.log( tagIndex );

                if (tagIndex == -1) {
                    activeTags.push(tagSlug);
                } else {
                    activeTags.splice(tagIndex, 1);
                }

                if (activeTags.length > 0) {
                    activeTagsString = '?tags=' + activeTags.join('_');
                } else {
                    activeTagsString = '';
                }

                console.log( activeTags );
                console.log( activeTagsString );
                
                setHist( lastSegment + activeTagsString );
                updContent( location.href  );

            });

            function setHist(argument) {
                history.pushState(null, null, argument);
            }

            function updContent(url) {
                $container.addClass('is-loading');
                $.get( location.href, function( data ) {

                    $container.removeClass('is-loading');
                    $container.html( data ).fadeIn();

                });
            }

            window.onpopstate = function(event) {
                updContent( document.location );
            };  
                
        {% endjs %}

    </body>
    </html>
 {% endif %}
	{% if not craft.request.isAjax %}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tag page</title>
	<style type="text/css">
	.loading {
	display: none;
	}
	.is-loading + .loading {
	display: block;
	}
	</style>
	</head>
	<body>
	<p><a href="{{ url('blog') }}">← Blog</a></p>
	<aside>
	<b>All Tags</b>
	<nav id="js-tags">
	{% for tag in craft.tags.group('department').all() %}
	<a href="{{ url('blog?tags=' ~ tag.slug) }}" data-slug="{{ tag.slug }}">{{ tag }}</a>{{ not loop.last ? ',' }}
	{% endfor %}
	</nav>
	</aside>
	<div id="js-list">
	{% endif %}

	{% set tagsString = craft.app.request.getParam('tags') %}
	{% set tagsArr = tagsString\|split('_') %}
	{% set tagsTitles = '' %}
	{# {{ d(tagsArr) }} #}

	{% set combineType = 'or' %}
	{# {% set combineType = 'and' %} #}
	{% set relationParam = [combineType] %}

	{% for tagSlug in tagsArr %}

	{% set tag = craft.tags.slug(tagSlug).one() %}
	{% if tag != null %}
	{% set relationParam = relationParam\|merge([{ targetElement: tag }]) %}
	{% set tagsTitles = tagsTitles ~ tag.title\|ucfirst %}
	{% if not loop.last %}
	{% set tagsTitles = tagsTitles ~ ', ' %}
	{% endif %}
	{% endif %}

	{% endfor %}
	{# {{ d(relationParam) }} #}

	{% if tagsArr\|length %}
	<h1>Entries tagged with “{{ tagsTitles }}”</h1>
	{% else %}
	<h1>All Entries</h1>
	{% endif %}

	{% set entries = craft.entries.relatedTo(relationParam).order('title') %}

	{% if entries \| length %}
	<ul>
	{% for entry in entries %}
	<li>
	<b>{{ entry\|ucfirst }}</b><br>
	{% for tag in entry.tags.all() %}
	<a href="{{ url('blog/tag/' ~ tag.slug) }}">{{ tag }}</a>
	{% endfor %}
	</li>
	{% endfor %}
	</ul>
	{% else %}
	<p>No entries could be found with that tag.</p>
	{% endif %}


	{% if not craft.request.isAjax %}
	</div>
	<div class="loading">Loading...</div>
	<button id="js-show-more">Show more</button>

	<script
	src="https://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>

	{% js on ready %}

	var $tags = $('#js-tags a');
	var $container = $('#js-list');
	var $loading = $('#js-loading');
	var path = location.pathname;
	var lastSegment = path.substr(path.lastIndexOf('/') + 1);
	var activeTags = [];
	var activeTagsString = '';
	var page = 2;

	$tags.click(function(event) {
	event.preventDefault();

	var tagSlug = $(this).attr('data-slug');
	var tagIndex = activeTags.indexOf(tagSlug);
	console.log( tagIndex );

	if (tagIndex == -1) {
	activeTags.push(tagSlug);
	} else {
	activeTags.splice(tagIndex, 1);
	}

	if (activeTags.length > 0) {
	activeTagsString = '?tags=' + activeTags.join('_');
	} else {
	activeTagsString = '';
	}

	console.log( activeTags );
	console.log( activeTagsString );

	setHist( lastSegment + activeTagsString );
	updContent( location.href );

	});

	function setHist(argument) {
	history.pushState(null, null, argument);
	}

	function updContent(url) {
	$container.addClass('is-loading');
	$.get( location.href, function( data ) {

	$container.removeClass('is-loading');
	$container.html( data ).fadeIn();

	});
	}

	window.onpopstate = function(event) {
	updContent( document.location );
	};

	{% endjs %}

	</body>
	</html>
	{% endif %}