Fire event when gr-diff-cursor is attached to DOM
This allows none-Polymer clients of gr-diff and related classes know when the Polymer life cycle has run and the cursor is ready to be used.
Change-Id: Ibcbd0dbf0b2cf0b7d9302cc6217e365ed720cd66
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.js b/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.js
index 039a99fa..fc4173c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.js
@@ -35,9 +35,9 @@
const LEFT_SIDE_CLASS = 'target-side-left';
const RIGHT_SIDE_CLASS = 'target-side-right';
- class GrDiffCursor extends Polymer.GestureEventListeners(
- Polymer.LegacyElementMixin(
- Polymer.Element)) {
+ class GrDiffCursor extends Polymer.mixinBehaviors([Gerrit.FireBehavior],
+ Polymer.GestureEventListeners(
+ Polymer.LegacyElementMixin(Polymer.Element))) {
static get is() { return 'gr-diff-cursor'; }
static get properties() {
@@ -105,6 +105,23 @@
];
}
+ ready() {
+ super.ready();
+ Polymer.RenderStatus.afterNextRender(this, () => {
+ /*
+ This represents the diff cursor is ready for interaction coming from
+ client components. It is more then Polymer "ready" lifecycle, as no
+ "ready" events are automatically fired by Polymer, it means
+ the cursor is completely interactable - in this case attached and
+ painted on the page. We name it "ready" instead of "rendered" as the
+ long-term goal is to make gr-diff-cursor a javascript class - not a DOM
+ element with an actual lifecycle. This will be triggered only once
+ per element.
+ */
+ this.fire('ready', null, {bubbles: false});
+ });
+ }
+
attached() {
super.attached();
// Catch when users are scrolling as the view loads.
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor_test.html b/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor_test.html
index 626ab33..dff9e79 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor_test.html
@@ -42,6 +42,12 @@
</template>
</test-fixture>
+<test-fixture id="empty">
+ <template>
+ <div></div>
+ </template>
+</test-fixture>
+
<script>
suite('gr-diff-cursor tests', () => {
let sandbox;
@@ -370,4 +376,24 @@
});
});
});
+
+ suite('gr-diff-cursor event tests', () => {
+ let sandbox;
+ let someEmptyDiv;
+
+ setup(() => {
+ sandbox = sinon.sandbox.create();
+ someEmptyDiv = fixture('empty');
+ });
+
+ teardown(() => sandbox.restore());
+
+ test('ready is fired after component is rendered', done => {
+ const cursorElement = document.createElement('gr-diff-cursor');
+ cursorElement.addEventListener('ready', () => {
+ done();
+ });
+ someEmptyDiv.appendChild(cursorElement);
+ });
+ });
</script>
