https://www.thorlux.com/assets/scripts/cms/tag-driven-image-picker-x6YawFp.js

1import '../lib/image-picker/image-picker.min.js';
2import '../lib/image-picker/image-picker.css';
3import Routing from "../tlx-routing.js";
4
5
6var tagDrivenImagePickerAjaxRequests = [];
7
8export function updateTagDrivenImagePickerOptions(tagId, imagePickerId, selectedMediaID, additionalTags) {
9
10    const tagDrivenImagePickerUrl = Routing.tlxGenerate('media_get_by_tags_route'),
11        imagePicker = "#" + imagePickerId,
12        loadingElement = '.' + imagePickerId + '.image-picker-loading',
13        noResultsElement = '.' + imagePickerId + '.image-picker-error';
14
15    if (additionalTags === undefined) {
16        additionalTags = [];
17    }
18
19    if (tagDrivenImagePickerAjaxRequests[imagePickerId]
20        && tagDrivenImagePickerAjaxRequests[imagePickerId].readyState !== 4
21    ) {
22        tagDrivenImagePickerAjaxRequests[imagePickerId].abort();
23    }
24
25    $(imagePicker + ' option').remove();
26    $(imagePicker).append('<option></option>');
27    $(imagePicker).imagepicker({show_label: true});
28
29    if (undefined !== $(imagePicker).attr('disabled')) {
30        $(imagePicker).siblings('ul.image_picker_selector').attr('data-disabled', 'disabled').css({
31            'pointer-events': "none"
32        });
33    } else {
34        $(imagePicker).siblings('ul.image_picker_selector').removeAttr('data-disabled').css({
35            'pointer-events': ""
36        });
37    }
38
39    if (tagId != '') {
40        var tags = Array.from(additionalTags);
41        tags.push(tagId);
42        $(noResultsElement).hide();
43        $(loadingElement).show();
44
45        tagDrivenImagePickerAjaxRequests[imagePickerId] = $.ajax({
46            url: tagDrivenImagePickerUrl,
47            type: 'post',
48            data: {
49                'tags': tags,
50                'selectedMediaId': selectedMediaID
51            },
52            success: function (response) {
53                $(imagePicker).append('<option></option>');
54                if (0 === response.media.length) {
55                    $(noResultsElement).show();
56                    $(imagePicker).hide();
57                }
58                $(imagePicker + ' option').remove();
59                $(imagePicker).append('<option></option>');
60                $(response.media).each(function (key, medium) {
61                    var option =
62                        '<option value="' + medium.id + '" data-img-src="' + medium.previewUriSmall + '" data-img-class="image-picker-element"' + (typeof selectedMediaID != 'undefined' && medium.id == selectedMediaID ? "selected" : "") + '>' + medium.fileName + '</option>';
63                    if (typeof selectedMediaID != 'undefined' && medium.id === selectedMediaID) {
64                        $(imagePicker).prepend(option);
65
66                    } else {
67                        $(imagePicker).append(option);
68                    }
69                });
70            },
71            complete: function () {
72                $(loadingElement).hide();
73                $(imagePicker).imagepicker({show_label: true});
74
75                if (undefined !== $(imagePicker).attr('disabled')) {
76                    $(imagePicker).siblings('ul.image_picker_selector').attr('data-disabled', 'disabled').css({
77                        'pointer-events': "none"
78                    });
79                } else {
80                    $(imagePicker).siblings('ul.image_picker_selector').removeAttr('data-disabled').css({
81                        'pointer-events': ""
82                    });
83                }
84            }
85        });
86    }
87}
88
89export function initTagDrivenImagePicker(tagPicker) {
90    if (!tagPicker.attr('data-image-picker')) {
91        return;
92    }
93    var imagePickerIds = $(tagPicker).attr('data-image-picker').split(',');
94
95
96    $(imagePickerIds).each(function (key, imagePickerId) {
97        var selectedMediaID = $('#' + imagePickerId).val();
98        var additionalTags = null;
99        if ($('#' + imagePickerId).attr('data-additional-tags')) {
100            additionalTags = $('#' + imagePickerId).attr('data-additional-tags').split(',');
101        }
102
103        if (additionalTags === undefined || additionalTags === null) {
104            additionalTags = [];
105        }
106        updateTagDrivenImagePickerOptions($(tagPicker).val(), imagePickerId, selectedMediaID, additionalTags);
107
108        $(tagPicker).on('change', function () {
109            updateTagDrivenImagePickerOptions($(tagPicker).val(), imagePickerId, selectedMediaID, additionalTags);
110        });
111    });
112
113}