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

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