github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-01 09:08:10 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[FIX] Improves positioning of select-box

Browse Source
This commit is contained in:
Joffrey JAFFEUX
2017-10-19 18:39:46 -07:00
committed by GitHub
parent 4d041d5b87
commit aa134294cc
1 changed files with 45 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/assets/javascripts/select-box-kit/components/select-box-kit.js.es6
View File

@ -64,6 +64,7 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
} }
this._previousScrollParentOverflow = "auto"; this._previousScrollParentOverflow = "auto";
this._previousCSSContext = {};
}, },
close() { close() {
@ -346,13 +347,15 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
_applyDirection() { _applyDirection() {
let options = { left: "auto", bottom: "auto", top: "auto" }; let options = { left: "auto", bottom: "auto", top: "auto" };
const discourseHeaderHeight = $(".d-header").outerHeight(false);
const headerHeight = this.$header().outerHeight(false); const headerHeight = this.$header().outerHeight(false);
const filterHeight = this.$(".select-box-kit-filter").outerHeight(false); const headerWidth = this.$header().outerWidth(false);
const bodyHeight = this.$body().outerHeight(false); const bodyHeight = this.$body().outerHeight(false);
const windowWidth = $(window).width(); const windowWidth = $(window).width();
const windowHeight = $(window).height(); const windowHeight = $(window).height();
const boundingRect = this.get("element").getBoundingClientRect(); const boundingRect = this.get("element").getBoundingClientRect();
const offsetTop = boundingRect.top; const offsetTop = boundingRect.top;
const offsetBottom = boundingRect.bottom;
if (this.get("fullWidthOnMobile") && windowWidth <= 420) { if (this.get("fullWidthOnMobile") && windowWidth <= 420) {
const margin = 10; const margin = 10;
@ -361,22 +364,35 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
options.width = windowWidth - margin * 2; options.width = windowWidth - margin * 2;
options.maxWidth = options.minWidth = "unset"; options.maxWidth = options.minWidth = "unset";
} else { } else {
const offsetLeft = boundingRect.left;
const bodyWidth = this.$body().outerWidth(false); const bodyWidth = this.$body().outerWidth(false);
const hasRightSpace = (windowWidth - (this.get("horizontalOffset") + offsetLeft + filterHeight + bodyWidth) > 0);
if (hasRightSpace) { if ($("html").css("direction") === "rtl") {
this.setProperties({ isLeftAligned: true, isRightAligned: false }); const horizontalSpacing = boundingRect.right;
options.left = this.get("horizontalOffset"); const hasHorizontalSpace = horizontalSpacing - (this.get("horizontalOffset") + bodyWidth) > 0;
if (hasHorizontalSpace) {
this.setProperties({ isLeftAligned: true, isRightAligned: false });
options.left = bodyWidth + this.get("horizontalOffset");
} else {
this.setProperties({ isLeftAligned: false, isRightAligned: true });
options.right = - (bodyWidth - headerWidth + this.get("horizontalOffset"));
}
} else { } else {
this.setProperties({ isLeftAligned: false, isRightAligned: true }); const horizontalSpacing = boundingRect.left;
options.right = this.get("horizontalOffset"); const hasHorizontalSpace = (windowWidth - (this.get("horizontalOffset") + horizontalSpacing + bodyWidth) > 0);
if (hasHorizontalSpace) {
this.setProperties({ isLeftAligned: true, isRightAligned: false });
options.left = this.get("horizontalOffset");
} else {
this.setProperties({ isLeftAligned: false, isRightAligned: true });
options.right = this.get("horizontalOffset");
}
} }
} }
const componentHeight = this.get("verticalOffset") + bodyHeight + headerHeight; const componentHeight = this.get("verticalOffset") + bodyHeight + headerHeight;
const hasBelowSpace = windowHeight - offsetTop - componentHeight > 0; const hasBelowSpace = windowHeight - offsetBottom - componentHeight > 0;
if (hasBelowSpace) { const hasAboveSpace = offsetTop - componentHeight - discourseHeaderHeight > 0;
if (hasBelowSpace || (!hasBelowSpace && !hasAboveSpace)) {
this.setProperties({ isBelow: true, isAbove: false }); this.setProperties({ isBelow: true, isAbove: false });
options.top = headerHeight + this.get("verticalOffset"); options.top = headerHeight + this.get("verticalOffset");
} else { } else {
@ -398,6 +414,10 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
const $placeholder = $(`<div class='select-box-kit-fixed-placeholder-${this.elementId}'></div>`); const $placeholder = $(`<div class='select-box-kit-fixed-placeholder-${this.elementId}'></div>`);
this._previousScrollParentOverflow = this.get("scrollableParent").css("overflow"); this._previousScrollParentOverflow = this.get("scrollableParent").css("overflow");
this._previousCSSContext = {
minWidth: this.$().css("min-width"),
maxWidth: this.$().css("max-width")
};
this.get("scrollableParent").css({ overflow: "hidden" }); this.get("scrollableParent").css({ overflow: "hidden" });
this.$() this.$()
@ -408,11 +428,13 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
"vertical-align": "middle" "vertical-align": "middle"
})) }))
.css({ .css({
width,
direction: $("html").css("direction"), direction: $("html").css("direction"),
position: "fixed", position: "fixed",
"margin-top": -this.get("scrollableParent").scrollTop(), "margin-top": -this.get("scrollableParent").scrollTop(),
"margin-left": -width "margin-left": -width,
width,
minWidth: "unset",
maxWidth: "unset"
}); });
}, },
@ -423,13 +445,17 @@ export default Ember.Component.extend(UtilsMixin, DomHelpersMixin, KeyboardMixin
$(`.select-box-kit-fixed-placeholder-${this.elementId}`).remove(); $(`.select-box-kit-fixed-placeholder-${this.elementId}`).remove();
this.$().css({ const css = _.extend(
top: "auto", this._previousCSSContext,
left: "auto", {
"margin-left": "auto", top: "auto",
"margin-top": "auto", left: "auto",
position: "relative" "margin-left": "auto",
}); "margin-top": "auto",
position: "relative"
}
);
this.$().css(css);
this.get("scrollableParent").css({ this.get("scrollableParent").css({
overflow: this._previousScrollParentOverflow overflow: this._previousScrollParentOverflow