feat(ui5-carousel): initial implementation (#1159)

SAP · Feb 10, 2020 · 5b84d85 · 5b84d85
1 parent b84b9d8
commit 5b84d85
Show file tree

Hide file tree

Showing 21 changed files with 1,031 additions and 4 deletions.
diff --git a/packages/base/src/delegate/ScrollEnablement.js b/packages/base/src/delegate/ScrollEnablement.js
@@ -2,12 +2,14 @@ import EventProvider from "../EventProvider.js";
 import scroll from "../animations/scroll.js";
 
 const scrollEventName = "scroll";
+const touchEndEventName = "touchend";
 
 class ScrollEnablement extends EventProvider {
 	constructor(containerComponent) {
 		super();
 		containerComponent.addEventListener("touchstart", this.ontouchstart.bind(this), { passive: true });
 		containerComponent.addEventListener("touchmove", this.ontouchmove.bind(this), { passive: true });
+		containerComponent.addEventListener("touchend", this.ontouchend.bind(this), { passive: true });
 	}
 
 	set scrollContainer(container) {
@@ -70,7 +72,31 @@ class ScrollEnablement extends EventProvider {
 		container.scrollLeft += this._prevDragX - dragX;
 		container.scrollTop += this._prevDragY - dragY;
 
-		this.fireEvent(scrollEventName, {});
+		this.fireEvent(scrollEventName, {
+			isLeft: dragX > this._prevDragX,
+			isRight: dragX < this._prevDragX,
+		});
+
+		this._prevDragX = dragX;
+		this._prevDragY = dragY;
+	}
+
+	ontouchend(event) {
+		if (!this._canScroll) {
+			return;
+		}
+
+		const container = this._container;
+		const dragX = event.pageX;
+		const dragY = event.pageY;
+
+		container.scrollLeft += this._prevDragX - dragX;
+		container.scrollTop += this._prevDragY - dragY;
+
+		this.fireEvent(touchEndEventName, {
+			isLeft: dragX > this._prevDragX,
+			isRight: dragX < this._prevDragX,
+		});
 
 		this._prevDragX = dragX;
 		this._prevDragY = dragY;

diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
@@ -19,8 +19,11 @@ import Avatar from "./dist/Avatar.js";
 import Badge from "./dist/Badge.js";
 import BusyIndicator from "./dist/BusyIndicator.js";
 import Button from "./dist/Button.js";
-import CheckBox from "./dist/CheckBox.js";
 import Card from "./dist/Card.js";
+import Carousel from "./dist/Carousel.js";
+import CheckBox from "./dist/CheckBox.js";
+import ComboBox from "./dist/ComboBox.js";
+import ComboBoxItem from "./dist/ComboBoxItem.js";
 import DatePicker from "./dist/DatePicker.js";
 import Dialog from "./dist/Dialog.js";
 import Icon from "./dist/Icon.js";
@@ -50,8 +53,7 @@ import TimelineItem from "./dist/TimelineItem.js";
 import Title from "./dist/Title.js";
 import Toast from "./dist/Toast.js";
 import ToggleButton from "./dist/ToggleButton.js";
-import ComboBox from "./dist/ComboBox.js";
-import ComboBoxItem from "./dist/ComboBoxItem.js";
+
 
 import List from "./dist/List.js";
 import StandardListItem from "./dist/StandardListItem.js";

diff --git a/packages/main/src/Carousel.hbs b/packages/main/src/Carousel.hbs
@@ -0,0 +1,75 @@
+<section
+    class="ui5-carousel-root"
+    tabindex="0"
+    @keydown={{_onkeydown}}
+>
+    <div class="ui5-carousel-overflow-hidden">
+        <div class="{{classes.content}}" style="{{styles.content}}">
+            {{#each items}}
+                <div class="{{../classes.item}}">
+                    {{#each this}}
+                        {{#if this.item}}
+                            <slot name="{{this.item._individualSlot}}" tabindex="{{this.tabIndex}}"></slot>
+                        {{/if}}
+                    {{/each}}
+                </div>
+            {{/each}}
+        </div>
+
+        {{#if arrows.content}}
+            <div class="ui5-carousel-navigation-arrows">
+                <ui5-button
+                    class="ui5-carousel-navigation-button"
+                    icon="slim-arrow-left"
+                    tabindex="-1"
+                    @click={{navigateLeft}}
+                    @keydown={{_onbuttonkeydown}}
+                ></ui5-button>
+                <ui5-button
+                    class="ui5-carousel-navigation-button"
+                    icon="slim-arrow-right"
+                    tabindex="-1"
+                    @click={{navigateRight}}
+                    @keydown={{_onbuttonkeydown}}
+                ></ui5-button>
+            </div>
+        {{/if}}
+
+        {{#unless hideNavigation}}
+            <div class="{{classes.navigation}}">
+                {{#if arrows.navigation}}
+                <ui5-button
+                    class="ui5-carousel-navigation-button"
+                    icon="slim-arrow-left"
+                    tabindex="-1"
+                    @click={{navigateLeft}}
+                    @keydown={{_onbuttonkeydown}}
+                ></ui5-button>
+                {{/if}}
+
+                <div class="ui5-carousel-navigation">
+                    {{#if isPageTypeDots}}
+                        {{#each dots}}
+                            <div
+                                ?active="{{this.active}}"
+                                class="ui5-carousel-navigation-dot"
+                            ></div>
+                        {{/each}}
+                    {{else}}
+                        <ui5-label>{{currenlySelectedIndexToShow}}&nbsp;{{ofText}}&nbsp;{{items.length}}</ui5-label>
+                    {{/if}}
+                </div>
+
+                {{#if arrows.navigation}}
+                    <ui5-button
+                        class="ui5-carousel-navigation-button"
+                        icon="slim-arrow-right"
+                        tabindex="-1"
+                        @click={{navigateRight}}
+                        @keydown={{_onbuttonkeydown}}
+                    ></ui5-button>
+                {{/if}}
+            </div>
+        {{/unless}}
+    </div>
+</section>