Enable multiple zips per tutorial page

_layouts/page.html

@@ -2,13 +2,28 @@
 layout: default
 ---
 
+
 <div>
   <article role="article">
     {% if page.title %}
     <header>
       <h1 class="entry-title">{{ page.title }}</h1>
     </header>
     {% endif %}
+
+    {% if page.files %}
+      {% for zip in page.files %}
+        <a class="tutorial-filelist__heading" name="download-{{zip.zipname}}">Files for {{zip.zipname}}</a>
+        <ul class="tutorial-filelist__list compact-list">
+          {% assign pageurl = page.url | split: '/' | pop: | join: '/' %}
+          {% assign files = zip.files %}
+          {% for file in files %}
+            <li class="tutorial-filelist__file"><a href="{{ pageurl }}/{{ file }}">{{ pageurl }}/{{ file }}</a></li>
+          {% endfor %}
+        </ul>
+      {% endfor %}
+    {% endif %}
+
     {{ content }}
     <footer>
         <a href='http://tutorials.codebar.io/'>Back to tutorials</a>
@@ -20,15 +35,3 @@ <h1 class="entry-title">{{ page.title }}</h1>
 
 
 
-{% if page.files %}
-{% assign pageurl = page.url | split: '/' | pop: | join: '/' %}
-{% capture files %}[{% for file in page.files %}
-    "{{ pageurl }}/{{ file }}"{% if forloop.last %}{% else %},{% endif %}{% endfor %}
-  ]{% endcapture %}
-{% endif %}
-
-<script>
-  var Files = {
-    all : {{ files }}
-  }
-</script>

gulpfile.js

@@ -11,6 +11,7 @@ browsersync  = require('browser-sync').create(),
       './javascripts-dev/vendor/FileSaver.js',
       './javascripts-dev/src/downloader.js',
       './javascripts-dev/src/zipper.js',
+      './javascripts-dev/src/uitools.js',
       './javascripts-dev/src/ui.js',
       './javascripts-dev/main.js',
     ],

javascripts-dev/src/ui.js

@@ -1,27 +1,64 @@
 var UserInterface = {
-  selector: "a[href=download]"
+  selector: 'a[href|="#download"]'
 };
 
 UserInterface.setup = function(zipper, downloader) {
 
-  var downloadLink = document.body.querySelector(UserInterface.selector);
+  var downloadLinks = document.body.querySelectorAll(UserInterface.selector);
 
-  var createZip = function() {
-    zipper.createZip(downloader);
+  var createZip = function(files) {
+    zipper.createZip(downloader, files);
   };
 
   var registerListener = function(link) {
+    console.log("adding listener to", link);
+
     link.addEventListener("click", function(event) {
       event.preventDefault();
-      createZip();
+
+      //  Get the file list on the fly
+      var files = getFileList(event.target);
+console.log('files', files);
+
+console.log('creating zip');
+      createZip(files);
     }, false);
   };
 
   var checkIfDownloadLinkExist = function() {
-    if (downloadLink) {
-      registerListener(downloadLink);
+    if (downloadLinks) {
+      foreach(downloadLinks, function() {
+        registerListener(this);
+
+        hideAccessibleFileLinks(this);
+      });
     }
   };
 
+  var locateAnchorForDownloadLink = function(link) {
+    var anchorName = link.href.replace(/^[^#]*#/, '');
+    return document.body.querySelector('a[name="' + anchorName + '"')
+  }
+
+  var hideAccessibleFileLinks = function(link) {
+    var anchor = locateAnchorForDownloadLink(link);
+    var next = getNextSiblingInDom(anchor);
+
+    addClass(anchor, 'hidden'); //  could be made an expander button
+    addClass(next, 'hidden');
+  };
+
+  var getFileList = function(link) {
+    var anchor = locateAnchorForDownloadLink(link);
+    var next = getNextSiblingInDom(anchor);
+
+    var fileLinks = next.querySelectorAll('a'),
+        files = [];
+    foreach(fileLinks, function() {
+      files.push(this.href);
+    });
+    return files;
+  }
+
   checkIfDownloadLinkExist();
 }

javascripts-dev/src/uitools.js

@@ -0,0 +1,32 @@
+function foreach(list, callback) {
+  for (var idx = 0; idx < list.length; idx++) {
+    if (callback.apply(list[idx]) === false) {
+      break;
+    }
+  }
+}
+
+function getNextSiblingInDom(element) {
+  var allChildrenOfParent = element.parentNode.children,
+      nextSibling = false,
+      foundCurrent = false;
+
+  foreach(allChildrenOfParent, function() {
+    if (this === element) {
+      foundCurrent = true;
+    } else {
+      if (foundCurrent === true) {
+        nextSibling = this;
+        return false;
+      }
+    }
+  });
+  return nextSibling;
+}
+
+function addClass(element, className) {
+  var classes = element.className.split(' ');
+  if (classes.indexOf(className) !== false) {
+    element.className += " " + className;
+  }
+}

javascripts-dev/src/zipper.js

@@ -2,10 +2,10 @@ var Zipper = {
   zip: new JSZip()
 };
 
-Zipper.createZip = function(downloader) {
+Zipper.createZip = function(downloader, fileList) {
 
   var addFiles = function() {
-    Files.all.map(function(url) {
+    fileList.map(function(url) {
       var fileurl  = url;
       var filename = fileurl.replace(/.*\//g, "");
       Zipper.zip.file(filename, downloader.getFile(fileurl), {binary:true});

js/lesson3/tutorial.md

@@ -2,10 +2,14 @@
 layout: page
 title: Introduction to jQuery
 files:
-  - files/index.html
-  - files/jquery.js
-  - files/script.js
-  - files/style.css
+  - zipname: example1
+    files: 
+    - files/index.html
+    - files/jquery.js
+  - zipname: example2
+    files:
+    - files/script.js
+    - files/style.css
 ---
 
 
@@ -46,7 +50,7 @@ Using jQuery and JavaScript functions, we are going to build a small
 todo list.
 
 Download the files that you will need to work through the example
-[here](download).
+[here](#download-example1). and [example2](#download-example2)
 <!-- https://gist.github.com/despo/309f684b7a6e002aaf1f/download -->
 
 Alternatively, if you've already learned how to use git and would like

stylesheets/style.css

@@ -12,3 +12,15 @@ footer {
   min-width: 680px;
   margin: 0 auto;
 }
+
+.tutorial-filelist__list {
+}
+
+.hidden {
+	display: none;
+	visibility: hidden;
+}
+
+.compact-list > * {
+	margin: 3px 0px;
+}