workarea-super_hero 2.2.1

data/CHANGELOG.md

@@ -0,0 +1,334 @@
+Workarea Super Hero 2.2.1 (2019-08-21)
+--------------------------------------------------------------------------------
+
+*   Open Source!
+
+
+
+Workarea Super Hero 2.2.0 (2019-06-11)
+--------------------------------------------------------------------------------
+
+*   Make image clickable when link is present
+
+    Uses the new link_to_if_with_block helper from Workarea v3.4 to make the background image clickable if a link URL is provided
+
+    WLSUPERHRO-21
+    Jake Beresford
+
+
+
+Workarea Super Hero 2.1.1 (2018-10-02)
+--------------------------------------------------------------------------------
+
+*   Add alt text to super hero when using 'switch' media mode
+
+    WLSUPERHRO-28
+    Jake Beresford
+
+
+
+Workarea Super Hero 2.1.0 (2018-05-31)
+--------------------------------------------------------------------------------
+
+*   Remove range field
+
+    The Range field was added to the Workarea platform in v3.3, this functionality has been removed from super hero to prevent conflicts and ensure compatibility.
+
+    WLSUPERHRO-26
+    Jake Beresford
+
+
+
+Workarea Super Hero 2.0.5 (2018-05-24)
+--------------------------------------------------------------------------------
+
+*   WLSUPERHRO-25: Add guard for if video APIs have already been added
+
+    Steve Perks
+
+
+
+Workarea Super Hero v2.0.4 (2018-02-12)
+--------------------------------------------------------------------------------
+
+*   Fix admin duplicate IDs in SVG icon
+
+    Jake Beresford
+
+
+
+Workarea Super Hero v2.0.3 (2018-02-08)
+--------------------------------------------------------------------------------
+
+*   Fix appends lambda
+
+    Jake Beresford
+
+
+
+Workarea Super Hero v2.0.2 (2018-01-11)
+--------------------------------------------------------------------------------
+
+*   Add missing methods to range.rb
+
+    Jake Beresford
+
+*   Add condition around range_field.js append
+
+    This module is also defined in the slider_block plugin, causing an error if both plugins are loaded in a host application. This condition helps prevent JS errors in the admin due to registering 2 modules with the same name.
+
+    WLSUPERHRO-22
+    Jake Beresford
+
+*   Add step attribute to range input
+
+    * Update range input for compatibility with workarea-slider_block
+    * Set default step value to 1, since we're dealing with % I doubt this will ever need to change
+
+    WLSUPERHRO-22
+    Jake Beresford
+
+
+
+Workarea Super Hero v2.0.1 (2017-06-06)
+--------------------------------------------------------------------------------
+
+*   Updates for CI
+
+    * Remove bundler gem tasks to prevent pushing to rubygems
+    * Rubocop passing
+    * add bundle-audit for CI
+    Beresford, Jake
+
+
+
+Workarea Super Hero v2.0.0 (2017-05-19)
+--------------------------------------------------------------------------------
+
+*   Fixes mute functionality for vimeo
+
+    * Upgrade to the latest vimeo player API, remove froogaloop.
+    * Fix vimeo event implementation
+    * refactor video embedder nokogiri traversal
+    * Fix some tests that were broken on another ticket
+    * Move logic for adding video service api data binding into the video embedder.
+    * Split video embedder logic by service
+    * Request vimeo and youtube SDK as necessary using getScript
+    * Implement youtube_api.js module
+    * Move append points to initializer
+    * Updated readme
+
+    WLSUPERHRO-15
+    Beresford, Jake
+
+*   Responsive images fall back to asset if undefined by admin user.
+
+    * updated view_model syntax to be same as base content blocks
+
+    WLSUPERHRO-17
+    Beresford, Jake
+
+*   Translate admin views
+
+    WLSUPERHRO-16
+    Dave Barnow
+
+*   Upgrade plugin for v3 compatability
+
+    Many things were changed to get this working, however
+    functionality is almost identical to v2. Key changes:
+
+    * Re-write blocktype using DSL
+    * Re-name workarea & storefront
+    * Asset lookup for size & ratio removed, use base asset lookup
+    * Removed color input styles, use base color input
+    * Tests converted to minitest
+
+    WLSUPERHRO-14
+    Beresford, Jake
+
+
+
+Workarea Super Hero v1.0.7 (2016-12-15)
+--------------------------------------------------------------------------------
+
+*   WLSUPERHRO-13: Add require version file to super_hero.rb add metadata to gemspec
+
+    Beresford, Jake
+
+
+
+Workarea Super Hero v1.0.6 (2016-07-20)
+--------------------------------------------------------------------------------
+
+*   WLSUPERHRO-10: Adds another blank line for code style
+
+    Dave Barnow
+
+*   WLSUPERHRO-10: Adds back in blank lines to conform to cssguidelin.es
+
+    Dave Barnow
+
+*   WLSUPERHRO-10: Fixes center positioning, readme markdown formatting
+
+    Dave Barnow
+
+
+
+Workarea Super Hero v1.0.5 (2016-06-30)
+--------------------------------------------------------------------------------
+
+*   WLSUPERHRO-9: Adds preset for media to prevent admin errors
+
+    Beresford, Jake
+
+*   WLSUPERHRO-9: Change logic when checking for embed codes to cover nil? and empty?
+
+    Beresford, Jake
+
+
+
+Workarea Super Hero v1.0.4 (2016-06-29)
+--------------------------------------------------------------------------------
+
+*   WLSUPERHRO-8: Fix range slider
+
+    Beresford, Jake
+
+
+
+Workarea Super Hero v1.0.3 (2016-06-15)
+--------------------------------------------------------------------------------
+
+*   WLSUPERHRO-7: Add test for youtube embed codes
+
+    Beresford, Jake
+
+*   WLSUPERHRO-7: change vimeo conditional to guard clause
+
+    Beresford, Jake
+
+*   WLSUPERHRO-7: return iframe attrs in video embedder to fix issue with youtube videos having nil attrs
+
+    Beresford, Jake
+
+
+
+Workarea Super Hero v1.0.1 (2016-05-31)
+--------------------------------------------------------------------------------
+
+*   WLSUPERHRO-6: Explicitly require froogaloop
+
+    bberg
+
+
+
+Workarea Super Hero v1.0.0 (2016-05-26)
+--------------------------------------------------------------------------------
+
+*   WLSUPERHRO-4: Remove logic for ga tracker detection
+
+    Beresford, Jake
+
+*   WLSUPERHRO-4: Fix pause event data and player_id
+
+    Beresford, Jake
+
+*   WLSUPERHRO-4: Add jsdoc comment
+
+    Beresford, Jake
+
+*   WLSUPERHRO-4: change implementation to use WEBLINC.analytics
+
+    Beresford, Jake
+
+*   WLSUPERHRO-4: Add vimeo event tracking for video interactions
+
+    Beresford, Jake
+
+*   WLSUPERHRO-4: move color and video embed classes out of view models and in to services, fix up tests accordingly
+
+    Beresford, Jake
+
+*   WLSUPERHRO-4: Fixes froogaloop integration, makes things work properly.
+
+    Beresford, Jake
+
+*   WLSUPERHRO-4: Adds vimeo api integration using froogaloop JS
+
+    Beresford, Jake
+
+*   WLSUPERHRO-2: Removes debugging statements and cleanup ruby style
+
+    Beresford, Jake
+
+*   WLSUPERHERO-2: Adds tests and refactor for video_embed_view_model
+
+    Beresford, Jake
+
+*   Complete color view model unit tests, refactor view model to remove args
+
+    Beresford, Jake
+
+*   WLSUPERHRO-2: Update spec tests, add tests for color view model
+
+    Beresford, Jake
+
+*   WLSUPERHRO-2: Break out color and video embed methods into classes, start writing unit tests
+
+    Beresford, Jake
+
+*   Update aspect ratio calculation, remove dummy hero image
+
+    Beresford, Jake
+
+*   Cleanup haml file dynamic classes and symbol syntax
+
+    Beresford, Jake
+
+*   Improve some JS logic, cleanup some sass spacing, get everything looking groovy
+
+    Beresford, Jake
+
+*   Decorate Content::Asset with dragonfly magic attributes, cleanup viewmodel and remove call to S3 for each view of the blocktype
+
+    Beresford, Jake
+
+*   Cleanup rake task and JS
+
+    Beresford, Jake
+
+*   Clean up the turtle's cape
+
+    Beresford, Jake
+
+*   Add necessary files for content block plugin
+
+    Clean up the filez
+    updates to view model and add range for bg alpha channel
+    add basic styles, fixup the view model, add some sweet color pickers, add markup for responsive images and media modes
+    Adds color picker styles, additional config options, position input SVG, SVg helper, media modes and toggle groups.
+    Some fixes and placeholders and other things I needed to fix before the demo. Position input is a POS and doesnt work yet.
+    Adds image attribute detection using dragonfly analysers
+    Get the content position input working, rename some things, shuffle things about
+    Simplify filename regex, remove extraneous styles
+    Clean up content position styles
+    Simplify content class in view model
+    Pulls responsive images out of maintain aspect ratio, clen up the view model some more, rename some local_assigns
+    Bring content area controls into admin view
+    Modify media-mode groups to use array.includes to give more flexibility in the UI
+    Get video embeds working for youtube and vimeo. Code needs TLC but it works for now.
+    Fixes logic around video vs. image
+    Clean up content position scss component
+    Fixes nesting of position input
+    Refactor content position logic and styles for less CSS
+    Js changes to position input
+    Remove use of this in js
+    Clean up media_modes js
+    Add lintier config dotfiles
+    Remove generic content-block classes
+
+    Beresford, Jake
+
+
+

data/Gemfile

@@ -0,0 +1,5 @@
+source 'https://rubygems.org'
+
+gemspec
+
+gem 'workarea', source: 'https://gems.weblinc.com'

data/README.md

@@ -0,0 +1,120 @@
+Workarea Super Hero
+================================================================================
+
+>Give your content super powers!
+
+Super Hero plugin for the Workarea platform.
+
+Configuring Super Hero for your app
+--------------------------------------------------------------------------------
+
+Superhero implements a content block type which no longer requires any initial
+configuration. You may wish to override the config for the block type in order
+to change the preset colors for background and text color pickers.
+
+What Super Hero Does
+--------------------------------------------------------------------------------
+Super hero provides a fleshed out set of content tools that allows admin users to deliver beautiful content easily.
+
+## Media Modes
+
+Media Modes offers a set of options that dictate how media will be rendered
+
+### Resize mode
+
+Stretches/squishes media to fit the viewport or container.
+
+automatically deteects and retains the aspect ratio of the chosen media
+
+### Crop Mode
+
+Allows the admin to select a 'crop to' location (left, center, right)
+
+The image will maintain it's original height and crop to the designated location as the browser is resized
+
+### Switch Mode
+
+Allows the user to select up to 3 images which are rendered as a <picture> element
+
+### Video Mode
+
+Provides the Admin user with a text area input to paste in a full embed code from Vimeo or Youtube
+
+The full iframe embed code must be provided, this will be parsed in the view model and constructed into a responsive iframe on the store front.
+
+## Color Pickers
+
+Super hero provides a full color picker for both text and background colors. Brand colors can be configured on a per-installation basis inside the super_hero_tasks.rake file.
+
+The background color picker also provides a range slider and text input to control opacity. This accepts values between 0 - 100 and is converted to an alpha channel in the view model.
+
+>Currently browser support for input type='color' is patchy, a polyfill is in the works to allow users on unsupported browsers to use this functionality.
+
+## Content Positioning
+
+The admin user is able to select from 9 content positions using a sweet SVG UI element. By default a position offset of 5% is defined, you can override the $positioning-offset scss variable in your host application to customize the space between content and the edge of the block.
+
+
+Video Embedder
+--------------------------------------------------------------------------------
+
+Super hero includes a VideoEmbedder service which parses youtube and vimeo iframes
+and generates iframe parameters.
+The embedder accepts the iframe embed code and a set of options.
+Options are part of the advanced_video Content::Field and include: loop, autoplay,
+and mute functionality.
+
+The plugin also includes js player API integrations for youtube and vimeo.
+This enables the mute functionality and fires events to Workarea analytics.js.
+In order to use those analytics events in your host application you will need
+to write analytics adapter callbacks for the service you wish to send the data to.
+
+Example callbacks:
+```
+'vimeo': function (payload) {
+    send('send', payload.eventCategory, payload.eventAction, payload.eventLabel, payload.eventValue);
+},
+
+'youtube': function (payload) {
+    send('send', payload.eventCategory, payload.eventAction, payload.eventLabel, payload.eventValue);
+},
+```
+
+Getting Started
+--------------------------------------------------------------------------------
+
+This gem contains a rails engine that must be mounted onto a host Rails application.
+
+You must have access to a WebLinc gems server to use this gem. Add your gems server credentials to Bundler:
+
+    bundle config gems.weblinc.com my_username:my_password
+
+Or set the appropriate environment variable in a shell startup file:
+
+    export BUNDLE_GEMS__WEBLINC__COM='my_username:my_password'
+
+Then add the gem to your application's Gemfile specifying the source:
+
+    # ...
+    gem 'workarea-super_hero', source: 'https://gems.weblinc.com'
+    # ...
+
+Or use a source block:
+
+    # ...
+    source 'https://gems.weblinc.com' do
+      gem 'workarea-super_hero'
+    end
+    # ...
+
+Update your application's bundle.
+
+    cd path/to/application
+    bundle
+
+Copyright & Licensing
+--------------------------------------------------------------------------------
+
+Copyright WebLinc 2015. All rights reserved.
+
+For licensing, contact sales@workarea.com.

