Music folder accordion

Third-party modifications and add-ons, Apps and Clients

Moderator: moderators

Music folder accordion

Postby re-entity » Fri Oct 01, 2010 12:43 pm

For a neater presentation of your music folders, I've reformatted the a-z html and added a javascript accordion.

Image

Replace the following files with the content below...

/var/subsonic/jetty/1806/webapp/WEB-INF/jsp/left.jsp
Code: Select all
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <%@ include file="head.jsp" %>
    <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/smooth-scroll.js"/>"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
   $('.accordion-content').hide();
   //toggle the componenet with class accordion
   $('.accordion-toggle').click(function(){
      //$(this).toggleClass('toggle-accordion-active');
      $(this).next('.accordion-content').slideToggle(300);
   });
   $('#accordion-expand-all').click(function(){
      $('.accordion-content').slideToggle(300);
   });
      });
    </script>
</head>

<body class="bgcolor2 leftframe">
<a name="top"></a>
<div class="alpha-jump">
    <c:forEach items="${model.indexes}" var="index">
        <a href="#${index.index}" accesskey="${index.index}">${index.index}</a>
    </c:forEach>
</div>

<c:if test="${model.statistics.songCount gt 0}">
    <div class="detail">
        <fmt:message key="left.statistics">
            <p><fmt:param value="${model.statistics.artistCount}"/></p>
            <p><fmt:param value="${model.statistics.albumCount}"/></p>
            <p><fmt:param value="${model.statistics.songCount}"/></p>
            <p><fmt:param value="${model.bytes}"/></p>
            <p><fmt:param value="${model.hours}"/></p>
        </fmt:message>
    </div>
</c:if>

<c:if test="${fn:length(model.musicFolders) > 1}">
    <div id="music-folders">
        <select name="musicFolderId" onchange="location='left.view?musicFolderId=' + options[selectedIndex].value;" >
            <option value="-1"><fmt:message key="left.allfolders"/></option>
            <c:forEach items="${model.musicFolders}" var="musicFolder">
                <option ${model.selectedMusicFolder.id == musicFolder.id ? "selected" : ""} value="${musicFolder.id}">${musicFolder.name}</option>
            </c:forEach>
        </select>
    </div>
</c:if>

<c:if test="${not empty model.shortcuts}">
    <h2><fmt:message key="left.shortcut"/></h2>
    <c:forEach items="${model.shortcuts}" var="shortcut">
        <p class="dense">
            <sub:url value="main.view" var="mainUrl">
                <sub:param name="path" value="${shortcut.path}"/>
            </sub:url>
            <a target="main" href="${mainUrl}">${shortcut.name}</a>
        </p>
    </c:forEach>
</c:if>

<c:if test="${not empty model.radios}">
    <h2 class="bgcolor1"><fmt:message key="left.radio"/></h2>
    <c:forEach items="${model.radios}" var="radio">
        <p class="dense">
            <a target="hidden" href="${radio.streamUrl}">
                <img src="<spring:theme code="playImage"/>" alt="<fmt:message key="common.play"/>" title="<fmt:message key="common.play"/>"></a>
            <c:choose>
                <c:when test="${empty radio.homepageUrl}">
                    ${radio.name}
                </c:when>
                <c:otherwise>
                    <a target="main" href="${radio.homepageUrl}">${radio.name}</a>
                </c:otherwise>
            </c:choose>
        </p>
    </c:forEach>
</c:if>

<c:forEach items="${model.indexedArtists}" var="entry">
    <h2 class="alpha-sort accordion-toggle"><a name="${entry.key.index}"></a>${entry.key.index}</h2>
    <div class="alpha-node accordion-content">
    <c:forEach items="${entry.value}" var="artist">
        <p class="dense">
            <span title="${artist.name}">
                <sub:url value="main.view" var="mainUrl">
                    <c:forEach items="${artist.musicFiles}" var="musicFile">
                        <sub:param name="path" value="${musicFile.path}"/>
                    </c:forEach>
                </sub:url>
                <a target="main" href="${mainUrl}"><str:truncateNicely upper="${model.captionCutoff}">${artist.name}</str:truncateNicely></a>
            </span>
        </p>
    </c:forEach>
    </div>
