From ba54d8fd8eb6cb10a4840dc00b713cc49e021598 Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Thu, 22 Aug 2019 22:29:57 -0600
Subject: [PATCH 01/12] Carousel: initial implementation

---
 src/components/Carousel.vue  | 234 +++++++++++++++++++++++++++++++++++
 src/main.ts                  |   1 +
 src/stories/index.stories.js |  40 ++++++
 3 files changed, 275 insertions(+)
 create mode 100644 src/components/Carousel.vue

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
new file mode 100644
index 00000000..bd3c8a22
--- /dev/null
+++ b/src/components/Carousel.vue
@@ -0,0 +1,234 @@
+<template>
+    <div class="carousel">
+        <div v-for="entry in entries" :ref="entry" @click="effectiveSelectedEntry = entry"
+            :class="{ selected: effectiveSelectedEntry === entry }">
+            <slot :name="entry"></slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
+import SmallPage from './SmallPage.vue';
+
+class Tweenable {
+    public constructor(
+        public targetValue: number = 0,
+        public startValue: number = targetValue,
+        public tweenTime: number = 0,
+        public startTime: number = Date.now(),
+        public easing: (progress: number) => number = Tweenable.Easing.EASE_IN_OUT_CUBIC,
+    ) {}
+
+    public get currentValue(): number {
+        const easedProgress = this.easing(this.progress);
+        return this.startValue + (this.targetValue - this.startValue) * easedProgress;
+    }
+
+    public get progress(): number {
+        if (this.tweenTime === 0) return 1;
+        return Math.min(1, (Date.now() - this.startTime) / this.tweenTime);
+    }
+
+    public get finished(): boolean {
+        return this.progress === 1;
+    }
+
+    public tweenTo(targetValue, tweenTime = this.tweenTime) {
+        if (targetValue === this.targetValue) return;
+        this.startValue = this.currentValue;
+        this.targetValue = targetValue;
+        this.startTime = Date.now();
+        this.tweenTime = tweenTime;
+    }
+}
+namespace Tweenable { // tslint:disable-line no-namespace
+    // see https://gist.github.com/gre/1650294 for more easing functions
+    export let Easing = { // tslint:disable-line variable-name
+        LINEAR: (t: number) => t,
+        EASE_IN_OUT_CUBIC: (t: number) => t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+    };
+}
+
+@Component({components: {SmallPage}})
+export default class Carousel extends Vue {
+    @Prop({
+        type: Array,
+        default: () => [],
+        validator: (entries: any) => Array.isArray(entries)
+            && entries.length > 0
+            && !entries.some((entry) => typeof entry !== 'string'),
+    })
+    public entries!: string[];
+
+    @Prop(String)
+    public selectedEntry?: string;
+
+    @Prop({
+        type: Number,
+        default: 16,
+    })
+    public entryMargin!: number;
+
+    @Prop({
+        type: Number,
+        default: 1000,
+    })
+    public animationDuration!: number; // in ms
+
+    public $refs: { [ref: string]: HTMLElement[] }; // these are arrays because of v-for
+
+    private effectiveSelectedEntry: string = '';
+    private radius: Tweenable = new Tweenable();
+    private rotations: Map<string, Tweenable> = new Map(); // map entry -> rotation
+    private requestAnimationFrameId: number | null = null;
+
+    private get _hasDummyPosition(): boolean {
+        // add dummy to avoid that second entry is hidden exactly behind selected item on opposite side of circle.
+        return this.entries.length <= 2;
+    }
+
+    private get _totalPositionCount(): number {
+        return this.entries.length + (this._hasDummyPosition ? 1 : 0);
+    }
+
+    private mounted() {
+        this._updateRadius(false);
+        this._updateRotations(false);
+    }
+
+    private destroyed() {
+        if (this.requestAnimationFrameId === null) return;
+        cancelAnimationFrame(this.requestAnimationFrameId);
+    }
+
+    @Watch('entries', { immediate: true })
+    @Watch('entries.length', { immediate: true })
+    @Watch('selectedEntry', { immediate: true })
+    private _onExternalSelection() {
+        const isNewSelectionValid = this.entries.indexOf(this.selectedEntry) !== -1;
+        const isOldSelectionValid = this.entries.indexOf(this.effectiveSelectedEntry) !== -1;
+        if (isNewSelectionValid) {
+            this.effectiveSelectedEntry = this.selectedEntry;
+        } else if (!isOldSelectionValid) {
+            this.effectiveSelectedEntry = this.entries[0];
+        } // else keep the old selection
+    }
+
+    @Watch('entries')
+    @Watch('entries.length')
+    @Watch('entryMargin')
+    private async _updateRadius(tween = true) {
+        await Vue.nextTick(); // let Vue render new entries
+        // calculate radius big enough such that two items can be rendered side by side without overlapping
+        let largestMinDistance = 0;
+        for (let i = 0; i < this.entries.length; ++i) {
+            const [ el1 ] = this.$refs[this.entries[i]];
+            const [ el2 ] = this.$refs[this.entries[(i + 1) % this.entries.length]];
+            const minDistance = el1.offsetWidth / 2 + el2.offsetWidth / 2 + this.entryMargin;
+            largestMinDistance = Math.max(largestMinDistance, minDistance);
+        }
+        // calculate radius on a right triangle formed by radius, half distance and perpendicular from center point
+        // to distance line.
+        const centerAngle = 2 * Math.PI / this._totalPositionCount / 2; // angle at circle center point
+        const radius = (largestMinDistance / 2) / Math.sin(centerAngle);
+        this.radius.tweenTo(radius, tween ? this.animationDuration : 0);
+        this._animate();
+    }
+
+    @Watch('entries')
+    @Watch('effectiveSelectedEntry')
+    private _updateRotations(tween = true) {
+        // clean up removed entries
+        for (const entry of this.rotations.keys()) {
+            if (this.entries.indexOf(entry) !== -1) continue;
+            this.rotations.delete(entry);
+        }
+        // update rotations
+        for (const entry of this.entries) {
+            const rotation = this.rotations.get(entry) || new Tweenable();
+            const tweenTime = tween ? this.animationDuration : 0;
+            rotation.tweenTo(this._calculateTargetRotation(entry, rotation.currentValue), tweenTime);
+            this.rotations.set(entry, rotation);
+        }
+        this._animate();
+    }
+
+    private _calculateTargetRotation(entry, currentRotation): number { // rotation in radians
+        const stepSize = 2 * Math.PI / this._totalPositionCount;
+        const entryIndex = this.entries.indexOf(entry);
+        const selectedEntryIndex = this.entries.indexOf(this.effectiveSelectedEntry);
+        let offset = entryIndex - selectedEntryIndex;
+        if (this._hasDummyPosition && offset > this._totalPositionCount / 2) {
+            // skip dummy position
+            offset += 1;
+        }
+        const newAngle = offset * stepSize;
+        // determine angle offset modulo full rotations
+        const angleOffset = (newAngle - currentRotation) % (2 * Math.PI);
+        // determine angle offset in opposite direction (subtracting or adding a full circle depending on direction
+        // (sign) of angleOffset)
+        const angleOffsetOppositeDirection = angleOffset - Math.sign(angleOffset) * 2 * Math.PI;
+        if (Math.abs(Math.abs(angleOffset) - Math.abs(angleOffsetOppositeDirection)) < 1e-10) {
+            // in case of ambiguity chose a default direction for all entries
+            return currentRotation + Math.min(angleOffset, angleOffsetOppositeDirection);
+        } else if (Math.abs(angleOffset) < Math.abs(angleOffsetOppositeDirection)) {
+            return currentRotation + angleOffset;
+        } else {
+            return currentRotation + angleOffsetOppositeDirection;
+        }
+    }
+
+    private _animate() {
+        if (this.requestAnimationFrameId !== null) return;
+        this.requestAnimationFrameId = requestAnimationFrame(() => {
+            const zCoordinatesForEntries: Array<[string, number]> = [];
+            let finished = this.radius.finished;
+            for (const [entry, rotation] of this.rotations) {
+                const currentRotation = rotation.currentValue;
+                const currentRadius = this.radius.currentValue;
+                const x = Math.sin(currentRotation) * currentRadius;
+                const z = Math.cos(currentRotation) * currentRadius - currentRadius;
+                const [ el ] = this.$refs[entry];
+                el.style.transform = `translate3d(calc(${x}px - 50%),-50%,${z}px)`;
+                zCoordinatesForEntries.push([entry, z]);
+                finished = finished && rotation.finished;
+            }
+
+            zCoordinatesForEntries.sort(([, z1], [, z2]) => z1 - z2);
+            for (let i = 0; i < zCoordinatesForEntries.length; ++i) {
+                const [ el ] = this.$refs[zCoordinatesForEntries[i][0]];
+                el.style.zIndex = `${i}`;
+            }
+
+            this.requestAnimationFrameId = null;
+            if (!finished) this._animate();
+        });
+    }
+}
+</script>
+
+<style scoped>
+    .carousel {
+        position: relative;
+        height: 70rem;
+        margin: 4rem;
+        perspective: 1500px;
+        /* perspective-origin: center 150%; */ /* useful for debugging */
+    }
+
+    .carousel > * {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+    }
+
+    .carousel > :not(.selected) {
+        cursor: pointer;
+    }
+
+    .carousel > :not(.selected) >>> * {
+        pointer-events: none !important;
+    }
+</style>
+
diff --git a/src/main.ts b/src/main.ts
index 41999665..9633275c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,7 @@ export { default as AmountInput } from './components/AmountInput.vue';
 export { default as AmountWithDetails } from './components/AmountWithDetails.vue';
 export { default as AmountWithFee } from './components/AmountWithFee.vue';
 export { default as BottomOverlay } from './components/BottomOverlay.vue';
