mirror of
https://github.com/status-im/consul.git
synced 2025-01-12 23:05:28 +00:00
5fb9df1640
* Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Adding explicit MPL license for sub-package This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository. * Updating the license from MPL to Business Source License Going forward, this project will be licensed under the Business Source License v1.1. Please see our blog post for more details at <Blog URL>, FAQ at www.hashicorp.com/licensing-faq, and details of the license at www.hashicorp.com/bsl. * add missing license headers * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 * Update copyright file headers to BUSL-1.1 --------- Co-authored-by: hashicorp-copywrite[bot] <110428419+hashicorp-copywrite[bot]@users.noreply.github.com>
104 lines
3.2 KiB
JavaScript
104 lines
3.2 KiB
JavaScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
import { inject as service } from '@ember/service';
|
|
import { computed, get, set } from '@ember/object';
|
|
import Component from 'ember-collection/components/ember-collection';
|
|
import PercentageColumns from 'ember-collection/layouts/percentage-columns';
|
|
import Slotted from 'block-slots';
|
|
|
|
const formatItemStyle = PercentageColumns.prototype.formatItemStyle;
|
|
|
|
export default Component.extend(Slotted, {
|
|
dom: service('dom'),
|
|
tagName: '',
|
|
height: 500,
|
|
cellHeight: 70,
|
|
checked: null,
|
|
scroll: 'virtual',
|
|
init: function () {
|
|
this._super(...arguments);
|
|
this.columns = [100];
|
|
this.guid = this.dom.guid(this);
|
|
},
|
|
didInsertElement: function () {
|
|
this._super(...arguments);
|
|
this.$element = this.dom.element(`#${this.guid}`);
|
|
if (this.scroll === 'virtual') {
|
|
this.actions.resize.apply(this, [{ target: this.dom.viewport() }]);
|
|
}
|
|
},
|
|
didReceiveAttrs: function () {
|
|
this._super(...arguments);
|
|
this._cellLayout = this['cell-layout'] = new PercentageColumns(
|
|
get(this, 'items.length'),
|
|
this.columns,
|
|
this.cellHeight
|
|
);
|
|
const o = this;
|
|
this['cell-layout'].formatItemStyle = function (itemIndex) {
|
|
let style = formatItemStyle.apply(this, arguments);
|
|
if (o.checked === itemIndex) {
|
|
style = `${style};z-index: 1`;
|
|
}
|
|
return style;
|
|
};
|
|
},
|
|
style: computed('height', function () {
|
|
if (this.scroll !== 'virtual') {
|
|
return {};
|
|
}
|
|
return {
|
|
height: this.height,
|
|
};
|
|
}),
|
|
actions: {
|
|
resize: function (e) {
|
|
// TODO: This top part is very similar to resize in tabular-collection
|
|
// see if it make sense to DRY out
|
|
const dom = this.dom;
|
|
const $footer = dom.element('footer[role="contentinfo"]');
|
|
if ($footer) {
|
|
const border = 1;
|
|
const rect = this.$element.getBoundingClientRect();
|
|
const space = rect.top + $footer.clientHeight + border;
|
|
const height = e.target.innerHeight - space;
|
|
this.set('height', Math.max(0, height));
|
|
this.updateItems();
|
|
this.updateScrollPosition();
|
|
}
|
|
},
|
|
click: function (e) {
|
|
return this.dom.clickFirstAnchor(e, '.list-collection > ul > li');
|
|
},
|
|
change: function (index, e = {}) {
|
|
if (e.target.checked && index !== this.checked) {
|
|
set(this, 'checked', parseInt(index));
|
|
this.$row = this.dom.closest('li', e.target);
|
|
this.$row.style.zIndex = 1;
|
|
|
|
const $group = this.dom.sibling(e.target, 'div');
|
|
const groupRect = $group.getBoundingClientRect();
|
|
const groupBottom = groupRect.top + $group.clientHeight;
|
|
|
|
const $footer = this.dom.element('footer[role="contentinfo"]');
|
|
const footerRect = $footer.getBoundingClientRect();
|
|
const footerTop = footerRect.top;
|
|
|
|
if (groupBottom > footerTop) {
|
|
$group.classList.add('above');
|
|
} else {
|
|
$group.classList.remove('above');
|
|
}
|
|
} else {
|
|
const $group = this.dom.sibling(e.target, 'div');
|
|
$group.classList.remove('above');
|
|
set(this, 'checked', null);
|
|
this.$row.style.zIndex = null;
|
|
}
|
|
},
|
|
},
|
|
});
|