data/Rakefile

@@ -0,0 +1,60 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'SuperHero'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path('../test/dummy/Rakefile', __FILE__)
+load 'rails/tasks/engine.rake'
+load 'rails/tasks/statistics.rake'
+load 'workarea/changelog.rake'
+
+require 'rake/testtask'
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+task default: :test
+
+$LOAD_PATH.unshift File.expand_path('../lib', __FILE__)
+require 'workarea/super_hero/version'
+
+desc "Release version #{Workarea::SuperHero::VERSION} of the gem"
+task :release do
+  host = "https://#{ENV['BUNDLE_GEMS__WEBLINC__COM']}@gems.weblinc.com"
+
+  #Rake::Task['workarea:changelog'].execute
+  #system 'git add CHANGELOG.md'
+  #system 'git commit -m "Update CHANGELOG"'
+  #system 'git push origin HEAD'
+
+  system "git tag -a v#{Workarea::SuperHero::VERSION} -m 'Tagging #{Workarea::SuperHero::VERSION}'"
+  system 'git push --tags'
+
+  system 'gem build workarea-super_hero.gemspec'
+  system "gem push workarea-super_hero-#{Workarea::SuperHero::VERSION}.gem"
+  system "gem push workarea-super_hero-#{Workarea::SuperHero::VERSION}.gem --host #{host}"
+  system "rm workarea-super_hero-#{Workarea::SuperHero::VERSION}.gem"
+end
+
+desc 'Run the JavaScript tests'
+ENV['TEASPOON_RAILS_ENV'] = File.expand_path('../test/dummy/config/environment', __FILE__)
+task teaspoon: 'app:teaspoon'
+
+desc 'Start a server at http://localhost:3000/teaspoon for JavaScript tests'
+task :teaspoon_server do
+  Dir.chdir('test/dummy')
+  teaspoon_env = File.expand_path('../test/teaspoon_env.rb', __FILE__)
+  system "RAILS_ENV=test TEASPOON_ENV=#{teaspoon_env} rails s"
+end

