Breadcrumbs
Tom Ekberg <[email protected]>
| Newsgroups | gmane.comp.bug-tracking.roundup.user |
|---|---|
| Message-ID | <CO3PR08MB79579B9EF3F0B751C5A4AFA0CA379@CO3PR08MB7957.namprd08.prod.outlook.com> |
I finally got around to adding breadcrumbs to roundup. This feature lists a set if issues you viewed recently near the top of the page. Each issue ID is a link to the issue. I pasted the following from one of my trackers. Breadcrumbs: 1177 1178 1180 1182 1181 It appears just below the title. The idea is that if one goes to an issue, the issue ID for is put at the head of the list. If there are too many issues, the excess are removed. If you move from one issue to another like I do, you may find this feature useful. Except for the 5 lines of HTML to position the breadcrumbs, the code is in javascript. I have attached a git diff for html/page.html if you want to give it a try. All questions or comments are welcome. Tom Ekberg Senior Computer Specialist Department of Laboratory Medicine and Pathology 4th Floor, Pat Steel Building, currently WFH Home: (253) 561-2509 Email: [email protected]<mailto:[email protected]> _______________________________________________ Roundup-users mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/roundup-users
page.html.diff
(application/octet-stream, 2.5 KB)
diff --git a/demo/html/page.html b/demo/html/page.html
index 433890d..c25b13a 100644
--- a/demo/html/page.html
+++ b/demo/html/page.html
@@ -14,6 +14,72 @@
</head>
<body class="body">
+<script type="text/javascript">
+var max_breadcrumbs = 5;
+
+// Didn't work in Edge.
+// $(document).ready(function(){
+// bindEventToNavigation();
+// });
+window.onload = bindEventToNavigation;
+
+function bindEventToNavigation(){
+ var paths = location.pathname.split('/');
+ if (paths.length >= 3) {
+ // Looking for issue12345.
+ var klassitem = paths[2];
+ if (klassitem.startsWith('issue')) {
+ issue = klassitem.slice(5);
+ if (issue.search(/^\d+$/) != -1) {
+ // Issue must contain only digits.
+ addBreadCrumb(issue);
+ }
+ }
+ }
+ showBreadCrumb();
+}
+
+// Add issue to the front of the array of breadcrumbs.
+function addBreadCrumb(issue) {
+ var raw_bc = sessionStorage.breadcrumb;
+ bc = []
+ if (raw_bc) {
+ var bc = JSON.parse(raw_bc);
+ if (bc.includes(issue)) {
+ // Remove issue and put at the front.
+ bc = [issue].concat(bc.filter((val) => issue != val));
+ } else if (bc.length >= max_breadcrumbs) {
+ // Lop off the last element and put issue at the front.
+ bc = [issue].concat(bc.slice(0, max_breadcrumbs - 1));
+ } else {
+ // Plenty of room for the new issue.
+ bc = [issue].concat(bc);
+ }
+ } else {
+ // First issue
+ bc = Array(issue);
+ }
+ // alert('1 Adding issue ' + issue + ', bc=' + bc + ', bc.length=' + bc.length);
+ sessionStorage.breadcrumb = JSON.stringify(bc);
+}
+
+function showBreadCrumb(){
+ var raw_bc = sessionStorage.breadcrumb;
+ var html = "";
+ if (raw_bc) {
+ var bc = JSON.parse(raw_bc);
+ // alert('2 Adding issue ' + issue + ', bc=' + bc + ', bc.length=' + bc.length);
+ var front = location.protocol + "//" + location.host + "/" + location.pathname.split('/')[1];
+ for (var i in bc) {
+ issue = bc[i];
+ html = html + "<a href='" + front + "/issue" + issue + "'>" + issue + "</a> ";
+ // alert('3 issue=' + issue + ', html=' + html);
+ }
+ }
+ document.getElementById('breadcrumb').innerHTML = html;
+}
+</script>
+
<table class="body"
tal:define="
rea_edit python:request.user.hasPermission('Edit', 'reason');
@@ -45,7 +111,11 @@ columns_showall string:id,username,last_day,reason,processed,activity,transfer_w
</div>
</td>
</tr>
-
+<tr>
+ <td colspan="2">
+ Breadcrumbs: <span id="breadcrumb"></span>
+ </td>
+</tr>
<tr>
<td rowspan="2" valign="top" class="sidebar">
<p class="classblock"