Make DOM traversal methods more generic and move to utils.
This commit is contained in:
parent
93da96ad91
commit
f1c8de15d1
@ -404,7 +404,7 @@
|
||||
* This element must have a "data-isodate" attribute
|
||||
* which specifies its creation date.
|
||||
*/
|
||||
const prev_msg_el = this.getPreviousMessageElement(next_msg_el),
|
||||
const prev_msg_el = u.getPreviousElement(next_msg_el, ".message:not(.chat-event)"),
|
||||
prev_msg_date = _.isNull(prev_msg_el) ? null : prev_msg_el.getAttribute('data-isodate'),
|
||||
next_msg_date = next_msg_el.getAttribute('data-isodate');
|
||||
|
||||
@ -419,34 +419,6 @@
|
||||
}
|
||||
},
|
||||
|
||||
isNotPermanentMessage (el) {
|
||||
return !_.isNull(el) && (u.hasClass('chat-event', el) || !u.hasClass('message', el));
|
||||
},
|
||||
|
||||
getPreviousMessageElement (el) {
|
||||
let prev_msg_el = el.previousSibling;
|
||||
while (this.isNotPermanentMessage(prev_msg_el)) {
|
||||
prev_msg_el = prev_msg_el.previousSibling
|
||||
}
|
||||
return prev_msg_el;
|
||||
},
|
||||
|
||||
getLastMessageElement () {
|
||||
let last_msg_el = this.content.lastElementChild;
|
||||
while (this.isNotPermanentMessage(last_msg_el)) {
|
||||
last_msg_el = last_msg_el.previousSibling
|
||||
}
|
||||
return last_msg_el;
|
||||
},
|
||||
|
||||
getFirstMessageElement () {
|
||||
let first_msg_el = this.content.firstElementChild;
|
||||
while (this.isNotPermanentMessage(first_msg_el)) {
|
||||
first_msg_el = first_msg_el.nextSibling
|
||||
}
|
||||
return first_msg_el;
|
||||
},
|
||||
|
||||
getLastMessageDate (cutoff) {
|
||||
/* Return the ISO8601 format date of the latest message.
|
||||
*
|
||||
@ -454,12 +426,12 @@
|
||||
* (Object) cutoff: Moment Date cutoff date. The last
|
||||
* message received cutoff this date will be returned.
|
||||
*/
|
||||
const first_msg = this.getFirstMessageElement(),
|
||||
const first_msg = u.getFirstChildElement(this.content, '.message:not(.chat-event)'),
|
||||
oldest_date = first_msg ? first_msg.getAttribute('data-isodate') : null;
|
||||
if (!_.isNull(oldest_date) && moment(oldest_date).isAfter(cutoff)) {
|
||||
return null;
|
||||
}
|
||||
const last_msg = this.getLastMessageElement(),
|
||||
const last_msg = u.getLastChildElement(this.content, '.message:not(.chat-event)'),
|
||||
most_recent_date = last_msg ? last_msg.getAttribute('data-isodate') : null;
|
||||
if (_.isNull(most_recent_date) || moment(most_recent_date).isBefore(cutoff)) {
|
||||
return most_recent_date;
|
||||
|
56
src/utils.js
56
src/utils.js
@ -64,16 +64,6 @@
|
||||
});
|
||||
};
|
||||
|
||||
function calculateElementHeight (el) {
|
||||
/* Return the height of the passed in DOM element,
|
||||
* based on the heights of its children.
|
||||
*/
|
||||
return _.reduce(
|
||||
el.children,
|
||||
(result, child) => result + child.offsetHeight, 0
|
||||
);
|
||||
}
|
||||
|
||||
function slideOutWrapup (el) {
|
||||
/* Wrapup function for slideOut. */
|
||||
el.removeAttribute('data-slider-marker');
|
||||
@ -85,6 +75,48 @@
|
||||
|
||||
var u = {};
|
||||
|
||||
u.getNextElement = function (el, selector='*') {
|
||||
let next_el = el.nextElementSibling;
|
||||
while (!_.isNull(next_el) && !sizzle.matchesSelector(next_el, selector)) {
|
||||
next_el = next_el.nextElementSibling;
|
||||
}
|
||||
return next_el;
|
||||
}
|
||||
|
||||
u.getPreviousElement = function (el, selector='*') {
|
||||
let prev_el = el.previousSibling;
|
||||
while (!_.isNull(prev_el) && !sizzle.matchesSelector(prev_el, selector)) {
|
||||
prev_el = prev_el.previousSibling
|
||||
}
|
||||
return prev_el;
|
||||
}
|
||||
|
||||
u.getFirstChildElement = function (el, selector='*') {
|
||||
let first_el = el.firstElementChild;
|
||||
while (!_.isNull(first_el) && !sizzle.matchesSelector(first_el, selector)) {
|
||||
first_el = first_el.nextSibling
|
||||
}
|
||||
return first_el;
|
||||
}
|
||||
|
||||
u.getLastChildElement = function (el, selector='*') {
|
||||
let last_el = el.lastElementChild;
|
||||
while (!_.isNull(last_el) && !sizzle.matchesSelector(last_el, selector)) {
|
||||
last_el = last_el.previousSibling
|
||||
}
|
||||
return last_el;
|
||||
}
|
||||
|
||||
u.calculateElementHeight = function (el) {
|
||||
/* Return the height of the passed in DOM element,
|
||||
* based on the heights of its children.
|
||||
*/
|
||||
return _.reduce(
|
||||
el.children,
|
||||
(result, child) => result + child.offsetHeight, 0
|
||||
);
|
||||
}
|
||||
|
||||
u.addClass = function (className, el) {
|
||||
if (el instanceof Element) {
|
||||
el.classList.add(className);
|
||||
@ -199,7 +231,7 @@
|
||||
el.removeAttribute('data-slider-marker');
|
||||
window.cancelAnimationFrame(marker);
|
||||
}
|
||||
const end_height = calculateElementHeight(el);
|
||||
const end_height = u.calculateElementHeight(el);
|
||||
if (window.converse_disable_effects) { // Effects are disabled (for tests)
|
||||
el.style.height = end_height + 'px';
|
||||
slideOutWrapup(el);
|
||||
@ -227,7 +259,7 @@
|
||||
// browser bug where browsers don't know the correct
|
||||
// offsetHeight beforehand.
|
||||
el.removeAttribute('data-slider-marker');
|
||||
el.style.height = calculateElementHeight(el) + 'px';
|
||||
el.style.height = u.calculateElementHeight(el) + 'px';
|
||||
el.style.overflow = "";
|
||||
el.style.height = "";
|
||||
resolve();
|
||||
|
Loading…
Reference in New Issue
Block a user