data/app/assets/images/workarea/admin/content_block_types/super_hero.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 40.93"><defs><style>.super-hero-icon__path{fill:#fff;}</style></defs><title>Super hero</title><path d="M58.75,35.93a5,5,0,0,1-5,5H10.25a5,5,0,0,1-5-5V5a5,5,0,0,1,5-5h43.5a5,5,0,0,1,5,5Z"/><path class="super-hero-icon__path" d="M46.76,4.3H17.24l-5.16,9.38L32,36.63,51.92,13.68ZM32,33.23,19.46,18.51l-3.28-3.78h.06L15,13.3l1.67-3L18.6,6.83v0l.08-.15h26.8L49,13.33l-1.19,1.4h.05l-3,3.41Z"/><path class="super-hero-icon__path" d="M32.54,11.09a.76.76,0,0,1,.22.55,1,1,0,0,1-.09.35l-2.93,7a1.05,1.05,0,0,1-.37.45,1,1,0,0,1-.56.18h-.15a1,1,0,0,1-.56-.18,1,1,0,0,1-.37-.45l-2.95-7a.94.94,0,0,1-.09-.35.76.76,0,0,1,.22-.54.72.72,0,0,1,.54-.23.74.74,0,0,1,.41.13.74.74,0,0,1,.28.31l2.58,6.52,2.58-6.54a.73.73,0,0,1,.28-.31.74.74,0,0,1,.41-.13A.72.72,0,0,1,32.54,11.09Z"/><path class="super-hero-icon__path" d="M39.08,11.09a.72.72,0,0,0-.54-.24.74.74,0,0,0-.41.13.73.73,0,0,0-.28.31l-2.57,6.54L33.6,13.59l-.81,1.92L34.25,19a1,1,0,0,0,.37.45,1,1,0,0,0,.56.18h.17a1,1,0,0,0,.56-.18,1.05,1.05,0,0,0,.37-.45l2.93-7a1,1,0,0,0,.09-.35A.76.76,0,0,0,39.08,11.09Z"/></svg>

