Hash Change and Controller

Kirby 3 Questions 🤔
1

Hi Guys,

I’ve been stuck with this one for quite a long time now and tried almost everything.
I’m loading a JSON on window.onhashchange
My issue is :

  • The JSON is not correctly rendered when the hash is in the URL params
    not working : localhost/brand-assets#/?category=brand-identity

  • The JSON is, however, correctly rendered when no hash is present:
    working : localhost/brand-assets/?category=brand-identity

I understand the controller is not called when the hash changes. Do you have any tips or hints?
I’m sure I’m missing something here.

To help you better understand how the project is built:

in /templates
assets.php
assets.json.php

in /controllers
assets/php

Thanks in advance.

2

templates/assets.php

<!-- Filters -->
<nav id="filters">
  <div id="filtersContainer">
      <!-- Categories --><?php snippet('brand-assets/filters.category',  ['categories' => $categories]); ?>
      <!-- Extensions --><?php snippet('brand-assets/filters.extension', ['extensions' => $extensions]); ?>
  </div>
</nav>

<!-- Content -->
<main><?php snippet('brand-assets/files', ['files' => $files]); ?></main>

templates/assets.json.php

<?php
$html = snippet('brand-assets/files', ['files' => $files]);
$data['html'] = $html;
echo json_encode($data);

controllers/assets.php

return function() {

$page 		= page('brand-assets');
$categories = $page->children()->listed()->sortBy('date', 'desc');
$pages 		= $page->children()->listed()->sortBy('date', 'desc');
$files 		= $categories->files();


$extensions = [];
	foreach ($files as $file) {
		if (!in_array($file->extension(), $extensions)) {
			array_push($extensions, $file->extension());
	}
}

$_categories = [];
$_extensions = [];

if (isset($_GET["category"])) {
	$_categories = explode(',', $_GET["category"]);

}

if (isset($_GET["extension"])) {
	$_extensions = explode(',', $_GET["extension"]);
}

$files = page('brand-assets')->children()->listed()->files()->filter(function($file) use($_extensions, $_categories) {
	if($_extensions && !$_categories){
		if (in_array($file->extension(), $_extensions)){
      		return $file;
    	};
	}

	if($_categories && !$_extensions){
		if (in_array($file->parent()->slug(), $_categories)){
      		return $file;
    	};
	}

	if($_categories && $_extensions){
		if (in_array($file->extension(), $_extensions) && in_array($file->parent()->slug(), $_categories)){
      		return $file;
    	};
	}

	if(!$_categories && !$_extensions){
  		return $file;
	}
});


$files      = $files->paginate(10);
$pagination = $files->pagination();

return [
	'files' 		=> $files,
	'pages' 		=> $pages,
	'categories' 	=> $categories,
	'extensions' 	=> $extensions,
	'pagination' 	=> $pagination
];
};

javascript

updateHash(href) {

    var string  = '';
    var index   = 0;
    var _this 	= this;

    for (let prop in this.activeCollection){
        let entries = this.activeCollection[prop];
 		if(entries.length){
	      !index ? string += '?' + prop + '=': string += '&' + prop + '=';
	        entries.forEach(function(entry, index){
	          index < entries.length - 1 ? string += entry +',' : string += entry;
	        });
	      }
	      index += 1
         }
        
         location.hash = '/' + string;
         window.onhashchange = function() {
	       _this.loadjson(href);
		  };
	    }

 loadjson(href) {

    var _this       = this;
    var jsonFile    = href + '.json';
    console.log(jsonFile)

    let xmlhttp     = new XMLHttpRequest();

	        xmlhttp.onreadystatechange = function() {
	            if (this.readyState == 4 && this.status == 200) {
	            	console.log(this.responseText)
	                mainContainer = JSON.stringify(this.responseText);
	            }
	        };

	        xmlhttp.open('GET', jsonFile, true);
	        xmlhttp.send();
	    }