One way to make scrolling a large folder of albums easier is to show the first letter of the folder currently near the middle of the screen in a big font. In addition to the regular list the user sees a big A and, as he scrolls down, B C D ... That helps you stop at the right place when scrolling a long way quickly. This mod does just that.
- 1.png (23.12 KiB) Viewed 1883 times
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.
- a drawback is that the right top corner menu button temporarily does not work while in the big letter scroll folder
- this only works for one single folder. The default is "USB" but you can change that below. You could probably also modify the code to work in all folders.
- I think I've below included all changes needed for this mod but feel free to comment if something is missing or unclear.
Edit this file
- Code: Select all
/srv/http/assets/js/runeui.js
near the top find the lines
- Code: Select all
// Global GUI Array
// =================
and add these lines below
- Code: Select all
var manualnav = ""
var bigfolder = "USB" //Edit this if you want bigletter in some other folder
find lines
- Code: Select all
// update info and status on Playback tab
function refreshState() {
and add above them
- Code: Select all
//BIGLETTER
// Mod to show one big letter when scrolling in bigfolder library folder
var prevpath = "";
$(window).scroll(function() {
if ( ( !$('#open-panel-sx').hasClass('active') ) || (manualnav != bigfolder) )
return
var winTop = $(this).scrollTop();
winTop = winTop + window.innerHeight / 3;
var $lis = $('#database-entries li');
var top = $.grep($lis, function(item) {
return $(item).position().top <= winTop;
}); // top is js array of items above WinTop (visible top)
var toplast = $(top[top.length - 1]); //array last item
var pp = toplast.data('path');
var pparr = pp.split("/"); //segments
var letter = pparr[pparr.length - 1] //last segment = filename
letter = letter.substr(0,1); //first letter
if (letter != prevpath && letter != null) {
prevpath = letter;
$('#menu-settings').css({'margin': '200px 0 0 -130px', 'font-size': '60px'}); //Top R Bottom L
$('#menu-settings').html( "<b>" + prevpath + "</b>" ); //bigletter
$('#menu-settings').bind('click', false); //disable menu dropdown
}
});
function hidebigletter(){
$('#menu-settings').css({'margin': '0 -30px 0 0', 'font-size': '14px'});
$('#menu-settings').html('<i class="fa fa-bars dx"></i>');
$('#menu-settings').unbind('click', false);
prevpath = "";
}
// on ready playback tab
$('a', '#open-playback').click(function(){
if (prevpath) { hidebigletter() }; //restore menu
});
find line
- Code: Select all
$('#db-level-up').click(function(){
and add below
- Code: Select all
if (prevpath) { hidebigletter() };
find line
- Code: Select all
$('a', '#open-panel-dx').click(function(){
and add below
- Code: Select all
if (prevpath) { hidebigletter() };
find lines
- Code: Select all
} else {
++GUI.currentDBpos[10];
and add below
- Code: Select all
if ($(this).data('path') == "USB")
manualnav = "USB";
find lines
- Code: Select all
// browse by file (default)
browsemode = el.data('browsemode');
and add below
- Code: Select all
manualnav = path;
find function
- Code: Select all
$('#db-level-up').click(function(){
and in it find the line
- Code: Select all
getDB({
and add this above that line
- Code: Select all
manualnav = path;
find lines
- Code: Select all
else {
breadcrumb.html(path);
and add below
- Code: Select all
if (path != bigfolder) { hidebigletter() };
Note: do the following find/add step only if you have done this mod, otherwise ignore this step.
find
- Code: Select all
if ($('#open-panel-sx').hasClass('active')) {
renderLibraryHome();
and add below it
- Code: Select all
manualnav = '';
if (prevpath) { hidebigletter() };
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.
edit: fixed typo and error.
edit: added step to hide big letter when navigating to subfolder
