{"version":3,"file":"slider-before-after.js","names":["a1BeforeAfterSlider","SesoBeforeAfterSlider","constructor","selector","this","el","container","HTMLElement","document","getElementById","querySelector","imageBefore","undefined","imageAfter","titleBefore","closest","titleAfter","slideBefore","slideAfter","dragHandler","params","classInitialized","classSlide","classSlideBefore","classSlideAfter","classTitleBefore","classDragHandler","dragStart","initSlider","classList","contains","createElement","add","innerHTML","outerHTML","remove","draggable","bindEvents","that","split","forEach","evt","addEventListener","event","preventDefault","stopPropagation","markDragStart","markDragStop","isDragStart","moveX","changedTouches","clientX","updateSlider","position","getPositionOffset","updateDragHandler","updateSlideBefore","offsetX","containerWidth","offsetWidth","prePosition","getBoundingClientRect","left","style","translateValue","transform","window","querySelectorAll","fragment"],"sources":["slider-before-after.js"],"mappings":"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","sourcesContent":["// before afer slider\nif(typeof a1BeforeAfterSlider === 'undefined') {\n    const SesoBeforeAfterSlider = class {\n\n        constructor(selector) {\n            this.el = {};\n            this.el.container = selector instanceof HTMLElement\n                ? selector\n                : (\n                    document.getElementById(selector) ||\n                    document.querySelector(selector)\n                );\n\n            this.el.imageBefore = this.el.container.querySelector('.img-before')\n                ? this.el.container.querySelector('.img-before')\n                : undefined;\n\n            this.el.imageAfter = this.el.container.querySelector('.img-after')\n                ? this.el.container.querySelector('.img-after')\n                : undefined;\n\n            this.el.titleBefore = this.el.container.closest('.slider').querySelector('.slide-title-before')\n                ? this.el.container.closest('.slider').querySelector('.slide-title-before')\n                : undefined;\n\n            this.el.titleAfter = this.el.container.closest('.slider').querySelector('.slide-title-after')\n                ? this.el.container.closest('.slider').querySelector('.slide-title-after')\n                : undefined;\n\n            this.el.slideBefore = undefined;\n            this.el.slideAfter = undefined;\n            this.el.dragHandler = undefined;\n\n            this.params = {\n                classInitialized: 'is-initialized',\n                classSlide: 'slide',\n                classSlideBefore: 'slide-before',\n                classSlideAfter: 'slide-after',\n                classTitleBefore: 'slide-title-before',\n                classDragHandler: 'drag-handler',\n                dragStart: false\n            };\n\n            if (typeof this.el.imageBefore !== 'undefined' && typeof this.el.imageAfter !== 'undefined') {\n                this.initSlider();\n            }\n        }\n\n        initSlider () {\n            if (!this.el.container.classList.contains(this.params.classInitialized)) {\n                // create markup wrapper\n                // slide before\n                this.el.slideBefore = document.createElement('div');\n                this.el.slideBefore.classList.add(this.params.classSlide, this.params.classSlideBefore);\n                if(typeof this.el.titleBefore !== 'undefined') {\n                    this.el.slideBefore.innerHTML = this.el.imageBefore.outerHTML + this.el.titleBefore.outerHTML;\n                    this.el.titleBefore.remove();\n                } else {\n                    this.el.slideBefore.innerHTML = this.el.imageBefore.outerHTML;\n                }\n                // slide after\n                this.el.slideAfter = document.createElement('div');\n                this.el.slideAfter.classList.add(this.params.classSlide, this.params.classSlideAfter);\n                if(typeof this.el.titleAfter !== 'undefined') {\n                    this.el.slideAfter.innerHTML = this.el.imageAfter.outerHTML + this.el.titleAfter.outerHTML;\n                    this.el.titleAfter.remove();\n                } else {\n                    this.el.slideAfter.innerHTML = this.el.imageAfter.outerHTML;\n                }\n                this.el.imageBefore.outerHTML = this.el.slideBefore.outerHTML;\n                this.el.imageAfter.outerHTML = this.el.slideAfter.outerHTML;\n\n                // create drag handler\n                this.el.dragHandler = document.createElement('div');\n                this.el.dragHandler.classList.add(this.params.classDragHandler);\n                this.el.dragHandler.draggable = true;\n                this.el.container.innerHTML += this.el.dragHandler.outerHTML;\n\n                // slider is initialized\n                this.el.container.classList.add(this.params.classInitialized);\n\n                this.bindEvents();\n            }\n        }\n\n        bindEvents () {\n            let that = this;\n\n            'mousedown touchstart'.split(' ').forEach(function(evt) {\n                that.el.container.querySelector('.' + that.params.classDragHandler).addEventListener(evt, function (event) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    that.markDragStart();\n                });\n            });\n\n            'mouseup touchend'.split(' ').forEach(function (evt) {\n                document.addEventListener(evt, function () {\n                    that.markDragStop();\n                });\n            });\n\n            'mousemove touchmove'.split(' ').forEach(function (evt) {\n                that.el.container.addEventListener(evt, function (event) {\n                    if(that.isDragStart()) {\n                        var moveX = evt === 'touchmove' ? event.changedTouches[0].clientX : event.clientX;\n                        that.updateSlider(moveX);\n                    }\n                });\n            });\n        }\n\n        markDragStart () {\n            this.params.dragStart = true;\n        }\n\n        markDragStop () {\n            this.params.dragStart = false;\n        }\n\n        isDragStart () {\n            return this.params.dragStart === true;\n        }\n\n        updateSlider (moveX) {\n            // get position offset, updated drag handler and slide before\n            var position = this.getPositionOffset(moveX);\n            this.updateDragHandler(position);\n            this.updateSlideBefore(position);\n        }\n\n        getPositionOffset (offsetX) {\n            var containerWidth = this.el.container.offsetWidth;\n            var containerOffset = this.el.container.getBoundingClientRect().left;\n            var prePosition = (offsetX - containerOffset) * 100 / containerWidth;\n            var position = null;\n\n            if (prePosition < 0) {\n                // start reached\n                position = 0;\n            } else if (prePosition > 100) {\n                // end reached\n                position = 100;\n            } else {\n                // in the middle - cursor position\n                position = prePosition;\n            }\n\n            return position;\n        }\n\n        updateDragHandler (position) {\n            this.el.container.querySelector('.' + this.params.classDragHandler).style.left = position + '%';\n        }\n\n        updateSlideBefore (position) {\n            var translateValue = 100 - position;\n            this.el.container.querySelector('.' + this.params.classSlideBefore).style.transform = 'translate(' + (-1 * translateValue) + '%)';\n            this.el.container.querySelector('.' + this.params.classSlideBefore + ' picture').style.transform = 'translate(' + translateValue + '%)';\n            this.el.container.querySelector('.' + this.params.classSlideBefore + ' img').style.transform = 'translate(' + translateValue + '%)';\n            this.el.container.querySelector('.' + this.params.classTitleBefore).style.left = translateValue + '%';\n        }\n    }\n\n    if (typeof window !== 'undefined') {\n        window.a1BeforeAfterSlider = SesoBeforeAfterSlider;\n    }\n\n    window.addEventListener('load', () => {\n        // slider before after\n        document.querySelectorAll('a1-fragment[name=\"slider-before-after\"]').forEach(function (fragment) {\n            window.a1BeforeAfterSlider = new SesoBeforeAfterSlider(fragment.querySelector('.animator'));\n        });\n    });\n}\n"]}