cmor_carousels 0.0.32.pre → 0.0.33.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7159590b9a0cc42600246ad0fb06762924e1dadfb96c511e139486abe87b258d
-  data.tar.gz: fc02b40b2120aa222d7c10a85cd0df96f2100eb6d1310437e8b155290a4fd93f
+  metadata.gz: d6e9c0e8e5cf22cb9868eccd7d38ab0147010673bd6b057eb919550225ca549a
+  data.tar.gz: '0648613c5c03d76b46da3a76a12afec667fd92439d776248ea634af400fe2014'
 SHA512:
-  metadata.gz: d49f78febfb3669cdebbba9b95453e9be0c553ac6ee3ebb68cb04bbc469c099d2bcff59f29506a396e9153853f85fbffc4cf17498bb68ae5f1faa6fc00951c25
-  data.tar.gz: 3ad880b929bfe35f0df09f100d1d051fba9d83823847ef7a9c5cf23dbb5707604fb52880687b3002cd164c12e4d3176b7b1f81deb4584cccc7dc66519937c73f
+  metadata.gz: 5892b0c5e26cc7684f51ce0c4d47c13aa7a067dee3af1c24eaca6d2f15222d7be1cae44e4e131349e2a6e51834e9022cbd13a7bf58bb9b369c9ff7206b9087d3
+  data.tar.gz: 1b13795cf79f494139f1bf9d4a2e3954bc6010da669f337f39ab317ca6391286aacea6991ebdd325eddb9dd108996acffda5162e94a688c833b3b9d68e9e8ff5

data/app/assets/javascripts/cmor/carousels/application/carousel-video.js.coffee

@@ -0,0 +1,12 @@
+$(document).ready ->
+  $('body').on 'click', '[data-video-control="toggle"]', ->
+    video = $($(@).data('video-target'))
+    console.log(video)
+    if video.prop('paused')
+      console.log('paused')
+      $(video).trigger('play')
+      $(@).html('❚❚');
+    else
+      console.log('playing')
+      $(video).trigger('pause')
+      $(@).html('►');

data/app/assets/javascripts/cmor/carousels/application.js

@@ -0,0 +1,4 @@
+/*
+ *= require_tree ./application
+ *= require_self
+ */

data/app/assets/javascripts/cmor_carousels.js

@@ -0,0 +1,3 @@
+/*
+ *= require cmor/carousels/application
+ */

data/app/assets/stylesheets/cmor/carousels/application/carousel-video.css

