DEV: removes unused components (#22497)
Removes the following components which are not used anymore: - d-progress-bar - on-visibility-action
This commit is contained in:
parent
03e495186f
commit
af22f77d38
|
@ -1,3 +0,0 @@
|
||||||
<div id={{this.key}} class="d-progress-bar-container">
|
|
||||||
<div class="d-progress-bar"></div>
|
|
||||||
</div>
|
|
|
@ -1,111 +0,0 @@
|
||||||
// temporary stuff to be moved in core with discourse-loading-slider
|
|
||||||
|
|
||||||
import Component from "@ember/component";
|
|
||||||
import { cancel, schedule } from "@ember/runloop";
|
|
||||||
import discourseLater from "discourse-common/lib/later";
|
|
||||||
|
|
||||||
const STORE_LOADING_TIMES = 5;
|
|
||||||
const DEFAULT_LOADING_TIME = 0.3;
|
|
||||||
const MIN_LOADING_TIME = 0.1;
|
|
||||||
const STILL_LOADING_DURATION = 2;
|
|
||||||
|
|
||||||
export default Component.extend({
|
|
||||||
tagName: "",
|
|
||||||
isLoading: false,
|
|
||||||
key: null,
|
|
||||||
|
|
||||||
init() {
|
|
||||||
this._super(...arguments);
|
|
||||||
|
|
||||||
this.loadingTimes = [DEFAULT_LOADING_TIME];
|
|
||||||
this.set("averageTime", DEFAULT_LOADING_TIME);
|
|
||||||
this.i = 0;
|
|
||||||
this.scheduled = [];
|
|
||||||
},
|
|
||||||
|
|
||||||
resetState() {
|
|
||||||
this.container?.classList?.remove("done", "loading", "still-loading");
|
|
||||||
},
|
|
||||||
|
|
||||||
cancelScheduled() {
|
|
||||||
this.scheduled.forEach((s) => cancel(s));
|
|
||||||
this.scheduled = [];
|
|
||||||
},
|
|
||||||
|
|
||||||
didReceiveAttrs() {
|
|
||||||
this._super(...arguments);
|
|
||||||
|
|
||||||
if (!this.key) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.cancelScheduled();
|
|
||||||
this.resetState();
|
|
||||||
|
|
||||||
if (this.isLoading) {
|
|
||||||
this.start();
|
|
||||||
} else {
|
|
||||||
this.end();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
get container() {
|
|
||||||
return document.getElementById(this.key);
|
|
||||||
},
|
|
||||||
|
|
||||||
start() {
|
|
||||||
this.set("startedAt", Date.now());
|
|
||||||
|
|
||||||
this.scheduled.push(discourseLater(this, "startLoading"));
|
|
||||||
this.scheduled.push(
|
|
||||||
discourseLater(this, "stillLoading", STILL_LOADING_DURATION * 1000)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
startLoading() {
|
|
||||||
this.scheduled.push(
|
|
||||||
schedule("afterRender", () => {
|
|
||||||
this.container?.classList?.add("loading");
|
|
||||||
document.documentElement.style.setProperty(
|
|
||||||
"--loading-duration",
|
|
||||||
`${this.averageTime.toFixed(2)}s`
|
|
||||||
);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
stillLoading() {
|
|
||||||
this.scheduled.push(
|
|
||||||
schedule("afterRender", () => {
|
|
||||||
this.container?.classList?.add("still-loading");
|
|
||||||
})
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
end() {
|
|
||||||
this.updateAverage((Date.now() - this.startedAt) / 1000);
|
|
||||||
|
|
||||||
this.cancelScheduled();
|
|
||||||
|
|
||||||
this.scheduled.push(
|
|
||||||
schedule("afterRender", () => {
|
|
||||||
this.container?.classList?.remove("loading", "still-loading");
|
|
||||||
this.container?.classList?.add("done");
|
|
||||||
})
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
updateAverage(durationSeconds) {
|
|
||||||
if (durationSeconds < MIN_LOADING_TIME) {
|
|
||||||
durationSeconds = MIN_LOADING_TIME;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loadingTimes[this.i] = durationSeconds;
|
|
||||||
|
|
||||||
this.i = (this.i + 1) % STORE_LOADING_TIMES;
|
|
||||||
this.set(
|
|
||||||
"averageTime",
|
|
||||||
this.loadingTimes.reduce((p, c) => p + c, 0) / this.loadingTimes.length
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
|
@ -1 +0,0 @@
|
||||||
<div id={{this.onVisibilityActionId}}></div>
|
|
|
@ -1,48 +0,0 @@
|
||||||
import Component from "@ember/component";
|
|
||||||
import { computed } from "@ember/object";
|
|
||||||
import { bind } from "discourse-common/utils/decorators";
|
|
||||||
import { guidFor } from "@ember/object/internals";
|
|
||||||
|
|
||||||
export default class OnVisibilityAction extends Component {
|
|
||||||
action = null;
|
|
||||||
|
|
||||||
root = document.body;
|
|
||||||
|
|
||||||
@computed
|
|
||||||
get onVisibilityActionId() {
|
|
||||||
return "on-visibility-action-" + guidFor(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
_element() {
|
|
||||||
return document.getElementById(this.onVisibilityActionId);
|
|
||||||
}
|
|
||||||
|
|
||||||
didInsertElement() {
|
|
||||||
this._super(...arguments);
|
|
||||||
|
|
||||||
let options = {
|
|
||||||
root: this.root,
|
|
||||||
rootMargin: "0px",
|
|
||||||
threshold: 1.0,
|
|
||||||
};
|
|
||||||
|
|
||||||
this._observer = new IntersectionObserver(this._handleIntersect, options);
|
|
||||||
this._observer.observe(this._element());
|
|
||||||
}
|
|
||||||
|
|
||||||
willDestroyElement() {
|
|
||||||
this._super(...arguments);
|
|
||||||
|
|
||||||
this._observer?.disconnect();
|
|
||||||
this.root = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
@bind
|
|
||||||
_handleIntersect(entries) {
|
|
||||||
entries.forEach((entry) => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
this.action?.();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,51 +0,0 @@
|
||||||
// temporary stuff to be moved in core with discourse-loading-slider
|
|
||||||
|
|
||||||
.d-progress-bar-container {
|
|
||||||
--loading-width: 80%;
|
|
||||||
--still-loading-width: 90%;
|
|
||||||
|
|
||||||
--still-loading-duration: 10s;
|
|
||||||
--done-duration: 0.4s;
|
|
||||||
--fade-out-duration: 0.4s;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: z("header") + 2000;
|
|
||||||
height: 3px;
|
|
||||||
width: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity var(--fade-out-duration) ease var(--done-duration);
|
|
||||||
background-color: var(--primary-low);
|
|
||||||
|
|
||||||
.d-progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
width: 0%;
|
|
||||||
background-color: var(--tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loading,
|
|
||||||
&.still-loading {
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loading .d-progress-bar {
|
|
||||||
transition: width var(--loading-duration) ease-in;
|
|
||||||
width: var(--loading-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.still-loading .d-progress-bar {
|
|
||||||
transition: width var(--still-loading-duration) linear;
|
|
||||||
width: var(--still-loading-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.done .d-progress-bar {
|
|
||||||
transition: width var(--done-duration) ease-out;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.footer-nav-ipad & {
|
|
||||||
top: 49px; // TODO: Share $footer-nav-height from footer-nav.scss
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -42,7 +42,6 @@
|
||||||
@import "chat-transcript";
|
@import "chat-transcript";
|
||||||
@import "core-extensions";
|
@import "core-extensions";
|
||||||
@import "create-channel-modal";
|
@import "create-channel-modal";
|
||||||
@import "d-progress-bar";
|
|
||||||
@import "dc-filter-input";
|
@import "dc-filter-input";
|
||||||
@import "full-page-chat-header";
|
@import "full-page-chat-header";
|
||||||
@import "incoming-chat-webhooks";
|
@import "incoming-chat-webhooks";
|
||||||
|
|
|
@ -1,31 +0,0 @@
|
||||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
|
||||||
import hbs from "htmlbars-inline-precompile";
|
|
||||||
import { render, waitUntil } from "@ember/test-helpers";
|
|
||||||
import { module, test } from "qunit";
|
|
||||||
|
|
||||||
module("Discourse Chat | Component | on-visibility-action", function (hooks) {
|
|
||||||
setupRenderingTest(hooks);
|
|
||||||
|
|
||||||
test("Calling an action on visibility gained", async function (assert) {
|
|
||||||
this.set("value", null);
|
|
||||||
this.set("display", false);
|
|
||||||
this.set("action", () => {
|
|
||||||
this.set("value", "foo");
|
|
||||||
});
|
|
||||||
|
|
||||||
this.set("root", document.querySelector("#ember-testing"));
|
|
||||||
|
|
||||||
await render(hbs`
|
|
||||||
{{#if display}}
|
|
||||||
<OnVisibilityAction @action={{this.action}} @root={{this.root}} />
|
|
||||||
{{/if}}
|
|
||||||
`);
|
|
||||||
|
|
||||||
assert.strictEqual(this.value, null);
|
|
||||||
|
|
||||||
this.set("display", true);
|
|
||||||
await waitUntil(() => this.value !== null);
|
|
||||||
|
|
||||||
assert.strictEqual(this.value, "foo");
|
|
||||||
});
|
|
||||||
});
|
|
Loading…
Reference in New Issue