Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: fully rely on resize observer for resizing (#17685) 

Not only is the current code not needed but it's also creating invalid values on safari if the header goes out of viewport with negative values.

This commit also adds a missing test for `--header-offset` property.
This commit is contained in:
Joffrey JAFFEUX 2022-07-27 11:32:42 +02:00 committed by GitHub
parent fd6fabc83c
commit 9a55c9c433
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/discourse/app/components/site-header.js
View File

@ -183,19 +183,6 @@ const SiteHeaderComponent = MountWidget.extend(
this.docAt = header.offsetTop;
}
const headerRect = header.getBoundingClientRect();
let headerOffsetCalc = headerRect.top + headerRect.height;
if (window.scrollY < 0) {
headerOffsetCalc += window.scrollY;
}
const newValue = `${headerOffsetCalc}px`;
if (newValue !== this.currentHeaderOffsetValue) {
this.currentHeaderOffsetValue = newValue;
document.documentElement.style.setProperty("--header-offset", newValue);
}
const main = document.querySelector("#main");
const offsetTop = main ? main.offsetTop : 0;
const offset = window.pageYOffset - offsetTop;

20
app/assets/javascripts/discourse/tests/integration/components/site-header-test.js
View File

@ -1,6 +1,6 @@
import { module, test } from "qunit";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { click, render } from "@ember/test-helpers";
import { click, render, waitUntil } from "@ember/test-helpers";
import { count, exists, query } from "discourse/tests/helpers/qunit-helpers";
import pretender, { response } from "discourse/tests/helpers/create-pretender";
import { hbs } from "ember-cli-htmlbars";
@ -83,4 +83,22 @@ module("Integration | Component | site-header", function (hooks) {
await click("header.d-header");
assert.ok(!exists(".user-menu.revamped"));
});
test("header's height is setting css property", async function (assert) {
await render(hbs`<SiteHeader />`);
function getProperty() {
return getComputedStyle(document.body).getPropertyValue(
"--header-offset"
);
}
document.querySelector(".d-header").style.height = 90 + "px";
await waitUntil(() => getProperty() === "90px", { timeout: 100 });
assert.strictEqual(getProperty(), "90px");
document.querySelector(".d-header").style.height = 60 + "px";
await waitUntil(() => getProperty() === "60px", { timeout: 100 });
assert.strictEqual(getProperty(), "60px");
});
});