</c:forEach>
    <p><a id="accordion-expand-all" href="#">Toggle all</a></p>
<c:forEach items="${model.singleSongs}" var="song">
    <p class="dense">
        <span title="${song.title}">
            <c:import url="playAddDownload.jsp">
                <c:param name="path" value="${song.path}"/>
                <c:param name="playEnabled" value="${model.user.streamRole and not model.partyMode}"/>
                <c:param name="addEnabled" value="${model.user.streamRole}"/>
                <c:param name="downloadEnabled" value="${model.user.downloadRole and not model.partyMode}"/>
            </c:import>
            <str:truncateNicely upper="${model.captionCutoff}">${song.title}</str:truncateNicely>
        </span>
    </p>
</c:forEach>

<div class="alpha-jump">
    <c:forEach items="${model.indexes}" var="index">
        <a href="#${index.index}">${index.index}</a>
    </c:forEach>
</div>


</body></html>


/var/subsonic/jetty/1806/webapp/style/default.css
Code: Select all
/*
* CSS styleshet for default theme.
*
* Note that attributes that are typically changed by theme authors are
* placed at the top.
  *
* Author: Sindre Mehus
*/

/* The primary background color (light blue). */
.bgcolor1 {
    background-color: #EFEFEF;
}

/* The secondary background color (darker blue). */
.bgcolor2, .ruleTableHeader, .log {
    background-color: #DEE3E7
}

/* Put stuff here if you need to customize any of the frames. */
.mainframe {
}
.topframe {
}
.leftframe {
}
.rightframe {
}
.playlistframe {
}

/* Background color for selected header. */
.headerSelected {
    background-color: lightyellow;
}

/* Background color for form controls (use default). */
input, select {
}

/* Hover color for form controls (use default). */
input:hover, select:hover {
}

/* The primary foreground color (black). */
body {
    color: black;
}

/* The secondary foreground color used for h1, details etc (gray). */
h1, .detail, .albumComment {
    color: #696969;
}

/* Foreground color used for h2, bold and tr. */
h2, b, tr {
    color: #333333;
}

/* Link color */
a:link, a:active, a:visited, a:link *, a:active *, a:visited * {
    color: #006699
}

/* Link hover color */
a:hover, a:hover * {
    text-decoration: underline;
    color: #DD6900
}

/* Color for warning messages. */
.warning {
    color: red;
}

/* Simple dark border. */
.border1, .ruleTableHeader, .ruleTableCell, .headerSelected, .log {
    border: 1px solid black;
}

/* Scrollbar colors (supported on IE and Opera) */
body {
    scrollbar-face-color: #DEE3E7;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-shadow-color: #DEE3E7;
    scrollbar-3dlight-color: #D1D7DC;
    scrollbar-arrow-color: #006699;
    scrollbar-track-color: #EFEFEF;
    scrollbar-darkshadow-color: #98AAB1;
}

/* Font 1 */
body, h2, form, label, table, a {
    font-family: verdana, arial, sans-serif;
}

/* Font 2 */
h1, h1 a, .logo {
    font-family: arial, sans-serif;
}

/***************************************************************************************
* The rest of the CSS is typically not changed in other themes (but not necessarily so).
***************************************************************************************/

body {
    padding:0;
    border:0;
    margin:0.75em;
    font-size: 9pt;
    line-height: 1.5em;
}

p {
    padding:0;
    border:0;
    margin:0 0 1em 0;
}
.alpha-sort {
    border-bottom:1px solid #fff;
    margin:0;
    padding:0 5px;
}

.alpha-jump {
    display:none;
}

.dense {
    margin: 0;
}

h1 {
    white-space: nowrap;
    font-size: 140%;
    padding: 0 0 0.2em 0;
    border: 0;
    margin: 0;
}

h2 {
    white-space: nowrap;
    font-size: 100%;
    margin: 1em 0 0.2em 0;
}

form {
    font-size: 100%;
    line-height: 140%;
    padding: 0;
    border: 0;
    margin: 0;
}

input, select, textarea {
    font-size: 9pt;
}

label {
    font-size: 100%;
    line-height: 140%;
}

