jekyll-page-asset 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8db9a6281095ce4e99b4c0d3b8ddec55c5ce371fb6164c721ca9568a18068e05
-  data.tar.gz: 7e98af8cb08d9ac9e4aa714fdd8a2aea07b570e407e9537bbaf037fbd5985e7c
+  metadata.gz: 4d6d2997cebfa6648d100a3335cf78425358a609ad5d524eb38d5ee4671d0b32
+  data.tar.gz: 70559d1c925bc506b6f037b4fdd1d2fc5e8989e359f9755fdc85e9b97e0cabb7
 SHA512:
-  metadata.gz: 75bad5045e80cf194478a525e9d7fb681cde348b8a67a8962c4eabc207cc9df001fb47f6bd1fdcb38c89f225ff2dc9bdd6f1b42a6ed2e32ef6075eb5298e7bdf
-  data.tar.gz: bd98568459c9efb1495fc564bb51aba5fbd4f8159afc071c8bd01447797fdbff7b9d6ab1ee6fc61817f29906fa685e2f486237da4356b6d120cfce2f6134800b
+  metadata.gz: 2b56178cd9e58f14ce07230045a85528fdf11a0189095ae75fcd242711859170f78dd4a983daad8db5d6ab3d29c951353ae2daf628127214d4e57a4460943dfa
+  data.tar.gz: '0890f071dd316148b87d3f470a9ce88c160f094b8936c2aba6f1fdda19f5a2e273b9e383efaef08fbe622fa45524d287a3c2dfed19abaee60950cdcb7962ba21'

data/README.md

@@ -38,10 +38,13 @@ Pass a folder name in the media asset directory and all images in that folder wi
 
 The generated html and script for this will also write tags to two target mount points in the site, if found.
 
-* `project-asset-gallery-lightbox` is the target for the lightbox html. By default this is styled to fill the viewport area of the component that it is mounted in to act as a full area takeover.
+* `page-asset-gallery-lightbox` is the target for the lightbox html. By default this is styled to fill the viewport area of the component that it is mounted in to act as a full area takeover. This is optional, but if not included, the gallery will only display as thumbnails and cannot be expanded.
+
+* `page-asset-gallery-controls` is the target for the gallery controls - to move to next/previous images and close the lightbox. This appears when the lightbox is open. Optional, if not included, the controls will be rendered at the top of the lightbox.
+
+Gallery can take optional `title` and `description` arguments to provide a heading and descriptive text for the gallery.
+`{% page_asset gallery <gallery-folder-name> [title="<title-text>"] [description="<description-text>"] %}`
 
-* `project-asset-gallery-controls` is the target for the gallery controls - to move to next/previous images and close the lightbox. This appears when the lightbox is open.
-`{% page_asset gallery <gallery-folder-name> %}`
 
 
 ### fountain script reader

data/_includes/page_asset/gallery.html

@@ -21,6 +21,16 @@
         lightboxMount.setAttribute(MOUNTED_ATTR, "true");
       }
 
+      if (!controlsMount) {
+        var fallbackControlsDiv = document.createElement("div");
+        fallbackControlsDiv.id = "page-asset-gallery-controls-fallback";
+        fallbackControlsDiv.className = "gallery-controls-fallback";
+        if (lightboxMount) {
+          lightboxMount.insertBefore(fallbackControlsDiv, lightboxMount.firstChild);
+        }
+        controlsMount = fallbackControlsDiv;
+      }
+
       if (controlsMount) {
         controlsMount.innerHTML =
           '<div class="gallery-controls" id="gallery-controls" hidden aria-label="Gallery controls">' +

data/_lib/page_asset/audio_renderer.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "cgi"
+
+module Jekyll
+  module PageAsset
+    class AudioRenderer < Renderer
+      register_type "audio"
+
+      def render(context)
+        audio_path = @target_asset_path
+
+        <<~HTML
+          <audio controls preload="auto" class="page-asset-audio">
+            <source src="/#{html_escape(audio_path)}" type="#{html_escape(mime_type_for(audio_path))}">
+            Your browser does not support the audio tag.
+          </audio>
+        HTML
+      end
+
+      private
+
+      def mime_type_for(path)
+        case File.extname(path).downcase
+        when ".ogg"
+          "audio/ogg"
+        when ".wav"
+          "audio/wav"
+        when ".m4a"
+          "audio/mp4"
+        else
+          "audio/mpeg"
+        end
+      end
+
+      def html_escape(value)
+        CGI.escape_html(value.to_s)
+      end
+    end
+  end
+end

data/_lib/page_asset/gallery_renderer.rb

@@ -45,9 +45,12 @@ module Jekyll
           HTML
         end
 
+        title_html = render_title(@params["title"])
+        description_html = render_description(@params["description"])
+
         <<~HTML + gallery_template
           <section class="project-gallery" data-gallery="#{html_escape(@asset_path_arg)}" aria-label="Image gallery">
-            <div class="project-gallery-grid">
+            #{title_html}#{description_html}<div class="project-gallery-grid">
               #{thumbnails.join("\n")}
             </div>
           </section>
@@ -108,6 +111,16 @@ module Jekyll
         HTML
       end
 
+      def render_title(title)
+        return "" if title.nil? || title.to_s.strip.empty?
+        "<h2 class=\"project-gallery-title\">#{html_escape(title)}</h2>\n"
+      end
+
+      def render_description(description)
+        return "" if description.nil? || description.to_s.strip.empty?
+        "<p class=\"project-gallery-description\">#{html_escape(description)}</p>\n"
+      end
+
       def html_escape(value)
         CGI.escape_html(value.to_s)
       end

data/_sass/_page-asset.scss

@@ -171,6 +171,7 @@
     width: 100%;
     height: 100%;
     position: absolute;
+    pointer-events: none;
 }
 
 #page-asset-gallery-controls {
@@ -199,6 +200,15 @@
     }
 }
 
+.gallery-controls-fallback {
+    position: relative;
+    width: 100%;
+    padding: $spacing-sm 0;
+    background: transparent;
+    pointer-events: all;
+    z-index: 221;
+}
+
 .gallery-lightbox-desc {
     margin-top: $spacing-md;
 }
@@ -286,6 +296,8 @@
     border-radius: $radius-md;
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
+    flex-shrink: 1;
+    min-height: 0;
 }
 
 .gallery-lightbox-button {
@@ -311,3 +323,25 @@ body.gallery-lightbox-open {
         top: $spacing-sm;
     }
 }
+
+// __ Video ___________________________________________________
+.background-video {
+  width: 100%;
+  height: auto;
+}
+
+.foreground-video {
+  width: 100%;
+  height: auto;
+  display: block;
+  border: 1px solid $border-color;
+  border-radius: $radius-md;
+  background: $bg-card;
+  box-shadow: $shadow-card;
+}
+
+// __ Audio ___________________________________________________
+.page-asset-audio {
+  width: 100%;
+  display: block;
+}

data/lib/jekyll-page-asset/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module JekyllPageAsset
-  VERSION = "0.1.2"
+  VERSION = "0.1.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-page-asset
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Alastair King
@@ -62,6 +62,7 @@ files:
 - _includes/page_asset/fountain.html
 - _includes/page_asset/gallery.html
 - _includes/page_asset/scroll_scrub_video.html
+- _lib/page_asset/audio_renderer.rb
 - _lib/page_asset/fountain_renderer.rb
 - _lib/page_asset/gallery_renderer.rb
 - _lib/page_asset/image_renderer.rb