mod: big letter indicates position in large library folder

Suggestions/requests/ideas for RuneAudio core features and functions

mod: big letter indicates position in large library folder

Postby waves » 02 Jun 2016, 00:24

mod: big letter indicates position in one large library folder (of your choice)
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
1.png (23.12 KiB) Viewed 1318 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
waves
 
Posts: 125
Joined: 31 Dec 2014, 10:33

support RuneAudio Donate with PayPal

Return to Feature request

Who is online

Users browsing this forum: No registered users and 0 guests