https://www.gpb.org/modules/custom/ga_core/js/issuu-api.js?v=1.x

1(function ($, Drupal) {
2  'use strict';
3
4  /**
5   * Behavior to show the Issuu results in a slider.
6   */
7  Drupal.behaviors.issuuApi = {
8    attach: function (context, settings) {
9      // Ensure the code runs only once.
10      $(once('issuu-api', '.issuu-container', context)).each(function () {
11        const $container = $(this);
12        const $sliderContainer = $('<div class="issuu-slider" id="issuu-slider-' + $container.attr('id') + '"></div>').appendTo($container);
13        $('<div class="issuu-arrows" id="issuu-arrows-' + $container.attr('id') + '"></div>').appendTo($container);
14
15        // AJAX call to get the issuu data.
16        fetch('/api/issuu')
17          .then(response => response.json())
18          .then(data => {
19            if (data && data.results && Array.isArray(data.results)) {
20
21              // Iterate over the results and create the slides.
22              data.results.forEach(item => {
23                const $slide = $('<div class="issuu-slide">')
24                  .append($('<div class="issuu-item">')
25                    .append($('<img src="' + item.cover.large.url + '" alt="' + item.title + '">'))
26                    .append($('<h3>').text(item.title))
27                  );
28
29                // Open in the iframe when the slide is clicked.
30                $slide.click(function() {
31                  const publicLocation = item.publicLocation.split('/');
32                  const issuuId = publicLocation[publicLocation.length - 1];
33                  const url = 'https://e.issuu.com/embed.html?u=gpbdigital&d=' + issuuId;
34                  const $iframe = $('iframe.issuu-iframe');
35                  $iframe.attr('src', url);
36                });
37                $sliderContainer.append($slide);
38              });
39
40              // Initialize the slider.
41              $sliderContainer.slick({
42                dots: false,
43                infinite: false,
44                speed: 500,
45                slidesToShow: 6,
46                slidesToScroll: 2,
47                autoplay: false,
48                appendArrows: "#issuu-arrows-" + $container.attr('id'),
49                nextArrow: '<button type="button" class="slick-next" aria-label="Next Slide" type="button">Next Slide</button>',
50                prevArrow: '<button type="button" class="slick-prev" aria-label="Previous Slide" type="button">Previous Slide</button>',
51                responsive: [
52                  {
53                    breakpoint: 1600,
54                    settings: {
55                      slidesToShow: 4.25,
56                      slidesToScroll: 2,
57                      arrows: true,
58                    }
59                  },
60                  {
61                    breakpoint: 1024,
62                    settings: {
63                      slidesToShow: 3.25,
64                      slidesToScroll: 2,
65                      arrows: false,
66                    }
67                  },
68                  {
69                    breakpoint: 600,
70                    settings: {
71                      slidesToShow: 2.25,
72                      slidesToScroll: 2,
73                      arrows: false,
74                    }
75                  }
76                ]
77              });
78            } else {
79              $container.html('<div class="issuu-error">No results found.</div>');
80            }
81          })
82          .catch(error => {
83            console.error('Error fetching issuu:', error);
84            $container.html('<div class="issuu-error">Error loading data.</div>');
85          });
86      });
87    }
88  };
89
90})(jQuery, Drupal);