collapsible.js: Use ES6's class syntax
This commit is contained in:
Johannes Meyer
parent
b0622dcde2
commit
c4ce98159c
|
|
@ -11,8 +11,9 @@
|
|||
*
|
||||
* @param icinga Icinga The current Icinga Object
|
||||
*/
|
||||
var Collapsible = function(icinga) {
|
||||
Icinga.EventListener.call(this, icinga);
|
||||
class Collapsible extends Icinga.EventListener {
|
||||
constructor(icinga) {
|
||||
super(icinga);
|
||||
|
||||
this.on('layout-change', this.onLayoutChange, this);
|
||||
this.on('rendered', '#main > .container, #modal-content', this.onRendered, this);
|
||||
|
|
@ -29,16 +30,14 @@
|
|||
)
|
||||
.on('add', this.onExpand, this)
|
||||
.on('delete', this.onCollapse, this);
|
||||
};
|
||||
|
||||
Collapsible.prototype = new Icinga.EventListener();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes all collapsibles. Triggered on rendering of a container.
|
||||
*
|
||||
* @param event Event The `onRender` event triggered by the rendered container
|
||||
*/
|
||||
Collapsible.prototype.onRendered = function(event) {
|
||||
onRendered(event) {
|
||||
let _this = event.data.self,
|
||||
toCollapse = [],
|
||||
toExpand = [];
|
||||
|
|
@ -65,14 +64,14 @@
|
|||
for (const collapsible of toExpand) {
|
||||
_this.expand(collapsible);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates all collapsibles.
|
||||
*
|
||||
* @param event Event The `layout-change` event triggered by window resizing or column changes
|
||||
*/
|
||||
Collapsible.prototype.onLayoutChange = function(event) {
|
||||
onLayoutChange(event) {
|
||||
let _this = event.data.self;
|
||||
let toCollapse = [];
|
||||
|
||||
|
|
@ -98,14 +97,14 @@
|
|||
_this.collapse(collapseInfo[0], collapseInfo[1]);
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* A collapsible got expanded in another window, try to apply this here as well
|
||||
*
|
||||
* @param {string} collapsiblePath
|
||||
*/
|
||||
Collapsible.prototype.onExpand = function(collapsiblePath) {
|
||||
onExpand(collapsiblePath) {
|
||||
let collapsible = document.querySelector(collapsiblePath);
|
||||
|
||||
if (collapsible && 'canCollapse' in collapsible.dataset) {
|
||||
|
|
@ -115,14 +114,14 @@
|
|||
this.expand(collapsible);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* A collapsible got collapsed in another window, try to apply this here as well
|
||||
*
|
||||
* @param {string} collapsiblePath
|
||||
*/
|
||||
Collapsible.prototype.onCollapse = function(collapsiblePath) {
|
||||
onCollapse(collapsiblePath) {
|
||||
let collapsible = document.querySelector(collapsiblePath);
|
||||
|
||||
if (collapsible && this.canCollapse(collapsible)) {
|
||||
|
|
@ -132,14 +131,14 @@
|
|||
this.collapse(collapsible, this.calculateCollapsedHeight(collapsible));
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handler for toggling collapsibles. Switches the collapsed state of the respective container.
|
||||
*
|
||||
* @param event Event The `onClick` event triggered by the clicked collapsible-control element
|
||||
*/
|
||||
Collapsible.prototype.onControlClicked = function(event) {
|
||||
onControlClicked(event) {
|
||||
let _this = event.data.self,
|
||||
target = event.currentTarget;
|
||||
|
||||
|
|
@ -186,7 +185,7 @@
|
|||
// The browser handles these clicks as well, and would toggle the state again
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup the given collapsible
|
||||
|
|
@ -195,7 +194,7 @@
|
|||
*
|
||||
* @returns {boolean} Whether it needs to collapse or not
|
||||
*/
|
||||
Collapsible.prototype.setupCollapsible = function (collapsible) {
|
||||
setupCollapsible(collapsible) {
|
||||
if (this.isDetails(collapsible)) {
|
||||
let summary = collapsible.querySelector(':scope > summary');
|
||||
if (! summary.classList.contains('collapsible-control')) {
|
||||
|
|
@ -239,7 +238,7 @@
|
|||
} else {
|
||||
return ! this.state.has(this.icinga.utils.getCSSPath(collapsible));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Return an appropriate row element selector
|
||||
|
|
@ -248,7 +247,7 @@
|
|||
*
|
||||
* @returns {string}
|
||||
*/
|
||||
Collapsible.prototype.getRowSelector = function(collapsible) {
|
||||
getRowSelector(collapsible) {
|
||||
if (!! collapsible.dataset.visibleHeight) {
|
||||
return '';
|
||||
}
|
||||
|
|
@ -260,7 +259,7 @@
|
|||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Check whether the given collapsible needs to collapse
|
||||
|
|
@ -269,7 +268,7 @@
|
|||
*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
Collapsible.prototype.canCollapse = function(collapsible) {
|
||||
canCollapse(collapsible) {
|
||||
if (this.isDetails(collapsible)) {
|
||||
return collapsible.querySelector(':scope > summary') !== null;
|
||||
}
|
||||
|
|
@ -298,14 +297,14 @@
|
|||
|
||||
return actualHeight >= maxHeight * 2;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the height the given collapsible should have when collapsed
|
||||
*
|
||||
* @param collapsible
|
||||
*/
|
||||
Collapsible.prototype.calculateCollapsedHeight = function (collapsible) {
|
||||
calculateCollapsedHeight(collapsible) {
|
||||
let height;
|
||||
|
||||
if (this.isDetails(collapsible)) {
|
||||
|
|
@ -360,7 +359,7 @@
|
|||
}
|
||||
|
||||
return height;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapse the given collapsible
|
||||
|
|
@ -368,7 +367,7 @@
|
|||
* @param collapsible The given collapsible container element
|
||||
* @param toHeight {int} The height in pixels to collapse to
|
||||
*/
|
||||
Collapsible.prototype.collapse = function(collapsible, toHeight) {
|
||||
collapse(collapsible, toHeight) {
|
||||
if (this.isDetails(collapsible)) {
|
||||
collapsible.open = false;
|
||||
} else {
|
||||
|
|
@ -376,14 +375,14 @@
|
|||
}
|
||||
|
||||
collapsible.classList.add('collapsed');
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand the given collapsible
|
||||
*
|
||||
* @param collapsible The given collapsible container element
|
||||
*/
|
||||
Collapsible.prototype.expand = function(collapsible) {
|
||||
expand(collapsible) {
|
||||
collapsible.classList.remove('collapsed');
|
||||
|
||||
if (this.isDetails(collapsible)) {
|
||||
|
|
@ -391,7 +390,7 @@
|
|||
} else {
|
||||
collapsible.style.cssText = '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get whether the given collapsible is a <details> element
|
||||
|
|
@ -400,9 +399,10 @@
|
|||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Collapsible.prototype.isDetails = function (collapsible) {
|
||||
isDetails(collapsible) {
|
||||
return collapsible.tagName === 'DETAILS';
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Icinga.Behaviors.Collapsible = Collapsible;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue