http://www.lesaintjude.ca/wp-content/plugins/document-gallery/assets/js/gallery.js

1(function($) {
2    // distinct list of all document IDs to be fetched via AJAX requests
3    var ids;
4
5    // current index in ids array
6    var i;
7
8    // find all document-icons without icons generated and start processing
9    $(document).ready(function() {
10        sizeGalleryIcons();
11        resetPendingIcons();
12        handleVisualEditor();
13        registerPaginationHandler();
14    });
15
16    /**
17     * Sets the size of the gallery icons based on the column count.
18     * @param gallery If given, the target gallery. Otherwise all galleries on page.
19     */
20    function sizeGalleryIcons(gallery) {
21        (gallery || $('.document-gallery[data-icon-width]')).each(function() {
22            var icon_width = $(this).data('icon-width') + '%';
23            $(this).find('.document-icon').width(icon_width);
24        });
25    }
26
27    /**
28     * Handles necessary logic for when we're rendering gallery preview within visual editor.
29     */
30    function handleVisualEditor() {
31        if (typeof tinymce !== 'undefined') {
32            tinymce.PluginManager.add('dg', function (editor, url) {
33                editor.on('LoadContent dgUpdate undo', function (e) {
34                    $(e.target.contentDocument).find('.wpview-type-dg > [data-shortcode]').each(function () {
35                        retrieveGallery($.parseJSON(decodeURIComponent($(this).data('shortcode'))), $(this));
36                    });
37                });
38            });
39        }
40    }
41
42    /**
43     * Listen for all pagination clicks in current DOM and any future DOM elements.
44     */
45    function registerPaginationHandler() {
46        $('body').delegate('.dg-paginate-wrapper .paginate a', 'click', function (e) {
47            var target = $(this).closest('.dg-paginate-wrapper');
48            var atts = target.data('shortcode');
49            atts['skip'] = 0;
50            var split = $(this).attr('href').split('#')[1].split('=');
51            if ( split.length >= 2 ) {
52                atts['skip'] = atts['limit'] * (split.pop() - 1);
53            }
54
55            retrieveGallery(atts, target);
56            e.preventDefault();
57        });
58    }
59
60    /**
61     * Collects all of the DG icons that need to be generated and starts requesting them via AJAX.
62     */
63    function resetPendingIcons() {
64        ids = [];
65        i = 0;
66
67        $('.document-gallery img[data-id]').each(function() {
68            var id = $(this).data('id');
69
70            // if we have multiple galleries, we could have multiple elements
71            // needing the same icon and no need to request multiple times
72            if (-1 === $.inArray(id, ids)) {
73                ids.push(id);
74            }
75        });
76
77        retrieveNextIcons();
78    }
79
80    /**
81     * Requests a gallery generated with the given attributes to populate the given target element.
82     * @param atts array The gallery shortcode attributes.
83     * @param target element The element to be updated with the AJAX HTML response.
84     */
85    function retrieveGallery(atts, target) {
86        // TODO: Cache already-retrieved gallery pages. Need to be careful not to keep too many at a time
87        // (could consume a lot of memory) & handle caching pages for multiple galleries on a single pages.
88        if ( typeof atts['id'] === 'undefined' ) {
89            atts['id'] = wp.media.dgDefaults.id;
90        }
91        $.post(ajaxurl, { action: 'dg_generate_gallery', atts: atts }, function(html) {
92            var jobj = $($.parseHTML(html));
93            target.replaceWith(jobj);
94            sizeGalleryIcons(jobj);
95            resetPendingIcons();
96        });
97    }
98
99    /**
100     * Sends AJAX request to server requesting some of the not-yet-generated icons (if any).
101     */
102    function retrieveNextIcons() {
103        // max number of icons to retrieve per AJAX request
104        var batchLimit = 4;
105
106        // IDs already retrieved
107        var idBatch = [];
108
109        for (; i < ids.length; i++) {
110            if (idBatch.length === batchLimit) {
111                break;
112            }
113
114            idBatch.push(ids[i]);
115        }
116
117        if (idBatch.length != 0) {
118            // request the next batch of icons
119            $.ajax({
120                type:     'POST',
121                url:      ajaxurl,
122                dataType: 'json',
123                data:     { action: 'dg_generate_icons', ids: idBatch },
124                success:  processRetrievedThumbnails,
125                error:    function(xhr) { console.error(xhr.responseText); }
126            });
127        }
128    }
129
130    /**
131     * Find all of the relevant elements and set the img src, then start next batch of thumbnail retrieval.
132     * @param response Associative array mapping attachment ID to thumbnail URL.
133     */
134    function processRetrievedThumbnails(response) {
135        for (var id in response) {
136            if (response.hasOwnProperty(id)) {
137                var target = $('.document-gallery img[data-id="' + id + '"]');
138                target.removeAttr('data-id');
139
140                (function(id, target) {
141                    var speed = 'fast';
142                    target.fadeOut(speed, function () {
143                        $(this).attr('src', response[id]);
144                        $(this).fadeIn(speed);
145                    });
146                })(id, target);
147            }
148        }
149
150        // start next batch once this response is processed
151        retrieveNextIcons();
152    }
153})(jQuery);