Skip to content

Commit 5bcd2b4

Browse files
lorenzodiannilorenzodianni
committed
fix(sidebarElement): destroy method
1 parent a2cac1c commit 5bcd2b4

2 files changed

Lines changed: 111 additions & 75 deletions

File tree

‎dist/sidebarjs.js‎

Lines changed: 110 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,67 @@ var POSITIONS = [LEFT_POSITION, RIGHT_POSITION];
3030
var SidebarElement = /** @class */ (function () {
3131
function SidebarElement(config) {
3232
if (config === void 0) { config = {}; }
33+
var _this = this;
34+
this.toggle = function () {
35+
_this.isVisible() ? _this.close() : _this.open();
36+
};
37+
this.open = function () {
38+
_this.component.classList.add(IS_VISIBLE);
39+
_this.setBackdropOpacity(_this.backdropOpacity);
40+
};
41+
this.close = function () {
42+
_this.component.classList.remove(IS_VISIBLE);
43+
_this.backdrop.removeAttribute('style');
44+
};
45+
this.__onTouchStart = function (e) {
46+
_this.initialTouch = e.touches[0].pageX;
47+
};
48+
this.__onTouchMove = function (e) {
49+
var documentSwiped = _this.initialTouch - e.touches[0].clientX;
50+
var sidebarMovement = _this.getSidebarPosition(documentSwiped);
51+
_this.touchMoveSidebar = -documentSwiped;
52+
if (sidebarMovement <= _this.container.clientWidth) {
53+
_this.moveSidebar(_this.touchMoveSidebar);
54+
}
55+
};
56+
this.__onTouchEnd = function () {
57+
_this.component.classList.remove(IS_MOVING);
58+
_this.container.removeAttribute('style');
59+
_this.backdrop.removeAttribute('style');
60+
Math.abs(_this.touchMoveSidebar) > (_this.container.clientWidth / 3.5) ? _this.close() : _this.open();
61+
_this.initialTouch = null;
62+
_this.touchMoveSidebar = null;
63+
};
64+
this.__onSwipeOpenStart = function (e) {
65+
if (_this.targetElementIsBackdrop(e)) {
66+
return;
67+
}
68+
var clientWidth = document.body.clientWidth;
69+
var touchPositionX = e.touches[0].clientX;
70+
var documentTouch = _this.hasLeftPosition() ? touchPositionX : clientWidth - touchPositionX;
71+
if (documentTouch < _this.documentSwipeRange) {
72+
_this.__onTouchStart(e);
73+
}
74+
};
75+
this.__onSwipeOpenMove = function (e) {
76+
if (!_this.targetElementIsBackdrop(e) && _this.initialTouch && !_this.isVisible()) {
77+
var documentSwiped = e.touches[0].clientX - _this.initialTouch;
78+
var sidebarMovement = _this.getSidebarPosition(documentSwiped);
79+
if (sidebarMovement > 0) {
80+
SidebarElement.vendorify(_this.component, 'transform', 'translate(0, 0)');
81+
SidebarElement.vendorify(_this.component, 'transition', 'none');
82+
_this.openMovement = sidebarMovement * (_this.hasLeftPosition() ? -1 : 1);
83+
_this.moveSidebar(_this.openMovement);
84+
}
85+
}
86+
};
87+
this.__onSwipeOpenEnd = function () {
88+
if (_this.openMovement) {
89+
_this.openMovement = null;
90+
_this.component.removeAttribute('style');
91+
_this.__onTouchEnd();
92+
}
93+
};
3394
var component = config.component, container = config.container, backdrop = config.backdrop, _a = config.documentMinSwipeX, documentMinSwipeX = _a === void 0 ? 10 : _a, _b = config.documentSwipeRange, documentSwipeRange = _b === void 0 ? 40 : _b, nativeSwipe = config.nativeSwipe, nativeSwipeOpen = config.nativeSwipeOpen, _c = config.position, position = _c === void 0 ? 'left' : _c, _d = config.backdropOpacity, backdropOpacity = _d === void 0 ? 0.3 : _d;
3495
this.component = component || document.querySelector("[" + SIDEBARJS + "]");
3596
this.container = container || SidebarElement.create(SIDEBARJS + "-container");
@@ -57,44 +118,66 @@ var SidebarElement = /** @class */ (function () {
57118
}
58119
this.setPosition(position);
59120
this.addAttrsEventsListeners(this.component.getAttribute(SIDEBARJS));
60-
this.backdrop.addEventListener('click', this.close.bind(this), { passive: true });
121+
this.backdrop.addEventListener('click', this.close, { passive: true });
61122
}
62-
SidebarElement.prototype.toggle = function () {
63-
this.isVisible() ? this.close() : this.open();
64-
};
65-
SidebarElement.prototype.open = function () {
66-
this.component.classList.add(IS_VISIBLE);
67-
this.setBackdropOpacity(this.backdropOpacity);
68-
};
69-
SidebarElement.prototype.close = function () {
70-
this.component.classList.remove(IS_VISIBLE);
71-
this.backdrop.removeAttribute('style');
72-
};
73123
SidebarElement.prototype.isVisible = function () {
74124
return this.component.classList.contains(IS_VISIBLE);
75125
};
126+
SidebarElement.prototype.destroy = function () {
127+
var _this = this;
128+
this.component.removeEventListener('touchstart', this.__onTouchStart, { passive: true });
129+
this.component.removeEventListener('touchmove', this.__onTouchMove, { passive: true });
130+
this.component.removeEventListener('touchend', this.__onTouchEnd, { passive: true });
131+
this.backdrop.removeEventListener('click', this.close, { passive: true });
132+
document.removeEventListener('touchstart', this.__onSwipeOpenStart, { passive: true });
133+
document.removeEventListener('touchmove', this.__onSwipeOpenMove, { passive: true });
134+
document.removeEventListener('touchend', this.__onSwipeOpenEnd, { passive: true });
135+
this.removeAttrsEventsListeners(this.component.getAttribute(SIDEBARJS));
136+
this.removeComponentClassPosition();
137+
this.component.innerHTML = this.container.innerHTML;
138+
this.container.innerHTML = null;
139+
Object.keys(this).forEach(function (key) { return _this[key] = null; });
140+
};
76141
SidebarElement.prototype.setPosition = function (position) {
77142
var _this = this;
78143
this.component.classList.add(IS_MOVING);
79144
this.position = POSITIONS.indexOf(position) >= 0 ? position : LEFT_POSITION;
80-
for (var i = 0; i < POSITIONS.length; i++) {
81-
this.component.classList.remove(SIDEBARJS + "--" + POSITIONS[i]);
82-
}
145+
this.removeComponentClassPosition();
83146
this.component.classList.add(SIDEBARJS + "--" + (this.hasRightPosition() ? RIGHT_POSITION : LEFT_POSITION));
84147
setTimeout(function () { return _this.component.classList.remove(IS_MOVING); }, TRANSITION_DURATION);
85148
};
86149
SidebarElement.prototype.addAttrsEventsListeners = function (sidebarName) {
150+
var _this = this;
151+
this.forEachActionElement(sidebarName, function (element, action) {
152+
if (!SidebarElement.elemHasListener(element)) {
153+
element.addEventListener('click', _this[action], { passive: true });
154+
SidebarElement.elemHasListener(element, true);
155+
}
156+
});
157+
};
158+
SidebarElement.prototype.removeComponentClassPosition = function () {
159+
for (var i = 0; i < POSITIONS.length; i++) {
160+
this.component.classList.remove(SIDEBARJS + "--" + POSITIONS[i]);
161+
}
162+
};
163+
SidebarElement.prototype.forEachActionElement = function (sidebarName, func) {
87164
var actions = ['toggle', 'open', 'close'];
88165
for (var i = 0; i < actions.length; i++) {
89166
var elements = document.querySelectorAll("[" + SIDEBARJS + "-" + actions[i] + "=\"" + sidebarName + "\"]");
90167
for (var j = 0; j < elements.length; j++) {
91-
if (!SidebarElement.elemHasListener(elements[j])) {
92-
elements[j].addEventListener('click', this[actions[i]].bind(this), { passive: true });
93-
SidebarElement.elemHasListener(elements[j], true);
94-
}
168+
func(elements[j], actions[i]);
95169
}
96170
}
97171
};
172+
SidebarElement.prototype.removeAttrsEventsListeners = function (sidebarName) {
173+
var _this = this;
174+
this.forEachActionElement(sidebarName, function (element, action) {
175+
if (SidebarElement.elemHasListener(element)) {
176+
element.removeEventListener('click', _this[action]);
177+
SidebarElement.elemHasListener(element, false);
178+
}
179+
});
180+
};
98181
SidebarElement.prototype.hasLeftPosition = function () {
99182
return this.position === LEFT_POSITION;
100183
};
@@ -108,33 +191,14 @@ var SidebarElement = /** @class */ (function () {
108191
this.component.appendChild(this.backdrop);
109192
};
110193
SidebarElement.prototype.addNativeGestures = function () {
111-
this.component.addEventListener('touchstart', this.onTouchStart.bind(this), { passive: true });
112-
this.component.addEventListener('touchmove', this.onTouchMove.bind(this), { passive: true });
113-
this.component.addEventListener('touchend', this.onTouchEnd.bind(this), { passive: true });
194+
this.component.addEventListener('touchstart', this.__onTouchStart, { passive: true });
195+
this.component.addEventListener('touchmove', this.__onTouchMove, { passive: true });
196+
this.component.addEventListener('touchend', this.__onTouchEnd, { passive: true });
114197
};
115198
SidebarElement.prototype.addNativeOpenGestures = function () {
116-
document.addEventListener('touchstart', this.onSwipeOpenStart.bind(this), { passive: true });
117-
document.addEventListener('touchmove', this.onSwipeOpenMove.bind(this), { passive: true });
118-
document.addEventListener('touchend', this.onSwipeOpenEnd.bind(this), { passive: true });
119-
};
120-
SidebarElement.prototype.onTouchStart = function (e) {
121-
this.initialTouch = e.touches[0].pageX;
122-
};
123-
SidebarElement.prototype.onTouchMove = function (e) {
124-
var documentSwiped = this.initialTouch - e.touches[0].clientX;
125-
var sidebarMovement = this.getSidebarPosition(documentSwiped);
126-
this.touchMoveSidebar = -documentSwiped;
127-
if (sidebarMovement <= this.container.clientWidth) {
128-
this.moveSidebar(this.touchMoveSidebar);
129-
}
130-
};
131-
SidebarElement.prototype.onTouchEnd = function () {
132-
this.component.classList.remove(IS_MOVING);
133-
this.container.removeAttribute('style');
134-
this.backdrop.removeAttribute('style');
135-
Math.abs(this.touchMoveSidebar) > (this.container.clientWidth / 3.5) ? this.close() : this.open();
136-
this.initialTouch = null;
137-
this.touchMoveSidebar = null;
199+
document.addEventListener('touchstart', this.__onSwipeOpenStart, { passive: true });
200+
document.addEventListener('touchmove', this.__onSwipeOpenMove, { passive: true });
201+
document.addEventListener('touchend', this.__onSwipeOpenEnd, { passive: true });
138202
};
139203
SidebarElement.prototype.moveSidebar = function (movement) {
140204
this.component.classList.add(IS_MOVING);
@@ -149,36 +213,6 @@ var SidebarElement = /** @class */ (function () {
149213
SidebarElement.prototype.setBackdropOpacity = function (opacity) {
150214
this.backdrop.style.opacity = opacity.toString();
151215
};
152-
SidebarElement.prototype.onSwipeOpenStart = function (e) {
153-
if (this.targetElementIsBackdrop(e)) {
154-
return;
155-
}
156-
var clientWidth = document.body.clientWidth;
157-
var touchPositionX = e.touches[0].clientX;
158-
var documentTouch = this.hasLeftPosition() ? touchPositionX : clientWidth - touchPositionX;
159-
if (documentTouch < this.documentSwipeRange) {
160-
this.onTouchStart(e);
161-
}
162-
};
163-
SidebarElement.prototype.onSwipeOpenMove = function (e) {
164-
if (!this.targetElementIsBackdrop(e) && this.initialTouch && !this.isVisible()) {
165-
var documentSwiped = e.touches[0].clientX - this.initialTouch;
166-
var sidebarMovement = this.getSidebarPosition(documentSwiped);
167-
if (sidebarMovement > 0) {
168-
SidebarElement.vendorify(this.component, 'transform', 'translate(0, 0)');
169-
SidebarElement.vendorify(this.component, 'transition', 'none');
170-
this.openMovement = sidebarMovement * (this.hasLeftPosition() ? -1 : 1);
171-
this.moveSidebar(this.openMovement);
172-
}
173-
}
174-
};
175-
SidebarElement.prototype.onSwipeOpenEnd = function () {
176-
if (this.openMovement) {
177-
this.openMovement = null;
178-
this.component.removeAttribute('style');
179-
this.onTouchEnd();
180-
}
181-
};
182216
SidebarElement.prototype.getSidebarPosition = function (swiped) {
183217
return (this.container.clientWidth - (this.hasLeftPosition() ? swiped : -swiped));
184218
};
@@ -258,6 +292,8 @@ var SidebarService = /** @class */ (function () {
258292
SidebarService.prototype.destroy = function (sidebarName) {
259293
if (sidebarName === void 0) { sidebarName = ''; }
260294
if (this.instances[sidebarName]) {
295+
this.instances[sidebarName].destroy();
296+
this.instances[sidebarName] = null;
261297
delete this.instances[sidebarName];
262298
}
263299
};

0 commit comments

Comments
 (0)