Carousel

# frozen_string_literal: true

module RubyUI
	class Carousel < Base
		def initialize(orientation: :horizontal, options: {}, **user_attrs)
			@orientation = orientation
			@options = options

			super(**user_attrs)
		end

		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				class: ["relative group", orientation_classes],
				role: "region",
				aria_roledescription: "carousel",
				data: {
					controller: "ruby-ui--carousel",
					ruby_ui__carousel_options_value: default_options.merge(@options).to_json,
					action: %w[
						keydown.right->ruby-ui--carousel#scrollNext:prevent
						keydown.left->ruby-ui--carousel#scrollPrev:prevent
					]
				}
			}
		end

		def default_options
			{
				axis: (@orientation == :horizontal) ? "x" : "y"
			}
		end

		def orientation_classes
			(@orientation == :horizontal) ? "is-horizontal" : "is-vertical"
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class CarouselContent < Base
		def view_template(&)
			div(class: "overflow-hidden", data: {ruby_ui__carousel_target: "viewport"}) do
				div(**attrs, &)
			end
		end

		private

		def default_attrs
			{
				class: [
					"flex",
					"group-[.is-horizontal]:-ml-4",
					"group-[.is-vertical]:-mt-4 group-[.is-vertical]:flex-col"
				]
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class CarouselItem < Base
		def view_template(&)
			div(**attrs, &)
		end

		private

		def default_attrs
			{
				role: "group",
				aria_roledescription: "slide",
				class: [
					"min-w-0 shrink-0 grow-0 basis-full",
					"group-[.is-horizontal]:pl-4",
					"group-[.is-vertical]:pt-4"
				]
			}
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class CarouselNext < Base
		def view_template(&)
			Button(**attrs) do
				icon
			end
		end

		private

		def default_attrs
			{
				variant: :outline,
				icon: true,
				class: [
					"absolute h-8 w-8 rounded-full",
					"group-[.is-horizontal]:-right-12 group-[.is-horizontal]:top-1/2 group-[.is-horizontal]:-translate-y-1/2",
					"group-[.is-vertical]:-bottom-12 group-[.is-vertical]:left-1/2 group-[.is-vertical]:-translate-x-1/2 group-[.is-vertical]:rotate-90"
				],
				disabled: true,
				data: {
					action: "click->ruby-ui--carousel#scrollNext",
					ruby_ui__carousel_target: "nextButton"
				}
			}
		end

		def icon
			svg(
				width: "24",
				height: "24",
				viewBox: "0 0 24 24",
				fill: "none",
				stroke: "currentColor",
				stroke_width: "2",
				stroke_linecap: "round",
				stroke_linejoin: "round",
				xmlns: "http://www.w3.org/2000/svg",
				class: "w-4 h-4"
			) do |s|
				s.path(d: "M5 12h14")
				s.path(d: "m12 5 7 7-7 7")
			end
		end
	end
end

# frozen_string_literal: true

module RubyUI
	class CarouselPrevious < Base
		def view_template(&)
			Button(**attrs) do
				icon
				span(class: "sr-only") { "Next slide" }
			end
		end

		private

		def default_attrs
			{
				variant: :outline,
				icon: true,
				class: [
					"absolute h-8 w-8 rounded-full",
					"group-[.is-horizontal]:-left-12 group-[.is-horizontal]:top-1/2 group-[.is-horizontal]:-translate-y-1/2",
					"group-[.is-vertical]:-top-12 group-[.is-vertical]:left-1/2 group-[.is-vertical]:-translate-x-1/2 group-[.is-vertical]:rotate-90"
				],
				disabled: true,
				data: {
					action: "click->ruby-ui--carousel#scrollPrev",
					ruby_ui__carousel_target: "prevButton"
				}
			}
		end

		def icon
			svg(
				width: "24",
				height: "24",
				viewBox: "0 0 24 24",
				fill: "none",
				stroke: "currentColor",
				stroke_width: "2",
				stroke_linecap: "round",
				stroke_linejoin: "round",
				xmlns: "http://www.w3.org/2000/svg",
				class: "w-4 h-4"
			) do |s|
				s.path(d: "m12 19-7-7 7-7")
				s.path(d: "M19 12H5")
			end
		end
	end
end

import { Controller } from "@hotwired/stimulus";
import EmblaCarousel from 'embla-carousel'

const DEFAULT_OPTIONS = {
  loop: true
}

export default class extends Controller {
  static values = {
    options: {
      type: Object,
      default: {},
    }
  }
  static targets = ["viewport", "nextButton", "prevButton"]

  connect() {
    this.initCarousel(this.#mergedOptions)
  }

  disconnect() {
    this.destroyCarousel()
  }

  initCarousel(options, plugins = []) {
    this.carousel = EmblaCarousel(this.viewportTarget, options, plugins)

    this.carousel.on("init", this.#updateControls.bind(this))
    this.carousel.on("reInit", this.#updateControls.bind(this))
    this.carousel.on("select", this.#updateControls.bind(this))
  }

  destroyCarousel() {
    this.carousel.destroy()
  }

  scrollNext() {
    this.carousel.scrollNext()
  }

  scrollPrev() {
    this.carousel.scrollPrev()
  }

  #updateControls() {
    this.#toggleButtonsDisabledState(this.nextButtonTargets, !this.carousel.canScrollNext())
    this.#toggleButtonsDisabledState(this.prevButtonTargets, !this.carousel.canScrollPrev())
  }

  #toggleButtonsDisabledState(buttons, isDisabled) {
    buttons.forEach((button) => button.disabled = isDisabled)
  }

  get #mergedOptions() {
    return {
      ...DEFAULT_OPTIONS,
      ...this.optionsValue
    }
  }
}

rake stimulus:manifest:update

// with yarn
yarn add embla-carousel
// with npm
npm install embla-carousel
// with importmaps
bin/importmap pin embla-carousel