carousel.jsp

<%@include file="/apps/disa/connect/shared/global.jsp" %>
<%@page session="false" %>
<%@ page import="com.day.cq.dam.api.Asset,
                 com.day.cq.wcm.api.Page,
                 java.util.ArrayList,
                 java.util.Date,
                 java.util.HashMap,
                 java.util.Iterator,
                 java.text.SimpleDateFormat"%>
<%
    if(resource.getChild("assets")!=null ){
        ArrayList<HashMap> assets = new ArrayList<HashMap>();
        Iterator<Resource> assetsIter = resource.getChild("assets").listChildren();
        while(assetsIter.hasNext()){
            HashMap innerMap = new HashMap();
            Resource assRes = (Resource) assetsIter.next();
            innerMap.putAll(assRes != null ? assRes.adaptTo(ValueMap.class) : null);

            /*add button label, defaulting to 'JOIN' */
            innerMap.put("buttonLabel",assRes.adaptTo(ValueMap.class).get("buttonLabel","JOIN"));

            if(innerMap.containsKey("assetPath")){

                /*we just grabbed the property cointaing the reference to our 'asset' */
                String aspath = (innerMap.get("assetPath").toString());
                Resource thisres = resourceResolver.getResource(aspath);

                if(thisres != null){
                    /* now we will attempt to adapt to different CQ types */

                    Asset thisasset = thisres.adaptTo(Asset.class);
                    if(thisasset != null && thisres.getChild("jcr:content/metadata") != null){ 
                        /* it's a DAM asset */
                        ValueMap mdvm = thisres.getChild("jcr:content/metadata").adaptTo(ValueMap.class);
                        innerMap.put("assetType","dam");
                        innerMap.put("title",mdvm.get("dc:title",""));
                        innerMap.put("desc",mdvm.get("dc:description",""));
                        innerMap.put("link",thisasset.getPath());
                    }

                    Page thispage = thisres.adaptTo(Page.class);
                    if(thispage != null){
                        /* it's a Page */
                        innerMap.put("assetType","page");
                        innerMap.put("title",thispage.getTitle());
                        innerMap.put("desc",thispage.getDescription());
                        innerMap.put("link",thispage.getPath() + ".html");
                    }
                    
                }
            }
            /* Attempt to parse the optional date */
            if(innerMap.containsKey("date")){
                Date dt = assRes.adaptTo(ValueMap.class).get("date",new Date());
                innerMap.put("month",(new SimpleDateFormat("MMM")).format(dt).toUpperCase());
                innerMap.put("day",(new SimpleDateFormat("d")).format(dt));
                innerMap.put("time",(new SimpleDateFormat("h:mm")).format(dt));
                innerMap.put("ampm",(new SimpleDateFormat("a")).format(dt));
                innerMap.put("hasADate",true);

            }else{
                innerMap.put("hasADate",false);
            }

            assets.add(innerMap);
        }
        pageContext.setAttribute("assets",assets);
    }
%>

<section>
    <div class="slider">
        <div id="slideshow-wrap">

            <!-- Loop 1 -->
            <c:forEach items="${assets}" var="asset" varStatus="status">

                <c:set var="indx">${status.index + 1}</c:set>

                <c:choose>
                    <c:when test="${indx eq 1}">
                        <input type="radio" id="button-${indx}" name="controls" checked="true">
                    </c:when>
                    <c:otherwise>
                        <input type="radio" id="button-${indx}" name="controls">
                    </c:otherwise>
                </c:choose>

                <label for="button-${indx}"></label>

            </c:forEach>

            <!-- Loop 2 (Arrows)-->
            <c:forEach items="${assets}" var="asset" varStatus="status">

                <c:set var="indx">${status.index + 1}</c:set>

                <label for="button-${indx}" class="arrows" id="arrow-${indx}">
                    <img alt="nasa" src="/etc/designs/disa-connect/images/arrow-r.png">
                </label>

            </c:forEach>


            <div id="slideshow-inner">
                <ul>
                    <!-- Loop 3 (Slides)-->
                    <c:forEach items="${assets}" var="asset" varStatus="status">
                    
                        <c:set var="indx">${status.index + 1}</c:set>

                        <li id="slide${indx}">
                            <!-- TODO add additional thumbs depending on dam asset or page -->
                            <c:set var="thmbimg">
                                <c:choose>
                                    <c:when test="${asset.type eq 'dam'}">
                                        <img alt="nasa" src="/etc/designs/disa-connect/images/slider1.png" title="">
                                    </c:when>
                                    <c:when test="${asset.type eq 'page'}">
                                        <img alt="nasa" src="/etc/designs/disa-connect/images/slider1.png" title="">
                                    </c:when>
                                    <c:otherwise>
                                        <img alt="nasa" src="/etc/designs/disa-connect/images/slider1.png" title="">
                                    </c:otherwise>
                                </c:choose>
                            </c:set>
                            ${thmbimg}
                            <div class="description">
                                <h3><span>${asset.title}</span></h3>
                                <br>
                                <h3><span>${asset.desc}</span></h3>
                                <p>
                                    <c:if test="${asset.hasADate}">
                                        <span class="month">${asset.month}</span>
                                        <span class="day">${asset.day}</span>
                                        <span class="time">${asset.time}</span>
                                        <span class="ampm">${asset.ampm} EST</span>
                                    </c:if>
                                    <a href="${asset.link}" target="_blank">${asset.buttonLabel}</a>
                                </p>
                            </div>
                        </li>

                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</section>