From beaa10b6741411cfd29658c97dd57e8beb5d5773 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Thu, 9 Aug 2018 22:37:44 +0100
Subject: [PATCH] widgets: Add carousel

Close #622
---
 exampleSite/content/home/hero_carousel.md   | 57 +++++++++++++++++++
 layouts/partials/widget_page.html           |  2 +-
 layouts/partials/widgets/hero_carousel.html | 61 +++++++++++++++++++++
 3 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 exampleSite/content/home/hero_carousel.md
 create mode 100644 layouts/partials/widgets/hero_carousel.html

diff --git a/exampleSite/content/home/hero_carousel.md b/exampleSite/content/home/hero_carousel.md
new file mode 100644
index 00000000..19de9b33
--- /dev/null
+++ b/exampleSite/content/home/hero_carousel.md
@@ -0,0 +1,57 @@
++++
+# Hero Carousel widget.
+widget = "hero_carousel"
+active = false
+date = 2017-10-15T00:00:00
+
+# Order that this section will appear in.
+weight = 1
+
+# Slide interval.
+# Use `false` to disable animation or enter a time in ms, e.g. `5000` (5s).
+interval = false
+
+# Minimum slide height.
+# Specify a height to ensure a consistent height for each slide.
+height = "300px"
+
+# Slides.
+# Duplicate an `[[item]]` block to add more slides.
+[[item]]
+  title = "Hello"
+  content = "I am center aligned :smile:"
+  align = "center"  # Choose `center`, `left`, or `right`.
+
+  # Overlay a color or image (optional).
+  #   Deactivate an option by commenting out the line, prefixing it with `#`.
+  overlay_color = "#666"  # An HTML color value.
+  overlay_img = "headers/bubbles-wide.jpg"  # Image path relative to your `static/img/` folder.
+  overlay_filter = 0.5  # Darken the image. Value in range 0-1.
+
+  # Call to action button (optional).
+  #   Activate the button by specifying a URL and button label below.
+  #   Deactivate by commenting out parameters, prefixing lines with `#`.
+  cta_label = "Get Academic"
+  cta_url = "https://sourcethemes.com/academic/"
+  cta_icon_pack = "fa"
+  cta_icon = "graduation-cap"
+
+[[item]]
+  title = "Left"
+  content = "I am left aligned :smile:"
+  align = "left"
+
+  overlay_color = "#555"  # An HTML color value.
+  overlay_img = ""  # Image path relative to your `static/img/` folder.
+  overlay_filter = 0.5  # Darken the image. Value in range 0-1.
+
+[[item]]
+  title = "Right"
+  content = "I am right aligned :smile:"
+  align = "right"
+
+  overlay_color = "#333"  # An HTML color value.
+  overlay_img = ""  # Image path relative to your `static/img/` folder.
+  overlay_filter = 0.5  # Darken the image. Value in range 0-1.
+
++++
diff --git a/layouts/partials/widget_page.html b/layouts/partials/widget_page.html
index 6268ac5b..1205e701 100644
--- a/layouts/partials/widget_page.html
+++ b/layouts/partials/widget_page.html
@@ -15,7 +15,7 @@
 {{ range $index, $page := where (where .Data.Pages "Section" $section) ".Params.active" "!=" false }}
   {{ $params := dict "root" $ "page" $page }}
   {{ $widget := printf "widgets/%s.html" ( or $page.Params.widget "custom" ) }}
-  {{ if eq $page.Params.widget "hero" }}
+  {{ if in (slice "hero" "hero_carousel") $page.Params.widget }}
     {{ partial $widget $params }}
   {{ else }}
   <section id="{{ $page.File.TranslationBaseName }}" class="home-section">
diff --git a/layouts/partials/widgets/hero_carousel.html b/layouts/partials/widgets/hero_carousel.html
new file mode 100644
index 00000000..a0c604c4
--- /dev/null
+++ b/layouts/partials/widgets/hero_carousel.html
@@ -0,0 +1,61 @@
+{{ $ := .root }}
+{{ $page := .page }}
+
+<section id="{{ $page.File.TranslationBaseName }}" class="carousel slide" data-ride="carousel" data-interval="{{if isset $page.Params "interval"}}{{$page.Params.interval}}{{else}}5000{{end}}">
+
+  <!-- Indicators -->
+  <ol class="carousel-indicators carousel-indicators-botleft">
+    {{ range $index, $item := $page.Params.item }}
+    <li data-target="#{{ $page.File.TranslationBaseName }}" data-slide-to="{{ $index }}" {{ if eq $index 0 }}class="active"{{ end }}></li>
+    {{ end }}
+  </ol>
+
+  <!-- Carousel slides wrapper -->
+  <div class="carousel-inner" style="min-height: {{$page.Params.height | default "300px"}};">
+    {{ range $index, $item := $page.Params.item }}
+    <div class="hero-overlay item{{ if eq $index 0 }} active{{ end }}" style="min-height: inherit;
+      {{ if $item.overlay_color }}
+      background-color: {{ $item.overlay_color | default "transparent" }};
+      {{ end }}
+      {{ if $item.overlay_img }}
+      background-image:
+      {{ if $item.overlay_filter }}linear-gradient(rgba(0, 0, 0, {{ $item.overlay_filter }}), rgba(0, 0, 0, {{ $item.overlay_filter }})), {{ end }}
+      url('{{ printf "img/%s" $item.overlay_img | absURL}}');
+      {{ end }}
+      ;">
+      <div class="container" style="text-align: {{$item.align | default "left"}};">
+          <h1 class="hero-title" itemprop="headline">
+            {{ with $item.title }}{{ . | markdownify | emojify }}{{ end }}
+          </h1>
+
+          {{ with $item.content }}
+          <p class="hero-lead" style="{{if eq $item.align "center"}}margin: 0 auto 0 auto;{{else if eq $item.align "right"}}margin-left: auto; margin-right: 0{{end}}">
+            {{ . | markdownify | emojify }}
+          </p>
+          {{ end }}
+
+          {{ if $item.cta_url }}
+          {{ $pack := or .icon_pack "fa" }}
+          <p>
+            <a href="{{ $item.cta_url }}" class="btn btn-light btn-outline btn-large">
+              {{- with $item.cta_icon -}}<i class="{{ $pack }} {{ $pack }}-{{ . }}" style="padding-right: 10px;"></i>{{- end -}}
+              {{- $item.cta_label | emojify | safeHTML -}}
+            </a>
+          </p>
+          {{ end }}
+        </div>
+    </div>
+    {{ end }}
+  </div>
+
+  <!-- Left and right controls -->
+  <a class="left carousel-control" href="#{{ $page.File.TranslationBaseName }}" data-slide="prev">
+    <span class="glyphicon glyphicon-chevron-left"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#{{ $page.File.TranslationBaseName }}" data-slide="next">
+    <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="sr-only">Next</span>
+  </a>
+
+</section>