+export { default as Carousel } from './components/Carousel.vue';
 export { default as CircleSpinner } from './components/CircleSpinner.vue';
 export { default as CloseButton } from './components/CloseButton.vue';
 export { default as Contact } from './components/Contact.vue';
diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
index 4133c90e..6e5e8a81 100644
--- a/src/stories/index.stories.js
+++ b/src/stories/index.stories.js
@@ -16,6 +16,7 @@ import AmountInput from '../components/AmountInput.vue';
 import AmountWithDetails from '../components/AmountWithDetails.vue';
 import AmountWithFee from '../components/AmountWithFee.vue';
 import BottomOverlay from '../components/BottomOverlay.vue';
+import Carousel from '../components/Carousel.vue';
 import CircleSpinner from '../components/CircleSpinner.vue';
 import CloseButton from '../components/CloseButton.vue';
 import Contact from '../components/Contact.vue';
@@ -570,6 +571,45 @@ storiesOf('Components', module)
             `,
         }
     })
+    .add('Carousel', () => ({
+        components: {Carousel,SmallPage},
+        data: () => ({
+            currencies: {
+                nim: true,
+                btc: true,
+                eth: true,
+                ltc: false,
+            },
+        }),
+        computed: {
+            enabledCurrencies() {
+                return Object.keys(this.currencies).filter((currency) => this.currencies[currency]);
+            }
+        },
+        template: `
+            <div>
+                <Carousel :entries="enabledCurrencies">
+                    <template v-for="currency in enabledCurrencies" v-slot:[currency]>
+                        <SmallPage style="margin: 0; width: 50rem; text-transform: uppercase">{{ currency }}</SmallPage>
+                    </template>
+                </Carousel>
+                <div style="text-align: center; margin-top: 8rem;">
+                    <label>
+                        <input type="checkbox" v-model="currencies.nim"> NIM
+                    </label>
+                    <label>
+                        <input type="checkbox" v-model="currencies.btc"> BTC
+                    </label>
+                    <label>
+                        <input type="checkbox" v-model="currencies.eth"> ETH
+                    </label>
+                    <label>
+                        <input type="checkbox" v-model="currencies.ltc"> LTC
+                    </label>
+                </div>
+            </div>
+            `,
+    }))
     .add('CloseButton', () => {
         return {
             components: {CloseButton},

From 1755a6bbeaeb031e97dabc49baddbc836dcd907d Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Thu, 22 Aug 2019 22:52:20 -0600
Subject: [PATCH 02/12] Carousel: more general demo

---
 src/stories/index.stories.js | 30 +++++++-----------------------
 1 file changed, 7 insertions(+), 23 deletions(-)

diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
index 6e5e8a81..e773f0ce 100644
--- a/src/stories/index.stories.js
+++ b/src/stories/index.stories.js
@@ -573,38 +573,22 @@ storiesOf('Components', module)
     })
     .add('Carousel', () => ({
         components: {Carousel,SmallPage},
-        data: () => ({
-            currencies: {
-                nim: true,
-                btc: true,
-                eth: true,
-                ltc: false,
-            },
-        }),
+        data: () => ({ entryCount: 3 }),
         computed: {
-            enabledCurrencies() {
-                return Object.keys(this.currencies).filter((currency) => this.currencies[currency]);
+            entries() {
+                return new Array(parseInt(this.entryCount)).fill('Card-').map((v, i) => `${v}${i}`);
             }
         },
         template: `
             <div>
