Package carousel

import "gitlab.com/zoralab/bissetii/pkg/internal/carousel"

Package carousel is for rendering the default horizontal slide carousel.

The HTML template codes are written in Go’s string format under the corresponding group. This allows one to embed the HTML codes instead of parsing it from file.

Constants

Constants for managing the package as a whole.

const (
	// Name is the block name (`{{- define "this-name" -}}`).
	Name = "Carousel"

	// AMPName is the AMP HTML block name.
	AMPName = root.AMPPrefix + Name

	// ParametersComment are the list of comment headers
	// describing inputs.
	ParametersComment = `
{{- /* .Label             = Carousel name (used in aria-label)          */ -}}
{{- /* .Class             = Carousel class attribute                    */ -}}
{{- /* .Timing            = Carousel timing                             */ -}}
{{- /* .Autoplay          = Carousel autoplay flag (true/false)         */ -}}
{{- /* .Height            = Carousel height                             */ -}}
{{- /* .Width             = Carousel width                              */ -}}
{{- /* .Layout            = Carousel style layout (used in AMP)         */ -}}
{{- /* .Slides            = Carousel slides list                        */ -}}
{{- /*      .ID           = Slide ID                                    */ -}}
{{- /*      .Content      = Slide Content                               */ -}}
{{- /*      .Next         = Next slide                                  */ -}}
{{- /*      .Previous     = Previous slide                              */ -}}
`
)

Dependencies are the dependent codes for building independent template.

This is useful for rendering portable template usage like Hugo partials where they do not share a common definition source.

const (
	// DepHTML is the vanilla HTML output type.
	DepHTML = ``

	// DepAMPHTML is the Accelerated Mobile Pages HTML output
	// type.
	DepAMPHTML = ``
)

Full HTML codes for rendering templates without needing to parse file.

const (
	// HTML is the vanilla HTML output type.
	HTML = `
<section class="Carousel {{- if .Class}} {{ .Class -}}{{- end -}}"

	aria-label="{{- .Label -}}"
{{- if or .Width .Height }}

	style="

	{{- if .Height }}

		min-height: {{- .Height -}};

		height: {{- .Height -}};

	{{- end }}

	{{- if .Width }}

		min-width: {{- .Width -}};

		width: {{- .Width -}};

	{{- end -}}
"
{{- end -}}>

	<ol class="Carousel-viewport">
{{- range $slide := .Slides }}

		<li id="{{- $slide.ID -}}">

			<article>{{- $slide.Content -}}</article>

			<nav>

				<a class="Carousel-previous"

					href="#{{- $slide.Previous.ID -}}">

					{{- $slide.Previous.ID -}}

				</a>

				<a class="Carousel-next"

					href="#{{- $slide.Next.ID -}}">

					{{- $slide.Next.ID -}}

				</a>

			</nav>

		</li>
{{- end }}

	</ol>
<nav class="Carousel-nav-panel"><ol>
{{- range $slide := .Slides }}

	<li><a href="#{{- $slide.ID -}}">{{- $slide.ID -}}</a></li>
{{- end }}
</ol></nav>
</section>
`

	// AMPHTML is the Accelerated Mobile Pages HTML output type.
	AMPHTML = `
<amp-carousel width="{{- .Width -}}"

	height="{{- .Height -}}"

	layout="{{- .Layout -}}"

	type="slides"
{{- if .Autoplay }}

	autoplay
{{- end }}

	delay="{{- .Timing -}}">
{{- range $slide := .Slides }}

	<article>{{- $slide.Content -}}</article>
{{- end }}
</amp-carousel>
`
)

Data

type Data struct {
	Label    string
	Class    string
	Timing   string
	Autoplay bool
	Height   string
	Width    string
	Layout   string
	Slides   []Slide
}

Data is the data structure for rendering the component.

Slide

type Slide struct {
	ID       string
	Content  string
	Next     *Slide
	Previous *Slide
}

Slide is a single content data for each carousel slide.