table {
    font-size: 100%;
    line-height: 140%;
    padding: 0;
    border: 0;
    margin: 0 0 0.4em 0;
}

/* Table with some white space above it.*/
table.indent {
    margin: 1em 0 0.4em 0;
}

a {
    font-size: 100%;
    text-decoration: none
}

img {
    border-style: none;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.headerSelected {
    padding: 0.25em;
}

.detail {
    margin-bottom:1em;
    white-space: nowrap;
    font-size: 8pt;
    line-height: 1.25em;
}

.warning {
    white-space: nowrap;
}

.logo {
    white-space: nowrap;
    font-size: 16pt;
}

.back, .forward {
    background-position:center left;
    background-repeat:no-repeat;
    padding-left: 16px;
    line-height: 16px;
}

.back {
    background-image:url("../icons/back.gif");
}

.forward {
    background-image:url("../icons/forward.gif");
}

.albumComment {
    width: 50em;
    font-size: 8pt;
    line-height: 1.4em;
    padding-top: 0.25em;
}

.log {
    white-space: nowrap;
    font-size: 8pt;
    line-height: 1em;
}

.checkbox {
}

/* Table with simple lines between the cells. */
.ruleTable {
    border-collapse: collapse;
}

.ruleTableHeader, .ruleTableCell {
    margin: 5px;
    padding: 5px;
}

.ruleTableHeader {
    font-weight: bold;
}
re-entity
 
Posts: 3
Joined: Mon Sep 27, 2010 1:09 pm

Postby Toytronic » Sat Oct 02, 2010 11:50 am

Nice mod, i'm using it right now!
Thanks Re-Entity :)
Toytronic
 
Posts: 4
Joined: Wed Jul 21, 2010 12:17 pm

Postby rodan1967 » Mon Oct 04, 2010 3:27 am

How do I get rid of it once I edited the 2 files? I make back up of my original files and then edited them with your changes. Played around with it then decided I preferred the original no accordion format. So I restored my original files but when I login into my subsonic it still have accordion view.. What changed other than the 2 files you modded? I even tried reinstalling Subsonic and it did not get rid of the mod.
rodan1967
 
Posts: 18
Joined: Sat May 16, 2009 4:19 am

Postby rodan1967 » Mon Oct 04, 2010 3:39 am

Ok figured out what the problem was. I needed to clear Firefox's browser cache or it will continue to display the accordion view even after removing modded files.
rodan1967
 
Posts: 18
Joined: Sat May 16, 2009 4:19 am

Postby kroken » Wed Nov 03, 2010 10:27 am

Nice mod but is it possible to change the text when i click the "Toggle All" To "Hide all" ?
kroken
 
Posts: 81
Joined: Sat Oct 16, 2010 6:28 am

Postby kroken » Sat Nov 06, 2010 6:19 pm

nevermind, fixed it bymyself here it is if anyone else need.

Code: Select all
    <script type="text/javascript">
      $(document).ready(function(){
   $('.accordion-content').hide();
   //toggle the componenet with class accordion
   $('.accordion-toggle').click(function(){
      //$(this).toggleClass('toggle-accordion-active');
      $(this).next('.accordion-content').slideToggle(300);
   });
   $('#accordion-expand-all').click(function(){
      $('.accordion-content').slideToggle(300);
   this.innerHTML = ( this.innerHTML == "Show All" ) ? "Hide All" : "Show All";
   });
      });

    </script>



Code: Select all
<p><a id="accordion-expand-all" href="#">Show All</a></p>
kroken
 
Posts: 81
Joined: Sat Oct 16, 2010 6:28 am

Postby thezoggy » Sat Dec 25, 2010 5:52 am

I followed your mod idea but implemented the jquery accordion w/themeroller differently. Your mod was more of a collapse/expand div rather than a true accordion as with an accordion you can only have 1 expanded section.

Image

the theme used for the accordion was ui-darkness.

if anyone wants the code let me know and i'll post the details
thezoggy
 
Posts: 5
Joined: Sat Dec 25, 2010 5:25 am

Postby daveydz3 » Sat Dec 25, 2010 8:22 am