data/app/assets/images/workarea/svg/position_grid.svg

@@ -0,0 +1,38 @@
+<svg id="position_grid" class="position-grid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <g id="top-left">
+    <path class="position-grid__cell" d="M1 1h49.9v50.2H1z"/>
+    <path class="position-grid__cell-path" d="M49.4 2.5v47.2H2.5V2.5h46.9m3-3H-.5v53.2h52.9V-.5z"/>
+  </g>
+  <g id="top-center">
+    <path class="position-grid__cell" d="M50.1 1H100v50.2H50.1z"/>
+    <path class="position-grid__cell-path" d="M98.4 2.5v47.2H51.6V2.5h46.8m3-3H48.6v53.2h52.9V-.5h-.1z"/>
+  </g>
+  <g id="top-right">
+    <path class="position-grid__cell" d="M99.1 1H149v50.2H99.1z"/>
+    <path class="position-grid__cell-path" d="M147.5 2.5v47.2h-46.9V2.5h46.9m3-3H97.6v53.2h52.9V-.5z"/>
+  </g>
+  <g id="middle-left">
+    <path class="position-grid__cell" d="M1 49.9h49.9v50.2H1z"/>
+    <path class="position-grid__cell-path" d="M49.4 51.4v47.2H2.5V51.4h46.9m3-3H-.5v53.2h52.9V48.4z"/>
+  </g>
+  <g id="middle-center">
+    <path class="position-grid__cell" d="M50.1 49.9H100v50.2H50.1z"/>
+    <path class="position-grid__cell-path" d="M98.4 51.4v47.2H51.6V51.4h46.8m3-3H48.6v53.2h52.9V48.4h-.1z"/>
+  </g>
+  <g id="middle-right">
+    <path class="position-grid__cell" d="M99.1 49.9H149v50.2H99.1z"/>
+    <path class="position-grid__cell-path" d="M147.5 51.4v47.2h-46.9V51.4h46.9m3-3H97.6v53.2h52.9V48.4z"/>
+  </g>
+  <g id="bottom-left">
+    <path class="position-grid__cell" d="M1 98.8h49.9V149H1z"/>
+    <path class="position-grid__cell-path" d="M49.4 100.3v47.2H2.5v-47.2h46.9m3-3H-.5v53.2h52.9V97.3z"/>
+  </g>
+  <g id="bottom-center">
+    <path class="position-grid__cell" d="M50.1 98.8H100V149H50.1z"/>
+    <path class="position-grid__cell-path" d="M98.4 100.3v47.2H51.6v-47.2h46.8m3-3H48.6v53.2h52.9V97.3h-.1z"/>
+  </g>
+  <g id="bottom-right">
+    <path class="position-grid__cell" d="M99.1 98.8H149V149H99.1z"/>
+    <path class="position-grid__cell-path" d="M147.5 100.3v47.2h-46.9v-47.2h46.9m3-3H97.6v53.2h52.9V97.3z"/>
+  </g>
+</svg>