@@ -0,0 +1,29 @@
+.carousel-video {
+  position:relative;
+}
+
+.carousel-video video {
+  position:relative;
+    z-index:0;
+}
+
+.carousel-video .video-overlay {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.carousel-video .video-controls {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  padding: 1.5rem 1rem;
+}
+
+.carousel-video .video-controls:hover {
+  cursor: pointer;
+}

data/app/assets/stylesheets/cmor/carousels/application.css

@@ -0,0 +1,3 @@
+/*
+ *= require_tree ./application
+ */

data/app/assets/stylesheets/cmor_carousels.css

@@ -0,0 +1 @@
+//= require cmor/carousels/application

data/app/models/cmor/carousels/item_detail.rb

@@ -13,6 +13,20 @@ module Cmor
       def human
         "#{carousel.class.model_name.human} #{carousel.human} - #{self.class.model_name.human} #{id}"
       end
+
+      module ContentTypesConcern
+        extend ActiveSupport::Concern
+
+        def video?
+          asset.content_type.start_with?('video/')
+        end
+
+        def image?
+          asset.content_type.start_with?('image/')
+        end
+      end
+
+      include ContentTypesConcern
     end
   end
 end

data/app/view_helpers/cmor/carousels/application_view_helper.rb

@@ -24,7 +24,7 @@ module Cmor
           return I18n.t('cmor.carousels.carousel.warnings.not_found', identifier: identifier)
         else
           variant_options = options.delete(:variant_options) || carousel.variant_options
-          return c.render partial: 'cmor/carousels/application_view_helper/render', locals: { carousel: carousel, options: options, data_attributes: data_attributes, variant_options: variant_options }
+          render carousel: carousel, options: options, data_attributes: data_attributes, variant_options: variant_options
         end
       end
 

data/app/views/cmor/carousels/application_view_helper/_render_carousel.html.haml

@@ -0,0 +1,31 @@
+%div{:class => "carousel #{"carousel-#{carousel.identifier}"} slide", "data-ride" => "carousel", :id => dom_id(carousel) }
+  - if options[:indicators]
+    %ol.carousel-indicators
+      - carousel.item_details.count.times do |i|
+        %li{:class => (i == 0) ? "active" : "", "data-slide-to" => i, "data-target" => "##{dom_id(carousel)}"}
+  .carousel-inner
+    - carousel.item_details.each_with_index do |item_detail, i|
+      %div{:class => "carousel-item #{(i == 0) ? "active" : ""}"}
+        - if item_detail.image?
+          %img.d-block.w-100{:src => main_app.url_for(item_detail.asset.variant(variant_options))}/
+          - if item_detail.description.present?
+            .carousel-caption.d-none.d-md-block
+              = markup_helper(self).to_html(item_detail, :description)
+        - elsif item_detail.video?
+          .carousel-video
+            -# %video#foo.w-100{ autoplay: "", loop: "", muted: ""}
+            %video.w-100{ id: "#{dom_id(item_detail)}-video", autoplay: "", muted: ""}
+              %source{ src: main_app.url_for(item_detail.asset), type: "video/mp4" }
+            .video-overlay.h-100
+              .container.content
+                -# overlayed content goes here.
+              .video-controls.text-white
+                %a{ data: { video: { target: "##{dom_id(item_detail)}-video", control: :toggle } } }
+                  ❚❚
+  - if options[:controls]
+    %a.carousel-control-prev{"data-slide" => "prev", :href => "##{dom_id(carousel)}", :role => "button"}
+      %span.carousel-control-prev-icon{"aria-hidden" => "true"}
+      %span.sr-only= t('.previous')
+    %a.carousel-control-next{"data-slide" => "next", :href => "##{dom_id(carousel)}", :role => "button"}
+      %span.carousel-control-next-icon{"aria-hidden" => "true"}
+      %span.sr-only= t('.next')

data/config/initializers/assets.rb

@@ -0,0 +1,2 @@
+# frozen_string_literal: true
+Rails.application.config.assets.precompile += %w( cmor_carousels.css cmor_carousels.js )

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: cmor_carousels
 version: !ruby/object:Gem::Version
-  version: 0.0.32.pre
+  version: 0.0.33.pre
 platform: ruby
 authors:
 - Roberto Vasquez Angel
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-08-02 00:00:00.000000000 Z
+date: 2019-08-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -30,28 +30,28 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.0.32.pre
+        version: 0.0.33.pre
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.0.32.pre
+        version: 0.0.33.pre
 - !ruby/object:Gem::Dependency
   name: cmor_core_frontend
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.0.32.pre
+        version: 0.0.33.pre
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.0.32.pre
+        version: 0.0.33.pre
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -356,12 +356,18 @@ files:
 - MIT-LICENSE
 - README.rdoc
 - Rakefile
+- app/assets/javascripts/cmor/carousels/application.js
+- app/assets/javascripts/cmor/carousels/application/carousel-video.js.coffee
+- app/assets/javascripts/cmor_carousels.js
+- app/assets/stylesheets/cmor/carousels/application.css
+- app/assets/stylesheets/cmor/carousels/application/carousel-video.css
+- app/assets/stylesheets/cmor_carousels.css
 - app/models/cmor/carousels/application_record.rb
 - app/models/cmor/carousels/carousel.rb
 - app/models/cmor/carousels/item_detail.rb
 - app/view_helpers/cmor/carousels/application_view_helper.rb
-- app/views/cmor/carousels/application_view_helper/_render.html.erb
-- app/views/cmor/carousels/application_view_helper/_render.html.haml~
+- app/views/cmor/carousels/application_view_helper/_render_carousel.html.haml
+- config/initializers/assets.rb
 - config/locales/de.yml
 - config/locales/en.yml
 - config/routes.rb

data/app/views/cmor/carousels/application_view_helper/_render.html.erb

@@ -1,31 +0,0 @@
-<div id="<%= dom_id(carousel) %>" class="carousel slide" data-ride="carousel">
-  <% if options[:indicators] %>
-    <ol class="carousel-indicators">
-      <% carousel.item_details.count.times do |i| %>
-        <li data-target="#<%= dom_id(carousel) %>" data-slide-to="<%= i %>" class="<%= (i == 0) ? "active" : "" %>"></li>
-      <% end %>
-    </ol>
-  <% end %>
-  <div class="carousel-inner">
-    <% carousel.item_details.each_with_index do |item_detail, i| %>
-      <div class="carousel-item <%= (i == 0) ? "active" : "" %>">
-        <img class="d-block w-100" src="<%= main_app.url_for(item_detail.asset.variant(variant_options)) %>">
-        <% if item_detail.description.present? %>
-          <div class="carousel-caption d-none d-md-block">
-            <%= markup_helper(self).to_html(item_detail, :description) %>
-          </div>
-        <% end %>
-      </div>
-    <% end %>
-  </div>
-  <% if options[:controls] %>
-    <a class="carousel-control-prev" href="#<%= dom_id(carousel) %>" role="button" data-slide="prev">
-      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-      <span class="sr-only"><%= t('.previous') %></span>
-    </a>
-    <a class="carousel-control-next" href="#<%= dom_id(carousel) %>" role="button" data-slide="next">
-      <span class="carousel-control-next-icon" aria-hidden="true"></span>
-      <span class="sr-only"><%= t('.next') %></span>
-    </a>
-  <% end %>
-</div>

data/app/views/cmor/carousels/application_view_helper/_render.html.haml~

@@ -1,3 +0,0 @@
-= bootstrap_carousel(autostart: carousel_options[:autostart], interval: (carousel_options[:interval] * 1000), id: dom_id(carousel)) do |c|
-  - carousel.item_details.each do |item_detail|
-    - c.add_item(image_source: main_app.url_for(item_detail.asset.variant(variant_options)), caption: item_detail.body)(:html)