-                <Carousel :entries="enabledCurrencies">
-                    <template v-for="currency in enabledCurrencies" v-slot:[currency]>
-                        <SmallPage style="margin: 0; width: 50rem; text-transform: uppercase">{{ currency }}</SmallPage>
+                <Carousel :entries="entries">
+                    <template v-for="entry in entries" v-slot:[entry]>
+                        <SmallPage style="margin: 0; width: 50rem">{{ entry }}</SmallPage>
                     </template>
                 </Carousel>
                 <div style="text-align: center; margin-top: 8rem;">
                     <label>
-                        <input type="checkbox" v-model="currencies.nim"> NIM
-                    </label>
-                    <label>
-                        <input type="checkbox" v-model="currencies.btc"> BTC
-                    </label>
-                    <label>
-                        <input type="checkbox" v-model="currencies.eth"> ETH
-                    </label>
-                    <label>
-                        <input type="checkbox" v-model="currencies.ltc"> LTC
+                        <input type="number" min="1" step="1" v-model="entryCount"> Items
                     </label>
                 </div>
             </div>

From 4c21e0834c1a012d5b9007343ed39df274c64e4e Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Fri, 23 Aug 2019 12:24:05 -0600
Subject: [PATCH 03/12] Carousel: support hiding entries in background

---
 src/components/Carousel.vue  | 57 ++++++++++++++++++++++++------------
 src/stories/index.stories.js | 50 +++++++++++++++++--------------
 2 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index bd3c8a22..8f8d4071 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -76,6 +76,12 @@ export default class Carousel extends Vue {
     })
     public animationDuration!: number; // in ms
 
+    @Prop({
+        type: Boolean,
+        default: false,
+    })
+    public hideBackgroundEntries!: boolean;
+
     public $refs: { [ref: string]: HTMLElement[] }; // these are arrays because of v-for
 
     private effectiveSelectedEntry: string = '';
@@ -133,7 +139,7 @@ export default class Carousel extends Vue {
         const centerAngle = 2 * Math.PI / this._totalPositionCount / 2; // angle at circle center point
         const radius = (largestMinDistance / 2) / Math.sin(centerAngle);
         this.radius.tweenTo(radius, tween ? this.animationDuration : 0);
-        this._animate();
+        this._rerender();
     }
 
     @Watch('entries')
@@ -151,7 +157,7 @@ export default class Carousel extends Vue {
             rotation.tweenTo(this._calculateTargetRotation(entry, rotation.currentValue), tweenTime);
             this.rotations.set(entry, rotation);
         }
-        this._animate();
+        this._rerender();
     }
 
     private _calculateTargetRotation(entry, currentRotation): number { // rotation in radians
@@ -163,23 +169,11 @@ export default class Carousel extends Vue {
             // skip dummy position
             offset += 1;
         }
-        const newAngle = offset * stepSize;
-        // determine angle offset modulo full rotations
-        const angleOffset = (newAngle - currentRotation) % (2 * Math.PI);
-        // determine angle offset in opposite direction (subtracting or adding a full circle depending on direction
-        // (sign) of angleOffset)
-        const angleOffsetOppositeDirection = angleOffset - Math.sign(angleOffset) * 2 * Math.PI;
-        if (Math.abs(Math.abs(angleOffset) - Math.abs(angleOffsetOppositeDirection)) < 1e-10) {
-            // in case of ambiguity chose a default direction for all entries
-            return currentRotation + Math.min(angleOffset, angleOffsetOppositeDirection);
-        } else if (Math.abs(angleOffset) < Math.abs(angleOffsetOppositeDirection)) {
-            return currentRotation + angleOffset;
-        } else {
-            return currentRotation + angleOffsetOppositeDirection;
-        }
+        return currentRotation + this._calculateRotationInClosestDirection(currentRotation, offset * stepSize);
     }
 
-    private _animate() {
+    @Watch('hideBackgroundEntries')
+    private _rerender() {
         if (this.requestAnimationFrameId !== null) return;
         this.requestAnimationFrameId = requestAnimationFrame(() => {
             const zCoordinatesForEntries: Array<[string, number]> = [];
@@ -191,6 +185,9 @@ export default class Carousel extends Vue {
                 const z = Math.cos(currentRotation) * currentRadius - currentRadius;
                 const [ el ] = this.$refs[entry];
                 el.style.transform = `translate3d(calc(${x}px - 50%),-50%,${z}px)`;
+                el.style.display = this.hideBackgroundEntries && !this._isInFront(entry)
+                    ? 'none'
+                    : '';
                 zCoordinatesForEntries.push([entry, z]);
                 finished = finished && rotation.finished;
             }
@@ -202,9 +199,33 @@ export default class Carousel extends Vue {
             }
 
             this.requestAnimationFrameId = null;
-            if (!finished) this._animate();
+            if (!finished) this._rerender();
         });
     }
+
+    private _calculateRotationInClosestDirection(fromAngle, toAngle): number {
+        // angle offset modulo full rotations
+        const rotation = (toAngle - fromAngle) % (2 * Math.PI);
+        // determine rotation in opposite direction (subtracting or adding a full circle depending on direction (sign))
+        const rotationOppositeDirection = rotation - Math.sign(rotation) * 2 * Math.PI;
+        if (Math.abs(Math.abs(rotation) - Math.abs(rotationOppositeDirection)) < 1e-10) {
+            // in case of ambiguity chose a default direction
+            return Math.min(rotation, rotationOppositeDirection);
+        } else if (Math.abs(rotation) < Math.abs(rotationOppositeDirection)) {
+            return rotation;
+        } else {
+            return rotationOppositeDirection;
+        }
+    }
+
+    private _isInFront(entry): boolean {
+        const rotation = this.rotations.get(entry);
+        if (!rotation) return false;
+        const absoluteRotation = Math.abs(this._calculateRotationInClosestDirection(0, rotation.currentValue));
+        const stepSize = 2 * Math.PI / this._totalPositionCount;
+        const threshold = Math.PI / 2 + stepSize / (this._totalPositionCount - 1); // just a heuristic but works ok
+        return absoluteRotation < threshold;
+    }
 }
 </script>
 
diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
index e773f0ce..42e7661b 100644
--- a/src/stories/index.stories.js
+++ b/src/stories/index.stories.js
@@ -571,29 +571,35 @@ storiesOf('Components', module)
             `,
         }
     })
-    .add('Carousel', () => ({
-        components: {Carousel,SmallPage},
-        data: () => ({ entryCount: 3 }),
-        computed: {
-            entries() {
-                return new Array(parseInt(this.entryCount)).fill('Card-').map((v, i) => `${v}${i}`);
-            }
-        },
-        template: `
-            <div>
-                <Carousel :entries="entries">
-                    <template v-for="entry in entries" v-slot:[entry]>
-                        <SmallPage style="margin: 0; width: 50rem">{{ entry }}</SmallPage>
-                    </template>
-                </Carousel>
-                <div style="text-align: center; margin-top: 8rem;">
-                    <label>
-                        <input type="number" min="1" step="1" v-model="entryCount"> Items
-                    </label>
+    .add('Carousel', () => {
+        const hideBackgroundEntries = boolean('hideBackgroundEntries', false);
+        return {
+            components: {Carousel, SmallPage},
+            data: () => ({
+                entryCount: 3,
+                hideBackgroundEntries,
+            }),
+            computed: {
+                entries() {
+                    return new Array(parseInt(this.entryCount)).fill('Card-').map((v, i) => `${v}${i}`);
+                }
+            },
+            template: `
+                <div>
+                    <Carousel :entries="entries" :hideBackgroundEntries="hideBackgroundEntries">
+                        <template v-for="entry in entries" v-slot:[entry]>
+                            <SmallPage style="margin: 0; width: 50rem">{{ entry }}</SmallPage>
+                        </template>
+                    </Carousel>
+                    <div style="text-align: center; margin-top: 8rem;">
+                        <label>
+                            <input type="number" min="1" step="1" v-model="entryCount"> Items
+                        </label>
+                    </div>
                 </div>
-            </div>
-            `,
-    }))
+                `,
+        };
+    })
     .add('CloseButton', () => {
         return {
             components: {CloseButton},

From ce530e0dc0421d32ef87b0b74b48718ebf97666e Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Fri, 23 Aug 2019 15:24:30 -0600
Subject: [PATCH 04/12] Carousel: automatically calculate min-height

Calculate min-height as height of the largest entry such that the entry
fits into the component when it's in the front.
To calculate the required carousel width, we would need to perspectively
scale the distance between the points where the perspective rays starting
at the user meet the circle (with increased radius accounting for the
entry widths) as tangents. We're not currently doing this.
---
 src/components/Carousel.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index 8f8d4071..e26c0e3d 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -99,7 +99,7 @@ export default class Carousel extends Vue {
     }
 
     private mounted() {
-        this._updateRadius(false);
+        this._updateDimensions(false);
         this._updateRotations(false);
     }
 
@@ -124,21 +124,24 @@ export default class Carousel extends Vue {
     @Watch('entries')
     @Watch('entries.length')
     @Watch('entryMargin')
-    private async _updateRadius(tween = true) {
+    private async _updateDimensions(tween = true) {
         await Vue.nextTick(); // let Vue render new entries
-        // calculate radius big enough such that two items can be rendered side by side without overlapping
+        let largestHeight = 0;
         let largestMinDistance = 0;
         for (let i = 0; i < this.entries.length; ++i) {
             const [ el1 ] = this.$refs[this.entries[i]];
             const [ el2 ] = this.$refs[this.entries[(i + 1) % this.entries.length]];
+            largestHeight = Math.max(largestHeight, el1.offsetHeight);
             const minDistance = el1.offsetWidth / 2 + el2.offsetWidth / 2 + this.entryMargin;
             largestMinDistance = Math.max(largestMinDistance, minDistance);
         }
-        // calculate radius on a right triangle formed by radius, half distance and perpendicular from center point
+        // Choose radius big enough such that two items can be rendered side by side without overlapping.
+        // Calculate on a right triangle formed by radius, half distance and perpendicular from center point
         // to distance line.
         const centerAngle = 2 * Math.PI / this._totalPositionCount / 2; // angle at circle center point
         const radius = (largestMinDistance / 2) / Math.sin(centerAngle);
         this.radius.tweenTo(radius, tween ? this.animationDuration : 0);
+        (this.$el as HTMLElement).style.minHeight = `${largestHeight}px`;
         this._rerender();
     }
 
@@ -232,8 +235,8 @@ export default class Carousel extends Vue {
 <style scoped>
     .carousel {
         position: relative;
-        height: 70rem;
-        margin: 4rem;
+        padding: 4rem;
+        box-sizing: content-box;
         perspective: 1500px;
         /* perspective-origin: center 150%; */ /* useful for debugging */
     }

From 84a608cb73eeccbb695950049803fd59edb898d8 Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Fri, 23 Aug 2019 15:56:21 -0600
Subject: [PATCH 05/12] Carousel: support disabling

---
 src/components/Carousel.vue  | 48 +++++++++++++++++++++++++++---------
 src/stories/index.stories.js | 14 ++++++++---
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index e26c0e3d..7bf19625 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -1,6 +1,7 @@
 <template>
-    <div class="carousel">
-        <div v-for="entry in entries" :ref="entry" @click="effectiveSelectedEntry = entry"
+    <div class="carousel" :class="{ disabled }">
+        <div v-for="entry in entries" :ref="entry"
+            @click="effectiveSelectedEntry = disabled ? effectiveSelectedEntry : entry"
             :class="{ selected: effectiveSelectedEntry === entry }">
             <slot :name="entry"></slot>
         </div>
@@ -82,6 +83,12 @@ export default class Carousel extends Vue {
     })
     public hideBackgroundEntries!: boolean;
 
+    @Prop({
+        type: Boolean,
+        default: false,
+    })
+    public disabled!: boolean;
+
     public $refs: { [ref: string]: HTMLElement[] }; // these are arrays because of v-for
 
     private effectiveSelectedEntry: string = '';
@@ -124,7 +131,10 @@ export default class Carousel extends Vue {
     @Watch('entries')
     @Watch('entries.length')
     @Watch('entryMargin')
-    private async _updateDimensions(tween = true) {
+    private async _updateDimensions(newWatcherValueOrTween, previousWatcherValue?) {
+        const tween = typeof newWatcherValueOrTween === 'boolean' && typeof previousWatcherValue === 'undefined'
+            ? newWatcherValueOrTween // specified whether to tween
+            : true; // did not specify whether to tween or method was called as a watcher (default to true)
         await Vue.nextTick(); // let Vue render new entries
         let largestHeight = 0;
         let largestMinDistance = 0;
@@ -147,7 +157,11 @@ export default class Carousel extends Vue {
 
     @Watch('entries')
     @Watch('effectiveSelectedEntry')
-    private _updateRotations(tween = true) {
+    @Watch('disabled')
+    private _updateRotations(newWatcherValueOrTween, previousWatcherValue?) {
+        const tween = typeof newWatcherValueOrTween === 'boolean' && typeof previousWatcherValue === 'undefined'
+            ? newWatcherValueOrTween // specified whether to tween
+            : true; // did not specify whether to tween or method was called as a watcher (default to true)
         // clean up removed entries
         for (const entry of this.rotations.keys()) {
             if (this.entries.indexOf(entry) !== -1) continue;
@@ -164,6 +178,10 @@ export default class Carousel extends Vue {
     }
 
     private _calculateTargetRotation(entry, currentRotation): number { // rotation in radians
+        if (this.disabled && entry !== this.effectiveSelectedEntry) {
+            // hide not selected entries at other end of circle
+            return currentRotation + this._calculateRotationInClosestDirection(currentRotation, Math.PI);
+        }
         const stepSize = 2 * Math.PI / this._totalPositionCount;
         const entryIndex = this.entries.indexOf(entry);
         const selectedEntryIndex = this.entries.indexOf(this.effectiveSelectedEntry);
@@ -188,9 +206,7 @@ export default class Carousel extends Vue {
                 const z = Math.cos(currentRotation) * currentRadius - currentRadius;
                 const [ el ] = this.$refs[entry];
                 el.style.transform = `translate3d(calc(${x}px - 50%),-50%,${z}px)`;
-                el.style.display = this.hideBackgroundEntries && !this._isInFront(entry)
-                    ? 'none'
-                    : '';
+                el.style.display = this._shouldHide(entry) ? 'none' : '';
                 zCoordinatesForEntries.push([entry, z]);
                 finished = finished && rotation.finished;
             }
@@ -221,13 +237,21 @@ export default class Carousel extends Vue {
         }
     }
 
-    private _isInFront(entry): boolean {
+    private _shouldHide(entry): boolean {
         const rotation = this.rotations.get(entry);
         if (!rotation) return false;
         const absoluteRotation = Math.abs(this._calculateRotationInClosestDirection(0, rotation.currentValue));
-        const stepSize = 2 * Math.PI / this._totalPositionCount;
-        const threshold = Math.PI / 2 + stepSize / (this._totalPositionCount - 1); // just a heuristic but works ok
-        return absoluteRotation < threshold;
+        if (this.disabled) {
+            // Hide disabled elements once they reached the opposite end of the circle, also to avoid that they are
+            // still reachable via tab. While they're animating to get there, display them even when they're in the
+            // back part of the circle.
+            return Math.abs(absoluteRotation - Math.PI) < 1e-10;
+        } else if (this.hideBackgroundEntries) {
+            // Hide entries in the back part of the circle as these will not be visible behind the front entries
+            const stepSize = 2 * Math.PI / this._totalPositionCount;
+            const threshold = Math.PI / 2 + stepSize / (this._totalPositionCount - 1); // just a heuristic but works ok
+            return absoluteRotation > threshold;
+        }
     }
 }
 </script>
@@ -247,7 +271,7 @@ export default class Carousel extends Vue {
         top: 50%;
     }
 
-    .carousel > :not(.selected) {
+    .carousel:not(.disabled) > :not(.selected) {
         cursor: pointer;
     }
 
diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
index 42e7661b..da18f386 100644
--- a/src/stories/index.stories.js
+++ b/src/stories/index.stories.js
@@ -572,12 +572,12 @@ storiesOf('Components', module)
         }
     })
     .add('Carousel', () => {
-        const hideBackgroundEntries = boolean('hideBackgroundEntries', false);
         return {
             components: {Carousel, SmallPage},
             data: () => ({
                 entryCount: 3,
-                hideBackgroundEntries,
+                hideBackgroundEntries: false,
+                disabled: false,
             }),
             computed: {
                 entries() {
@@ -586,14 +586,20 @@ storiesOf('Components', module)
             },
             template: `
                 <div>
