https://nanocad.com/local/components/slider/before.and.after/templates/.default/script.js?17302752635759

1/* path file: components/slider/before.and.after/templates/.default/script.js */
2
3"use strict";
4
5class SliderBar {
6  constructor(options = {}) {
7    this.options = {
8      width: "",
9      height: "",
10      beforeContent: null,
11      afterContent: null,
12      line: true,
13      lineColor: "",
14      lineWidth: null,
15    };
16    this.localData = {
17      sliderContainer: null,
18      sliderWrap: null,
19      beforeWrap: null,
20      afterWrap: null,
21      sliderBtn: null,
22      marginX: 0,
23      isSwiping: false,
24    };
25
26    this.isPhone = window.hasOwnProperty("ontouchstart");
27    this.moveHandler = this.moveHandler.bind(this);
28
29    this.options = { ...this.options, ...options };
30    this.el = document.querySelector(options.el);
31
32    this.init(this.el);
33  }
34
35  addListener() {
36    const sliderBtn = this.localData.sliderBtn;
37    const sliderWrap = this.localData.sliderWrap;
38
39    if (this.isPhone) {
40      sliderBtn.ontouchstart = this.startSlide.bind(this);
41      sliderBtn.ontouchend = this.endSlide.bind(this);
42      sliderWrap.ontouchend = this.endSlide.bind(this);
43      document.ontouchend = this.endSlide.bind(this);
44    } else {
45      sliderBtn.onmousedown = this.startSlide.bind(this);
46      sliderBtn.onmouseup = this.endSlide.bind(this);
47      sliderWrap.onmouseup = this.endSlide.bind(this);
48      document.onmouseup = this.endSlide.bind(this);
49    }
50  }
51
52  startSlide(e) {
53    e.preventDefault();
54
55    const sliderWrap = this.localData.sliderWrap;
56    const sliderBtn = this.localData.sliderBtn;
57
58    this.localData.isSwiping = true;
59
60    let slideEvent = (e.touches && e.touches[0]) || e;
61    this.localData.marginX = slideEvent.pageX - sliderBtn.offsetLeft;
62    this.isPhone
63      ? sliderWrap.addEventListener("touchmove", this.moveHandler)
64      : sliderWrap.addEventListener("mousemove", this.moveHandler);
65  }
66
67  endSlide() {
68    const sliderWrap = this.localData.sliderWrap;
69
70    if (!this.localData.isSwiping) return;
71
72    this.localData.isSwiping = false;
73    this.isPhone
74      ? sliderWrap.removeEventListener("touchmove", this.moveHandler)
75      : sliderWrap.removeEventListener("mousemove", this.moveHandler);
76  }
77
78  moveHandler(e) {
79    let marginX = this.localData.marginX;
80    let slideEvent = (e.touches && e.touches[0]) || e;
81
82    if (slideEvent.pageX - marginX < this.localData.sliderBtnWrapWidth + 20) {
83      this.localData.sliderBtn.style.left =
84        this.localData.sliderBtnWrapWidth + 20 + "px";
85      this.localData.beforeWrap.style.width =
86        this.localData.sliderBtnWrapWidth + 20 + "px";
87      return;
88    }
89
90    if (
91      slideEvent.pageX - marginX >
92      this.localData.sliderWrap.offsetWidth -
93        this.localData.sliderBtnWrapWidth -
94        20
95    ) {
96      this.localData.sliderBtn.style.left =
97        this.localData.sliderWrap.offsetWidth -
98        this.localData.sliderBtnWrapWidth -
99        20 +
100        "px";
101      this.localData.beforeWrap.style.width =
102        this.localData.sliderWrap.offsetWidth -
103        this.localData.sliderBtnWrapWidth -
104        20 +
105        "px";
106      return;
107    }
108    this.localData.sliderBtn.style.left = slideEvent.pageX - marginX + "px";
109    this.localData.beforeWrap.style.width = slideEvent.pageX - marginX + "px";
110  }
111
112  init(el) {
113    const {
114      beforeContent,
115      afterContent,
116      width,
117      height,
118      line,
119      lineColor,
120      lineWidth,
121    } = this.options;
122
123    let beforeContentElement = null;
124    let afterContentElement = null;
125
126    if (!beforeContent || !afterContent) return;
127
128    if (typeof beforeContent === "string") {
129      beforeContentElement = el.querySelector(beforeContent);
130    }
131    if (typeof afterContent === "string") {
132      afterContentElement = el.querySelector(afterContent);
133    }
134
135    if (
136      typeof beforeContent === Object &&
137      beforeContent instanceof HTMLElement
138    ) {
139      beforeContentElement = beforeContent;
140    }
141    if (typeof afterContent === Object && afterContent instanceof HTMLElement) {
142      afterContentElement = afterContent;
143    }
144    el.innerHTML = `
145    <div class="slider-container">
146      <div class="slider-wrap">
147        <div class="slider-before-content">
148        </div>
149        <div class="slider-after-content">
150        </div>
151        <div class="slider-btn">
152          <div class="slider-btn-wrap">

153            <span></span>
154            <span></span>
155          </div>
156        </div>
157      </div>
158    </div>
159  `;
160
161    this.localData.sliderContainer = el.querySelector(".slider-container");
162    this.localData.sliderWrap = el.querySelector(".slider-wrap");
163    this.localData.beforeWrap = el.querySelector(".slider-before-content");
164    this.localData.afterWrap = el.querySelector(".slider-after-content");
165    this.localData.sliderBtn = el.querySelector(".slider-btn");
166    this.localData.sliderBtnWrapWidth =
167      this.localData.sliderBtn.querySelector(".slider-btn-wrap").offsetWidth;
168
169    this.localData.beforeWrap.append(beforeContentElement);
170    this.localData.afterWrap.append(afterContentElement);
171
172    const { sliderContainer, sliderBtn } = this.localData;
173
174    el.style.cssText = `display: flex;justify-content: center;`;
175    sliderContainer.style.cssText = `width: ${width}; height: ${height};`;
176    if (!line) sliderBtn.style.background = "none";
177    else if (lineColor) sliderBtn.style.background = lineColor;
178
179    if (lineWidth) {
180      if (typeof lineWidth === "number") {
181        sliderBtn.style.width = lineWidth + "px";
182      }
183      if (typeof lineWidth === "string") {
184        sliderBtn.style.width = lineWidth;
185      }
186    }
187
188    this.addListener();
189  }
190}