IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FIX: improves positioning of select-kit body

Browse Source
This commit is contained in:
Joffrey JAFFEUX 2018-03-01 11:53:14 +01:00 committed by GitHub
parent c689731fab
commit 460c905dc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
View File

@ -111,11 +111,10 @@ export default Ember.Mixin.create({
const discourseHeader = $(".d-header")[0]; const discourseHeader = $(".d-header")[0];
const discourseHeaderHeight = discourseHeader ? (discourseHeader.getBoundingClientRect().top + this._computedStyle(discourseHeader, "height")) : 0; const discourseHeaderHeight = discourseHeader ? (discourseHeader.getBoundingClientRect().top + this._computedStyle(discourseHeader, "height")) : 0;
const bodyHeight = this._computedStyle(this.$body()[0], "height"); const bodyHeight = this._computedStyle(this.$body()[0], "height");
const windowWidth = $(window).width();
const componentHeight = this._computedStyle(this.get("element"), "height"); const componentHeight = this._computedStyle(this.get("element"), "height");
const componentWidth = this._computedStyle(this.get("element"), "width");
const offsetTop = this.get("element").getBoundingClientRect().top; const offsetTop = this.get("element").getBoundingClientRect().top;
const offsetBottom = this.get("element").getBoundingClientRect().bottom; const offsetBottom = this.get("element").getBoundingClientRect().bottom;
const windowWidth = $(window).width();
if (this.get("fullWidthOnMobile") && (this.site && this.site.isMobileDevice)) { if (this.get("fullWidthOnMobile") && (this.site && this.site.isMobileDevice)) {
const margin = 10; const margin = 10;
@ -124,28 +123,25 @@ export default Ember.Mixin.create({
options.width = windowWidth - margin * 2; options.width = windowWidth - margin * 2;
options.maxWidth = options.minWidth = "unset"; options.maxWidth = options.minWidth = "unset";
} else { } else {
const parentWidth = this.$scrollableParent().length ? this.$scrollableParent().width() : windowWidth;
const bodyWidth = this._computedStyle(this.$body()[0], "width"); const bodyWidth = this._computedStyle(this.$body()[0], "width");
if (this._isRTL()) { let marginToEdge;
const horizontalSpacing = this.get("element").getBoundingClientRect().right; if (this.$scrollableParent().length) {
const hasHorizontalSpace = horizontalSpacing - (this.get("horizontalOffset") + bodyWidth) > 0; marginToEdge = this.$().offset().left - this.$scrollableParent().offset().left;
if (hasHorizontalSpace) {
this.setProperties({ isLeftAligned: true, isRightAligned: false });
options.left = bodyWidth + this.get("horizontalOffset");
} else {
this.setProperties({ isLeftAligned: false, isRightAligned: true });
options.right = - (bodyWidth - componentWidth + this.get("horizontalOffset"));
}
} else { } else {
const horizontalSpacing = this.get("element").getBoundingClientRect().left; marginToEdge = this.get("element").getBoundingClientRect().left;
const hasHorizontalSpace = (windowWidth - (this.get("horizontalOffset") + horizontalSpacing + bodyWidth) > 0); }
if (hasHorizontalSpace) {
this.setProperties({ isLeftAligned: true, isRightAligned: false }); const enoughMarginToOppositeEdge = (parentWidth - marginToEdge - bodyWidth + this.get("horizontalOffset")) > 0;
options.left = this.get("horizontalOffset"); if (enoughMarginToOppositeEdge) {
} else { this.setProperties({ isLeftAligned: true, isRightAligned: false });
this.setProperties({ isLeftAligned: false, isRightAligned: true }); options.left = this.get("horizontalOffset");
options.right = this.get("horizontalOffset"); options.right = "unset";
} } else {
this.setProperties({ isLeftAligned: false, isRightAligned: true });
options.left = "unset";
options.right = this.get("horizontalOffset");
} }
} }
@ -166,8 +162,8 @@ export default Ember.Mixin.create({
_applyFixedPosition() { _applyFixedPosition() {
if (this.get("isExpanded") !== true) return; if (this.get("isExpanded") !== true) return;
if (this.$fixedPlaceholder().length === 1) return; if (this.$fixedPlaceholder().length) return;
if (this.$scrollableParent().length === 0) return; if (!this.$scrollableParent().length) return;
const width = this._computedStyle(this.get("element"), "width"); const width = this._computedStyle(this.get("element"), "width");
const height = this._computedStyle(this.get("element"), "height"); const height = this._computedStyle(this.get("element"), "height");