thezoggy wrote:I followed your mod idea but implemented the jquery accordion w/themeroller differently. Your mod was more of a collapse/expand div rather than a true accordion as with an accordion you can only have 1 expanded section.

Image

the theme used for the accordion was ui-darkness.

if anyone wants the code let me know and i'll post the details


i'd like to try it out, thanks.
daveydz3
 
Posts: 9
Joined: Mon Feb 22, 2010 5:26 am

Postby thezoggy » Sat Dec 25, 2010 8:48 am

http://www.speedyshare.com/files/258844 ... ordion.zip

Here are all the files, just extract to the folder just before webapp.
So for example for me it was: C:\subsonic\jetty\1946\

Let me know if you have any problems.

--z
thezoggy
 
Posts: 5
Joined: Sat Dec 25, 2010 5:25 am

Postby 3R3 » Tue Feb 08, 2011 10:19 pm

thx re-entity for the thread and idea, and thezoggy for improving it. Running the jquery accordion right now, and apart from it not showing up right away, even after clearing browser cache, cookies, restart server, restart browser and clearing the jetty cache in various sequences, it works great!
So my 2 cents are, dont be too impatient with this, the behemoth that is SS just needs a little time to stomach it ;) give it 2 hours, after you cleared caches and restarted things, before you start worrying.

regards,
3R3

EDIT: Yes it works, just dont delete anything.

How to install thezoggys mod for Dummies
In the "subsonic-accordion.zip" file are 3 folders under "webapp". To install you just go to your own "webapp" folder and put the content from the archives "script", "style" and "WEB-INF" folders into the corresponding folders in your own "webapp" folders.
Last edited by 3R3 on Wed Feb 23, 2011 6:53 pm, edited 2 times in total.
User avatar
3R3
 
Posts: 332
Joined: Mon May 04, 2009 2:09 pm
Location: Germany

Postby TENtimesFAST » Sun Feb 13, 2011 2:56 am

thezoggy wrote:http://www.speedyshare.com/files/25884442/subsonic-accordion.zip

Here are all the files, just extract to the folder just before webapp.
So for example for me it was: C:\subsonic\jetty\1946\

Let me know if you have any problems.

--z


Just wanted to see if this worked for anyone of if I'm screwing something up.

I deleted the "webapp" folder then extracted the current one that you provided but now I just get a 404.

Any pointers would be appreciated!
TENtimesFAST
 
Posts: 14
Joined: Mon May 10, 2010 10:52 pm
Location: The Glove

Postby thezoggy » Fri Feb 18, 2011 10:35 am

well you shouldn't be deleting anything. all this does is replace/update a few template files. deleting the webapp folder for subsonic (which runs as a webapp) is not a good move.
thezoggy
 
Posts: 5
Joined: Sat Dec 25, 2010 5:25 am

Postby 3R3 » Wed Feb 23, 2011 6:48 pm

TENtimesFAST wrote:
thezoggy wrote:http://www.speedyshare.com/files/25884442/subsonic-accordion.zip

Here are all the files, just extract to the folder just before webapp.
So for example for me it was: C:\subsonic\jetty\1946\

Let me know if you have any problems.

--z


Just wanted to see if this worked for anyone of if I'm screwing something up.

I deleted the "webapp" folder then extracted the current one that you provided but now I just get a 404.

Any pointers would be appreciated!


You essentially deleted all the web content of SS, but unfortunately no data or statistics or users. just download your version again and extract the "webapp" folder from the archive into the place you deleted it from and you should be set. stop the server before you do that though.
User avatar
3R3
 
Posts: 332
Joined: Mon May 04, 2009 2:09 pm
Location: Germany

Postby disgustipated » Sat Feb 26, 2011 10:25 pm

i cant get this to work either and i am copying the folders properly by unzipping and putting them in the jetty folders
disgustipated
 
Posts: 96
Joined: Wed Jan 26, 2011 4:18 pm
Location: US

Postby disgustipated » Sat Feb 26, 2011 10:26 pm

funny, i just got it to work by choosing the 2 minutes to midnight theme
disgustipated
 
Posts: 96
Joined: Wed Jan 26, 2011 4:18 pm
Location: US

Next

Return to Mods, Apps and Clients

Who is online

Users browsing this forum: No registered users and 1 guest