Re: library navigation - home button and breadcrumb bar
Posted: 19 May 2016, 15:59
I took another look and it turns out breadcrumbs for search can be done almost the same way as above. So here it is
mod: clickable breadcrumb segments when browsing and searching files
The bread crumb path has this kind of format USB/artist/album/CD1 . Click on a segment to jump to its folder. For example click album to jump to USB/artist/album . To see the bread crumb path when browsing simply navigate to a folder. Click a search result file to display its bread crumb path.
Caveats:
- This presupposes that you SSH in to your Rune device and edit files there.
- It is a good idea to first make a backup of the files you modify.
- the code escapes single quotes in file path names. But I don't know how good/bad it handles some other special characters. Feedback welcome!
- a small drawback is that the javascript string shows in a preview tooltip on mouse over.
Edit this file
find the lines
and add on new lines above
find the lines
and replace the breadcrumb.html(path); line with
Next find the lines
and add these lines below
Necessary steps to apply the modifications
First, when you are done editing, save runeui.js
Next we minify the file (i.e. convert it into a more compact file that RuneAudio normally uses)
- Copy all the contents of your modified runeui.js file to the clipboard
- Paste into the editbox at http://gpbmike.github.io/refresh-sf/
- Click the button Javascript on the right side of the editbox. The content is now minified
- Copy all the minified text in the editbox
- Edit the file runeui.min.js (make a backup of it first!) and replace all its contents with the minified text from the clipboard. Then save. Then reload RuneAudio in the browser.
mod: clickable breadcrumb segments when browsing and searching files
The bread crumb path has this kind of format USB/artist/album/CD1 . Click on a segment to jump to its folder. For example click album to jump to USB/artist/album . To see the bread crumb path when browsing simply navigate to a folder. Click a search result file to display its bread crumb path.
Caveats:
- This presupposes that you SSH in to your Rune device and edit files there.
- It is a good idea to first make a backup of the files you modify.
- the code escapes single quotes in file path names. But I don't know how good/bad it handles some other special characters. Feedback welcome!
- a small drawback is that the javascript string shows in a preview tooltip on mouse over.
Edit this file
- Code: Select all
/srv/http/assets/js/runeui.js
find the lines
- Code: Select all
// update info and status on Playback tab
function refreshState() {
and add on new lines above
- Code: Select all
function crumb(seg) {
$('#db-search-results').addClass('hide');
getDB({path : seg });
}
find the lines
- Code: Select all
} else {
breadcrumb.html(path);
}
$('#db-homeSetup').addClass('hide');
and replace the breadcrumb.html(path); line with
- Code: Select all
// breadcrumb.html(path);
var seg = segtext = "";
segments = path.split("/");
for (i = 0; i < segments.length; i++) {
seg += i == 0 ? segments[i] : "/" + segments[i]
seg = seg.replace("'", "\\x27") // escapes ' in getDB param
segtext += i != 0 ? "/" : ""
segtext += "<a href='javascript:crumb(\x22" + seg + "\x22);'>" + segments[i] + "</a>";
}
breadcrumb.html(segtext);
Next find the lines
- Code: Select all
// list browsing
$('li.active', '#database-entries').removeClass('active');
el.addClass('active');
and add these lines below
- Code: Select all
if (!$('#db-search-results').hasClass('hide'))
{
var i = 0, seg = "", segtext = ""; //must declare first
segments = el.data('path').split("/");
for (i = 0; i < segments.length - 1; i++) { // -1 to skip file.mp3 crumb
seg += i == 0 ? segments[i] : "/" + segments[i]
seg = seg.replace("'", "\\x27") // escape ' in getDB param
segtext += i != 0 ? "/" : ""
segtext += "<a href='javascript:crumb(\x22" + seg + "\x22);'>" + segments[i] + "</a>";
}
$('span', '#db-currentpath').html(segtext);
}
Necessary steps to apply the modifications
First, when you are done editing, save runeui.js
Next we minify the file (i.e. convert it into a more compact file that RuneAudio normally uses)
- Copy all the contents of your modified runeui.js file to the clipboard
- Paste into the editbox at http://gpbmike.github.io/refresh-sf/
- Click the button Javascript on the right side of the editbox. The content is now minified
- Copy all the minified text in the editbox
- Edit the file runeui.min.js (make a backup of it first!) and replace all its contents with the minified text from the clipboard. Then save. Then reload RuneAudio in the browser.