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.
