Merge pull request #35 from MicaSpinelli/main

agrego clase3_unlp_ods

clase3_unlp_ods_files/header-attrs/header-attrs.js

@@ -0,0 +1,12 @@
+// Pandoc 2.9 adds attributes on both header and div. We remove the former (to
+// be compatible with the behavior of Pandoc < 2.8).
+document.addEventListener('DOMContentLoaded', function(e) {
+  var hs = document.querySelectorAll("div.section[class*='level'] > :first-child");
+  var i, h, a;
+  for (i = 0; i < hs.length; i++) {
+    h = hs[i];
+    if (!/^h[1-6]$/i.test(h.tagName)) continue;  // it should be a header h1-h6
+    a = h.attributes;
+    while (a.length > 0) h.removeAttribute(a[0].name);
+  }
+});

clase3_unlp_ods_files/tile-view/tile-view.css

@@ -0,0 +1,52 @@
+.remark__tile-view * {
+  box-sizing: border-box;
+}
+
+.remark__tile-view {
+  background: lightgray;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 3em;
+  font-size: 18px;
+  box-sizing: border-box;
+  overflow: scroll;
+}
+
+.remark__tile-view__header {
+  text-align: center;
+}
+
+.remark__tile-view__tiles {
+  display: grid;
+  /* Set column width in JS */
+  /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
+  justify-items: center;
+}
+
+.remark__tile-view__tile {
+  position: relative;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+.remark__tile-view__slide-container {
+  margin: 0 auto;
+}
+
+.remark__tile-view__tile--current {
+  background: #ffd863;
+  border: 5px solid #ffd863;
+  margin: calc(0.5em - 5px);
+  border-radius: 0;
+}
+
+.remark__tile-view__tile--seen {
+  opacity: 0.5;
+}
+
+.remark__tile-view__tile:hover {
+  /* background: #993d70; */
+  background: #44bc96;
+  opacity: 1;
+}

clase3_unlp_ods_files/tile-view/tile-view.js

@@ -0,0 +1,177 @@
+/*
+ *  Tile View for remark.js Slides
+ *
+ *  Garrick Aden-Buie
+ *
+ *  Inspired and converted to Vanilla JS from
+ *  https://github.com/StephenHesperus/remark-hook/
+ *
+ *  Include after remarkjs slides are initialized.
+ *
+ */
+
+/* global slideshow */
+(function () {
+  const ready = function (fn) {
+    /* MIT License Copyright (c) 2016 Nuclei */
+    /* https://github.com/nuclei/readyjs */
+    const completed = () => {
+      document.removeEventListener('DOMContentLoaded', completed)
+      window.removeEventListener('load', completed)
+      fn()
+    }
+    if (document.readyState !== 'loading') {
+      setTimeout(fn)
+    } else {
+      document.addEventListener('DOMContentLoaded', completed)
+      window.addEventListener('load', completed)
+    }
+  }
+
+  ready(function () {
+    const launchKey = 79 // keycode for O, used to enable tile view
+
+    // Slides container
+    const remarkSlideShow = document.querySelector('div.remark-slides-area')
+
+    let tileView = document.querySelector('div.remark__tile-view')
+    if (!tileView) {
+      tileView = document.createElement('div')
+      tileView.className = 'remark__tile-view'
+    }
+
+    const toggleElement = el => {
+      el.style.display = el.style.display === 'none' ? '' : 'none'
+    }
+
+    function slideshowResize () {
+      window.dispatchEvent(new Event('resize'))
+    }
+
+    const toggleTileView = function () {
+      toggleElement(tileView)
+      toggleElement(remarkSlideShow)
+
+      if (tileView.style.display === 'none') {
+        // tileView is now hidden, go to current slide
+        slideshow.gotoSlide(tileVars.currentSlideIdx + 1)
+
+        slideshow.resume()
+        slideshowResize()
+      } else {
+        // store current slide index prior to launching tile-view
+        tileVars.currentSlideIdx = slideshow.getCurrentSlideIndex()
+
+        // set class on seen and current slide and scroll into view
+        const tiles = tileView.querySelectorAll('.remark__tile-view__tile');
+        [...tiles].forEach((tile, idx) => {
+          tile.classList.toggle(
+            'remark__tile-view__tile--seen',
+            idx < tileVars.currentSlideIdx
+          )
+          tile.classList.toggle(
+            'remark__tile-view__tile--current',
+            idx === tileVars.currentSlideIdx
+          )
+        })
+        tiles[tileVars.currentSlideIdx].scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        })
+
+        slideshow.pause()
+      }
+    }
+
+    const createTileView = ({ minSize = 250, title = document.title } = {}) => {
+      // Tile view header
+      const h1 = document.createElement('h1')
+      h1.className = 'remark__tile-view__header'
+      h1.innerHTML = title
+
+      tileView.appendChild(h1)
+      const tiles = document.createElement('div')
+      tiles.className = 'remark__tile-view__tiles'
+      tileView.appendChild(tiles)
+
+      // Clone slideshow
+      const slidesArea = remarkSlideShow.cloneNode(true)
+
+      // Calculate slide scale and tile container size
+      const slideScaler = slidesArea.querySelector('.remark-slide-scaler')
+      const slideWidth = parseFloat(slideScaler.style.width.replace('px', ''))
+      const slideHeight = parseFloat(
+        slideScaler.style.height.replace('px', '')
+      )
+      const scale = minSize / Math.min(slideWidth, slideHeight)
+      let tileWidth = Math.round(slideWidth * scale)
+      let tileHeight = Math.round(slideHeight * scale)
+
+      // convert tileWidth/Height to em relative to base 18px (set in CSS)
+      tileWidth = tileWidth / 18
+      tileHeight = tileHeight / 18
+
+      tiles.style.gridTemplateColumns = `repeat(auto-fill, minmax(${tileWidth}em, 1fr))`
+
+      const slides = slidesArea.querySelectorAll('.remark-slide-container')
+
+      slides.forEach((slide, slideIndex) => {
+        let tile = document.createElement('template')
+        tile.innerHTML = `<div class="remark__tile-view__tile">
+            <div class="remark__tile-view__slide-container">
+            </div></div>`
+        tile = tile.content.firstChild
+
+        const tileContainer = tile.querySelector(
+          '.remark__tile-view__slide-container'
+        )
+        tileContainer.style.width = `${tileWidth}em`
+        tileContainer.style.height = `${tileHeight}em`
+
+        const thisSlideScaler = slide.querySelector('.remark-slide-scaler')
+        thisSlideScaler.style.top = '0px'
+        thisSlideScaler.style.left = '0px'
+        thisSlideScaler.style.transform = `scale(${scale})`
+        thisSlideScaler.parentElement.classList.add('remark-visible')
+
+        slide.addEventListener('click', () => {
+          tileVars.currentSlideIdx = slideIndex
+          toggleTileView()
+        })
+
+        tileContainer.appendChild(slide)
+        tiles.appendChild(tile)
+      })
+
+      document.body.appendChild(tileView)
+    }
+
+    const tileVars = {}
+
+    document.addEventListener('keydown', ev => {
+      if (ev.keyCode === launchKey) {
+        toggleTileView()
+      }
+    })
+
+    const addTileViewHelpText = () => {
+      const helpTable = document.querySelector(
+        '.remark-help-content table.light-keys'
+      )
+      if (!helpTable) {
+        console.error(
+          'Could not find remark help table, has remark been initialized?'
+        )
+        return
+      }
+      const newRow = document.createElement('tr')
+      newRow.innerHTML += '<td><span class="key">o</span></td>'
+      newRow.innerHTML += '<td>Tile View: Overview of Slides</td>'
+      helpTable.append(newRow)
+    }
+
+    createTileView({ minSize: 200 })
+    toggleElement(tileView)
+    addTileViewHelpText()
+  })
+})()

