Skip to content
This repository has been archived by the owner on Jun 29, 2023. It is now read-only.

Commit

Permalink
feat(flow-item,panel): Add an onscroll event for FlowItem and Panel #842
Browse files Browse the repository at this point in the history
  • Loading branch information
@driskull
driskull committed Feb 27, 2020
1 parent 9de7724 commit 356e399
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 2 deletions.
14 changes: 13 additions & 1 deletion src/components/calcite-flow-item/calcite-flow-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Element, Event, EventEmitter, Host, Prop, h } from "@stencil/core";
import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from "@stencil/core";
import { VNode } from "@stencil/core/internal";
import { focusElement, getElementDir } from "../utils/dom";
import classnames from "classnames";
Expand Down Expand Up @@ -99,6 +99,12 @@ export class CalciteFlowItem {

@Event() calciteFlowItemBackClick: EventEmitter;

/**
* Emitted when the content has been scrolled.
*/

@Event() calciteFlowItemScroll: EventEmitter;

// --------------------------------------------------------------------------
//
// Private Properties
Expand All @@ -113,6 +119,12 @@ export class CalciteFlowItem {
//
// --------------------------------------------------------------------------

@Listen("calcitePanelScroll")
handleCalcitePanelScroll(event: CustomEvent): void {
event.stopPropagation();
this.calciteFlowItemScroll.emit();
}

queryActions(): HTMLCalciteActionElement[] {
return Array.from(this.el.querySelectorAll(`[slot=${SLOTS.menuActions}] calcite-action`));
}
Expand Down
12 changes: 11 additions & 1 deletion src/components/calcite-panel/calcite-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,12 @@ export class CalcitePanel {

@Event() calcitePanelDismissedChange: EventEmitter;

/**
* Emitted when the content has been scrolled.
*/

@Event() calcitePanelScroll: EventEmitter;

// --------------------------------------------------------------------------
//
// Private Methods
Expand All @@ -119,6 +125,10 @@ export class CalcitePanel {
this.dismissed = true;
};

panelScrollHandler = (): void => {
this.calcitePanelScroll.emit();
};

// --------------------------------------------------------------------------
//
// Methods
Expand Down Expand Up @@ -213,7 +223,7 @@ export class CalcitePanel {

renderContent(): VNode {
return (
<section class={CSS.contentContainer}>
<section class={CSS.contentContainer} onScroll={this.panelScrollHandler}>
<slot />
{this.renderFab()}
</section>
Expand Down
49 changes: 49 additions & 0 deletions src/demos/flow-item/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<section class="example-container">
<h1>calcite-flow-item</h1>

<h2>Flow Item</h2>
<div class="flow-container">
<calcite-flow-item heading="What are the most popular commute alternatives?" summary="I don't know.">
<div slot="menu-actions">
Expand All @@ -30,6 +31,54 @@ <h1>calcite-flow-item</h1>
<img src="https://via.placeholder.com/300x200" alt="placeholder" />
</calcite-flow-item>
</div>

<h2>Scrollable Flow Item</h2>
<div class="flow-container" style="height: 500px;" id="flow-item">
<calcite-flow-item heading="What are the most popular commute alternatives?" summary="I don't know.">
<div slot="menu-actions">
<calcite-action text="Save" text-enabled></calcite-action>
<calcite-action text="Do It" text-enabled></calcite-action>
<calcite-action text="Load" text-enabled></calcite-action>
<calcite-action text="Cancel" text-enabled></calcite-action>
</div>
<div slot="footer-actions">
<button>Example</button>
<button>Actions</button>
</div>
<img src="https://via.placeholder.com/300x200" alt="placeholder" />
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
</calcite-flow-item>
</div>
<script>
const flowItem = document.getElementById("flow-item");
flowItem.addEventListener("calciteFlowItemScroll", function(event) {
console.log("scrolled", event);
});
</script>
</section>
</main>
</body>
Expand Down
81 changes: 81 additions & 0 deletions src/demos/panel/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,87 @@ <h2>Dismissible Panel</h2>
}, 3000);
</script>

<h2>Scrolling Panel</h2>
<calcite-panel style="height: 500px;" id="panel">
<div slot="header-content">panel header</div>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
<p>Slotted content</p>
</calcite-panel>
<script>
const panel = document.getElementById("panel");
panel.addEventListener("calcitePanelScroll", function(event) {
console.log("scrolled", event);
});
</script>

<div class="panel-container" dir="rtl">
<h2>RTL</h2>

Expand Down

0 comments on commit 356e399

Please sign in to comment.