-                    <Carousel :entries="entries" :hideBackgroundEntries="hideBackgroundEntries">
+                    <Carousel :entries="entries" :hideBackgroundEntries="hideBackgroundEntries" :disabled="disabled">
                         <template v-for="entry in entries" v-slot:[entry]>
                             <SmallPage style="margin: 0; width: 50rem">{{ entry }}</SmallPage>
                         </template>
                     </Carousel>
                     <div style="text-align: center; margin-top: 8rem;">
                         <label>
-                            <input type="number" min="1" step="1" v-model="entryCount"> Items
+                            <input type="number" min="1" step="1" v-model="entryCount" style="width: 5.5rem"> Items
+                        </label>
+                        <label>
+                            <input type="checkbox" v-model="disabled"> Disabled
+                        </label>
+                        <label>
+                            <input type="checkbox" v-model="hideBackgroundEntries"> Hide Background Entries
                         </label>
                     </div>
                 </div>

From b162006acb5d4ed801c19313e2bd01343d3fb714 Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Fri, 23 Aug 2019 16:39:53 -0600
Subject: [PATCH 06/12] Carousel: support keyboard navigation

---
 src/components/Carousel.vue | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index 7bf19625..b7c699d5 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -1,8 +1,9 @@
 <template>
     <div class="carousel" :class="{ disabled }">
         <div v-for="entry in entries" :ref="entry"
+            :class="{ selected: effectiveSelectedEntry === entry }"
             @click="effectiveSelectedEntry = disabled ? effectiveSelectedEntry : entry"
-            :class="{ selected: effectiveSelectedEntry === entry }">
+            @focusin="effectiveSelectedEntry = disabled ? effectiveSelectedEntry : entry">
             <slot :name="entry"></slot>
         </div>
     </div>
@@ -106,11 +107,14 @@ export default class Carousel extends Vue {
     }
 
     private mounted() {
+        this._onKeydown = this._onKeydown.bind(this);
+        document.addEventListener('keydown', this._onKeydown);
         this._updateDimensions(false);
         this._updateRotations(false);
     }
 
     private destroyed() {
+        document.removeEventListener('keydown', this._onKeydown);
         if (this.requestAnimationFrameId === null) return;
         cancelAnimationFrame(this.requestAnimationFrameId);
     }
@@ -253,6 +257,27 @@ export default class Carousel extends Vue {
             return absoluteRotation > threshold;
         }
     }
+
+    private _onKeydown(event) {
+        const target = event.path[0] as HTMLElement;
+        if (this.disabled
+            || target.tagName === 'INPUT'
+            || target.tagName === 'TEXTAREA'
+            || this.rotations.values().next().value.progress < .5 // block if previous change not animated far enough
+        ) return;
+        const currentIndex = this.entries.indexOf(this.effectiveSelectedEntry);
+        let newIndex;
+        if (event.which === 37) {
+            // left arrow key
+            newIndex = (currentIndex - 1 + this.entries.length) % this.entries.length;
+        } else if (event.which === 39) {
+            // right arrow key
+            newIndex = (currentIndex + 1) % this.entries.length;
+        } else {
+            return;
+        }
+        this.effectiveSelectedEntry = this.entries[newIndex];
+    }
 }
 </script>
 

From becb6e9cee7d53183083baff27241ea7a8e5fdf5 Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Sat, 24 Aug 2019 10:01:00 -0600
Subject: [PATCH 07/12] Carousel: refactor watchers

