Module: JekyllImgFlow::ModalAssets

Defined in:
lib/jekyll-imgflow/modal_assets.rb

Overview

Inline CSS and JS for the image modal/lightbox feature. Injected by hooks.rb into pages that contain data-imgflow-modal triggers.

Constant Summary collapse

CSS = 
<<~CSS
  .imgflow-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;z-index:9999;
  cursor:pointer;animation:imgflow-fade .15s ease-out}
  .imgflow-modal-image{max-width:90vw;max-height:90vh;object-fit:contain;
  cursor:auto;border-radius:4px;box-shadow:0 4px 30px rgba(0,0,0,.5)}
  .imgflow-modal-close{position:absolute;top:1rem;right:1rem;
  background:rgba(255,255,255,.2);border:none;color:#fff;font-size:2rem;
  width:3rem;height:3rem;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1}
  .imgflow-modal-close:hover{background:rgba(255,255,255,.4)}
  @keyframes imgflow-fade{from{opacity:0}to{opacity:1}}
CSS
JS = 
<<~JS
  (function(){
  function openModal(trigger,alt){
  var o=document.createElement('div');
  o.className='imgflow-modal-overlay';
  var p=document.createElement('picture');
  var href=trigger.getAttribute('href');
  var types={avif:'image/avif',webp:'image/webp',png:'image/png',jpg:'image/jpeg',jpeg:'image/jpeg'};
  var formats=(trigger.getAttribute('data-imgflow-modal-formats')||'').split(',');
  formats.forEach(function(format){
  if(!format)return;
  var s=document.createElement('source');
  s.srcset=href.replace(/.[^.]+$/,'.'+format);s.type=types[format];p.appendChild(s);});
  var i=document.createElement('img');
  i.src=href;
  i.alt=alt||'';i.className='imgflow-modal-image';p.appendChild(i);
  var b=document.createElement('button');
  b.className='imgflow-modal-close';b.setAttribute('aria-label','Close');
  b.innerHTML='&times;';
  o.appendChild(b);o.appendChild(p);document.body.appendChild(o);
  function c(){document.body.removeChild(o);
  document.removeEventListener('keydown',k);}
  function k(e){if(e.key==='Escape')c();}
  o.addEventListener('click',function(e){
  if(e.target===o||e.target===b)c();});
  document.addEventListener('keydown',k);}
  document.addEventListener('click',function(e){
  var t=e.target.closest('[data-imgflow-modal]');
  if(!t)return;e.preventDefault();
  openModal(t,t.getAttribute('data-imgflow-alt'));});
  })();
JS

Class Method Summary collapse

Class Method Details

.inject(html) ⇒ Object 



54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
# File 'lib/jekyll-imgflow/modal_assets.rb', line 54

def self.inject(html)
  return html unless html&.include?("data-imgflow-modal")

  style_tag = "<style>\n#{CSS}</style>"
  script_tag = "<script>\n#{JS}</script>"

  if html.include?("</head>")
    html = html.sub("</head>", "#{style_tag}\n</head>")
    html = html.sub("</body>", "#{script_tag}\n</body>") if html.include?("</body>")
  elsif html.include?("</body>")
    html = html.sub("</body>", "#{style_tag}\n#{script_tag}\n</body>")
  else
    html = "#{html}\n#{style_tag}\n#{script_tag}"
  end

  html
end