[minilinux] Make branches collapsible

2 files changed, 25 insertions, 2 deletions

diff --git a/modules-available/minilinux/page.inc.php b/modules-available/minilinux/page.inc.php
index 0ad6cefc..a8cb7dcd 100644
--- a/modules-available/minilinux/page.inc.php
+++ b/modules-available/minilinux/page.inc.php
@@ -43,6 +43,7 @@ class Page_MiniLinux extends Page
 			$versions = MiniLinux::queryAllVersionsByBranch();
 			// Group by branch for detailed listing
 			foreach ($branches as &$branch) {
+				$branch['bid'] = 'div-' . str_replace('/', '-', $branch['branchid']);
 				if (isset($versions[$branch['branchid']])) {
 					$branch['versionlist'] = $this->renderVersionList($versions[$branch['branchid']]);
 				}
diff --git a/modules-available/minilinux/templates/branches.html b/modules-available/minilinux/templates/branches.html
index d8fb1f68..275f026c 100644
--- a/modules-available/minilinux/templates/branches.html
+++ b/modules-available/minilinux/templates/branches.html
@@ -3,21 +3,43 @@
 	{{#branches}}
 	<div class="panel panel-default">
 		<div class="panel-heading">
-			<div class="pull-right">
-				{{sourceid}} {{branchid}}
+			<div class="pull-right slx-pointer" data-toggle="collapse" data-target="#{{bid}}">
+				{{sourceid}} {{branchid}} <b class="caret"></b>
 			</div>
 			<b>{{title}}</b>
 		</div>
+		<div class="collapse in branch-item" id="{{bid}}">
 		<div class="panel-body">
 			{{description}}
 		</div>
 		{{{versionlist}}}
+		</div>
 	</div>
 	{{/branches}}
 </div>
 
 <script>
 	document.addEventListener('DOMContentLoaded', function () {
+		// Remember collapsed state
+		var c = localStorage.getItem('ml-collapse');
+		if (c) {
+			c = JSON.parse(c);
+			for (var e in c) {
+				if (c.hasOwnProperty(e)) {
+					$('#' + e).collapse('hide');
+				}
+			}
+		} else {
+			c = {};
+		}
+		$('.branch-item').on('hide.bs.collapse', function() {
+			c[this.id] = true;
+			localStorage.setItem('ml-collapse', JSON.stringify(c));
+		}).on('show.bs.collapse', function() {
+			delete c[this.id];
+			localStorage.setItem('ml-collapse', JSON.stringify(c));
+		});
+		// Button magic
 		var addHandlers = function(parent) {
 			parent.find('.btn-verify').click(function() {
 				loadDetails($(this).data('version'), { show: "version", verify: 1 });