md-slides

md-slides.js

var styles = `
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#slides { display: none; }
.slide { white-space: nowrap; }
.slide-content { align-self: center; }

@media screen {
  /* Aspect ratio classes for the body tag */
  body { position: absolute; top: 50%; left: 50%; }
  .slide-4x3 { width: 1024px; height: 768px; margin: -384px 0 0 -512px; }
  .slide-16x9 { width: 1024px; height: 576px; margin: -288px 0 0 -512px; }
  .slide-16x10 { width: 1024px; height: 640px; margin: -320px 0 0 -512px; }

  .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .print {
    display: none;
  }
}

@media print {
  body { transform: none !important; }
  .slide-root {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .slide-content {
    transform: none !important;
    display: block;
  }
  .slide {
    display: flex;
    justify-content: center;
    flex: 1;

    break-inside: avoid;

    padding: 0.5rem;
    margin: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    visibility: visible !important;
  }
  .slide img {
    /*max-width: 10cm;*/
  }
  .screen {
    display: none;
  }
  a[href^=http]::after {
    content: attr(href);
    display: block;
  }
}
`;

var DEFAULT_SLIDE_SEPARATOR = /^\r?\n---\r?\n$/mg,
    DEFAULT_NOTES_SEPARATOR = /notes?:/mgi,
    DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
    DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';

function trimIndent(text) {
  var ws = text.match(/^\n?(\s*)/)[1].length,
      tabs = text.match(/^\n?(\t*)/)[1].length;

  if (tabs > 0) {
    text = text.replace(new RegExp('\\n?\\t{' + tabs + '}','g'), '\n');
  }
  else if (ws > 1) {
    text = text.replace(new RegExp('\\n? {' + ws + '}', 'g'), '\n');
  }

  return text;
}

function render(content) {
  var root = document.createElement('div');
  root.className = 'slide-root';
  document.body.appendChild(root);
  content = trimIndent(content);

  var renderer = new marked.Renderer();
  var origImageRenderer = renderer.image;
  renderer.image = function(href, title, text) {
    var ytMatch = href.match(/(?:https?:\/{2}(?:(?:www.youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=))|(?:youtu\.be\/)))([a-zA-Z0-9_-]{11})(?:\?(.*))?/i);

    if (ytMatch) {
      var thumb = `https://img.youtube.com/vi/${ytMatch[1]}/0.jpg`;
      var embed = `https://www.youtube-nocookie.com/embed/${ytMatch[1]}`;
      var query = ytMatch[2] ? ytMatch[2].replace(/&/m, '&').replace(/"/m, '"') : '';
      
      return `<div class="video-youtube"><iframe class="screen" width="1024" height="576" src="${embed}?rel=0&amp;color=white&amp;${query}" frameborder="0" allow="encrypted-media" allowfullscreen></iframe><a class="print" href="${href}"><img src="${thumb}"></a></div>`;
    }

    return origImageRenderer.apply(this, arguments);
  }

  var slides = content.split(DEFAULT_SLIDE_SEPARATOR);
  for (var i = 0; i < slides.length; i++) {
    var slide = slides[i].trim();

    // strip notes
    var notesMatch = slide.split(DEFAULT_NOTES_SEPARATOR);
    if (notesMatch.length >= 2) {
      slide = notesMatch[0]; // notesMatch[1].trim()
    }

    var html = marked(slide, {
      breaks: true,
      renderer: renderer,
      highlight: (code, lang) => hljs ? hljs.highlightAuto(code, [ lang ]).value : code,
    });

    var slideWrapper = document.createElement('div');
    var slideContent = document.createElement('div');
    slideWrapper.className = 'slide slide-' + i;
    slideContent.className = 'slide-content';
    slideContent.innerHTML = html;
    slideWrapper.appendChild(slideContent);
    root.appendChild(slideWrapper);
    slideWrapper.style.visibility = "hidden";
  }
  return root;
}

function resize() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  var bw = document.body.offsetWidth;
  var bh = document.body.offsetHeight;
  var scale = ((w/h < bw/bh) ? w/bw : h/bh);
  document.body.style.transform = 'scale(' + scale + ')';
}

var currentSlide = -1;

function goTo(slideIndex) {
  currentSlide = slideIndex;
  window.location.hash = slideIndex;
  var slides = document.querySelectorAll('.slide');
  for (var i = 0; i < slides.length; i++) {
    var el = slides[i];
    var slide = el.children[0];
    var scaleWidth = (el.offsetWidth * 0.8 / slide.offsetWidth);
    var scaleHeight = (el.offsetHeight * 0.8 / slide.offsetHeight);
    slide.style.transform = 'scale(' + Math.min(scaleWidth, scaleHeight) + ')';
    if (i == currentSlide) {
      el.style.visibility = '';
    } else {
      el.style.visibility = 'hidden';
    }
  }
}

function next() {
  goTo(Math.min(currentSlide + 1, document.querySelectorAll('.slide').length - 1));
}

function prev() {
  goTo(Math.max(currentSlide - 1, 0));
}

window.onload = function() {
  var css = document.createElement('style');css.innerHTML = style;
  document.head.appendChild(css);

  resize();
  render(document.getElementById('slides').innerHTML);
  goTo(window.location.hash.substring(1) || 0);
  //window.onclick = next;
  window.onresize = resize;
  window.onkeydown = function(e) {
    switch (e.keyCode) {
      case 39: next(); e.preventDefault(); break;
      case 37: prev(); e.preventDefault(); break;
    }
  };
};