https://www.dei.gov.ba/fe/js/success-stories.js?v=3

1/* ============================================================
2   InnoTech d.o.o. - Custom JavaScript
3
4   Copyright © 2026 InnoTech d.o.o.
5   All rights reserved.
6
7   This file contains custom JavaScript developed for Direkcija za evropske integracije Bosne i Hercegovine.
8   Unauthorized use, reproduction, or distribution is prohibited.
9   ============================================================ */
10
11/**
12 * Success Stories - Unified JS
13 */
14
15$(document).ready(function () {
16
17    // 1. SCROLL PROGRESS BAR
18    if ($('#scroll-progress').length) {
19        $(window).on('scroll', function () {
20            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
21            const height    = document.documentElement.scrollHeight - document.documentElement.clientHeight;
22            const scrolled  = (winScroll / height) * 100;
23            $('#scroll-progress').css('width', scrolled + '%');
24        });
25    }
26
27    // 1. Infographics Carousel
28    if ($('.infographics-carousel').length) {
29        $('.infographics-carousel').owlCarousel({
30            autoHeight: false,
31            autoplay: false,
32            dots: true,
33            loop: false,
34            margin: 25,
35            nav: false,
36            smartSpeed: 800,
37            responsive: {
38                0: {items: 1},
39                768: {items: 2},
40                1200: {items: 4}
41            }
42        });
43    }
44
45    // 2. Photo Stories Carousel (Main Grid)
46    if ($('.stories-carousel').length) {
47        $('.stories-carousel').owlCarousel({
48            dots: true,
49            loop: false,
50            margin: 25,
51            nav: false,
52            responsive: {
53                0:    { items: 1 },
54                600:  { items: 2 },
55                992:  { items: 3 },
56                1200: { items: 4 }
57            }
58        });
59    }
60
61    // 3. Slide Stories Carousel (Small)
62    if ($('.slide-stories-carousel').length) {
63        $('.slide-stories-carousel').owlCarousel({
64            autoplay: true,
65            autoplayTimeout: 3000,
66            dots: true,
67            loop: true,
68            margin: 20,
69            smartSpeed: 600,
70            responsive: {
71                0:    { items: 1 },
72                600:  { items: 2 },
73                992:  { items: 3 },
74                1200: { items: 4 }
75            }
76        });
77    }
78
79    let currentOwlCarousel = null;
80
81    window.openStory = function(id) {
82        const stories = window.photoStoriesData;
83        const story = stories ? stories[id] : null;
84        if (!story) return;
85
86        const $modal = $('#photoStoryModal');
87        const $content = $modal.find('.photo-story-content');
88        const $sliderContainer = $('#storySlider');
89
90        // 1. Resetuj modal bez animacije da spriječimo "flash" starog sadržaja
91        $modal.css('transition', 'none').removeClass('active');
92
93        if (currentOwlCarousel) {
94            $sliderContainer.owlCarousel('destroy');
95        }
96        $sliderContainer.empty().removeClass('owl-loaded owl-drag owl-hidden');
97
98        // 2. Napuni nove slike
99        story.imgs.forEach(img => {
100            if (img) $sliderContainer.append(`<div class="item"><img src="${img}" alt=""></div>`);
101        });
102
103        // 3. Postavi tekstove, linkove i temu (boju)
104        $content
105            .removeClass((i, cls) => (cls.match(/theme-\S+/g) || []).join(' '))
106            .addClass(story.colorClass);
107
108        $('#storyTitle').text(story.title);
109        $('#storyDesc').text(story.desc);
110        $('#storyLink').attr('href', story.link);
111
112        // 4. Inicijalizuj carousel dok je modal još nevidljiv
113        currentOwlCarousel = $sliderContainer.owlCarousel({
114            dots:      true,
115            items:     1,
116            loop:      story.imgs.length > 1,
117            margin:    0,
118            nav:       true,
119            navText:   ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
120            smartSpeed: 600,
121            onInitialized: function() {
122                // Tek kad je carousel složio slike, prikaži modal sa animacijom
123                setTimeout(() => {
124                    $modal.css('transition', '0.4s').addClass('active');
125                }, 50);
126            }
127        });
128    };
129
130    window.closeStory = function() {
131        $('#photoStoryModal').removeClass('active');
132        if (currentOwlCarousel) {
133            $('#storySlider').owlCarousel('destroy').empty();
134            currentOwlCarousel = null;
135        }
136    };
137
138    $(document).on('click', '.photo-story-multi', function () {
139        openStory($(this).data('story-id'));
140    });
141
142    $(document).on('click', '#photoStoryModal', function (e) {
143        if ($(e.target).hasClass('photo-story-modal')) closeStory();
144    });
145});