boilerplate/_extras/figures.md

0001 ---
0002 title: Figures
0003 ---
0004
0005 {% include base_path.html %}
0006 {% include manual_episode_order.html %}
0007
0008 <script>
0009   window.onload = function() {
0010     var lesson_episodes = [
0011     {% for lesson_episode in lesson_episodes %}
0012       {% if site.episode_order %}
0013         {% assign episode = site.episodes | where: "slug", lesson_episode | first %}
0014       {% else %}
0015         {% assign episode = lesson_episode %}
0016       {% endif %}
0017     "{{ episode.url }}"{% unless forloop.last %},{% endunless %}
0018     {% endfor %}
0019     ];
0020
0021     var xmlHttp = [];  /* Required since we are going to query every episode. */
0022     for (i=0; i < lesson_episodes.length; i++) {
0023
0024       xmlHttp[i] = new XMLHttpRequest();
0025       xmlHttp[i].episode = lesson_episodes[i];  /* To enable use this later. */
0026       xmlHttp[i].onreadystatechange = function() {
0027
0028         if (this.readyState == 4 && this.status == 200) {
0029           var parser = new DOMParser();
0030           var htmlDoc = parser.parseFromString(this.responseText,"text/html");
0031           var htmlDocArticle = htmlDoc.getElementsByTagName("article")[0];
0032
0033           var article_here = document.getElementById(this.episode);
0034           var images = htmlDocArticle.getElementsByTagName("img");
0035
0036           if (images.length > 0) {
0037             var h1text = htmlDocArticle.getElementsByTagName("h1")[0].innerHTML;
0038
0039             var htitle = document.createElement('h2');
0040             htitle.innerHTML = h1text;
0041             article_here.appendChild(htitle);
0042
0043             var image_num = 0;
0044             for (let image of images) {
0045               image_num++;
0046
0047               var title = document.createElement('p');
0048               title.innerHTML = "<strong>Figure " + image_num + ".</strong> " + image.alt;
0049               article_here.appendChild(title);
0050
0051               article_here.appendChild(image.cloneNode(false));
0052
0053               if (image_num < images.length) {
0054                 var hr = document.createElement('hr');
0055                 article_here.appendChild(hr);
0056               }
0057             }
0058           }
0059         }
0060       }
0061       episode_url = "{{ relative_root_path }}" + lesson_episodes[i];
0062       xmlHttp[i].open("GET", episode_url);
0063       xmlHttp[i].send(null);
0064     }
0065   }
0066 </script>
0067
0068 {% comment %} Create anchor for each one of the episodes.  {% endcomment %}
0069
0070 {% for lesson_episode in lesson_episodes %}
0071   {% if site.episode_order %}
0072     {% assign episode = site.episodes | where: "slug", lesson_episode | first %}
0073   {% else %}
0074     {% assign episode = lesson_episode %}
0075   {% endif %}
0076 <article id="{{ episode.url }}" class="figures"></article>
0077 {% endfor %}
0078
0079 {% include links.md %}