discourse/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6

260 lines
8.2 KiB
JavaScript

import { on } from "ember-addons/ember-computed-decorators";
export default Ember.Mixin.create({
init() {
this._super();
this._previousScrollParentOverflow = null;
this._previousCSSContext = null;
this.selectionSelector = ".choice";
this.filterInputSelector = ".filter-input";
this.rowSelector = ".select-kit-row";
this.collectionSelector = ".select-kit-collection";
this.headerSelector = ".select-kit-header";
this.bodySelector = ".select-kit-body";
this.wrapperSelector = ".select-kit-wrapper";
this.scrollableParentSelector = ".modal-body";
this.fixedPlaceholderSelector = `.select-kit-fixed-placeholder-${this.elementId}`;
},
$findRowByValue(value) { return this.$(`${this.rowSelector}[data-value='${value}']`); },
$header() { return this.$(this.headerSelector); },
$body() { return this.$(this.bodySelector); },
$wrapper() { return this.$(this.wrapperSelector); },
$collection() { return this.$(this.collectionSelector); },
$scrollableParent() { return $(this.scrollableParentSelector); },
$fixedPlaceholder() { return $(this.fixedPlaceholderSelector); },
$rows() {
return this.$(`${this.rowSelector}:not(.no-content):not(.is-hidden)`);
},
$highlightedRow() { return this.$rows().filter(".is-highlighted"); },
$selectedRow() { return this.$rows().filter(".is-selected"); },
$filterInput() { return this.$(this.filterInputSelector); },
@on("didRender")
_adjustPosition() {
this._applyFixedPosition();
this._applyDirection();
this._positionWrapper();
},
@on("willDestroyElement")
_clearState() {
this.$fixedPlaceholder().remove();
},
// use to collapse and remove focus
close(event) {
this.collapse(event);
this.setProperties({ isFocused: false });
},
focus() {
Ember.run.schedule("afterRender", () => {
this.$header().focus();
});
},
// try to focus filter and fallback to header if not present
focusFilterOrHeader() {
const context = this;
// next so we are sure it finised expand/collapse
Ember.run.next(() => {
Ember.run.schedule("afterRender", () => {
if ((this.site && this.site.isMobileDevice) || !context.$filterInput() || !context.$filterInput().is(":visible")) {
context.$header().focus();
} else {
context.$filterInput().focus();
}
});
});
},
expand() {
if (this.get("isExpanded")) return;
this.setProperties({ isExpanded: true, renderedBodyOnce: true, isFocused: true });
this.focusFilterOrHeader();
this.autoHighlight();
this._boundaryActionHandler("onExpand", this);
},
collapse() {
this.set("isExpanded", false);
Ember.run.schedule("afterRender", () => this._removeFixedPosition() );
this._boundaryActionHandler("onCollapse", this);
},
// lose focus of the component in two steps
// first collapse and keep focus and then remove focus
unfocus(event) {
if (this.get("isExpanded")) {
this.collapse(event);
this.focus(event);
} else {
this.close(event);
}
},
_destroyEvent(event) {
event.preventDefault();
event.stopPropagation();
},
_applyDirection() {
let options = { left: "auto", bottom: "auto", top: "auto" };
const discourseHeader = $(".d-header")[0];
const discourseHeaderHeight = discourseHeader ? (discourseHeader.getBoundingClientRect().top + this._computedStyle(discourseHeader, "height")) : 0;
const bodyHeight = this._computedStyle(this.$body()[0], "height");
const componentHeight = this._computedStyle(this.get("element"), "height");
const offsetTop = this.get("element").getBoundingClientRect().top;
const offsetBottom = this.get("element").getBoundingClientRect().bottom;
const windowWidth = $(window).width();
if (this.get("fullWidthOnMobile") && (this.site && this.site.isMobileDevice)) {
const margin = 10;
const relativeLeft = this.$().offset().left - $(window).scrollLeft();
options.left = margin - relativeLeft;
options.width = windowWidth - margin * 2;
options.maxWidth = options.minWidth = "unset";
} else {
const parentWidth = this.$scrollableParent().length ? this.$scrollableParent().width() : windowWidth;
const bodyWidth = this._computedStyle(this.$body()[0], "width");
let marginToEdge;
if (this.$scrollableParent().length) {
marginToEdge = this.$().offset().left - this.$scrollableParent().offset().left;
} else {
marginToEdge = this.get("element").getBoundingClientRect().left;
}
const enoughMarginToOppositeEdge = (parentWidth - marginToEdge - bodyWidth + this.get("horizontalOffset")) > 0;
if (enoughMarginToOppositeEdge) {
this.setProperties({ isLeftAligned: true, isRightAligned: false });
options.left = this.get("horizontalOffset");
options.right = "unset";
} else {
this.setProperties({ isLeftAligned: false, isRightAligned: true });
options.left = "unset";
options.right = this.get("horizontalOffset");
}
}
const fullHeight = this.get("verticalOffset") + bodyHeight + componentHeight;
const hasBelowSpace = $(window).height() - offsetBottom - fullHeight > 0;
const hasAboveSpace = offsetTop - fullHeight - discourseHeaderHeight > 0;
const headerHeight = this._computedStyle(this.$header()[0], "height");
if (hasBelowSpace || (!hasBelowSpace && !hasAboveSpace)) {
this.setProperties({ isBelow: true, isAbove: false });
options.top = headerHeight + this.get("verticalOffset");
} else {
this.setProperties({ isBelow: false, isAbove: true });
options.bottom = headerHeight + this.get("verticalOffset");
}
this.$body().css(options);
},
_applyFixedPosition() {
if (this.get("isExpanded") !== true) return;
if (this.$fixedPlaceholder().length) return;
if (!this.$scrollableParent().length) return;
const width = this._computedStyle(this.get("element"), "width");
const height = this._computedStyle(this.get("element"), "height");
this._previousScrollParentOverflow = this._previousScrollParentOverflow ||
this.$scrollableParent().css("overflow");
this._previousCSSContext = this._previousCSSContext || {
width,
minWidth: this.$().css("min-width"),
maxWidth: this.$().css("max-width"),
top: this.$().css("top"),
left: this.$().css("left"),
marginLeft: this.$().css("margin-left"),
marginRight: this.$().css("margin-right"),
position: this.$().css("position")
};
const componentStyles = {
top: this.get("element").getBoundingClientRect().top,
width,
left: this.get("element").getBoundingClientRect().left,
marginLeft: 0,
marginRight: 0,
minWidth: "unset",
maxWidth: "unset",
position: "fixed"
};
const $placeholderTemplate = $(`<div class='select-kit-fixed-placeholder-${this.elementId}'></div>`);
$placeholderTemplate.css({
display: "inline-block",
width,
height,
"vertical-align": "middle"
});
this.$()
.before($placeholderTemplate)
.css(componentStyles);
this.$scrollableParent().css({ overflow: "hidden" });
},
_removeFixedPosition() {
this.$fixedPlaceholder().remove();
if (!this.element || this.isDestroying || this.isDestroyed) return;
if (this.$scrollableParent().length === 0) return;
this.$().css(this._previousCSSContext || {});
this.$scrollableParent().css("overflow", this._previousScrollParentOverflow || {});
},
_positionWrapper() {
const elementWidth = this._computedStyle(this.get("element"), "width");
const headerHeight = this._computedStyle(this.$header()[0], "height");
const bodyHeight = this._computedStyle(this.$body()[0], "height");
this.$wrapper().css({
width: elementWidth,
height: headerHeight + bodyHeight
});
},
_isRTL() {
return $("html").css("direction") === "rtl";
},
_computedStyle(element, style) {
if (!element) return 0;
let value;
if (window.getComputedStyle) {
value = window.getComputedStyle(element, null)[style];
} else {
value = $(element).css(style);
}
return this._getFloat(value);
},
_getFloat(value) {
value = parseFloat(value);
return $.isNumeric(value) ? value : 0;
}
});