bin/boilerplate/_extras/figures.md

   1 ---
   2 title: Figures
   3 ---
   4 <script>
   5   window.onload = function() {
   6     var lesson_episodes = [
   7     {% for episode in site.episodes %}
   8     "{{ episode.url }}"{% unless forloop.last %},{% endunless %}
   9     {% endfor %}
  10     ];
  11
  12     var xmlHttp = [];  /* Required since we are going to query every episode. */
  13     for (i=0; i < lesson_episodes.length; i++) {
  14
  15       xmlHttp[i] = new XMLHttpRequest();
  16       xmlHttp[i].episode = lesson_episodes[i];  /* To enable use this later. */
  17       xmlHttp[i].onreadystatechange = function() {
  18
  19         if (this.readyState == 4 && this.status == 200) {
  20           var parser = new DOMParser();
  21           var htmlDoc = parser.parseFromString(this.responseText,"text/html");
  22           var htmlDocArticle = htmlDoc.getElementsByTagName("article")[0];
  23
  24           var article_here = document.getElementById(this.episode);
  25           var images = htmlDocArticle.getElementsByTagName("img");
  26
  27           if (images.length > 0) {
  28             var h1text = htmlDocArticle.getElementsByTagName("h1")[0].innerHTML;
  29
  30             var htitle = document.createElement('h2');
  31             htitle.innerHTML = h1text;
  32             article_here.appendChild(htitle);
  33
  34             var image_num = 0;
  35             for (let image of images) {
  36               image_num++;
  37
  38               var title = document.createElement('p');
  39               title.innerHTML = "<strong>Figure " + image_num + ".</strong> " + image.alt;
  40               article_here.appendChild(title);
  41
  42               article_here.appendChild(image.cloneNode(false));
  43
  44               if (image_num < images.length) {
  45                 var hr = document.createElement('hr');
  46                 article_here.appendChild(hr);
  47               }
  48             }
  49           }
  50         }
  51       }
  52       episode_url = "{{ base }}" + lesson_episodes[i];
  53       xmlHttp[i].open("GET", episode_url);
  54       xmlHttp[i].send(null);
  55     }
  56   }
  57 </script>
  58 {% comment %}
  59 Create anchor for each one of the episodes.
  60 {% endcomment %}
  61 {% for episode in site.episodes %}
  62 <article id="{{ episode.url }}" class="figures"></article>
  63 {% endfor %}
  64
  65 {% include links.md %}