https://asecu.gr/wp-content/plugins/droit-elementor-addons-pro/ass…/js/jquery.twentytwenty.js?ver=2.0.4

1(function ($) {
2
3  $.fn.twentytwenty = function (options) {
4    var options = $.extend({
5      default_offset_pct: 0.5,
6      orientation: 'horizontal',
7      before_label: 'Before',
8      after_label: 'After',
9      no_overlay: false,
10      move_slider_on_hover: false,
11      move_with_handle_only: true,
12      click_to_move: false,
13      _icon_type: '',
14      left_icon: '',
15      right_icon: ''
16    }, options);
17
18    return this.each(function () {
19
20      var sliderPct = options.default_offset_pct;
21      var container = $(this);
22      var sliderOrientation = options.orientation;
23      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
24      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
25
26
27      container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
28      if (options.no_overlay == true) {
29        container.append("<div class='twentytwenty-overlay'></div>");
30        var overlay = container.find(".twentytwenty-overlay");
31        overlay.append("<div class='after-before-button twentytwenty-before-label' data-content='" + options.before_label + "'></div>");
32        overlay.append("<div class='after-before-button twentytwenty-after-label' data-content='" + options.after_label + "'></div>");
33      }
34      var beforeImg = container.find("img:first");
35      var afterImg = container.find("img:last");
36      container.append("<div class='twentytwenty-handle'></div>");
37      var slider = container.find(".twentytwenty-handle");
38      slider.append('<div class="h-arrow"></div>');
39      var cont = container.find('.h-arrow');
40      if (options._icon_type == 'svg') {
41        cont.append("<img class='asdf left-arrow' src='" + options.left_icon + "'/>");
42        cont.append("<img class='asdf right-arrow' src='" + options.right_icon + "'/>");
43      } else if (options._icon_type != 'svg') {
44        cont.append("<i class='left-arrow " + options.left_icon + "'></i>");
45        cont.append("<i class='right-arrow " + options.right_icon + "'></i>");
46      }
47      container.addClass("twentytwenty-container");
48      beforeImg.addClass("twentytwenty-before");
49      afterImg.addClass("twentytwenty-after");
50
51      var calcOffset = function (dimensionPct) {
52        var w = beforeImg.width();
53        var h = beforeImg.height();
54        return {
55          w: w + "px",
56          h: h + "px",
57          cw: (dimensionPct * w) + "px",
58          ch: (dimensionPct * h) + "px"
59        };
60      };
61
62      var adjustContainer = function (offset) {
63        if (sliderOrientation === 'vertical') {
64          beforeImg.css("clip", "rect(0," + offset.w + "," + offset.ch + ",0)");
65          afterImg.css("clip", "rect(" + offset.ch + "," + offset.w + "," + offset.h + ",0)");
66        }
67        else {
68          beforeImg.css("clip", "rect(0," + offset.cw + "," + offset.h + ",0)");
69          afterImg.css("clip", "rect(0," + offset.w + "," + offset.h + "," + offset.cw + ")");
70        }
71        container.css("height", offset.h);
72      };
73
74      var adjustSlider = function (pct) {
75        var offset = calcOffset(pct);
76        slider.css((sliderOrientation === "vertical") ? "top" : "left", (sliderOrientation === "vertical") ? offset.ch : offset.cw);
77        adjustContainer(offset);
78      };
79
80      // Return the number specified or the min/max number if it outside the range given.
81      var minMaxNumber = function (num, min, max) {
82        return Math.max(min, Math.min(max, num));
83      };
84
85      // Calculate the slider percentage based on the position.
86      var getSliderPercentage = function (positionX, positionY) {
87        var sliderPercentage = (sliderOrientation === 'vertical') ?
88          (positionY - offsetY) / imgHeight :
89          (positionX - offsetX) / imgWidth;
90
91        return minMaxNumber(sliderPercentage, 0, 1);
92      };
93
94
95      $(window).on("resize.twentytwenty", function (e) {
96        adjustSlider(sliderPct);
97      });
98
99      var offsetX = 0;
100      var offsetY = 0;
101      var imgWidth = 0;
102      var imgHeight = 0;
103      var onMoveStart = function (e) {
104        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
105          e.preventDefault();
106        }
107        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
108          e.preventDefault();
109        }
110        container.addClass("active");
111        offsetX = container.offset().left;
112        offsetY = container.offset().top;
113        imgWidth = beforeImg.width();
114        imgHeight = beforeImg.height();
115      };
116      var onMove = function (e) {
117        if (container.hasClass("active")) {
118          sliderPct = getSliderPercentage(e.pageX, e.pageY);
119          adjustSlider(sliderPct);
120        }
121      };
122      var onMoveEnd = function () {
123        container.removeClass("active");
124      };
125
126      var moveTarget = options.move_with_handle_only ? slider : container;
127      moveTarget.on("movestart", onMoveStart);
128      moveTarget.on("move", onMove);
129      moveTarget.on("moveend", onMoveEnd);
130
131      if (options.move_slider_on_hover) {
132        container.on("mouseenter", onMoveStart);
133        container.on("mousemove", onMove);
134        container.on("mouseleave", onMoveEnd);
135      }
136
137      slider.on("touchmove", function (e) {
138        e.preventDefault();
139      });
140
141      container.find("img").on("mousedown", function (event) {
142        event.preventDefault();
143      });
144
145      if (options.click_to_move) {
146        container.on('click', function (e) {
147          offsetX = container.offset().left;
148          offsetY = container.offset().top;
149          imgWidth = beforeImg.width();
150          imgHeight = beforeImg.height();
151
152          sliderPct = getSliderPercentage(e.pageX, e.pageY);
153          adjustSlider(sliderPct);
154        });
155      }
156
157      $(window).trigger("resize.twentytwenty");
158    });

159  };
160
161})(jQuery);