workarea-super_hero 2.2.1

data/app/assets/javascripts/workarea/storefront/super_hero/modules/vimeo_api.js

@@ -0,0 +1,85 @@
+/**
+ * @namespace WORKAREA.vimeoApi
+ */
+WORKAREA.registerModule('vimeoApi', (function () {
+    'use strict';
+
+    var getIframe = function(player_id) {
+            return $('#'+player_id);
+        },
+
+        getLabel = function(iframe) {
+            var iframeSrc = iframe.attr('src').split('?')[0],
+                label = iframeSrc;
+
+            if (iframe.data('title')) {
+                label += ' (' + iframe.data('title') + ')';
+            } else if (iframe.attr('title')) {
+                label += ' (' + iframe.attr('title') + ')';
+            }
+
+            return label;
+        },
+
+        sendEvent = function (id, action) {
+            var iframe = getIframe(id),
+                label = getLabel(iframe);
+
+            WORKAREA.analytics.fireCallback(
+                'vimeo',
+                {
+                    'eventCategory': 'Vimeo',
+                    'eventAction': action,
+                    'eventLabel': label,
+                    'eventValue': undefined
+                }
+            );
+        },
+
+        muteVideo = function (player) {
+            player.setVolume(0);
+        },
+
+        onPlay = function (playerData) {
+            sendEvent(playerData.player_id, 'Play Video');
+        },
+
+        onPause = function (playerData) {
+            sendEvent(playerData.player_id, 'Paused video');
+        },
+
+        onFinish = function (playerData) {
+            sendEvent(playerData.player_id, 'Completed video');
+        },
+
+        parseOptions = function (index, iframe) {
+            var player = new Vimeo.Player(iframe),
+                playerData = $(iframe).data('vimeoApi');
+
+            if (playerData.mute === 'true') {
+                muteVideo(player);
+            }
+
+            player.on('play', _.partial(onPlay, playerData));
+            player.on('pause', _.partial(onPause, playerData));
+            player.on('finish', _.partial(onFinish, playerData));
+        },
+
+        injectSDK = function($vimeoIframes) {
+            $.getScript('https://player.vimeo.com/api/player.js', function() {
+                $vimeoIframes.each(parseOptions);
+            });
+        },
+
+        init = function ($scope) {
+            var $vimeoIframes = $('[data-vimeo-api]', $scope);
+
+            if (_.isEmpty($vimeoIframes)) { return; }
+
+            injectSDK($vimeoIframes);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/storefront/super_hero/modules/youtube_api.js

@@ -0,0 +1,122 @@
+/**
+ * @namespace WORKAREA.youtubeApi
+ */
+WORKAREA.registerModule('youtubeApi', (function () {
+    'use strict';
+
+    var getIframe = function(player_id) {
+            return $('#'+player_id);
+        },
+
+        getLabel = function(iframe) {
+            var iframeSrc = iframe.attr('src').split('?')[0],
+                label = iframeSrc;
+
+            if (iframe.data('title')) {
+                label += ' (' + iframe.data('title') + ')';
+            } else if (iframe.attr('title')) {
+                label += ' (' + iframe.attr('title') + ')';
+            }
+
+            return label;
+        },
+
+        sendEvent = function (id, action) {
+            var iframe = getIframe(id),
+                label = getLabel(iframe);
+
+            WORKAREA.analytics.fireCallback(
+                'youtube',
+                {
+                    'eventCategory': 'Youtube',
+                    'eventAction': action,
+                    'eventLabel': label,
+                    'eventValue': undefined
+                }
+            );
+        },
+
+        onPlay = function (playerId) {
+            sendEvent(playerId, 'Play Video');
+        },
+
+        onPause = function (playerId) {
+            sendEvent(playerId, 'Paused video');
+        },
+
+        onFinish = function (playerId) {
+            sendEvent(playerId, 'Completed video');
+        },
+
+        handlePlayerState = function(playerId, state) {
+            var stateMap = {
+                    '-1': 'unstarted',
+                    '0': 'ended',
+                    '1': 'playing',
+                    '2': 'paused',
+                    '3': 'buffering',
+                    '5': 'queued'
+                },
+                currentState = stateMap[state.data];
+
+            if (currentState === 'playing') {
+                onPlay(playerId);
+            } else if (currentState === 'paused') {
+                onPause(playerId);
+            } else if (currentState === 'ended') {
+                onFinish(playerId);
+            }
+        },
+
+        onPlayerReady = function (playerData, event) {
+            var player = event.target;
+
+            if (playerData.mute === 'true') {
+                player.mute();
+            }
+        },
+
+        setupPlayer = function (index, iframe) {
+            var playerData = $(iframe).data('youtubeApi'),
+                playerId = $(iframe).attr('id'),
+                player = new YT.Player(playerId, {
+                    events: {
+                        'onReady': _.partial(onPlayerReady, playerData),
+                        'onStateChange': _.partial(handlePlayerState, playerId)
+                    }
+                });
+            return player;
+        },
+
+        scriptLoaded = function ($scope) {
+            var $youtubeIframes = $('[data-youtube-api]', $scope);
+
+            $youtubeIframes.each(setupPlayer);
+        },
+
+        injectSDK = function () {
+            $.getScript('https://www.youtube.com/player_api');
+        },
+
+        init = function ($scope) {
+            var $youtubeIframes = $('[data-youtube-api]', $scope);
+
+            if (_.isEmpty($youtubeIframes)) { return; }
+
+            injectSDK();
+        };
+
+    return {
+        init: init,
+        scriptLoaded: scriptLoaded
+    };
+}()));
+
+/**
+ * onYouTubeIframeAPIReady is called by YouTube API
+ * This is executed when the API is ready to go.
+ */
+/*eslint no-unused-vars: 0 */
+function onYouTubeIframeAPIReady() {
+    WORKAREA.youtubeApi.scriptLoaded($(document));
+}

data/app/assets/stylesheets/workarea/admin/super_hero/components/_position_grid.scss

@@ -0,0 +1,27 @@
+/*------------------------------------*\
+    #POSITION-GRID
+\*------------------------------------*/
+
+$position-grid-cell-fill-color:           $white;
+$position-grid-cell-fill-color-hover:     $light-gray;
+$position-grid-cell-path-color:           $gray;
+
+.position-grid {
+    height: 150px;
+}
+
+.position-grid--input {
+    display: none;
+}
+
+    .position-grid__cell {
+        fill: $position-grid-cell-fill-color;
+
+        &:hover {
+            fill: $position-grid-cell-fill-color-hover;
+        }
+    }
+
+    .position-grid__cell-path {
+        fill: $position-grid-cell-path-color;
+    }

data/app/assets/stylesheets/workarea/storefront/super_hero/components/_content_position.scss

@@ -0,0 +1,46 @@
+/*------------------------------------*\
+    #CONTENT-POSITION
+\*------------------------------------*/
+
+$positioning-offset: 5% !default;
+
+
+.content-position {}
+
+    .content-position--top {
+        top: $positioning-offset;
+    }
+
+    .content-position--middle {
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .content-position--bottom {
+        bottom: $positioning-offset;
+    }
+
+    .content-position--left {
+        @include respond-to($medium-breakpoint) {
+            left: $positioning-offset;
+        }
+    }
+
+    .content-position--center {
+        @include respond-to($medium-breakpoint) {
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        
+        &.content-position--middle {
+            @include respond-to($medium-breakpoint) {
+                transform: translate(-50%, -50%);
+            }
+        }
+    }
+
+    .content-position--right {
+        @include respond-to($medium-breakpoint) {
+            right: $positioning-offset;
+        }
+    }

data/app/assets/stylesheets/workarea/storefront/super_hero/components/_super_hero_content_block.scss

@@ -0,0 +1,69 @@
+/*------------------------------------*\
+    #SUPER-HERO-CONTENT-BLOCK
+\*------------------------------------*/
+
+$super-hero-content-block-content-max-width: 50% !default;
+
+
+.super-hero-content-block {
+    position: relative;
+    overflow: hidden;
+}
+
+.super-hero-content-block--hide-mobile {
+    display: none;
+
+    @include respond-to($medium-breakpoint) {
+        display: block;
+    }
+}
+
+    /**
+     * 1. Above .super-hero-content-block__media-container
+     */
+
+    .super-hero-content-block__content {
+        position: absolute;
+        z-index: 10; /* [1] */
+        padding: $spacing-unit * 2;
+        max-width: $super-hero-content-block-content-max-width;
+    }
+
+    .super-hero-content-block__media-container {}
+
+    .super-hero-content-block__media-container--maintain-aspect-ratio {
+        width: 100%;
+        height: 0;
+
+        .super-hero-content-block__media {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+        .super-hero-content-block__media {}
+
+        .super-hero-content-block__media--resize {
+            background-size: contain;
+            background-repeat: no-repeat;
+        }
+
+        .super-hero-content-block__media--crop {
+            position: absolute;
+            background-size: cover;
+        }
+
+        .super-hero-content-block__media--crop-center {
+            background-position: 50% 50%;
+        }
+
+        .super-hero-content-block__media--crop-right {
+            background-position: 100% 0%;
+        }
+
+        .super-hero-content-block__media--crop-left {
+            background-position: 0% 100%;
+        }
+
+        .super-hero-content-block__media--switch {}

data/app/models/workarea/content/fields/media_mode.rb

@@ -0,0 +1,8 @@
+module Workarea
+  class Content
+    module Fields
+      class MediaMode < Field
+      end
+    end
+  end
+end

data/app/models/workarea/content/fields/video_advanced.rb

@@ -0,0 +1,8 @@
+module Workarea
+  class Content
+    module Fields
+      class VideoAdvanced < Field
+      end
+    end
+  end
+end

data/app/services/workarea/storefront/color_tools.rb

@@ -0,0 +1,24 @@
+module Workarea
+  module Storefront
+    class ColorTools
+      def initialize(color)
+        @color = color
+      end
+
+      def rgba
+        if @color[:hex] =~ /#(..)(..)(..)/
+          "#{hex_to_rgb}, #{alpha}"
+        end
+      end
+
+      def alpha
+        @color[:alpha].to_f / 100.0
+      end
+
+      def hex_to_rgb
+        r, g, b = @color[:hex].match(/#(..)(..)(..)/).captures
+        "#{r.hex}, #{g.hex}, #{b.hex}"
+      end
+    end
+  end
+end

data/app/services/workarea/storefront/video_embedder/vimeo.rb

@@ -0,0 +1,50 @@
+module Workarea
+  module Storefront
+    class VideoEmbedder
+      class Vimeo
+        def initialize(embed_code, options = {})
+          @embed_code = embed_code
+          @options = options
+        end
+
+        def attrs
+          {
+            id: vimeo_id,
+            src: "#{url}?#{url_params}",
+            webkitallowfullscreen: '',
+            mozallowfullscreen: '',
+            data: {
+              vimeo_api: {
+                player_id: vimeo_id,
+                mute: @options[:mute]
+              }.to_json
+            }
+          }
+        end
+
+        def url_params
+          parsed_query = Rack::Utils.parse_query(uri.query)
+          parsed_query['api'] = 1
+          parsed_query['autoplay'] = @options[:autoplay]
+          parsed_query['loop'] = @options[:loop_playback]
+          parsed_query['player_id'] = vimeo_id
+          uri.query = URI.encode_www_form(parsed_query)
+        end
+
+        private
+
+          def vimeo_id
+            uri.path.split('/').last
+          end
+
+          def url
+            @url ||= @embed_code.attribute('src').value
+          end
+
+          def uri
+            URI.parse(url)
+          end
+      end
+    end
+  end
+end

data/app/services/workarea/storefront/video_embedder/youtube.rb

@@ -0,0 +1,56 @@
+module Workarea
+  module Storefront
+    class VideoEmbedder
+      class Youtube
+        def initialize(embed_code, options = {})
+          @embed_code = embed_code
+          @options = options
+        end
+
+        def attrs
+          {
+            id: "youtube-#{youtube_id}",
+            src: "#{url}?#{url_params}",
+            data: {
+              youtube_api: {
+                mute: @options[:mute]
+              }.to_json
+            }
+          }
+        end
+
+        def url_params
+          parsed_query = Rack::Utils.parse_query(uri.query)
+          parsed_query['enablejsapi'] = 1
+          parsed_query['autoplay'] = autoplay
+          parsed_query['loop'] = loop_playback
+          parsed_query['videoId'] = youtube_id
+
+          URI.encode_www_form(parsed_query)
+        end
+
+        private
+
+          def youtube_id
+            uri.path.split('/').last
+          end
+
+          def autoplay
+            @options[:autoplay] ? 1 : 0
+          end
+
+          def loop_playback
+            @options[:loop_playback] ? 1 : 0
+          end
+
+          def url
+            @url ||= @embed_code.attribute('src').value
+          end
+
+          def uri
+            URI.parse(url)
+          end
+      end
+    end
+  end
+end

data/app/services/workarea/storefront/video_embedder.rb

@@ -0,0 +1,59 @@
+module Workarea
+  module Storefront
+    class VideoEmbedder
+      def initialize(embed_code, options = {})
+        @embed_code = Nokogiri::HTML.fragment(embed_code).children.first
+        @options = options
+      end
+
+      def iframe_attrs
+        attrs = {
+          frameborder: '0',
+          allowfullscreen: '',
+          container_style: "padding-bottom: #{aspect_ratio}%"
+        }
+
+        service_embed_code = if vimeo?
+          Vimeo.new(@embed_code, @options)
+        elsif youtube?
+          Youtube.new(@embed_code, @options)
+        end
+
+        attrs.merge(service_embed_code.attrs)
+      end
+
+      def vimeo?
+        host =~ /vimeo/ ? true : false
+      end
+
+      def youtube?
+        host =~ /youtube/ ? true : false
+      end
+
+      private
+
+        def url
+          @url ||= @embed_code.attribute('src').value
+        end
+
+        def uri
+          URI.parse(url)
+        end
+
+        def host
+          uri.host
+        end
+
+        def aspect_ratio
+          height = @embed_code.attribute('height').value
+          width = @embed_code.attribute('width').value
+          ratio = height.to_f / width.to_f
+          ratio * 100
+        end
+
+        def parse_vimeo_id
+          @embed_code.attribute('id').value
+        end
+    end
+  end
+end

data/app/view_models/workarea/storefront/content_blocks/super_hero_view_model.rb

@@ -0,0 +1,79 @@
+module Workarea
+  module Storefront
+    module ContentBlocks
+      class SuperHeroViewModel < ContentBlockViewModel
+        def image_medium_url
+          if data[:asset_medium].present?
+            find_asset(data[:asset_medium]).url
+          else
+            image.url
+          end
+        end
+
+        def image_small_url
+          if data[:asset_small].present?
+            find_asset(data[:asset_small]).url
+          else
+            image.url
+          end
+        end
+
+        def breakpoints
+          Workarea.config.storefront_break_points
+        end
+
+        def image
+          @image ||= find_asset(data[:asset])
+        end
+
+        def alt_text
+          model.data[:alt_text].presence
+        end
+
+        def media_class
+          if model.data[:media_mode] == 'crop'
+            "crop super-hero-content-block__media--crop-#{model.data[:crop_side]}"
+          else
+            model.data[:media_mode]
+          end
+        end
+
+        def media_styles
+          if model.data[:media_mode] == 'resize'
+            "padding-bottom: #{image.file_inverse_aspect_ratio * 100}%"
+          elsif model.data[:media_mode] == 'crop'
+            "padding-bottom: #{image.height}px"
+          end
+        end
+
+        def video_iframe_attrs
+          return unless model.data[:video].present?
+          embed_code = VideoEmbedder.new(
+            model.data[:video],
+            autoplay: model.data[:autoplay],
+            loop_playback: model.data[:loop],
+            mute: model.data[:mute]
+          )
+          embed_code.iframe_attrs
+        end
+
+        def content_class
+          content_class = 'content-position '
+          model.data[:content_position].split(',').each do |pos|
+            content_class << "content-position--#{pos.optionize} "
+          end
+          return content_class
+        end
+
+        def content_styles
+          background_color = ColorTools.new(
+            hex: model.data[:background_color],
+            alpha: model.data[:background_alpha]
+          )
+
+          "color: #{model.data[:text_color]}; background-color: rgba(#{background_color.rgba});"
+        end
+      end
+    end
+  end
+end

data/app/views/workarea/admin/content_blocks/_media_mode.html.haml

@@ -0,0 +1,3 @@
+.property
+  = label_tag dom_id(block, field.slug), field.name, class: 'property__name'
+  = select_tag "block[data][#{field.slug}]", options_for_select([['Resize', 'resize'],['Crop', 'crop'], ['Switch', 'switch'], ['Video', 'video']], block.data["#{field.slug}"]), id: dom_id(block, field.slug), data: { media_mode: 'control' }

data/app/views/workarea/admin/content_blocks/_video_advanced.html.haml

@@ -0,0 +1,12 @@
+.property{ class: ('property--required' if field.required?), data: field.options[:html_data_attributes] }
+  = label_tag dom_id(block, field.slug), field.name, class: 'property__name'
+  = text_area_tag "block[data][#{field.slug}]", block.data[field.slug], id: dom_id(block, field.slug), class: 'text-box text-box--multi-line text-box--i18n'
+
+.property{ data: field.options[:html_data_attributes] }
+  %p.property__name
+    %span.property__text= t("workarea.admin.content_blocks.video_advanced.video_options")
+  .value
+    - %w(autoplay loop mute).each do |option|
+      .property.property--stacked.property--inline-with-label
+        = label_tag dom_id(block, :"#{option}_for"), option.capitalize, class: 'property__name'
+        = select_tag "block[data][#{option}]", options_for_select([['No', 'false'], ['Yes', 'true']], block.data["#{option}"]), id: dom_id(block, "#{option}_for")