@studiometa/ui 0.2.0 → 0.2.3

package/molecules/Slider/Slider.cjs

@@ -0,0 +1,240 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/molecules/Slider/Slider.js
+var Slider_exports = {};
+__export(Slider_exports, {
+  default: () => Slider
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_SliderDrag = __toESM(require("./SliderDrag.cjs"), 1);
+var import_SliderItem = __toESM(require("./SliderItem.cjs"), 1);
+var Slider = class extends import_js_toolkit.Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "__distanceX", 0);
+    __publicField(this, "__initialX", 0);
+    __publicField(this, "__currentIndex", 0);
+    __publicField(this, "states", []);
+  }
+  get currentIndex() {
+    return this.__currentIndex;
+  }
+  set currentIndex(value) {
+    this.currentSliderItem.disactivate();
+    this.$emit("index", value);
+    this.__currentIndex = value;
+    this.currentSliderItem.activate();
+  }
+  get currentState() {
+    return this.states[this.currentIndex];
+  }
+  get firstState() {
+    return this.states[0];
+  }
+  get lastState() {
+    return this.states[this.states.length - 1];
+  }
+  get containMinState() {
+    return this.getStateValueByMode(this.firstState.x, "left");
+  }
+  get containMaxState() {
+    return this.getStateValueByMode(this.lastState.x, "right");
+  }
+  get indexMax() {
+    return this.$children.SliderItem.length - 1;
+  }
+  get currentSliderItem() {
+    return this.$children.SliderItem[this.currentIndex];
+  }
+  getStates() {
+    const { wrapper } = this.$refs;
+    const originRect = wrapper.getBoundingClientRect();
+    const origins = {
+      left: originRect.left,
+      center: originRect.x + originRect.width / 2,
+      right: originRect.x + originRect.width
+    };
+    return this.$children.SliderItem.map((item) => {
+      return {
+        x: {
+          left: (item.rect.x - origins.left) * -1,
+          center: (item.rect.x + item.rect.width / 2 - origins.center) * -1,
+          right: (item.rect.x + item.rect.width - origins.right) * -1
+        }
+      };
+    });
+  }
+  getStateValueByMode(state, mode) {
+    return state[mode != null ? mode : this.$options.mode];
+  }
+  mounted() {
+    this.states = this.getStates();
+    this.prepareInvisibleItems();
+    this.goTo(this.currentIndex);
+  }
+  resized() {
+    (0, import_utils.nextFrame)(() => {
+      this.states = this.getStates();
+      (0, import_utils.nextFrame)(() => {
+        this.prepareInvisibleItems();
+        this.goTo(this.currentIndex);
+      });
+    });
+  }
+  goNext() {
+    if (this.currentIndex + 1 > this.indexMax) {
+      return;
+    }
+    this.goTo(this.currentIndex + 1);
+  }
+  goPrev() {
+    if (this.currentIndex - 1 < 0) {
+      return;
+    }
+    this.goTo(this.currentIndex - 1);
+  }
+  goTo(index) {
+    if (index < 0 || index > this.indexMax) {
+      throw new Error("Index out of bound.");
+    }
+    let state = this.getStateValueByMode(this.states[index].x);
+    if (this.$options.contain) {
+      if (this.$children.SliderItem[this.indexMax].willBeFullyVisible(state)) {
+        state = this.getStateValueByMode(this.lastState.x, "right");
+      } else if (this.$children.SliderItem[0].willBeFullyVisible(state)) {
+        state = this.getStateValueByMode(this.firstState.x, "left");
+      }
+    }
+    const itemsToMove = this.getVisibleItems(state);
+    if (index < this.currentIndex) {
+      itemsToMove.reverse();
+    }
+    itemsToMove.forEach((item) => {
+      (0, import_utils.nextFrame)(() => item.move(state));
+    });
+    this.currentIndex = index;
+    this.$emit("goto", index);
+  }
+  onSliderDragStart() {
+    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
+  }
+  onSliderDragDrag(props) {
+    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
+      return;
+    }
+    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;
+    this.getVisibleItems(this.__distanceX).forEach((item) => {
+      item.moveInstantly(this.__distanceX);
+    });
+  }
+  onSliderDragDrop(props) {
+    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
+      return;
+    }
+    let finalX = (0, import_utils.clamp)((0, import_utils.inertiaFinalValue)(this.__distanceX, props.delta.x * this.$options.sensitivity), 0, this.getStateValueByMode(this.lastState.x));
+    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) => Math.abs(finalX - this.getStateValueByMode(state.x)));
+    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);
+    const closestIndex = absoluteDifferencesBetweenDistanceAndState.findIndex((number) => number === minimumDifference);
+    if (this.$options.fitBounds) {
+      this.goTo(closestIndex);
+    } else {
+      if (this.$options.contain) {
+        finalX = Math.min(this.containMinState, finalX);
+        finalX = Math.max(this.containMaxState, finalX);
+      }
+      this.$children.SliderItem.forEach((item) => {
+        item.move(finalX);
+      });
+      this.currentIndex = closestIndex;
+    }
+  }
+  prepareInvisibleItems() {
+    const state = this.states[this.currentIndex];
+    const nextItemsToPrepare = [];
+    const previousItemsToPrepare = [];
+    this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {
+      if (i > this.currentIndex) {
+        nextItemsToPrepare.push(item);
+        return;
+      }
+      if (i < this.currentIndex) {
+        previousItemsToPrepare.push(item);
+      }
+    });
+    nextItemsToPrepare.forEach((item) => {
+      const invisibleState = this.getStateWhereItemWillBeInvisible(item);
+      if (invisibleState) {
+        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
+      }
+    });
+    previousItemsToPrepare.forEach((item) => {
+      const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });
+      if (invisibleState) {
+        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
+      }
+    });
+  }
+  getStateWhereItemWillBeInvisible(item, { reversed = false } = {}) {
+    const visibleStates = this.states.filter((state) => item.willBeVisible(this.getStateValueByMode(state.x)));
+    const firstVisibleState = visibleStates[0];
+    const lastVisibleState = visibleStates[visibleStates.length - 1];
+    const firstVisibleStateIndex = this.states.findIndex((state) => this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x));
+    const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);
+    return reversed ? this.states[lastVisibleStateIndex + 1] : this.states[firstVisibleStateIndex - 1];
+  }
+  getVisibleItems(target) {
+    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));
+  }
+  getInvisibleItems(target) {
+    return this.$children.SliderItem.filter((item) => !item.isVisible && !item.willBeVisible(target));
+  }
+};
+__publicField(Slider, "config", {
+  name: "Slider",
+  refs: ["wrapper"],
+  emits: ["goto", "index"],
+  components: {
+    SliderItem: import_SliderItem.default,
+    SliderDrag: import_SliderDrag.default
+  },
+  options: {
+    mode: { type: String, default: "left" },
+    fitBounds: Boolean,
+    contain: Boolean,
+    sensitivity: { type: Number, default: 1 }
+  }
+});
+module.exports = __toCommonJS(Slider_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/Slider.d.ts

@@ -0,0 +1,245 @@
+/**
+ * @typedef {'left'|'center'|'right'} SliderModes
+ * @typedef {{ x: Record<SliderModes, number> }} SliderState
+ */
+/**
+ * @typedef {Object} SliderChildren
+ * @property {SliderItem[]} SliderItem
+ * @property {SliderDrag[]} SliderDrag
+ */
+/**
+ * @typedef {Object} SliderOptions
+ * @property {SliderModes} mode
+ * @property {boolean} fitBounds
+ * @property {number} sensitivity
+ */
+/**
+ * @typedef {Object} SliderPrivateInterface
+ * @property {{ wrapper: HTMLElement }} $refs
+ * @property {SliderChildren} $children
+ * @property {SliderOptions} $options
+ */
+/**
+ * @typedef {Slider & SliderPrivateInterface} SliderInterface
+ */
+/**
+ * Orchestrate the slider items state transition.
+ * @todo a11y
+ * @todo better state management with `mode` option
+ */
+export default class Slider extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        emits: string[];
+        components: {
+            SliderItem: typeof SliderItem;
+            SliderDrag: typeof SliderDrag;
+        };
+        options: {
+            mode: {
+                type: StringConstructor;
+                default: string;
+            };
+            fitBounds: BooleanConstructor;
+            contain: BooleanConstructor;
+            sensitivity: {
+                type: NumberConstructor;
+                default: number;
+            };
+        };
+    };
+    __distanceX: number;
+    __initialX: number;
+    /**
+     * Index of the current active slide.
+     * @type {number}
+     */
+    __currentIndex: number;
+    /**
+     * Set the current index and emit the `index` event.
+     * @param   {number} value
+     * @returns {void}
+     */
+    set currentIndex(arg: number);
+    /**
+     * Get the current index.
+     * @returns {number}
+     */
+    get currentIndex(): number;
+    /**
+     * Store all the states.
+     * @type {SliderState[]}
+     */
+    states: SliderState[];
+    /**
+     * Get the current state.
+     * @returns {SliderState}
+     */
+    get currentState(): SliderState;
+    /**
+     * Get the first state.
+     * @returns {SliderState}
+     */
+    get firstState(): SliderState;
+    /**
+     * Get the last state.
+     * @returns {SliderState}
+     */
+    get lastState(): SliderState;
+    /**
+     * Get the minimal contain state value.
+     * @returns {number} [description]
+     */
+    get containMinState(): number;
+    /**
+     * Get the maximal contain state value.
+     * @returns {number} [description]
+     */
+    get containMaxState(): number;
+    /**
+     * Get the last index.
+     *
+     * @this    {SliderInterface}
+     * @returns {number}
+     */
+    get indexMax(): number;
+    /**
+     * Get the current SliderItem
+     *
+     * @this    {SliderInterface}
+     * @returns {SliderItem}
+     */
+    get currentSliderItem(): SliderItem;
+    /**
+     * Get the states for each SliderItem.
+     *
+     * @todo save value for every available modes to avoid recalculation when switching
+     * @this {SliderInterface}
+     */
+    getStates(): {
+        x: {
+            left: number;
+            center: number;
+            right: number;
+        };
+    }[];
+    /**
+     * Get a state value according to the given mode.
+     *
+     * @this    {SliderInterface}
+     * @param   {SliderState['x']} state
+     * @param   {SliderOptions['mode']} [mode]
+     * @returns {number}
+     */
+    getStateValueByMode(state: SliderState['x'], mode?: SliderOptions['mode']): number;
+    /**
+     * Mounted hook.
+     *
+     * @returns {void}
+     */
+    mounted(): void;
+    /**
+     * Resized hook.
+     * @returns {void}
+     */
+    resized(): void;
+    /**
+     * Go to the next slide.
+     *
+     * @returns {void}
+     */
+    goNext(): void;
+    /**
+     * Go to the previous slide.
+     *
+     * @returns {void}
+     */
+    goPrev(): void;
+    /**
+     * Go to the given index.
+     *
+     * @this  {SliderInterface}
+     * @param {number} index
+     * @returns {void}
+     */
+    goTo(index: number): void;
+    /**
+     * Listen to the Draggable `start` event.
+     *
+     * @returns {void}
+     */
+    onSliderDragStart(): void;
+    /**
+     * Listen to the Draggable `drag` event.
+     *
+     * @param   {import('@studiometa/js-toolkit/services/drag').DragServiceProps} props
+     * @returns {void}
+     */
+    onSliderDragDrag(props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
+    /**
+     * Listen to the Draggable `drop` event and find the new active slide.
+     *
+     * @this    {SliderInterface}
+     * @param   {import('@studiometa/js-toolkit/services/drag').DragServiceProps} props
+     * @returns {void}
+     */
+    onSliderDragDrop(props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
+    /**
+     * Prepare invisible items.
+     * @returns {void}
+     */
+    prepareInvisibleItems(): void;
+    /**
+     * Get the state where the given item will be visible.
+     *
+     * @param   {SliderItem} item
+     * @returns {SliderState}
+     */
+    getStateWhereItemWillBeInvisible(item: SliderItem, { reversed }?: {
+        reversed?: boolean;
+    }): SliderState;
+    /**
+     * Get the visible slides for the given position.
+     *
+     * @this    {SliderInterface}
+     * @param   {number} target
+     * @returns {SliderItem[]}
+     */
+    getVisibleItems(target: number): SliderItem[];
+    /**
+     * Get the invisible slides for the given position.
+     *
+     * @this    {SliderInterface}
+     * @param   {number} target
+     * @returns {SliderItem[]}
+     */
+    getInvisibleItems(target: number): SliderItem[];
+}
+export type SliderModes = 'left' | 'center' | 'right';
+export type SliderState = {
+    x: Record<SliderModes, number>;
+};
+export type SliderChildren = {
+    SliderItem: SliderItem[];
+    SliderDrag: SliderDrag[];
+};
+export type SliderOptions = {
+    mode: SliderModes;
+    fitBounds: boolean;
+    sensitivity: number;
+};
+export type SliderPrivateInterface = {
+    $refs: {
+        wrapper: HTMLElement;
+    };
+    $children: SliderChildren;
+    $options: SliderOptions;
+};
+export type SliderInterface = Slider & SliderPrivateInterface;
+import { Base } from "@studiometa/js-toolkit";
+import SliderItem from "./SliderItem.js";
+import SliderDrag from "./SliderDrag.js";

package/molecules/Slider/Slider.js

@@ -0,0 +1,209 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+import { clamp, inertiaFinalValue, nextFrame } from "@studiometa/js-toolkit/utils";
+import SliderDrag from "./SliderDrag.js";
+import SliderItem from "./SliderItem.js";
+class Slider extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "__distanceX", 0);
+    __publicField(this, "__initialX", 0);
+    __publicField(this, "__currentIndex", 0);
+    __publicField(this, "states", []);
+  }
+  get currentIndex() {
+    return this.__currentIndex;
+  }
+  set currentIndex(value) {
+    this.currentSliderItem.disactivate();
+    this.$emit("index", value);
+    this.__currentIndex = value;
+    this.currentSliderItem.activate();
+  }
+  get currentState() {
+    return this.states[this.currentIndex];
+  }
+  get firstState() {
+    return this.states[0];
+  }
+  get lastState() {
+    return this.states[this.states.length - 1];
+  }
+  get containMinState() {
+    return this.getStateValueByMode(this.firstState.x, "left");
+  }
+  get containMaxState() {
+    return this.getStateValueByMode(this.lastState.x, "right");
+  }
+  get indexMax() {
+    return this.$children.SliderItem.length - 1;
+  }
+  get currentSliderItem() {
+    return this.$children.SliderItem[this.currentIndex];
+  }
+  getStates() {
+    const { wrapper } = this.$refs;
+    const originRect = wrapper.getBoundingClientRect();
+    const origins = {
+      left: originRect.left,
+      center: originRect.x + originRect.width / 2,
+      right: originRect.x + originRect.width
+    };
+    return this.$children.SliderItem.map((item) => {
+      return {
+        x: {
+          left: (item.rect.x - origins.left) * -1,
+          center: (item.rect.x + item.rect.width / 2 - origins.center) * -1,
+          right: (item.rect.x + item.rect.width - origins.right) * -1
+        }
+      };
+    });
+  }
+  getStateValueByMode(state, mode) {
+    return state[mode != null ? mode : this.$options.mode];
+  }
+  mounted() {
+    this.states = this.getStates();
+    this.prepareInvisibleItems();
+    this.goTo(this.currentIndex);
+  }
+  resized() {
+    nextFrame(() => {
+      this.states = this.getStates();
+      nextFrame(() => {
+        this.prepareInvisibleItems();
+        this.goTo(this.currentIndex);
+      });
+    });
+  }
+  goNext() {
+    if (this.currentIndex + 1 > this.indexMax) {
+      return;
+    }
+    this.goTo(this.currentIndex + 1);
+  }
+  goPrev() {
+    if (this.currentIndex - 1 < 0) {
+      return;
+    }
+    this.goTo(this.currentIndex - 1);
+  }
+  goTo(index) {
+    if (index < 0 || index > this.indexMax) {
+      throw new Error("Index out of bound.");
+    }
+    let state = this.getStateValueByMode(this.states[index].x);
+    if (this.$options.contain) {
+      if (this.$children.SliderItem[this.indexMax].willBeFullyVisible(state)) {
+        state = this.getStateValueByMode(this.lastState.x, "right");
+      } else if (this.$children.SliderItem[0].willBeFullyVisible(state)) {
+        state = this.getStateValueByMode(this.firstState.x, "left");
+      }
+    }
+    const itemsToMove = this.getVisibleItems(state);
+    if (index < this.currentIndex) {
+      itemsToMove.reverse();
+    }
+    itemsToMove.forEach((item) => {
+      nextFrame(() => item.move(state));
+    });
+    this.currentIndex = index;
+    this.$emit("goto", index);
+  }
+  onSliderDragStart() {
+    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
+  }
+  onSliderDragDrag(props) {
+    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
+      return;
+    }
+    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;
+    this.getVisibleItems(this.__distanceX).forEach((item) => {
+      item.moveInstantly(this.__distanceX);
+    });
+  }
+  onSliderDragDrop(props) {
+    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
+      return;
+    }
+    let finalX = clamp(inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.sensitivity), 0, this.getStateValueByMode(this.lastState.x));
+    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) => Math.abs(finalX - this.getStateValueByMode(state.x)));
+    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);
+    const closestIndex = absoluteDifferencesBetweenDistanceAndState.findIndex((number) => number === minimumDifference);
+    if (this.$options.fitBounds) {
+      this.goTo(closestIndex);
+    } else {
+      if (this.$options.contain) {
+        finalX = Math.min(this.containMinState, finalX);
+        finalX = Math.max(this.containMaxState, finalX);
+      }
+      this.$children.SliderItem.forEach((item) => {
+        item.move(finalX);
+      });
+      this.currentIndex = closestIndex;
+    }
+  }
+  prepareInvisibleItems() {
+    const state = this.states[this.currentIndex];
+    const nextItemsToPrepare = [];
+    const previousItemsToPrepare = [];
+    this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {
+      if (i > this.currentIndex) {
+        nextItemsToPrepare.push(item);
+        return;
+      }
+      if (i < this.currentIndex) {
+        previousItemsToPrepare.push(item);
+      }
+    });
+    nextItemsToPrepare.forEach((item) => {
+      const invisibleState = this.getStateWhereItemWillBeInvisible(item);
+      if (invisibleState) {
+        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
+      }
+    });
+    previousItemsToPrepare.forEach((item) => {
+      const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });
+      if (invisibleState) {
+        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
+      }
+    });
+  }
+  getStateWhereItemWillBeInvisible(item, { reversed = false } = {}) {
+    const visibleStates = this.states.filter((state) => item.willBeVisible(this.getStateValueByMode(state.x)));
+    const firstVisibleState = visibleStates[0];
+    const lastVisibleState = visibleStates[visibleStates.length - 1];
+    const firstVisibleStateIndex = this.states.findIndex((state) => this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x));
+    const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);
+    return reversed ? this.states[lastVisibleStateIndex + 1] : this.states[firstVisibleStateIndex - 1];
+  }
+  getVisibleItems(target) {
+    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));
+  }
+  getInvisibleItems(target) {
+    return this.$children.SliderItem.filter((item) => !item.isVisible && !item.willBeVisible(target));
+  }
+}
+__publicField(Slider, "config", {
+  name: "Slider",
+  refs: ["wrapper"],
+  emits: ["goto", "index"],
+  components: {
+    SliderItem,
+    SliderDrag
+  },
+  options: {
+    mode: { type: String, default: "left" },
+    fitBounds: Boolean,
+    contain: Boolean,
+    sensitivity: { type: Number, default: 1 }
+  }
+});
+export {
+  Slider as default
+};