Category Tree Wise and Survey Name wise listing Surveys

[Ap.Muthu]

In application/views/surveys/publicSurveyList.php in v2.0.5.1 in order to display the survey list in alphabetical order instead of the existing order in which it was created and collapsing the into a drill down category list, the following changes need to be made. Introduced some javascript and a new function at the beginning of the file as:

functionhttps://github.com/apmuthu/LimeSurvey/issues/%3C/span%3E" target="_blank" rel="nofollow order_links($list) {
	// a new dom object
	$dom = new domDocument; 
	libxml_use_internal_errors(true);
	libxml_clear_errors();
	// discard white space
	$dom->preserveWhiteSpace = false;

	$dom->loadHTML($list);
	$a = $dom->getElementsByTagName('a');
	$alpha = array();
	foreach ($a as $b) {
		$dc = utf8_decode($b->nodeValue);
		$alpha[$dc] = $b->getAttribute('href');
	}
	ksort($alpha);
	$c = '';

	$c .= '<ul id="myUL">'.chr(10).'<ul class="nested">'.chr(10);	
	$old_cat = '';

	foreach($alpha as $k => $v) {
		$cv = substr($k, 0, -4);
		if ($old_cat <> $cv) {
			$c .= '</ul>' . chr(10) . '<li><span class="caret">'. $cv . '</span>' . chr(10) . '<ul class="nested">';
			$old_cat = $cv;
		}
		$c .= '<li><a class="surveytitle" href="' . $v . '">' . $k . '</a></li>';
	}
	$c .= '</ul>';
	$c .= '
	<script>
var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
</script>
';
	return $c;	
}

and after the first foreach stanza in the file, execute it with:

$list = order_links($list);

Then introduce the CSS in the templates/default/startpage.pstpl in the head part and in other templates as well if needed:

<style>
	 /* Remove default bullets */
ul, #myUL {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}
</style>

LimeSurvey_Category_Display_2.05.mod.zip

[Ap.Muthu]

Screenshot that uses the last word of the survey of 3 characters for ordering and the rest for category.

[Ap.Muthu]

The above suffers from a z-index inherited issue and hence a pure html collapsible menu with no added CSS and JS elements has been hammered out as below.

In application/views/surveys/publicSurveyList.php in v2.0.5.1 in order to display the survey list in alphabetical order instead of the existing order in which it was created and collapsing the into a drill down category list, the following changes need to be made. Introduced a new function at the beginning of the file after the first foreach stanza and have it called as:

functionhttps://github.com/apmuthu/LimeSurvey/issues/%3C/span%3E" target="_blank" rel="nofollow order_links($list) {
	// a new dom object
	$dom = new domDocument; 
	libxml_use_internal_errors(true);
	libxml_clear_errors();
	// discard white space
	$dom->preserveWhiteSpace = false;

	$dom->loadHTML($list);
	$a = $dom->getElementsByTagName('a');
	$alpha = array();
	foreach ($a as $b) {
		$dc = utf8_decode($b->nodeValue);
		$alpha[$dc] = $b->getAttribute('href');
	}
	ksort($alpha);
	$c = '';

	$old_cat = '';
	$flag = true; // first pass
	foreach($alpha as $k => $v) {
		$cv = substr($k, 0, -4);
		if ($old_cat <> $cv) {
			if (!$flag) $c .= '</ul></details>';
			$flag = false;
			$c .= '<details><summary><span class="caret">'.$cv.'</span></summary>' . chr(10) . '<ul class="nested">';
			$old_cat = $cv;
		}
		$c .= '<li><a class="surveytitle" href="' . $v . '">' . $k . '</a></li>';
	}
	$c .= '</ul></details>';

	return $c;	
}

$list = order_links($list);

The screenshot above remains the same.

LS205_collapsed_category_menu_mod.zip