Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Refactored the slide methods

Browse Source 
so that slider does not have fixed height after being opened and can therefore
shrink or expand appropriately when its children change.
This commit is contained in:
JC Brand 2017-07-17 21:53:33 +02:00
parent d23046329e
commit 5c487d2faf
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/utils.js
View File

@ -197,14 +197,14 @@
}; };
utils.slideToggleElement = function (el) { utils.slideToggleElement = function (el) {
if (!el.offsetHeight) { if (_.includes(el.classList, 'collapsed')) {
return utils.slideOut(el); return utils.slideOut(el);
} else { } else {
return utils.slideIn(el); return utils.slideIn(el);
} }
}; };
utils.slideOut = function (el, duration=600) { utils.slideOut = function (el, duration=900) {
/* Shows/expands an element by sliding it out of itself. */ /* Shows/expands an element by sliding it out of itself. */
function calculateEndHeight (el) { function calculateEndHeight (el) {
@ -236,6 +236,7 @@
const step = calculateSlideStep(end_height), const step = calculateSlideStep(end_height),
interval = end_height/duration*step; interval = end_height/duration*step;
let h = 0; let h = 0;
interval_marker = window.setInterval(function () { interval_marker = window.setInterval(function () {
h += step; h += step;
if (h < end_height) { if (h < end_height) {
@ -247,6 +248,9 @@
el.style.height = calculateEndHeight(el) + 'px'; el.style.height = calculateEndHeight(el) + 'px';
window.clearInterval(interval_marker); window.clearInterval(interval_marker);
el.removeAttribute('data-slider-marker'); el.removeAttribute('data-slider-marker');
el.classList.remove('collapsed');
el.style.overflow = "";
el.style.height = "";
resolve(); resolve();
} }
}, interval); }, interval);
@ -261,7 +265,7 @@
const err = "Undefined or null element passed into slideIn"; const err = "Undefined or null element passed into slideIn";
console.warn(err); console.warn(err);
return reject(new Error(err)); return reject(new Error(err));
} else if (!el.offsetHeight) { } else if (_.includes(el.classList, 'collapsed')) {
return resolve(); return resolve();
} else if ($.fx.off) { // Effects are disabled (for tests) } else if ($.fx.off) { // Effects are disabled (for tests)
el.style.height = 0 + 'px'; el.style.height = 0 + 'px';
@ -283,7 +287,8 @@
if (h > 0) { if (h > 0) {
el.style.height = h + 'px'; el.style.height = h + 'px';
} else { } else {
el.style.height = 0 + 'px'; el.classList.add('collapsed');
el.style.height = "";
window.clearInterval(interval_marker); window.clearInterval(interval_marker);
el.removeAttribute('data-slider-marker'); el.removeAttribute('data-slider-marker');
resolve(); resolve();