album/src/main/webapp/assets/render.js

$(function() {

    function formatCaption(title, currentArray, currentIndex, currentOpts) {
        var captionElement = document.getElementById(title);
        return captionElement.innerHTML;
    }

    function scale(w, h, max) {
        if (w > h) {
            return { w : Math.floor(max), h: Math.floor((max * h + max / 2) / w) };
        } else {
            return { w: Math.floor((max * w + max / 2) / h), h: Math.floor(max) };
        }
    }


    function renderGrid(data, textStatus) {

        $("#name").text(data.name);
        document.title = data.name;

        var thmb = 250;
        var picSize = 800;
        var movieSize = 640;
        var prevName = null, thisName;

        function updateButton(selector, direction, destination) {
            var imgName = destination ? direction : direction + "-inactive",
                imgUrl = "/photo/assets/" + imgName + ".png",
                imgElement = $(selector),
                isWrapped = imgElement.parent().get()[0].tagName == "A",
                anchor = isWrapped ? imgElement.parent() : $("<a></a>");
            if (destination) {
                anchor.attr("href", encodeURI("/photo/album" + destination + ".album") + location.search);
                if (!isWrapped) {
                    imgElement.wrap(anchor);
                }
            } else {
                if (isWrapped) {
                    imgElement.unwrap();
                }
            }
            imgElement.attr("src", imgUrl);
        }

        $("#entryName").text(data.name);
        $("#arrowLeft").attr(data.name);
        updateButton("#arrowLeft", "left", data.prev);
        updateButton("#arrowUp", "up", data.parent);
        updateButton("#arrowRight", "right", data.next);
        if (location.search) {
            let params = new URL(location.href).searchParams;
            if (params.has("q")) {
                $("#searchBox").val(params.get("q"));
            }
        }


        $.each(data.contents, function(idx, entry) {

            if (data.groupPrefix && entry.type == "dir") {
                thisName = entry.earliest;
                if (prevName != null && prevName != thisName) {
                    $("<hr/>").appendTo("body");
                    prevName = null;
                }
                if (prevName == null) {
                    $("<h2></h2>").text(thisName).appendTo("body");
                    prevName = thisName;
                }
            }

            var dim = scale(entry.width, entry.height, thmb);

            var gridDiv = $("<div class=\"grid\">\n"
                       		+ "   <span class=\"name\">" + entry.name + "</span><br/>\n"
                       		+ "   <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"/photo/album" + encodeURI(entry.path) + "?size=" + picSize + "\" title=\"" + entry.name + "\">"
                       		+ "<img class=\"" + entry.type + "pic\" src=\"/photo/album" + (entry.thumbtype == "movie" ? encodeURI(entry.path) + ".frame" : encodeURI(entry.path)) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
                       		+ "</div>\n");

            var captionP = $("<p id=\"" + entry.name + "\" class=\"caption\"></p>\n");
            if (entry.caption) {
                captionP.text(entry.caption);
            }
            captionP.appendTo(gridDiv);

            gridDiv.appendTo('body');

            switch (entry.type) {
            case "movie":
                var size = scale(entry.width, entry.height, movieSize);
                var href = "/photo/album" + escape(entry.path) + ".movie?size=" + movieSize;
                $("#ent" + idx).attr("rel",  "album").attr("href", href).fancybox({
                    'titlePosition' : 'inside',
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic',
                    'easingIn'      : 'easeInQuad',
                    'easingOut'     : 'easeOutQuad',
                    'titleFormat'   : formatCaption,
                    'padding'       : 0,
                    'href'          : "/photo/assets/flowplayer/flowplayer-3.0.3.swf",
                    'width'         : size.w,
                    'height'        : size.h,
                    'type'          : 'swf',
                    'swf'           : {
                       	'allowfullscreen'  : 'true',
                       	'wmode'    : 'transparent',
                       	'flashvars':
                       	"config={\
                       			   'clip': {\
                                          'url': '" + href + "'\
                                      },\
                       		       'plugins': {\
                       		          'controls': {\
                       		             'url': '/photo/assets/flowplayer/flowplayer.controls-3.0.3.swf',\
                       		             'backgroundColor': 'transparent',\
                       		             'progressColor': 'transparent',\
                       		             'bufferColor': 'transparent',\
                       		             'play':true,\
                       		             'fullscreen':true,\
                       		             'autoHide': 'always'\
                       		          }\
                       		       }\
                       		    }"
                    }
                });
                break;
            case "image":
                var largeDim = scale(entry.width, entry.height, picSize);
                $("#ent" + idx).attr("rel",  "album").fancybox({
                    'titlePosition' : 'inside',
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic',
                    'easingIn'      : 'easeInQuad',
                    'easingOut'     : 'easeOutQuad',
                    'titleFormat'   : formatCaption,
                    'width'         : largeDim.w,
                    'height'        : largeDim.h,
                    'type'          : "image",
                    'href'          : $("#ent" + idx).href
                });
                break;
            case "dir":
                $("#ent" + idx).attr("href", location.pathname.replace(/\.album?($|\?)/, "/" + entry.name + ".album"));
                break;
            }


	    });


        var selectedImg = window.location.search;
        var selectedPos = undefined;
        if (/^\?focus=/.test(selectedImg)) {
            selectedImg = selectedImg.substring('?focus='.length);
            $("a.ss").each(function(index) {
                if (selectedImg == $(this).attr("title")) {
                    selectedPos = index;
                }
            });
        }

        if (selectedPos !== undefined) {
            $("#ent" + selectedPos).trigger('click');
        }
    }

        



    $.getJSON(location.pathname.replace(/\.album(\?|$)/, '.json') + location.search, renderGrid);



});