library navigation - home button and breadcrumb bar

Suggestions/requests/ideas for RuneAudio core features and functions

Re: library navigation - home button and breadcrumb bar

Postby waves » 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
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.
waves
 
Posts: 125
Joined: 31 Dec 2014, 10:33

support RuneAudio Donate with PayPal

Previous

Return to Feature request

Who is online

Users browsing this forum: No registered users and 0 guests