https://www.boell.de/modules/custom/boell_copyright_footer/boell_copyright_footer.js?v=1.2.11

1(function($, once) {
2
3  function hasMediaWithLicence() {
4    $mediaWithLicenceAndImage = $('[data-has-licence][data-licence-image]');
5    return $mediaWithLicenceAndImage.length > 0;
6  }
7
8  let addCopyrightLinksToImages = function(context) {
9    const copyright_separator = ' ';
10    const licence_link =
11      '<a href="#" class="boell-copyright-footer-btn-open">' +
12      Drupal.t('licence infos') +
13      '</a>';
14    $(once('boell-copyright-link', 'img[data-has-licence="1"], article[data-has-licence="1"]', context)).each(function() {
15
16      let $img = $(this);
17      if ($img.data('show-licence-link')) {
18        // create a figure element if it does not already exist because html doesnt allow figcaption without figure
19        if ($img.closest('figure').find('figcaption').length === 0) {
20          is_main_image =
21            $img.hasClass(
22              'media--view-mode-image-and-licence-article-main-image'
23            ) ||
24            $img.hasClass(
25              'media--view-mode-image-and-licence-article-main-image-5d2'
26            );
27          $img.wrap('<figure></figure>');
28
29          if (is_main_image) {
30            // check if there is a separate caption in the field 'teaser image caption':
31            $main_image_caption = $(
32              '.node--type-article .field--name-field-teaser-image-caption .field__item'
33            );
34
35            if ($main_image_caption.length) {
36              // append the caption field to the figcaption and remove it afterwards
37              $img
38                .closest('figure')
39                .append(
40                  '<figcaption>' +
41                  $main_image_caption.text() +
42                  copyright_separator +
43                  licence_link +

44                  '</figcaption>'
45                );
46              $main_image_caption.remove();
47            } else {
48              $img
49                .closest('figure')
50                .append(
51                  '<figcaption class="copyright-only">' +
52                  licence_link +
53                  '</figcaption>'
54                );
55            }
56          } else {
57            // images in the article's body without figcaption
58            $img
59              .closest('figure')
60              .append(
61                '<figcaption class="copyright-only">' +
62                licence_link +
63                '</figcaption>'
64              );
65          }
66        } else {
67          // images in the article's body *with* a figcaption
68          $img
69            .closest('figure')
70            .find('figcaption')
71            .html(
72              $img.closest('figure').find('figcaption').html() +
73              copyright_separator +
74              licence_link
75            );
76        }
77      }
78    });
79  };
80
81  /**
82   * Collect all licence information in document
83   * @returns entries {[]}
84   */
85  let collectLicenceInformation = function() {
86    let entries = [];
87    let urls = [];
88
89    $('[data-has-licence=1]').each(function() {
90      var $img = $(this);
91
92      var creator = $img.attr('data-licence-creator');
93      var creator_url = $img.attr('data-licence-url');
94      var src = $img.attr('data-licence-image');
95      var id = $img.attr('data-licence-id');
96      var licence = $img.attr('data-licence-realname');
97      let alt = $img.find('img').attr('alt');
98      var title = $img.find('img').attr('title');
99
100      let type = 'foto';
101      const fileExtension = src ? src.split('.').pop() : null;
102      if (fileExtension && (fileExtension.includes('mp4') || fileExtension.includes('ogg'))) {
103        type = 'video';
104      }
105
106      // if (typeof creator !== typeof undefined && creator !== false) {
107      var entry = {
108        type: type,
109        author: creator,
110        picture: src,
111        licence: '',
112        object: $img,
113        id: id,
114        alt: alt
115      };
116
117      if (typeof creator_url !== typeof undefined && creator_url !== false) {
118        entry.author_url = creator_url;
119      }
120
121      if (typeof licence !== typeof undefined && licence !== false) {
122        entry.licence = $('<textarea/>').html(licence).val();
123      }
124
125      if (typeof title !== typeof undefined && title !== false) {
126        entry.title = title;
127      }
128
129      if (urls.indexOf(src) === -1) {
130        entries.push(entry);
131        urls.push(src);
132      }
133    });
134
135    return entries;
136  };
137
138  let appendLicenceInformationToFooter = function($boellCopyrightFooter) {
139    if (!once('append-licence-info', $boellCopyrightFooter).length) return;
140    const entries = collectLicenceInformation();
141    $boellCopyrightFooter.append(
142      Drupal.theme('boell_copyright_footer', entries)
143    );
144
145    $boellCopyrightFooter.find('.close').click(function(e) {
146      e.preventDefault();
147      active = false;
148      $boellCopyrightFooter.addClass(copyrightFooterHideClass);
149    });
150  };
151
152  Drupal.theme.boell_copyright_footer = function(entries) {
153    var out = '';
154    var above =
155      '<div class="above">' +
156      Drupal.t(
157        '<strong>Image credits</strong> - here you can find information about the creators of our images and videos, alongside their corresponding licences.'
158      ) +
159      '</div>';
160
161    entries.forEach(function(entry) {
162      out += Drupal.theme('boell_copyright_footer_entry', entry);
163    });
164
165    return (
166      '<div class="inner"><span class="close">&times;</span>' +
167      above +
168      '<div class="list-wrapper">' +
169      out +
170      '</div></div>'
171    );
172  };
173
174  Drupal.theme.boell_copyright_footer_entry = function(entry) {
175    if (typeof entry.picture == 'undefined' || entry.picture == '') {
176      return '';
177    }
178
179
180    let mediaTag = document.createElement('img');
181    mediaTag.src = entry.picture;
182    mediaTag.alt = entry.alt;
183
184    if (entry.type === 'video') {
185      mediaTag = document.createElement('video');
186      mediaTag.src = entry.picture;
187    }
188
189
190    var output =
191      '<div class="entry media-copyright-preview"><div class="img">'
192      + mediaTag.outerHTML + '</div><div class="authorinfos">';
193
194    if (entry.title) {
195      output += '<div class="title">»' + entry.title + '«</div>';
196    }
197
198    var licence = '';
199    if (entry.licence) {
200      licence +=
201        '<div class="licence">' +
202        Drupal.t('licence: ') +
203        entry.licence +
204        '</div>';
205    }
206
207    if (typeof entry.author !== typeof undefined && entry.author) {
208      if (typeof entry.author_url !== typeof undefined && entry.author_url) {
209        output +=
210          '<span class="author">' +
211          Drupal.t('picture: ') +
212          '<a href="' +
213          entry.author_url +
214          '" target="_blank">' +
215          entry.author +
216          '</a></span>';
217      } else {
218        output +=
219          '<span class="author">' +
220          Drupal.t('picture: ') +
221          entry.author +
222          '</span>';
223      }
224    }
225
226    output += ' ' + licence + '</div></div>';
227    return output;
228  };
229
230  const copyrightFooterClassSelector = '.boell-copyright-footer';
231  const copyrightFooterHideClass = 'boell-copyright-footer--hidden';
232  let $boellCopyrightFooter = $(copyrightFooterClassSelector);
233  let active = false;

234
235  const clickListener = function (event) {
236    event.preventDefault();
237    active = true;
238    appendLicenceInformationToFooter($boellCopyrightFooter);
239    $boellCopyrightFooter.removeClass(copyrightFooterHideClass);
240    $('html, body').animate(
241      {
242        scrollTop: $boellCopyrightFooter.offset().top - 200
243      }
244    );
245  }
246
247
248
249  Drupal.behaviors.boell_copyright_footer = {
250  attach: function(context, settings) {
251      addCopyrightLinksToImages(context);
252
253      $('.region-footer-bottom', context).each(function() {
254        let $copyrightFooterMenuLink = $(
255          '<li><a href="#" class="boell-copyright-footer-btn">' +
256          Drupal.t('Image Credits') +
257          '</a></li>'
258        );
259
260        $(once('boell-copyright-footer', copyrightFooterClassSelector, context)).each(function() {
261          $boellCopyrightFooter.addClass('boell-copyright-footer--hidden');
262          $('.site-footer-bottom__menu').append($copyrightFooterMenuLink);
263          $('.boell-copyright-footer-btn').click(function(e) {
264            e.preventDefault();
265            appendLicenceInformationToFooter($boellCopyrightFooter);
266
267            if (active) {
268              active = false;
269              $boellCopyrightFooter.addClass(copyrightFooterHideClass);
270            } else {
271              active = true;
272              $boellCopyrightFooter.removeClass(copyrightFooterHideClass);
273              $('html, body').animate(
274                {
275                  scrollTop: $boellCopyrightFooter.offset().top - 200
276                }
277              );
278            }
279          });
280
281
282          document.querySelectorAll('.boell-copyright-footer-btn-open').forEach(function(button) {
283            button.addEventListener('click', clickListener);
284          })
285
286        });
287      });
288    },
289
290    removeClickListeners: function() {
291      document.querySelectorAll('.boell-copyright-footer-btn-open').forEach(function(button) {
292        button.removeEventListener('click', clickListener)
293      })
294    },
295  };
296})(jQuery, once);