feat(Components/SliderMedia): add component (#181)

* feat(Components/SliderMedia): refactored component

* fix(Components/SliderMedia): fixed lint error

* fix(Components/SliderMedia): set default src to a resize image value

* fix(Components/SliderMedia): added default img src with resize to OembedVideo Partial

* refactor(Components/SliderMedia): refactored javascript and finetuned fields.json

* refactor(Components/SliderMedia): refactored js events

* refactor(Components/SliderMedia): change double in single quotes in stylus

Components/SliderMedia/Partials/Image/_style.styl

@@ -0,0 +1,4 @@
+.image
+  display: block
+  height: auto
+  max-width: 100%

Components/SliderMedia/Partials/Image/index.twig

@@ -0,0 +1,7 @@
+<img class="image" srcset="
+  {{ mediaSlide.image.src | resize(400, 200) }} 400w,
+  {{ mediaSlide.image.src | resize(800, 400) }} 800w,
+  {{ mediaSlide.image.src | resize(1200, 600) }} 1200w,
+  {{ mediaSlide.image.src | resize(1600, 800) }} 1600w"
+  src="{{ mediaSlide.image.src | resize(1200, 600) }}"
+  sizes="100vw">

Components/SliderMedia/Partials/OembedVideo/_playButton.styl

@@ -0,0 +1,62 @@
+$colorGray = lookup('$global-color-gray') || #333
+$colorWhite = lookup('$global-color-white') || #fff
+$backgroundOpacity = .5
+$borderWidth = 5px
+$transitionTime = .3s
+$transitionEasing = ease
+
+$playButtonCircleDiameter = {
+  'desktop': 100px,
+  'mobile': 60px
+}
+
+$playButtonTriangleSize = {
+  'desktop': 40px,
+  'mobile': 20px
+}
+
+$pseudoElementDefaults = {
+  content: ''
+  left: 50%
+  position: absolute
+  top: 50%
+  transition: transform $transitionTime $transitionEasing
+}
+
+playButton(pseudoElementDefaults, colorPlayButton, backgroundOpacity, borderWidth, colorBorder, playButtonCircleDiameter, colorTriangle, playButtonTriangleSize)
+  &::before
+    {pseudoElementDefaults}
+    background-color: rgba(colorPlayButton, backgroundOpacity)
+    border: borderWidth solid colorBorder
+    border-radius: (playButtonCircleDiameter.desktop / 2)
+    height: playButtonCircleDiameter.desktop
+    margin-top: -(playButtonCircleDiameter.desktop / 2)
+    margin-left: -(playButtonCircleDiameter.desktop / 2)
+    width: playButtonCircleDiameter.desktop
+
+    +below('s')
+      height: playButtonCircleDiameter.mobile
+      margin-top: -(playButtonCircleDiameter.mobile / 2)
+      margin-left: -(playButtonCircleDiameter.mobile / 2)
+      width: playButtonCircleDiameter.mobile
+
+  &::after
+    {pseudoElementDefaults}
+    border-bottom: (playButtonTriangleSize.desktop / 2) solid transparent
+    border-left: playButtonTriangleSize.desktop solid colorTriangle
+    border-top: (playButtonTriangleSize.desktop / 2) solid transparent
+    height: 0
+    margin-top: -(playButtonTriangleSize.desktop / 2)
+    margin-left:-(playButtonTriangleSize.desktop / 2 * .9)
+    width: 0
+
+    +below('s')
+      border-bottom: (playButtonTriangleSize.mobile / 2) solid transparent
+      border-left: playButtonTriangleSize.mobile solid colorTriangle
+      border-top: (playButtonTriangleSize.mobile / 2) solid transparent
+      margin-top: -(playButtonTriangleSize.mobile / 2)
+      margin-left: -(playButtonTriangleSize.mobile / 2 * .9)
+
+  &:hover::before,
+  &:hover::after
+    transform: scale(1.1)

Components/SliderMedia/Partials/OembedVideo/_style.styl

@@ -0,0 +1,36 @@
+@import '_playButton'
+
+.oembedVideo
+  position: relative
+
+  &-posterImageWrapper
+    cursor: pointer
+    position: absolute
+    transition: visibility $transitionTime $transitionEasing
+    visibility: visible
+    z-index: 1
+    playButton($pseudoElementDefaults, $colorGray, $backgroundOpacity, $borderWidth, $colorWhite, $playButtonCircleDiameter, $colorWhite, $playButtonTriangleSize)
+
+    &-isHidden
+      visibility: hidden
+
+  &-posterImageElement
+    display: block
+    height: auto
+    max-width: 100%
+
+  &-video
+    height: 0
+    padding-bottom: percentage(9 / 16)
+    visibility: hidden
+
+    &-isVisible
+      visibility: visible
+
+    iframe
+      display: block
+      height: 100%
+      left: 0
+      position: absolute
+      top: 0
+      width: 100%

Components/SliderMedia/Partials/OembedVideo/index.twig

@@ -0,0 +1,15 @@
+<div class="oembedVideo">
+  <div class="oembedVideo-posterImageWrapper">
+    <img class="oembedVideo-posterImageElement" srcset="
+      {{ posterImage.src | resize(400, 225) }} 400w,
+      {{ posterImage.src | resize(800, 450) }} 800w,
+      {{ posterImage.src | resize(1200, 675) }} 1200w,
+      {{ posterImage.src | resize(1600, 900) }} 1600w"
+      src="{{ posterImage.src | resize(1200, 675) }}"
+      sizes="100vw"
+      alt="{{ posterImage.alt }}" />
+  </div>
+  <div class="oembedVideo-video">
+    {{ oembedLazyLoad }}
+  </div>
+</div>

Components/SliderMedia/Partials/SlideTitle/_style.styl

@@ -0,0 +1,21 @@
+.slideTitle
+  text-align: center
+  width: 100%
+
+  &-isHidden
+    display: none
+
+  &--overlayTitleTop // title overlays the media
+    position: absolute
+    top: 15px // Offset of the title to the edges of the slider
+    z-index: 2
+
+  &--overlayTitleBottom
+    bottom: 15px // Offset of the title to the edges of the slider
+    position: absolute
+    z-index: 2
+
+  &-content
+    background: #fff
+    display: inline-block
+    padding: 10px

Components/SliderMedia/Partials/SlideTitle/howto.md

@@ -0,0 +1,13 @@
+# Developer HowTo´s
+
+## Title Overlays Media
+
+`index.twig`
+
+```html
+<!-- Align Top -->
+<div class="slideTitle slideTitle--overlayTitleTop"></div>
+
+<!-- Align Bottom -->
+<div class="slideTitle slideTitle--overlayTitleBottom"></div>
+```

Components/SliderMedia/Partials/SlideTitle/index.twig

@@ -0,0 +1,5 @@
+<div class="slideTitle slideTitle--overlayTitleTop">
+  <div class="slideTitle-content">
+    {{ mediaSlide.titleText }}
+  </div>
+</div>

Components/SliderMedia/_fontFace.styl

@@ -0,0 +1,7 @@
+fontFace($family, $file, $weight = 400, $style = 'normal', $basePath = '../../Components/DocumentDefault/Fonts/')
+  @font-face
+    font-family: $family
+    src: url($basePath + $file + '.eot')
+    src: url($basePath + $file + '.eot?#iefix') format('embedded-opentype'), url($basePath + $file + '.woff') format('woff'), url($basePath + $file + '.svg#'+ $family) format('svg')
+    font-style: unquote($style)
+    font-weight: $weight

Components/SliderMedia/_slickSliderStyling.styl

@@ -0,0 +1,68 @@
+$slideDotsOverlay = false // Should the navigation dots overlay the media?
+$slideDotsOffset = 15px // Offset of the dots to the edges of the slider
+$slideDotsVerticalPosition = 'top' // Defines if the dots should be on top/bottom of slider 'top' | 'bottom'
+$slideDotsSize = 12px // Size of a dot
+$slideDotColor = #fff // Color of the dot
+
+&-prevButton,
+&-nextButton
+  background: transparent
+  border: 0
+  color: #fff // Color of the arrows
+  cursor: pointer
+  font-family: 'slick'
+  font-size: 2em // Size of the arrows
+  margin: auto
+  opacity: 1
+  outline: 0
+  position: absolute
+  top: 50%
+  transform: translateY(-100%)
+  transition: all .25s
+  visibility: visible
+  z-index: 2
+
+  &.slick-disabled
+    opacity: 0
+    visibility: hidden
+
+&-prevButton
+  left: 15px
+
+&-nextButton
+  right: 15px
+
+.slick-dots
+  list-style: none
+  margin: 0
+  padding: 0
+  text-align: center
+  width: 100%
+
+  if $slideDotsOverlay
+    position: absolute
+    left: 0
+
+    if $slideDotsVerticalPosition is 'top'
+      top: $slideDotsOffset
+    else
+      bottom: $slideDotsOffset
+
+.slick-dots > li
+  display: inline-block
+  margin: 0 2px // Spacing between dot
+
+.slick-dots > li button
+  background: transparent
+  border-radius: 50%
+  border: 2px solid $slideDotColor
+  color: transparent
+  cursor: pointer
+  display: block
+  height: $slideDotsSize
+  outline: 0
+  padding: 0
+  width: $slideDotsSize
+
+.slick-dots > li.slick-active button
+  background: $slideDotColor

Components/SliderMedia/fields.json

@@ -0,0 +1,85 @@
+{
+  "globalOptions": [
+    {
+      "label": "Default Image",
+      "name": "defaultImage",
+      "type": "image",
+      "return_format": "array",
+      "preview_size": "thumbnail",
+      "library": "all",
+      "min_width": 1440,
+      "min_height": 720,
+      "instructions": "Recommended Size: Min-Width 1440px; Min-Height: 720px; Image-Format: JPG",
+      "mime_types": "jpg,jpeg"
+    }
+  ],
+  "translatableOptions": [
+    {
+      "name": "defaultTitleText",
+      "label": "Default Title Text",
+      "type": "text"
+    }
+  ],
+  "layout": {
+    "name": "sliderMedia",
+    "label": "Slider: Media",
+    "sub_fields": [
+      {
+        "label": "Media Slides",
+        "name": "mediaSlides",
+        "type": "repeater",
+        "layout": "row",
+        "button_label": "Add Slide",
+        "sub_fields": [
+          {
+            "label": "Media Type",
+            "name": "mediaType",
+            "type": "select",
+            "choices": {
+              "image": "Image",
+              "oembed": "Video"
+            },
+            "default_value": "image",
+            "allow_null": 0,
+            "multiple": 0,
+            "ui": 1,
+            "ajax": 0
+          },
+          {
+            "label": "Image",
+            "name": "image",
+            "type": "image",
+            "return_format": "array",
+            "preview_size": "thumbnail",
+            "library": "all",
+            "min_width": 1440,
+            "min_height": 720,
+            "instructions": "Recommended Size: Min-Width 1440px; Min-Height: 720px; Image-Format: JPG",
+            "mime_types": "jpg,jpeg"
+          },
+          {
+            "label": "Oembed",
+            "name": "oembed",
+            "type": "oembed",
+            "width": 100,
+            "height": 100,
+            "conditional_logic": [
+              [
+                {
+                  "fieldPath": "mediaType",
+                  "operator": "==",
+                  "value": "oembed"
+                }
+              ]
+            ]
+          },
+          {
+            "name": "titleText",
+            "label": "Title Text",
+            "type": "text"
+          }
+        ]
+      }
+    ]
+  }
+}

Components/SliderMedia/functions.php

@@ -0,0 +1,36 @@
+<?php
+namespace Flynt\Components\SliderMedia;
+
+use Flynt\Features\Components\Component;
+use Flynt\Utils\Oembed;
+
+add_filter('Flynt/addComponentData?name=SliderMedia', function ($data) {
+    $data['mediaSlides'] = array_map(function ($item) {
+        if ($item['mediaType'] == 'oembed') {
+            $item['oembedLazyLoad'] = Oembed::setOembedSrcAsDataAttribute(
+                $item['oembed'],
+                [
+                    'autoplay' => 'true'
+                ]
+            );
+        }
+        return $item;
+    }, $data['mediaSlides']);
+
+    return $data;
+});
+
+add_action('wp_enqueue_scripts', function () {
+    Component::enqueueAssets('SliderMedia', [
+        [
+            'name' => 'slick-carousel',
+            'path' => 'vendor/slick.js',
+            'type' => 'script'
+        ],
+        [
+            'name' => 'slick-carousel',
+            'path' => 'vendor/slick.css',
+            'type' => 'style'
+        ]
+    ]);
+});

Components/SliderMedia/index.twig

@@ -0,0 +1,16 @@
+<div is="flynt-slider-media" class="flyntComponent">
+  <div class="sliderMedia sliderMedia-isHidden">
+    <ul class="sliderMedia-slides">
+      {% for mediaSlide in mediaSlides %}
+        <li class="sliderMedia-slide">
+          {% if mediaSlide.mediaType == 'image' %}
+            {% include 'Partials/Image/index.twig' %}
+          {% elseif mediaSlide.mediaType == 'oembed' %}
+            {% include 'Partials/OembedVideo/index.twig' with {'posterImage': mediaSlide.image, 'oembedLazyLoad': mediaSlide.oembedLazyLoad } only %}
+          {% endif %}
+          {% include 'Partials/SlideTitle/index.twig' %}
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>