JQuery Folder/Artist Index

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

Moderator: moderators

JQuery Folder/Artist Index

Postby totoclectic » Wed Oct 10, 2012 12:34 pm

My modest contribution to the great Subsonic project: here's a little mod changing the artists accordeon to a jquery index thing, called SliderNav (demo):

Image

1. Open left.jsp, and add in the header :

Code: Select all
<link rel="stylesheet" type="text/css" href="<c:url value="/style/slidernav.css"/>" media="screen, projection" />
<script type="text/javascript" src="<c:url value="/script/slidernav.js"/>">"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#slider').sliderNav();
   });
</script>


2. Remplace the actual accordeon/list :

Code: Select all
<c:forEach items="${model.indexes}" var="index">
   <table class="bgcolor1" style="width:100%;padding:0;margin:1em 0 0 0;border:0">
      <tr style="padding:0;margin:0;border:0">
         <th style="text-align:left;padding:0;margin:0;border:0"><a name="${index.key}"></a>
            <h2 style="padding:0;margin:0;border:0"><c:if test="${model.reluctantArtistLoading}"><a href="left.view?indexLetter=${fn:replace(index.key,'#','0')}"></c:if>${index.key}<c:if test="${model.reluctantArtistLoading}"></a></c:if></h2>
         </th>
         <th style="text-align:right;">
            <a href="#top"><img src="<spring:theme code="upImage"/>" alt=""></a>
         </th>
      </tr>
   </table>

   <c:forEach items="${index.value}" var="artist">
      <p class="dense" style="padding-left:0.5em">
         <span title="${fn:escapeXml(artist.name)}">
            <sub:url value="artist.view" var="artistUrl"><sub:param name="id" value="${artist.id}"/></sub:url>
            <a target="main" href="${artistUrl}">${fn:escapeXml(artist.name)}</a>
         </span>
      </p>
   </c:forEach>
</c:forEach>


With :

Code: Select all

<div id="slider">
    <div class="slider-content">
        <ul style="margin:0;padding:0;">
            <c:forEach items="${model.indexedArtists}" var="entry">
                <li id="${entry.key.index}">
                    <a name="${index.key}" class="title">{entry.key.index}</a>
                        <ul style="margin:0;padding:0;">
                            <c:forEach items="${entry.value}" var="artist">
                                <li>
                                    <span>
                                        <sub:url value="main.view" var="mainUrl">
                                        <sub:param name="id" value="${mediaFile.id}"/></sub:url>
                                        <a target="main" href="${mainUrl}">
                                            <str:truncateNicely upper="${model.captionCutoff}">
                                                ${artist.name}
                                            </str:truncateNicely>
                                        </a>
                                    </span>
                                </li>
                            </c:forEach>
                        </ul>
                </li>   
            </c:forEach>
        </ul>
    </div>
</div>


If you're using MusicCabinet, the variable aren't the same :

Code: Select all
<div id="slider">
   <div class="slider-content">
      <ul style="margin:0;padding:0;">
         <c:forEach items="${model.indexes}" var="index">
            <li id="${index.key}">
               <a name="${index.key}" class="title">${index.key}</a>
                  <ul style="margin:0;padding:0;">
                     <c:forEach items="${index.value}" var="artist">
                        <li>
                           <span>
                              <sub:url value="artist.view" var="artistUrl">
                              <sub:param name="id" value="${artist.id}"/></sub:url>
                              <a target="main" href="${artistUrl}">
                                 ${fn:escapeXml(artist.name)}
                              </a>
                           </span>
                        </li>
                     </c:forEach>
                  </ul>
            </li>   
         </c:forEach>
      </ul>
   </div>
</div>


3. Here's the modified webapp/style/slidernav.css adapted for dark theme : (you can use the original white design)

Code: Select all
/*
*  SliderNav - A Simple Content Slider with a Navigation Bar
*  Copyright 2010 Monjurul Dolon, http://mdolon.com/
*  Released under the MIT, BSD, and GPL Licenses.
*  More information: http://devgrow.com/slidernav
*  Adapted to Subsonic by totoclectic
*/
/* if you want to display this with a nice font */
@import url(http://fonts.googleapis.com/css?family=Comfortaa:400,700);
.slider { width: 195px; min-height: 200px; display: block; position: relative; background-color: #111111; overflow: hidden; }
.slider ul { list-style: none; }
.slider-content { float: left; width: 100%; display: block; overflow: auto; min-height: 250px; }
.slider-content ul { float: left; width: 100%; display: block; position: relative; }
.slider-content ul li { float: left; width: 100%; }
.slider-content ul ul li a { color: #bbbbbb; font-family: 'Comfortaa', sans-serif; font-size: 1em; padding: 3px 17px 1px 10px; display: block; border-bottom: 1px solid #000000; text-transform: capitalize; }
.slider-content ul ul li a:hover { color: #ffffff; background-image: none; background-color: #1a1a1a; }
.slider-content .title { background-color: #222222; font-family: 'Comfortaa', sans-serif; font-size: 1.3em; padding: 4px 0; text-indent: 12px;  color: #cccccc; width: 100%; float: left; font-weight: bold; text-transform: uppercase; }
.slider-content .selected .title { color: #ffffff; }
.slider .slider-nav { position: absolute; right: 0; top: 0; background: #111111; min-height: 250px; }
.slider .slider-nav ul { padding: 3px 0; }
.slider .slider-nav li a { font-family: 'Comfortaa', sans-serif; padding: 3px 5px; line-height: 14px; text-align: center; color: #aaaaaa; font-weight: bold; display: block; text-transform: uppercase; cursor: pointer; }
.slider #debug { position: absolute; bottom: 0; left: 0; padding: 5px; background: #000; color: #ffffff; }
.slider .arrow { font-size: 0px; line-height: 0%; width: 0px; border-bottom: 8px solid #555; border-left: 5px solid #111111; border-right: 5px solid #111111; position: relative; top: 5px; }
.slider .down { border-bottom: none; border-top: 8px solid #555; top: 15px; }
.slider .slide-up, .slider .slide-down { height: 20px; background-color: #222222; text-align: center; cursor: pointer; float: right; width: 100%; position: relative; }
.slider .slide-up:hover, .slider .slide-down:hover { background: #111111; }


4. Place slidernav.js in webapp/script, open it and replace the line 8 :

Code: Select all
var defaults = { items: ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"], debug: false, height: null, arrows: true};


With :

Code: Select all
var defaults = { items: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"], debug: false, height: null, arrows: true};

That's all folks !

JQuery plugin infos and download on http://devgrow.com/slidernav/
User avatar
totoclectic
 
Posts: 9
Joined: Mon Jan 03, 2011 10:55 pm
Location: Paris

Return to Mods, Apps and Clients

Who is online

Users browsing this forum: No registered users and 7 guests