Snippets & Examples

For the most up-to-date documentation, please visit docs.brix.ch

Search via an external input field

If you want to offer full-text search without invoking an entire anuraSearch, you can simply use an input field anywhere on the page.

HTML:

<input type="text" id="anura-search">

JS:

var gallery = $('#anura-gallery').anuraGallery({
    /* ... your gallery settings ... */
});

$('#anura-search').on('keypress', function (e) {
    if (e.keyCode === 13) { // listen to "enter"
        gallery.anuraGallery({search: {string: $(this).val()}});
    }
});

Change the sort order

When not using anuraTable, you can still let the user decide the sort order via a simple select (for example). Please consult the main view documentation for available sort options.

HTML:

<select id="anura-sort-order">
    <option value="score_desc">best match</option>
    <option value="uploaddate_desc">most recent</option>
    <option value="name_asc">by name (ascending)</option>
    <option value="name_desc">by name (descending)</option>
</select>

JS:

var gallery = $('#anura-gallery').anuraGallery({
    /* ... your gallery settings ... */
});

$('#anura-sort-order').on('change', function (e) {
    gallery.anuraGallery({sort: $(this).val()});
});

Display the total number of assets

When you are using infini-scroll (a.k.a. pagination: 'auto'), it may be interesting to the user to know how many assets have been found in total, as this is only displayed in the paginator.

Assuming that your display component looks something like <span class="anura-result-counter"></span>, we can listen to the anura-loaded-first-event:

$('#anura-gallery').anuraGallery({
    /* ... your gallery settings ... */
}).on('anura-loaded-first', function(e, options, total) {
    $('.anura-result-counter').text((total > 0)?(total+' Object'+(total > 1?'s':'')):'No matching objects found');
});

Asset Marker (aka bullets)

If you want to show some visual indicator on your assets (such as "copyright" or "internal use only"), you can add so-called Asset Markers:

Simple example

For starters, let's assume you only need this on the main view and only for one infofield:

JS:

$('#anura-gallery').anuraGallery({
    /* ... your gallery settings ... */
    infofields: [108] // the information field(s) you need to load
}).on('anura-loaded', function() {
    $('.anura-asset-container:not(.anura-info-processed)').each(function (index, item) {
        var asset = $(item), container = asset.find('.anura-image-container');
        var markers = $('<div/>').addClass('anura-asset-markers').appendTo(container);
        if (asset.data('asset-infofield-raw-108') === true) { // checkbox "copyright"
            $('<span/>').addClass('anura-asset-marker anura-asset-marker-copyright').appendTo(markers);
        }
        asset.addClass('anura-info-processed');
    });
});

CSS:

.anura-asset-marker-copyright {
    padding: 7px;
    position: absolute;
    background: white url("../img/copyright.png") no-repeat center center;
    bottom: 5px;
    left: 5px;
    border-radius: 100%;
    cursor: help;
}

Complete example

When you also need the asset marker in the basket, it's worth it to externalize the asset marker. Note that we're also using a second infofield to add context:

var assetMarker = function(asset, target) {
    if (!asset.hasClass('anura-info-processed')) {
        var markers = $('<div/>').addClass('anura-asset-markers').appendTo(asset.find(target));
        if (asset.data('asset-infofield-raw-108') === true) {
            $('<span/>').addClass('anura-asset-marker anura-asset-marker-copyright')
                .attr('title', asset.data('asset-infofield-110')).appendTo(markers);
            // note that there's always a '-raw' variant, i.e. asset-infofield-108 says "Yes", but asset-infofield-raw-108 says true
        }
        asset.addClass('anura-info-processed');
    }
};

var basket = $('#anura-basket').anuraBasket({
    /* ... your basket settings ... */
    infofields: [108, 110] // the information field(s) you need to load
}).on('anura-asset-added', function (event, options, asset) {
    assetMarker($('#anura-basket-asset-'+asset), '.anura-basket-thumb-wrap'); // show the assets marker in the basket
});

$('#anura-gallery').anuraGallery({
    /* ... your gallery settings ... */
    infofields: [108, 110] // the information field(s) you need to load
}).on('anura-loaded', function() {
    $('.anura-asset-container').each(function (index, item) {
        assetMarker($(item), '.anura-image-container'); // show the asset markers in the main view
    });
});

The CSS is the same as before.

Authenticating against CELUM

If you are using the anuraLoginTokenVerifier to protect Anura, the following provides an example of how you'd do that in the front-end:

$(document).ready(function () {
    var baseUrl = 'http://your.celum.server/';
// login and token handling:
    $.anura.onRequestFailure = function(response) { // access denied -> go to login (either for the first time or to refresh to token
        if (response && response.status === 403)
            window.location.href = baseUrl + 'anuraLoginToken/login?to=' + encodeURIComponent(window.location.href);
    }
    $.anura.tokenProvider = function() { // where the other anura components get their token from
        var token, variables = window.location.search.substring(1).split('&');
        for (var i = 0; i < variables.length; i++) { // get return variables from login
            var param = variables[i].split('=');
            switch (param[0]) {
                case 'token': token = param[1]; break;
                case 'endpoint': localStorage.setItem('endpoint', param[1]); break;
            }
        }
        if (token) { // new token -> store it
            localStorage.setItem('token', token);
            history.replaceState('', document.title, window.location.href.replace(/[?&](token|endpoint)=[^&#]*/g, ''));
        } else { // get existing token from storage
            token = localStorage.getItem('token');
            if (token == null) window.location.href = baseUrl + 'anuraLoginToken/login?to=' + encodeURIComponent(window.location.href);
        }
        return token;
    };
    $.anura.tokenProvider(); // run once straight at the beginning (in order to get a token)

    // use the line below if no end point mapping is configured, because then localStorage.getItem('endpoint') will return null
    var server = baseUrl + 'anura/' + localStorage.getItem('endpoint'), locale = 'en'; // base settings
    // var server = baseUrl + 'anura/<static-end-point-name>', locale = 'en';

// other anura components as usual:
    var basket = $('#anura-basket').anuraBasket({server: server, locale: locale});
    $('#anura-gallery').anuraGallery({ // initialize an empty gallery on <div id="anura-gallery"></div>
        server: server,
        locale: locale,
        detail_view: 'slimbox',
        basket: basket
    });
    $('#anura-tree').anuraTree({ // initialize a tree on <div id="anura-tree"></div>
        server: server,
        locale: locale,
        node: {kind: 105, id: 71}, // folder with ID 1337
        //show_root: true,
        show: true // show the first sub-folder in the gallery by default
    });
});