Page 2 of 2

Re: library navigation - home button and breadcrumb bar

PostPosted: 19 May 2016, 15:59
by waves
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.

- 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

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) {
        getDB({path : seg });

find the lines
Code: Select all
    } else {

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>";

Next find the lines
Code: Select all
// list browsing
$('', '#database-entries').removeClass('active');

and add these lines below
Code: Select all
if (!$('#db-search-results').hasClass('hide'))
   var i = 0, seg = "", segtext = "";  //must declare first
   segments ='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
- 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.