pandora/static/js/exportAnnotationsDialog.js

'use strict';

pandora.ui.exportAnnotationsDialog = function(options) {

    var annotations = pandora.$ui.editor.getCurrentAnnotations(),

        layers = pandora.site.layers.map(function(layer) {
            return {
                disabled: annotations[layer.id].length == 0,
                id: layer.id,
                title: layer.title
            }
        }),

        enabledLayers = layers.filter(function(layer) {
            return layer.disabled == false;
        }),

        layer = (enabledLayers.length ? enabledLayers : layers)[0].id,

        $content = Ox.Element().css({margin: '16px'}),

        $layerSelect = Ox.Select({
            items: layers,
            label: Ox._('Layer'),
            labelWidth: 128,
            value: layer,
            width: 384
        })
        .css({
            marginTop: '16px'
        })
        .bindEvent({
            change: function() {
                updateStatus();
                that.enableButton('export');
                !$link ? addLink() : updateLink();
            }
        })
        .appendTo($content),

        $formatSelect = Ox.Select({
            items: [
                {id: 'json', title: 'JSON'},
                {id: 'srt', title: 'SRT'}
            ],
            label: Ox._('Format'),
            labelWidth: 128,
            value: 'json',
            width: 384
        })
        .css({
            marginTop: '16px'
        })
        .bindEvent({
            change: function() {
                $link && updateLink();
            }
        })
        .appendTo($content),
    
        $status = Ox.$('<div>')
        .css({
            marginTop: '16px'
        })
        .appendTo($content),

        $link,

        that = Ox.Dialog({
            buttons: [
                Ox.Button({
                    id: 'dontExport',
                    title: Ox._('Don\'t Export')
                })
                .bindEvent({
                    click: function() {
                        that.close();
                    }
                }),
                Ox.Button({
                    disabled: enabledLayers.length == 0,
                    id: 'export',
                    title: Ox._('Export')
                })
            ],
            closeButton: true,
            content: $content,
            fixedSize: true,
            height: 112,
            removeOnClose: true,
            title: Ox._('Export Annotations'),
            width: 416
        });

    updateStatus();

    enabledLayers.length && addLink();

    function addLink() {
        var $button = $(Ox.last(that.find('.OxButton')))
        $button.wrap($('<a>'));
        // On wrap, a reference to the link would *not* be the link in the DOM
        $link = $($button.parent());
        updateLink();
    }

    function textBlob(data) {
        data = Ox.encodeUTF8(data);
        var byteNumbers = new Array(data.length);
        for (var i = 0; i < data.length; i++) {
            byteNumbers[i] = data.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        var blob = new Blob([byteArray], {type: 'text/plain; charset=utf-8'});
        return blob;
    }

    function updateLink() {
        var layer = $layerSelect.value(),
            format = $formatSelect.value(),
            items = annotations[layer].map(function(annotation) {
                var text = format == 'json'
                    ? annotation.value
                    : annotation.value
                        .replace(/\n/g, ' ')
                        .replace(/\s+/g, ' ')
                        .replace(/<br>\s+?/g, '\n');
                return {
                    'in': annotation['in'],
                    out: annotation.out,
                    text: text
                };
            }),
            blob = textBlob(
                format == 'json'
                ? JSON.stringify(items, null, '    ')
                : Ox.formatSRT(items)
            ),
            url = window.URL.createObjectURL(blob);

        $link.attr({
            download: options.title + ' - '
                + Ox.getObjectById(layers, layer).title + '.' + format,
            href: url,
        });
    }

    function updateStatus() {
        $status.html(Ox._('All {0} currently shown will be exported.', [
            Ox.getObjectById(layers, $layerSelect.value()).title.toLowerCase()
        ]));
    }

    return that;

};