bin/boilerplate/_extras/figures.md

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