- Refactored as multiple methods can't watch the same property
  (resulting in watchers defined first getting overwritten)
- unified selection update into one method
- fix a bug that a change of entries prop resulted in switching
  to entries[0] even if effectiveSelectedEntry was different
- optimize update order (saves one rendering with intermediary
  values)
---
 src/components/Carousel.vue | 43 ++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index b7c699d5..41aa7ea0 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -2,8 +2,8 @@
     <div class="carousel" :class="{ disabled }">
         <div v-for="entry in entries" :ref="entry"
             :class="{ selected: effectiveSelectedEntry === entry }"
-            @click="effectiveSelectedEntry = disabled ? effectiveSelectedEntry : entry"
-            @focusin="effectiveSelectedEntry = disabled ? effectiveSelectedEntry : entry">
+            @click="!disabled && _updateSelection(entry)"
+            @focusin="!disabled && _updateSelection(entry)">
             <slot :name="entry"></slot>
         </div>
     </div>
@@ -106,10 +106,12 @@ export default class Carousel extends Vue {
         return this.entries.length + (this._hasDummyPosition ? 1 : 0);
     }
 
-    private mounted() {
+    private async mounted() {
         this._onKeydown = this._onKeydown.bind(this);
         document.addEventListener('keydown', this._onKeydown);
-        this._updateDimensions(false);
+        // trigger these manually instead of via immediate watcher to avoid animating on first render
+        await this._updateDimensions(false);
+        this._updateSelection(this.selectedEntry);
         this._updateRotations(false);
     }
 
@@ -119,26 +121,28 @@ export default class Carousel extends Vue {
         cancelAnimationFrame(this.requestAnimationFrameId);
     }
 
-    @Watch('entries', { immediate: true })
-    @Watch('entries.length', { immediate: true })
-    @Watch('selectedEntry', { immediate: true })
-    private _onExternalSelection() {
-        const isNewSelectionValid = this.entries.indexOf(this.selectedEntry) !== -1;
-        const isOldSelectionValid = this.entries.indexOf(this.effectiveSelectedEntry) !== -1;
+    @Watch('entries')
+    private async _onEntriesChange() {
+        await this._updateDimensions();
+        this._updateSelection(this.effectiveSelectedEntry); // revalidate
+        this._updateRotations();
+    }
+
+    @Watch('selectedEntry')
+    private _updateSelection(newSelection) {
+        const oldSelection = this.effectiveSelectedEntry;
+        const isNewSelectionValid = this.entries.indexOf(newSelection) !== -1;
+        const isOldSelectionValid = this.entries.indexOf(oldSelection) !== -1;
         if (isNewSelectionValid) {
-            this.effectiveSelectedEntry = this.selectedEntry;
+            this.effectiveSelectedEntry = newSelection;
         } else if (!isOldSelectionValid) {
             this.effectiveSelectedEntry = this.entries[0];
         } // else keep the old selection
     }
 
-    @Watch('entries')
-    @Watch('entries.length')
     @Watch('entryMargin')
-    private async _updateDimensions(newWatcherValueOrTween, previousWatcherValue?) {
-        const tween = typeof newWatcherValueOrTween === 'boolean' && typeof previousWatcherValue === 'undefined'
-            ? newWatcherValueOrTween // specified whether to tween
-            : true; // did not specify whether to tween or method was called as a watcher (default to true)
+    private async _updateDimensions(newWatcherValueOrTween = true) {
+        const tween = typeof newWatcherValueOrTween === 'boolean' ? newWatcherValueOrTween : true;
         await Vue.nextTick(); // let Vue render new entries
         let largestHeight = 0;
         let largestMinDistance = 0;
@@ -159,10 +163,9 @@ export default class Carousel extends Vue {
         this._rerender();
     }
 
-    @Watch('entries')
     @Watch('effectiveSelectedEntry')
     @Watch('disabled')
-    private _updateRotations(newWatcherValueOrTween, previousWatcherValue?) {
+    private _updateRotations(newWatcherValueOrTween = true, previousWatcherValue?) {
         const tween = typeof newWatcherValueOrTween === 'boolean' && typeof previousWatcherValue === 'undefined'
             ? newWatcherValueOrTween // specified whether to tween
             : true; // did not specify whether to tween or method was called as a watcher (default to true)
@@ -276,7 +279,7 @@ export default class Carousel extends Vue {
         } else {
             return;
         }
-        this.effectiveSelectedEntry = this.entries[newIndex];
+        this._updateSelection(this.entries[newIndex]);
     }
 }
 </script>

From 21d89e6a1cbf69405f75327bf02fd6c7665f5651 Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Sat, 24 Aug 2019 07:51:00 -0600
Subject: [PATCH 08/12] Carousel: rename selectedEntry to selected and emit
 event on selection change

---
 src/components/Carousel.vue  | 32 ++++++++++++++++++--------------
 src/stories/index.stories.js |  7 ++++++-
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index 41aa7ea0..c5527076 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="carousel" :class="{ disabled }">
         <div v-for="entry in entries" :ref="entry"
-            :class="{ selected: effectiveSelectedEntry === entry }"
+            :class="{ selected: effectiveSelected === entry }"
             @click="!disabled && _updateSelection(entry)"
             @focusin="!disabled && _updateSelection(entry)">
             <slot :name="entry"></slot>
@@ -64,7 +64,7 @@ export default class Carousel extends Vue {
     public entries!: string[];
 
     @Prop(String)
-    public selectedEntry?: string;
+    public selected?: string;
 
     @Prop({
         type: Number,
@@ -92,7 +92,7 @@ export default class Carousel extends Vue {
 
     public $refs: { [ref: string]: HTMLElement[] }; // these are arrays because of v-for
 
-    private effectiveSelectedEntry: string = '';
+    private effectiveSelected: string = '';
     private radius: Tweenable = new Tweenable();
     private rotations: Map<string, Tweenable> = new Map(); // map entry -> rotation
     private requestAnimationFrameId: number | null = null;
@@ -111,7 +111,7 @@ export default class Carousel extends Vue {
         document.addEventListener('keydown', this._onKeydown);
         // trigger these manually instead of via immediate watcher to avoid animating on first render
         await this._updateDimensions(false);
-        this._updateSelection(this.selectedEntry);
+        this._updateSelection(this.selected);
         this._updateRotations(false);
     }
 
@@ -124,20 +124,24 @@ export default class Carousel extends Vue {
     @Watch('entries')
     private async _onEntriesChange() {
         await this._updateDimensions();
-        this._updateSelection(this.effectiveSelectedEntry); // revalidate
+        this._updateSelection(this.effectiveSelected); // revalidate
         this._updateRotations();
     }
 
-    @Watch('selectedEntry')
+    @Watch('selected')
     private _updateSelection(newSelection) {
-        const oldSelection = this.effectiveSelectedEntry;
+        const oldSelection = this.effectiveSelected;
         const isNewSelectionValid = this.entries.indexOf(newSelection) !== -1;
         const isOldSelectionValid = this.entries.indexOf(oldSelection) !== -1;
         if (isNewSelectionValid) {
-            this.effectiveSelectedEntry = newSelection;
+            this.effectiveSelected = newSelection;
         } else if (!isOldSelectionValid) {
-            this.effectiveSelectedEntry = this.entries[0];
+            this.effectiveSelected = this.entries[0];
         } // else keep the old selection
+
+        if (this.effectiveSelected !== oldSelection) {
+            this.$emit('select', this.effectiveSelected);
+        }
     }
 
     @Watch('entryMargin')
@@ -163,7 +167,7 @@ export default class Carousel extends Vue {
         this._rerender();
     }
 
-    @Watch('effectiveSelectedEntry')
+    @Watch('effectiveSelected')
     @Watch('disabled')
     private _updateRotations(newWatcherValueOrTween = true, previousWatcherValue?) {
         const tween = typeof newWatcherValueOrTween === 'boolean' && typeof previousWatcherValue === 'undefined'
@@ -185,14 +189,14 @@ export default class Carousel extends Vue {
     }
 
     private _calculateTargetRotation(entry, currentRotation): number { // rotation in radians
-        if (this.disabled && entry !== this.effectiveSelectedEntry) {
+        if (this.disabled && entry !== this.effectiveSelected) {
             // hide not selected entries at other end of circle
             return currentRotation + this._calculateRotationInClosestDirection(currentRotation, Math.PI);
         }
         const stepSize = 2 * Math.PI / this._totalPositionCount;
         const entryIndex = this.entries.indexOf(entry);
-        const selectedEntryIndex = this.entries.indexOf(this.effectiveSelectedEntry);
-        let offset = entryIndex - selectedEntryIndex;
+        const selectedIndex = this.entries.indexOf(this.effectiveSelected);
+        let offset = entryIndex - selectedIndex;
         if (this._hasDummyPosition && offset > this._totalPositionCount / 2) {
             // skip dummy position
             offset += 1;
@@ -268,7 +272,7 @@ export default class Carousel extends Vue {
             || target.tagName === 'TEXTAREA'
             || this.rotations.values().next().value.progress < .5 // block if previous change not animated far enough
         ) return;
-        const currentIndex = this.entries.indexOf(this.effectiveSelectedEntry);
+        const currentIndex = this.entries.indexOf(this.effectiveSelected);
         let newIndex;
         if (event.which === 37) {
             // left arrow key
diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
index da18f386..3ee8d082 100644
--- a/src/stories/index.stories.js
+++ b/src/stories/index.stories.js
@@ -578,6 +578,7 @@ storiesOf('Components', module)
                 entryCount: 3,
                 hideBackgroundEntries: false,
                 disabled: false,
+                selected: 'Card-1',
             }),
             computed: {
                 entries() {
@@ -586,7 +587,8 @@ storiesOf('Components', module)
             },
             template: `
                 <div>
-                    <Carousel :entries="entries" :hideBackgroundEntries="hideBackgroundEntries" :disabled="disabled">
+                    <Carousel :entries="entries" :selected="selected" @select="selected = $event"
+                        :hideBackgroundEntries="hideBackgroundEntries" :disabled="disabled">
                         <template v-for="entry in entries" v-slot:[entry]>
                             <SmallPage style="margin: 0; width: 50rem">{{ entry }}</SmallPage>
                         </template>
@@ -601,6 +603,9 @@ storiesOf('Components', module)
                         <label>
                             <input type="checkbox" v-model="hideBackgroundEntries"> Hide Background Entries
                         </label>
+                        <div>
+                            Selected: <input v-model="selected">
+                        </div>
                     </div>
                 </div>
                 `,

From 891068f0ee4124be93c5e8dfda0b34f5b46cfdd3 Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Wed, 28 Aug 2019 11:41:03 -0600
Subject: [PATCH 09/12] Carousel: import Tweenable from nimiq-utils

---
 src/components/Carousel.vue | 40 +------------------------------------
 1 file changed, 1 insertion(+), 39 deletions(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index c5527076..de6750fe 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -12,45 +12,7 @@
 <script lang="ts">
 import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
 import SmallPage from './SmallPage.vue';
-
-class Tweenable {
-    public constructor(
-        public targetValue: number = 0,
-        public startValue: number = targetValue,
-        public tweenTime: number = 0,
-        public startTime: number = Date.now(),
-        public easing: (progress: number) => number = Tweenable.Easing.EASE_IN_OUT_CUBIC,
-    ) {}
-
-    public get currentValue(): number {
-        const easedProgress = this.easing(this.progress);
-        return this.startValue + (this.targetValue - this.startValue) * easedProgress;
-    }
-
-    public get progress(): number {
-        if (this.tweenTime === 0) return 1;
-        return Math.min(1, (Date.now() - this.startTime) / this.tweenTime);
-    }
-
-    public get finished(): boolean {
-        return this.progress === 1;
-    }
-
-    public tweenTo(targetValue, tweenTime = this.tweenTime) {
-        if (targetValue === this.targetValue) return;
-        this.startValue = this.currentValue;
-        this.targetValue = targetValue;
-        this.startTime = Date.now();
-        this.tweenTime = tweenTime;
-    }
-}
-namespace Tweenable { // tslint:disable-line no-namespace
-    // see https://gist.github.com/gre/1650294 for more easing functions
-    export let Easing = { // tslint:disable-line variable-name
-        LINEAR: (t: number) => t,
-        EASE_IN_OUT_CUBIC: (t: number) => t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
-    };
-}
+import { Tweenable } from '@nimiq/utils';
 
 @Component({components: {SmallPage}})
 export default class Carousel extends Vue {

From d92d1fc1eaf74cfdc1e3daee2935c6097bc6df89 Mon Sep 17 00:00:00 2001
From: sisou <hello@soerenschwert.de>
Date: Tue, 28 Jan 2020 09:34:01 -0600
Subject: [PATCH 10/12] Add v-for key, remove unused SmallPage import

---
 src/components/Carousel.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index de6750fe..44857d54 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="carousel" :class="{ disabled }">
-        <div v-for="entry in entries" :ref="entry"
+        <div v-for="(entry, index) in entries" :ref="entry" :key="index"
             :class="{ selected: effectiveSelected === entry }"
             @click="!disabled && _updateSelection(entry)"
             @focusin="!disabled && _updateSelection(entry)">
@@ -11,10 +11,9 @@
 
 <script lang="ts">
 import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
-import SmallPage from './SmallPage.vue';
 import { Tweenable } from '@nimiq/utils';
 
-@Component({components: {SmallPage}})
+@Component
 export default class Carousel extends Vue {
     @Prop({
         type: Array,

From a306f41d6207013a218da26610a285d013e235e6 Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Tue, 28 Jan 2020 13:34:33 -0600
Subject: [PATCH 11/12] Carousel: fix rotation by arrow key for Firefox

---
 src/components/Carousel.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index 44857d54..664582eb 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -226,8 +226,8 @@ export default class Carousel extends Vue {
         }
     }
 
-    private _onKeydown(event) {
-        const target = event.path[0] as HTMLElement;
+    private _onKeydown(event: KeyboardEvent) {
+        const target = event.target as HTMLElement;
         if (this.disabled
             || target.tagName === 'INPUT'
             || target.tagName === 'TEXTAREA'
@@ -235,11 +235,9 @@ export default class Carousel extends Vue {
         ) return;
         const currentIndex = this.entries.indexOf(this.effectiveSelected);
         let newIndex;
-        if (event.which === 37) {
-            // left arrow key
+        if (event.key === 'ArrowLeft') {
             newIndex = (currentIndex - 1 + this.entries.length) % this.entries.length;
-        } else if (event.which === 39) {
-            // right arrow key
+        } else if (event.key === 'ArrowRight') {
             newIndex = (currentIndex + 1) % this.entries.length;
         } else {
             return;

From d8314c4a3003035dc42299a400aed83036b5040c Mon Sep 17 00:00:00 2001
From: Daniel <github.danimoh@neverbox.com>
Date: Tue, 28 Jan 2020 13:40:16 -0600
Subject: [PATCH 12/12] Carousel: address PR comments

- rephrase some comments
- add a comment why we can't use transform-style: preserve-3d
- use array.includes
- specify function parameter types
- return early in _shouldHide if no entries should be hidden
---
 src/components/Carousel.vue | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index 664582eb..a6f496a9 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -51,7 +51,8 @@ export default class Carousel extends Vue {
     })
     public disabled!: boolean;
 
-    public $refs: { [ref: string]: HTMLElement[] }; // these are arrays because of v-for
+    // The entry refs are arrays with a single element because of v-for
+    public $refs: { [ref: string]: HTMLElement[] };
 
     private effectiveSelected: string = '';
     private radius: Tweenable = new Tweenable();
@@ -85,15 +86,15 @@ export default class Carousel extends Vue {
     @Watch('entries')
     private async _onEntriesChange() {
         await this._updateDimensions();
-        this._updateSelection(this.effectiveSelected); // revalidate
+        this._updateSelection(this.effectiveSelected); // re-validate
         this._updateRotations();
     }
 
     @Watch('selected')
-    private _updateSelection(newSelection) {
+    private _updateSelection(newSelection: string) {
         const oldSelection = this.effectiveSelected;
-        const isNewSelectionValid = this.entries.indexOf(newSelection) !== -1;
-        const isOldSelectionValid = this.entries.indexOf(oldSelection) !== -1;
+        const isNewSelectionValid = this.entries.includes(newSelection);
+        const isOldSelectionValid = this.entries.includes(oldSelection);
         if (isNewSelectionValid) {
             this.effectiveSelected = newSelection;
         } else if (!isOldSelectionValid) {
@@ -106,7 +107,7 @@ export default class Carousel extends Vue {
     }
 
     @Watch('entryMargin')
-    private async _updateDimensions(newWatcherValueOrTween = true) {
+    private async _updateDimensions(newWatcherValueOrTween: number | boolean = true) {
         const tween = typeof newWatcherValueOrTween === 'boolean' ? newWatcherValueOrTween : true;
         await Vue.nextTick(); // let Vue render new entries
         let largestHeight = 0;
@@ -130,13 +131,13 @@ export default class Carousel extends Vue {
 
     @Watch('effectiveSelected')
     @Watch('disabled')
-    private _updateRotations(newWatcherValueOrTween = true, previousWatcherValue?) {
+    private _updateRotations(newWatcherValueOrTween: string | boolean = true, previousWatcherValue?: string | boolean) {
         const tween = typeof newWatcherValueOrTween === 'boolean' && typeof previousWatcherValue === 'undefined'
             ? newWatcherValueOrTween // specified whether to tween
             : true; // did not specify whether to tween or method was called as a watcher (default to true)
         // clean up removed entries
         for (const entry of this.rotations.keys()) {
-            if (this.entries.indexOf(entry) !== -1) continue;
+            if (this.entries.includes(entry)) continue;
             this.rotations.delete(entry);
         }
         // update rotations
@@ -149,7 +150,12 @@ export default class Carousel extends Vue {
         this._rerender();
     }
 
-    private _calculateTargetRotation(entry, currentRotation): number { // rotation in radians
+    /**
+     * @param entry
+     * @param currentRotation - Rotation in radians
+     * @private
+     */
+    private _calculateTargetRotation(entry: string, currentRotation: number): number {
         if (this.disabled && entry !== this.effectiveSelected) {
             // hide not selected entries at other end of circle
             return currentRotation + this._calculateRotationInClosestDirection(currentRotation, Math.PI);
@@ -183,6 +189,8 @@ export default class Carousel extends Vue {
                 finished = finished && rotation.finished;
             }
 
+            // Note that instead of setting z-index manually, we could use transform-style: preserve-3d to order
+            // automatically by z coordinate. But unfortunately, this makes the entries not clickable anymore.
             zCoordinatesForEntries.sort(([, z1], [, z2]) => z1 - z2);
             for (let i = 0; i < zCoordinatesForEntries.length; ++i) {
                 const [ el ] = this.$refs[zCoordinatesForEntries[i][0]];
@@ -194,7 +202,7 @@ export default class Carousel extends Vue {
         });
     }
 
-    private _calculateRotationInClosestDirection(fromAngle, toAngle): number {
+    private _calculateRotationInClosestDirection(fromAngle: number, toAngle: number): number {
         // angle offset modulo full rotations
         const rotation = (toAngle - fromAngle) % (2 * Math.PI);
         // determine rotation in opposite direction (subtracting or adding a full circle depending on direction (sign))
@@ -209,9 +217,9 @@ export default class Carousel extends Vue {
         }
     }
 
-    private _shouldHide(entry): boolean {
+    private _shouldHide(entry: string): boolean {
         const rotation = this.rotations.get(entry);
-        if (!rotation) return false;
+        if (!rotation || (!this.disabled && !this.hideBackgroundEntries)) return false;
         const absoluteRotation = Math.abs(this._calculateRotationInClosestDirection(0, rotation.currentValue));
         if (this.disabled) {
             // Hide disabled elements once they reached the opposite end of the circle, also to avoid that they are