clase3_unlp_ods_files/xaringanExtra-progressBar/progress-bar.js

@@ -0,0 +1,42 @@
+/* global slideshow */
+(function () {
+  const ready = function (fn) {
+    /* MIT License Copyright (c) 2016 Nuclei */
+    /* https://github.com/nuclei/readyjs */
+    const completed = () => {
+      document.removeEventListener('DOMContentLoaded', completed)
+      window.removeEventListener('load', completed)
+      fn()
+    }
+    if (document.readyState !== 'loading') {
+      setTimeout(fn)
+    } else {
+      document.addEventListener('DOMContentLoaded', completed)
+      window.addEventListener('load', completed)
+    }
+  }
+
+  ready(function () {
+    // set --slide-total CSS property
+    document.body.style.setProperty('--slide-total', slideshow.getSlides().length - 1)
+    document.body.style.setProperty('--slide-previous', 0)
+
+    document
+      .querySelectorAll('.remark-slides-area .remark-slide-content')
+      .forEach(function (slide, idx) {
+        const pb = document.createElement('div')
+        pb.classList = 'xe__progress-bar__container'
+        // set current slide variable directly on the slide's progress bar
+        pb.style.setProperty('--slide-current', idx)
+        const pbFill = document.createElement('div')
+        pbFill.classList = 'xe__progress-bar'
+        pb.appendChild(pbFill)
+        slide.appendChild(pb)
+      })
+
+    // set --slide-previous from slide we're moving away from
+    slideshow.on('beforeHideSlide', function (slide) {
+      document.body.style.setProperty('--slide-previous', slide.getSlideIndex())
+    })
+  })
+})()