{"version":3,"file":"carousel.entry.js","mappings":";;;;;AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;;AAET;AACA,6CAA6C,MAAM;AACnD,SAAS;AACT;;AAEA;AACA;AACA;AACA;AACA,UAAU;AACV;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,mHAAmH,QAAQ;;AAE3H,wDAAwD,QAAQ;AAChE;AACA;AACA,SAAS;AACT;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,4DAA4D,8BAA8B;AAC1F,qBAAqB;AACrB;;AAEA;AACA;AACA,2DAA2D,WAAW;AACtE;;AAEA,kBAAkB;AAClB;AACA;;AAEA,aAAa;AACb,SAAS;AACT;AACA;;AAEA;;AAEA;AACA","sources":["webpack://ArcsaCapitalRedesign2022/./src/js/carousel.js"],"sourcesContent":["const galleryContainer = document.querySelector('.gallery-container');\nconst galleryControlsContainer = document.querySelector('.gallery-controls');\nconst galleryControls = ['prev', 'next'];\nconst galleryItems = document.querySelectorAll('.gallery-item');\n\nclass Carousel {\n    constructor(container, items, controls) {\n        this.carouselContainer = container;\n        this.carouselControls = controls;\n        this.carouselArray = [...items];\n    }\n\n    // Update css classes for gallery\n    updateGallery() {\n        this.carouselArray.forEach(el => {\n            el.classList.remove('gallery-item-1');\n            el.classList.remove('gallery-item-2');\n            el.classList.remove('gallery-item-3');\n        });\n\n        this.carouselArray.slice(0, 3).forEach((el, i) => {\n            el.classList.add(`gallery-item-${i + 1}`);\n        });\n    }\n\n    // Update the current order of the carouselArray and gallery\n    setCurrentState(direction) {\n        if (direction.className == 'gallery-controls-prev') {\n            this.carouselArray.unshift(this.carouselArray.pop());\n        } else {\n            this.carouselArray.push(this.carouselArray.shift());\n        }\n\n        this.updateGallery();\n    }\n\n    // Construct the carousel controls\n    setControls() {\n        this.carouselControls.forEach(control => {\n            galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;\n\n            document.querySelector(`.gallery-controls-${control}`).innerHTML = control == 'prev'\n                ? '<i class=\"bi bi-arrow-left-circle-fill h1 text-info\"></i>'\n                : '<i class=\"bi bi-arrow-right-circle-fill h1 text-info\"></i>';\n        });\n    }\n\n    // Add a click event listener to trigger setCurrentState method to rearrange carousel\n    useControls() {\n        const triggers = [...galleryControlsContainer.childNodes];\n\n        triggers.forEach(control => {\n            control.addEventListener('click', e => {\n                e.preventDefault();\n\n                if (control.className == 'gallery-controls-add') {\n                    const newItem = document.createElement('img');\n                    const latestItem = this.carouselArray.length;\n                    const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length) + 1;\n\n                    // Assign the necessary properties for new gallery item\n                    Object.assign(newItem, {\n                        className: 'gallery-item',\n                        src: `http://fakeimg.pl/300/?text=${this.carouselArray.length + 1}`\n                    });\n                    newItem.setAttribute('data-index', this.carouselArray.length + 1);\n\n                    // Then add it to the carouselArray and update the gallery\n                    this.carouselArray.splice(latestIndex, 0, newItem);\n                    document.querySelector(`[data-index=\"${latestItem}\"]`).after(newItem);\n                    this.updateGallery();\n\n                } else {\n                    this.setCurrentState(control);\n                }\n\n            });\n        });\n    }\n}\n\nconst exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);\n\nexampleCarousel.setControls();\nexampleCarousel.useControls();\n"],"names":[],"sourceRoot":""}