Package carousel

import "gitlab.com/zoralab/bissetii/pkg/components/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

All Bissetii Compressed Compiled CSS

const (
	CSSAMP = `amp-carousel{margin:var(--carousel-margin);background:var(--carousel-background)}`

	CSSCritical = `@-webkit-keyframes carousel-animate-to-next{75%,99%{left:0}95%,98%{left:100%}}@-moz-keyframes carousel-animate-to-next{75%,99%{left:0}95%,98%{left:100%}}@-ms-keyframes carousel-animate-to-next{75%,99%{left:0}95%,98%{left:100%}}@-o-keyframes carousel-animate-to-next{75%,99%{left:0}95%,98%{left:100%}}@keyframes carousel-animate-to-next{75%,99%{left:0}95%,98%{left:100%}}@-webkit-keyframes carousel-animate-to-start{75%,99%{left:0}95%,98%{left:calc(var(--carousel-total) * 100% * -1)}}@-moz-keyframes carousel-animate-to-start{75%,99%{left:0}95%,98%{left:calc(var(--carousel-total) * 100% * -1)}}@-ms-keyframes carousel-animate-to-start{75%,99%{left:0}95%,98%{left:calc(var(--carousel-total) * 100% * -1)}}@-o-keyframes carousel-animate-to-start{75%,99%{left:0}95%,98%{left:calc(var(--carousel-total) * 100% * -1)}}@keyframes carousel-animate-to-start{75%,99%{left:0}95%,98%{left:calc(var(--carousel-total) * 100% * -1)}}@-webkit-keyframes carousel-animate-snap{96%,100%{scroll-snap-align:center}97%,99%{scroll-snap-align:none}}@-moz-keyframes carousel-animate-snap{96%,100%{scroll-snap-align:center}97%,99%{scroll-snap-align:none}}@-ms-keyframes carousel-animate-snap{96%,100%{scroll-snap-align:center}97%,99%{scroll-snap-align:none}}@-o-keyframes carousel-animate-snap{96%,100%{scroll-snap-align:center}97%,99%{scroll-snap-align:none}}@keyframes carousel-animate-snap{96%,100%{scroll-snap-align:center}97%,99%{scroll-snap-align:none}}.Carousel{display:var(--carousel-display);height:var(--carousel-height);min-height:var(--carousel-height);width:var(--carousel-width);padding:var(--carousel-padding);margin:var(--carousel-margin);background:var(--carousel-background);perspective:var(--carousel-perspective)}.Carousel .viewport{display:flex;position:absolute;top:0;left:0;right:0;bottom:0;padding:0;margin:0;list-style-type:none;list-style-image:none;overflow:scroll hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none}.Carousel .viewport::-webkit-scrollbar{display:none}.Carousel .viewport li{flex:0 0 100%;position:relative;border:none;margin:0;padding:0}.Carousel .viewport li article{display:flex;align-items:center;align-content:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0}.Carousel .viewport li .controller,.Carousel .viewport li nav{display:grid;position:absolute;top:0;left:0;height:100%;width:100%;background:transparent;opacity:0;visibility:hidden}.Carousel .viewport li .controller{grid:"content" 100%/100%;align-items:center;justify-items:center;animation-name:none;animation-play-state:running;scroll-snap-align:center;visibility:hidden}.Carousel .viewport li nav{grid:var(--carousel-nav-grid);align-items:var(--carousel-nav-align-items);justify-items:var(--carousel-nav-justify-items);-webkit-transition:var(--carousel-nav-timing);-ms-transition:var(--carousel-nav-timing);-moz-transition:var(--carousel-nav-timing);-o-transition:var(--carousel-nav-timing);transition:var(--carousel-nav-timing)}.Carousel .viewport li nav a.next,.Carousel .viewport li nav a.previous{display:flex;align-items:center;justify-content:center;align-content:center;width:var(--carousel-nav-width);height:100%;color:var(--carousel-nav-color);font-size:var(--carousel-nav-font-size);border:none;outline:0}.Carousel .viewport li nav a.next{grid-area:carousel-next;background:var(--carousel-nav-background-next)}.Carousel .viewport li nav a.previous{grid-area:carousel-previous;background:var(--carousel-nav-background-previous)}.Carousel .viewport li:last-child nav a.next,.Carousel .viewport li:last-child article::after,.Carousel .viewport li:first-child nav a.previous,.Carousel .viewport li:first-child article::before{display:none}.Carousel nav.panel{position:absolute;top:var(--carousel-panel-position-top);bottom:var(--carousel-panel-position-bottom);left:var(--carousel-panel-position-left);right:var(--carousel-panel-position-right);-webkit-transform:var(--carousel-panel-transform);-ms-transform:var(--carousel-panel-transform);-moz-transform:var(--carousel-panel-transform);-o-transform:var(--carousel-panel-transform);transform:var(--carousel-panel-transform);margin:var(--carousel-panel-margin);padding:var(--carousel-panel-padding);border-radius:var(--carousel-panel-border-radius);opacity:0;visibility:hidden;background:var(--carousel-panel-background);width:var(--carousel-panel-width);height:var(--carousel-panel-height);-webkit-transition:var(--carousel-nav-timing);-ms-transition:var(--carousel-nav-timing);-moz-transition:var(--carousel-nav-timing);-o-transition:var(--carousel-nav-timing);transition:var(--carousel-nav-timing)}.Carousel nav.panel ol,.Carousel nav.panel ul{display:flex;flex-direction:var(--carousel-panel-flex-direction);flex-wrap:var(--carousel-panel-flex-wrap);align-items:var(--carousel-panel-align-items);justify-content:var(--carousel-justify-content);align-content:var(--carousel-panel-align-content);margin:0;padding:0;list-style-type:none;overflow:var(--carousel-panel-overflow);scroll-behavior:smooth;scrollbar-width:none}.Carousel nav.panel ol::-webkit-scrollbar,.Carousel nav.panel ul::-webkit-scrollbar{display:none}.Carousel nav.panel ol li,.Carousel nav.panel ul li{margin:var(--carousel-panel-item-margin);padding:var(--carousel-panel-item-padding);display:flex;align-items:center;justify-content:center;align-content:center;border:var(--carousel-panel-item-border);background:var(--carousel-panel-item-background);-webkit-transition:var(--carousel-nav-timing);-ms-transition:var(--carousel-nav-timing);-moz-transition:var(--carousel-nav-timing);-o-transition:var(--carousel-nav-timing);transition:var(--carousel-nav-timing)}.Carousel nav.panel ol li>*,.Carousel nav.panel ul li>*{color:var(--carousel-panel-item-color);border:none;background:transparent;margin:0;padding:0;text-align:var(--carousel-panel-item-text-align);vertical-align:var(--carousel-panel-item-vertical-align)}.Carousel nav.panel ol li:hover,.Carousel nav.panel ol li:focus,.Carousel nav.panel ul li:hover,.Carousel nav.panel ul li:focus{-webkit-transform:var(--carousel-panel-item-hover-transform);-ms-transform:var(--carousel-panel-item-hover-transform);-moz-transform:var(--carousel-panel-item-hover-transform);-o-transform:var(--carousel-panel-item-hover-transform);transform:var(--carousel-panel-item-hover-transform)}.Carousel:focus-within nav.panel,.Carousel:focus-within .viewport li nav,.Carousel:focus nav.panel,.Carousel:focus .viewport li nav,.Carousel:hover nav.panel,.Carousel:hover .viewport li nav{opacity:1;visibility:var(--carousel-nav-visibility)}.Carousel:focus-within .viewport li .controller,.Carousel:focus .viewport li .controller,.Carousel:hover .viewport li .controller{animation-name:none;animation-play-state:paused}.Carousel.autoplay .viewport li .controller{animation-name:carousel-animate-to-next, carousel-animate-snap;animation-duration:calc(var(--carousel-autoplay-timing) * 1ms);animation-timing-function:var(--carousel-autoplay-timing-function);animation-iteration-count:var(--carousel-autoplay-iteration)}.Carousel.autoplay .viewport li:last-child .controller{animation-name:carousel-animate-to-start, carousel-animate-snap}`

	CSSTablet = ``

	CSSDesktop = ``

	CSSWidescreen = ``

	CSSPrint = `.Carousel:not(.print){display:none}.Carousel:not(.print) .viewport{display:none}.Carousel:not(.print) .viewport nav,.Carousel:not(.print) .viewport article{display:none}.Carousel:not(.print) nav.panel{display:none}.Carousel.print{display:block;position:static;height:fit-content}.Carousel.print .viewport{display:block;position:static;height:fit-content}.Carousel.print .viewport li{margin:var(--carousel-print-margin);height:var(--carousel-height);break-inside:avoid;-webkit-print-color-adjust:exact;color-adjust:exact}.Carousel.print .viewport li article{position:static}.Carousel.print .viewport li nav{display:none}.Carousel.print nav.panel{display:none}`

	CSSVariables    = ``

	CSSVariablesAMP = ``
)

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 = internal.AMPPrefix + Name

	// ParametersComment are the list of comment headers
	// describing inputs.
	ParametersComment = `
{{- /* .ID                = Carousel ID                                 */ -}}
{{- /* .Class             = Carousel class attribute                    */ -}}
{{- /* .Timing            = Carousel timing (milliseconds)              */ -}}
{{- /* .Autoplay          = Carousel autoplay flag (true/false)         */ -}}
{{- /* .Height            = Carousel height                             */ -}}
{{- /* .Width             = Carousel width                              */ -}}
{{- /* .Layout            = Carousel style layout (used in AMP)         */ -}}
{{- /* .Total             = Carousel total slides (round number)        */ -}}
{{- /* .HideNav           = Hide Carousel nav control (true/false)      */ -}}
{{- /* .ShowPrint         = Print Carousel onto paper (true/false)      */ -}}
{{- /* .Next              = Navigation Next button HTML codes           */ -}}
{{- /* .Previous          = Navigation Previous button HTML codes       */ -}}
{{- /* .Slides            = Carousel slides list                        */ -}}
{{- /*      .ID           = Slide ID                                    */ -}}
{{- /*      .Position     = Slide Sorted Position Number (round)        */ -}}
{{- /*      .Thumbnail    = Thumbnail in HTML5 for filling nav panel    */ -}}
{{- /*      .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 {{- if .ID }} id="{{- .ID -}}" {{- end }}

	class="Carousel

		{{- if .Class }} {{ .Class -}}{{- end -}}

		{{- if .ShowPrint }} print{{- end -}}

		{{- if .Autoplay }} autoplay{{- end -}}

	"
{{- if or .Width .Height }}

	style="{{- if .Height }}--carousel-height: {{ .Height -}};{{- end -}}

		{{- if .Width }}--carousel-width: {{ .Width -}};{{- end -}}

		{{- if .Total }}--carousel-total: {{ .Total -}};{{- end -}}

		{{- if .Timing }}--carousel-autoplay-timing: {{ .Timing -}};{{- end -}}

		{{- if .HideNav }}--carousel-nav-visibility: hidden;{{- end -}}

	"
{{- end -}}>

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

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

			<div class="controller"></div>

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

			<nav>

				<a class="previous"

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

						{{- $slide.Previous.Position -}}">

					{{- $main.Previous -}}

				</a>

				<a class="next"

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

						{{- $slide.Next.Position -}}">

					{{- $main.Next -}}

				</a>

			</nav>

		</li>
{{- end }}

	</ol>

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

		<li><a href="#{{- $slide.ID -}}-{{- $slide.Position -}}">

			{{- $slide.Thumbnail -}}

		</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 }}
{{- if (not .HideNav) }}

	controls
{{- end }}

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

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

Data

type Data struct {
	ID        string
	Class     string
	Timing    string
	Height    string
	Width     string
	Layout    string
	Next      string
	Previous  string
	Slides    []Slide
	Total     uint
	Autoplay  bool
	HideNav   bool
	ShowPrint bool
}

Data is the data structure for rendering the component.

Slide

type Slide struct {
	Next      *Slide
	Previous  *Slide
	ID        string
	Thumbnail string
	Content   string
	Position  uint
}

Slide is a single content data for each carousel slide.