data/app/assets/javascripts/workarea/admin/super_hero/modules/media_modes.js

@@ -0,0 +1,54 @@
+/**
+ * @namespace WORKAREA.mediaModes
+ */
+WORKAREA.registerModule('mediaModes', (function () {
+    'use strict';
+
+    var activateOptionGroup = function($group) {
+            $group.removeClass('hidden');
+        },
+
+        deactivateOptionGroup = function ($group) {
+            $group.addClass('hidden');
+        },
+
+        triggerMediaModeChange = function ($optionGroups, mode) {
+            $optionGroups.each(function(index, option) {
+                var $option = $(option);
+
+                if ($option.data('mediaMode').includes(mode)) {
+                    activateOptionGroup($option);
+                } else {
+                    deactivateOptionGroup($option);
+                }
+            });
+        },
+
+        setInitialState = function($optionGroups, $control) {
+            var selectedOption = $control.val();
+            triggerMediaModeChange($optionGroups, selectedOption);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.mediaModes
+         */
+        init = function ($scope) {
+            var $control = $('[data-media-mode="control"]', $scope),
+                $optionGroups = $('[data-media-mode]', $scope).not($control);
+
+            if (_.isEmpty($control) ||
+                _.isEmpty($optionGroups)) { return; }
+
+            setInitialState($optionGroups, $control);
+
+            $control.on('change', function(event) {
+                triggerMediaModeChange($optionGroups, $(event.currentTarget).val());
+            });
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/admin/super_hero/modules/position_input.js

@@ -0,0 +1,59 @@
+/**
+ * @namespace WORKAREA.positionInput
+ */
+WORKAREA.registerModule('positionInput', (function () {
+    'use strict';
+
+    var setSelected = function ($svgInput, $selectInput, position) {
+            $svgInput
+                .find('#'+position+' .position-grid__cell')
+                .attr('style', 'fill:#000000');
+
+            $selectInput.val(position).trigger('change');
+        },
+
+        updateSelected = function($svgInput, $selectInput, newPosition) {
+            clearSelected($svgInput);
+            setSelected($svgInput, $selectInput, newPosition);
+        },
+
+        clearSelected = function($svgInput) {
+            $('g .position-grid__cell', $svgInput).each(function(index, cell) {
+                    $(cell).attr('style', 'fill: #ffffff');
+                }
+            );
+        },
+
+        bindSVGEvents = function ($svgInput, $selectInput) {
+            $('g', $svgInput).each(function(index, cell) {
+                $(cell).on('click', function(event) {
+                    event.preventDefault();
+                    var newPosition = $(event.currentTarget).attr('id');
+                    updateSelected($svgInput, $selectInput, newPosition);
+                });
+            });
+        },
+
+        setupField = function (index, el) {
+            var $positionInput = $(el),
+                $selectInput = $positionInput.find('select'),
+                $svgInput = $positionInput.find('.position-grid'),
+                position = $selectInput.val();
+
+            setSelected($svgInput, $selectInput, position);
+            bindSVGEvents($svgInput, $selectInput);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.positionInput
+         */
+        init = function ($scope) {
+            $('[data-position-input]', $scope).each(setupField);
+        };
+
+    return {
+        init: init
+    };
+}()));