Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/clinic.corals.io/public/assets/front/js/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

(function ($) {

    $.fn.twentytwenty = function (options) {
        var options = $.extend(
            { default_offset_pct: 0.5, orientation: 'horizontal' }, options);
        return this.each(function () {

            var sliderPct = options.default_offset_pct;
            var container = $(this);
            var sliderOrientation = options.orientation;
            var beforeDirection = (sliderOrientation === 'vertical')
                ? 'down'
                : 'left';
            var afterDirection = (sliderOrientation === 'vertical')
                ? 'up'
                : 'right';

            container.wrap('<div class=\'twentytwenty-wrapper twentytwenty-' +
                sliderOrientation + '\'></div>');
            container.append('<div class=\'twentytwenty-overlay\'></div>');
            var beforeImg = container.find('img:first');
            var afterImg = container.find('img:last');
            container.append('<div class=\'twentytwenty-handle\'></div>');
            var slider = container.find('.twentytwenty-handle');
            slider.append('<span class=\'twentytwenty-' + beforeDirection +
                '-arrow\'></span>');
            slider.append('<span class=\'twentytwenty-' + afterDirection +
                '-arrow\'></span>');
            container.addClass('twentytwenty-container');
            beforeImg.addClass('twentytwenty-before');
            afterImg.addClass('twentytwenty-after');

            var overlay = container.find('.twentytwenty-overlay');
            overlay.append('<div class=\'twentytwenty-before-label\'></div>');
            overlay.append('<div class=\'twentytwenty-after-label\'></div>');

            var calcOffset = function (dimensionPct) {
                var w = beforeImg.width();
                var h = beforeImg.height();
                return {
                    w: w + 'px',
                    h: h + 'px',
                    cw: (dimensionPct * w) + 'px',
                    ch: (dimensionPct * h) + 'px',
                };
            };

            var adjustContainer = function (offset) {
                if (sliderOrientation === 'vertical') {
                    beforeImg.css('clip',
                        'rect(0,' + offset.w + ',' + offset.ch + ',0)');
                } else {
                    beforeImg.css('clip',
                        'rect(0,' + offset.cw + ',' + offset.h + ',0)');
                }
                container.css('height', offset.h);
            };

            var adjustSlider = function (pct) {
                var offset = calcOffset(pct);
                slider.css((sliderOrientation === 'vertical') ? 'top' : 'left',
                    (sliderOrientation === 'vertical') ? offset.ch : offset.cw);
                adjustContainer(offset);
            };

            $(window).on('resize.twentytwenty', function (e) {
                adjustSlider(sliderPct);
            });

            var offsetX = 0;
            var imgWidth = 0;

            slider.on('movestart', function (e) {
                if (((e.distX > e.distY && e.distX < -e.distY) ||
                    (e.distX < e.distY && e.distX > -e.distY)) &&
                    sliderOrientation !== 'vertical') {
                    e.preventDefault();
                } else if (((e.distX < e.distY && e.distX < -e.distY) ||
                    (e.distX > e.distY && e.distX > -e.distY)) &&
                    sliderOrientation === 'vertical') {
                    e.preventDefault();
                }
                container.addClass('active');
                offsetX = container.offset().left;
                offsetY = container.offset().top;
                imgWidth = beforeImg.width();
                imgHeight = beforeImg.height();
            });

            slider.on('moveend', function (e) {
                container.removeClass('active');
            });

            slider.on('move', function (e) {
                if (container.hasClass('active')) {
                    sliderPct = (sliderOrientation === 'vertical') ? (e.pageY -
                        offsetY) / imgHeight : (e.pageX - offsetX) / imgWidth;
                    if (sliderPct < 0) {
                        sliderPct = 0;
                    }
                    if (sliderPct > 1) {
                        sliderPct = 1;
                    }
                    adjustSlider(sliderPct);
                }
            });

            container.find('img').on('mousedown', function (event) {
                event.preventDefault();
            });

            $(window).trigger('resize.twentytwenty');
        });
    };

})(jQuery);