wai-website-theme 0.1.0

data/_includes/resources.html

@@ -0,0 +1,19 @@
+{% include box.html type="start" title="Related WCAG 2.0 resources" id="related" class="large icon" icon="default" %}
+<p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:</p>
+{% if page.wcag_success_criteria %}
+  <p><strong>Success Criteria:</strong></p>
+  <ul>
+    {%- for sc in site.data.wcag -%}
+    {%- if page.wcag_success_criteria contains sc.key -%}<li><a href="https://www.w3.org/WAI/WCAG20/quickref/#qr-{{sc.slug}}"><strong>{{sc.key}}</strong> {{sc.title}}:</a> {{sc.desc}} (Level&nbsp;{{sc.level}})</li>{%- endif -%}
+    {%- endfor -%}
+  </ul>
+{% endif %}
+{% if page.wcag_techniques %}
+  <p><strong>Techniques:</strong></p>
+  <ul>
+    {%- for tech in site.data.techniques -%}
+    {%- if page.wcag_techniques contains tech.key -%}<li><a href="https://www.w3.org/TR/WCAG20-TECHS/{{tech.key}}">{{tech.key}}: {{tech.desc}}</a></li>{%- endif -%}
+    {%- endfor -%}
+  </ul>
+{% endif %}
+{% include box.html type="end" %}

data/_includes/sidenav.html

@@ -0,0 +1,65 @@
+{% comment %}
+The first section creates an array of page urls that are page urls of this collection. They then are compared to all page urls in the list below. Use group in the frontmatter to group pages.
+{% endcomment %}
+{% assign col = site.collections | where: "label", page.collection | first %}
+<nav class="sidenav sn-contents" aria-label="Other Pages in this Resource">
+  <div class="sidenav--head"><div class="sidenav--head-icon">{% if col.icon %}{% include_cached icon.html name=col.icon class="sidenav--head-icon--inner" %}{% endif %}</div><div class="sidenav--head-title"><div class="sidenav--head-subsection">{% if col.shortname %}{{ col.shortname }}{% else %}{{ col.name }}{% endif %}</div>
+    </div>
+  </div>
+  <ul class="sidenav--list">
+
+{% unless col.groups %}
+  {% assign documents = col.docs %}
+
+  {% for p in documents %}
+    {% if forloop.first %}
+      {% assign pgs = p.url %}
+    {% else %}
+      {% assign pgs = pgs | append: "," | append: p.url %}
+    {% endif %}
+  {% endfor %}
+  {% assign pgs = pgs | split: "," %}
+  {% assign my_pages = site.documents | sort: "order" %}
+  {% for my_page in my_pages %}
+    {% unless my_page.nosidenav %}{% if pgs contains my_page.url %}
+    <li><a class="page-link" {% if my_page.url == page.url %} aria-current="page" {% endif %} href="{{ my_page.url | prepend: site.github.url }}">{% if my_page.url == page.url %}{% include_cached icon.html name="chevron-right" %} {% endif %}{% if my_page.nav_title %}{{ my_page.nav_title }}{% else %}{{ my_page.title }}{% endif %}</a></li>
+    {% endif %}{% endunless %}
+  {% endfor %}
+{% else %}
+  {% for group in col.groups %}
+
+    {% assign documents = col.docs | where: "group", page.group %}
+
+    {% unless my_page.nosidenav %}
+    <li><a class="page-link" {% if group.name == page.group %} aria-current="location" {% endif %} href="{{ site.github.url }}/{{page.collection}}/{% unless group.name == "index" %}{{ group.name}}/{% endunless%}">{{group.title}}</a>
+    {% if group.name == page.group %}
+    <ul>
+      {% for p in documents %}
+        {% if forloop.first %}
+          {% assign pgs = p.url %}
+        {% else %}
+          {% assign pgs = pgs | append: "," | append: p.url %}
+        {% endif %}
+      {% endfor %}
+      {% assign pgs = pgs | split: "," %}
+      {% assign my_pages = site.documents | sort: "order" %}
+      {% for my_page in my_pages %}
+        {% unless my_page.nosidenav %}{% if pgs contains my_page.url %}
+        <li><a class="page-link" {% if my_page.url == page.url %} aria-current="page" {% endif %} href="{{ my_page.url | prepend: site.github.url }}">{% if my_page.url == page.url %}{% include_cached icon.html name="chevron-right" %} {% endif %}{% if my_page.nav_title %}{{ my_page.nav_title }}{% else %}{{ my_page.title }}{% endif %}</a></li>
+        {% endif %}{% endunless %}
+      {% endfor %}
+
+    </ul>
+    {% endif %}
+    </li>
+    {% endunless %}
+
+{% endfor%}
+{% endunless %}
+
+
+
+
+
+  </ul>
+</nav>

data/_includes/sidenote.html

@@ -0,0 +1,14 @@
+{% if include.type == 'start' %}
+<div class="grid-6">
+  <div class="from-col1 to-col4">
+{% endif %}
+{% if include.type == 'middle' %}
+  </div>
+  <aside class="from-col5 to-col6">
+    {% include_cached box.html type="start" class="simple" %}
+{% endif %}
+{% if include.type == 'end' %}
+    {% include_cached box.html type="end" %}
+  </aside>
+</div>
+{% endif %}

data/_includes/toc.html

@@ -0,0 +1,10 @@
+{% if include.type == 'start' %}
+{% assign classes = include.class | split: " " %}
+<nav class="box box-simple{% for class in classes %} box-{{ class }}{% endfor %}" aria-labelledby="tocheading" id="toc">
+  <header id="tocheading" class="box-h box-h-simple{% for class in classes %} box-h-{{ class }}{% endfor %}{% if input.icon %} box-h-icon{% endif %}">{% if input.icon %} {% include_cached icon.html name=input.icon %}{% endif %} {{ include.title}}</header>
+  <div class="box-i">
+{% endif %}
+{% if  include.type == 'end' %}
+  </div>
+</nav>
+{% endif %}

data/_includes/video-player.html

@@ -0,0 +1,99 @@
+<div class="video-container" data-video-type="">
+  <video preload="metadata" data-youtube-id="{{include.yt-id}}" width="450">
+    {% assign captions = include.captions | split: ',' %}{% for caption in captions %}{% assign c = caption | split: '|' %}<track src="../cc/{{c[0]}}" label="{{c[2]}}" kind="captions" srclang="{{c[1]}}" default="" />{% endfor %}
+    {% assign descriptions = include.descriptions | split: ',' %}{% for desc in descriptions %}{% assign d = desc | split: '|' %}<track src="../cc/{{d[0]}}" label="{{d[2]}}" kind="descriptions" srclang="{{d[1]}}" default="" />{% endfor %}
+  </video>
+</div>
+{% if include.yt-id-ad %}
+<div class="video-container" data-video-type="audio-described">
+  <video preload="metadata" data-youtube-id="{{include.yt-id-ad}}" width="450">
+    {% assign captions = include.captions-ad | split: ',' %}{% for caption in captions %}{% assign c = caption | split: '|' %}<track src="../cc/{{c[0]}}" label="{{c[2]}}" kind="captions" srclang="{{c[1]}}" default="" />{% endfor %}
+    {% assign descriptions = include.descriptions-ad | split: ',' %}{% for desc in descriptions %}{% assign d = desc | split: '|' %}<track src="../cc/{{d[0]}}" label="{{d[2]}}" kind="descriptions" srclang="{{d[1]}}" default="" />{% endfor %}
+  </video>
+</div>
+<p><button id="audio_description_button"><svg aria-hidden="true" class="icon-audio-description "><use xlink:href="{{ "/assets/images/icons.svg#icon-audio-description" | prepend: site.github.url }}"></use></svg> <span>Enable Audio Description</span></button></p>
+{% endif %}
+
+<script src="{{ site.github.url }}/assets/ableplayer/thirdparty/modernizr.custom.js"></script>
+<script src="{{ site.github.url }}/assets/scripts/jquery.min.js"></script>
+<script src="{{ site.github.url }}/assets/ableplayer/thirdparty/js.cookie.js"></script>
+<script src="{{ site.github.url }}/assets/ableplayer/build/ableplayer.min.js"></script>
+<script>
+  var youTubeDataAPIKey = "{{site.ytapi}}";
+  var googleApiReady = false;
+  function initGoogleClientApi() {
+    googleApiReady = true;
+  }
+</script>
+<script src="//apis.google.com/js/client.js?onload=initGoogleClientApi"></script>
+
+<script>
+(function () {
+  'use strict';
+
+  var player1 = new AblePlayer($('[data-video-type=""] video'));
+  var player2 = new AblePlayer($('[data-video-type="audio-described"] video'));
+
+  function addclass(el, className) {
+    if (el.classList) {
+      el.classList.add(className);
+    } else {
+      if(! hasclass(el, className)){
+        el.className += ' ' + className;
+      }
+    }
+  }
+
+  function removeclass(el, className) {
+    if (el.classList) {
+      el.classList.remove(className);
+    } else {
+      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+    }
+  }
+
+  function hasclass(el, className) {
+    if (el.classList) {
+      return el.classList.contains(className);
+    } else {
+      return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
+    }
+  }
+
+  var audiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
+
+  Array.prototype.forEach.call(audiodescribed, function(el, i){
+    el.setAttribute('hidden', true);
+  });
+
+  var adbutton = document.querySelector('#audio_description_button');
+  adbutton.addEventListener('click', function(e){
+    player1.pauseMedia();
+    player2.pauseMedia();
+    if (e.target.getAttribute('data-status') == "audio-described") {
+      var videos = document.querySelectorAll('.video-container');
+      Array.prototype.forEach.call(videos, function(el, i){
+        el.removeAttribute("hidden");
+      });
+      var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
+      Array.prototype.forEach.call(nonaudiodescribed, function(el, i){
+        el.setAttribute('hidden', true);
+      });
+      e.target.setAttribute('data-status', 'non-audio-described');
+      e.target.querySelector('span').innerHTML = 'Enable Audio Description';
+    } else {
+      var videos = document.querySelectorAll('.video-container');
+      Array.prototype.forEach.call(videos, function(el, i){
+        el.setAttribute('hidden', true);
+      });
+      var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
+      Array.prototype.forEach.call(nonaudiodescribed, function(el, i){
+        el.removeAttribute("hidden");
+      });
+      e.target.setAttribute('data-status', 'audio-described');
+      e.target.querySelector('span').innerHTML = 'Disable Audio Description';
+    }
+  });
+
+}());
+</script>

data/_layouts/default.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  {% include head.html %}
+  <body id="top" class="{% include body-class.html %}">
+    {% include header.html %}
+
+<main id="main" class="default-grid with-gap{% unless page.noleftcol %} leftcol{% endunless %}" tabindex="-1">
+
+  <article>
+    <h1>{{ page.title }}</h1>
+    {{ content }}
+
+    {{page.wcag_success_criteria}}{{page.wcag_techniques}}
+    {% if page.wcag_success_criteria or page.wcag_techniques %}
+      {% include resources.html %}
+    {% endif %}
+
+    {% include prevnext.html %}
+  </article>
+  <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
+</main>
+
+{% include footer.html %}
+
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  {% include head.html %}
+  <body id="top" class="{% include body-class.html %}">
+
+{% include header.html %}
+<main id="main" tabindex="-1">
+{{content}}
+</main>
+
+{% include footer.html %}
+
+  </body>
+</html>

data/_layouts/news.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  {% include head.html %}
+  <body id="top" class="{% include body-class.html %}">
+    {% include header.html %}
+
+<main id="main" tabindex="-1">
+  <div class="grid-five-three">
+    <div class="col12">
+      <h1>{{ page.title }}</h1>
+    </div>
+  </div>
+    {{ content }}
+    {% include prevnext.html %}
+    <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
+</main>
+
+{% include footer.html %}
+
+  </body>
+</html>

data/_layouts/none.html

@@ -0,0 +1 @@
+{{ content }}

data/_layouts/policy.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  {% include head.html %}
+  <body id="top" class="{% include body-class.html %}">
+    {% include header.html %}
+
+<main id="main" class="default-grid with-gap leftcol" tabindex="-1">
+
+  {% include sidenav.html %}
+
+  <article>
+    <h1 class="post-title">{% include multilang-title.html title=page.country %}</h1>
+
+    <div class="post-content">
+      <p>Last Updated: {{page.updated | date: "%-d %B %Y" }}{%if page.updatemsg%} – {{page.updatemsg}}{%endif%}</p>
+      {% if page.relatedpages %}{% for r in page.relatedpages %}<p>Related page: <a href="{{r.url}}">{{r.title}}</a></p>{% endfor %}{% endif %}
+      {% for p in page.policies %}
+        {% assign theslug = p.title.en | slugify %}
+        {% capture boxtitle %}
+        <h2 class="policy-heading">
+          {% include multilang-policy-title.html title=p.title %}
+        </h2>
+        {% endcapture %}
+        {% include box.html type="start" title=boxtitle class="large" id=theslug %}
+        <div>{% assign urlsize = p.url | size %}
+          <h3 style="margin-top:10px;">Official law/policy page{% if urlsize > 1 %}s{% endif %}</h3>
+          {% include multilang-list-policy-links.html title=p.title url=p.url external="true" wrap="h2" id=theslug class="policy-heading" %}
+          <h3>Details</h3>
+          <ul>
+            <li>Date enacted: {{p.enactdate}}</li>
+            <li>Responsible {%if p.ministries.size == 1%}Entity (Agency, Ministry, etc.){%else%}Entities (Agencies, Ministries, etc.){%endif%}:
+              <ul>
+                {% for m in p.ministries %}<li>{% include multilang-list.html title=m.title url=m.url external="true" %}</li>{% endfor %}
+              </ul>
+            </li>
+            <li>Type: {{p.type}}</li>
+            <li>Scope: {{p.scope}}</li>
+            <li>Web only: {%if p.webonly == true %}yes{% else %}no{%endif%}</li>
+            <li>WCAG Version Used: {{p.wcagver}}</li>
+            {% if p.standard %}
+            {% unless p.standard == "None" or p.standard == "none" or p.standard == false %}
+              {% if p.standard %}
+                <li>Relevant Standard{%if p.standard.size > 1 %}s{%endif%}:
+                  <ul>
+                    {% for d in p.standard %}<li>{% include multilang-list.html title=d.title url=d.url external="true" %}{%if d.desc %}<br>{{d.desc}}{%endif%}</li>{%endfor%}
+                  </ul>
+                </li>
+              {% endif %}
+            {% endunless %}
+            {% endif %}
+            {% if p.documents %}
+              <li>Relevant Documents:
+                <ul>
+                  {% for d in p.documents %}<li>{% include multilang-list.html title=d.title url=d.url external="true" %}{%if d.desc %}<br>{{d.desc}}{%endif%}</li>{%endfor%}
+                </ul>
+              </li>
+            {% endif %}
+          </ul>
+        </div>
+        {% include box.html type="end" %}
+      {% endfor %}
+    </div>
+    {% include prevnext.html %}
+  </article>
+  <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
+
+</main>
+
+{% include footer.html %}
+<style>@import url('{{site.github.url}}/policies/css/policies.css');</style>
+  </body>
+</html>

data/_layouts/sidenav.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  {% include head.html %}
+  <body id="top" class="{% include body-class.html %}">
+    {% include header.html %}
+
+<main id="main" class="default-grid with-gap leftcol" tabindex="-1">
+
+  {% include sidenav.html %}
+
+  <article>
+    <h1>{{ page.title }}</h1>
+    {{ content }}
+
+    {% if page.wcag_success_criteria or page.wcag_techniques %}
+      {% include resources.html %}
+    {% endif %}
+
+    {% include prevnext.html %}
+  </article>
+  <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
+</main>
+
+{% include footer.html %}
+
+  </body>
+</html>

data/_layouts/sidenavsidebar.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  {% include head.html %}
+  <body id="top" class="{% include body-class.html %}">
+    {% include header.html %}
+
+<main id="main" class="default-grid with-gap leftcol" tabindex="-1">
+
+  {% include sidenav.html %}
+
+  <article class="content">
+    <h1>{{ page.title }}</h1>
+    {{ content }}
+    {% include prevnext.html %}
+  </article>
+  <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
+</main>
+
+{% include footer.html %}
+
+  </body>
+</html>

data/assets/ableplayer/.gitattributes

@@ -0,0 +1,14 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+# Git will always convert line endings to LF on checkout, even on Windows
+* text eol=lf
+
+# Denote all files that are truly binary and should not be modified.
+*.eot binary
+*.ttf binary
+*.woff binary 
+*.png binary
+*.jpg bin
+*.mp3 binary
+*.ogg binary
+*.mp4 binary
+*.webm binary

data/assets/ableplayer/.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+test.html
+thirdparty/jwplayer.*
+thirdparty/jquery-*.js
+node_modules/
+translations/???.js
+.idea

data/assets/ableplayer/Gruntfile.js

@@ -0,0 +1,105 @@
+module.exports = function(grunt) {
+
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks("grunt-remove-logging");
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+        concat: {
+            build: {
+                src: [
+                    // Ultimately this should be just 'scripts/*.js',
+                    //  but for now we're maintaining the order which was
+                    //  specified in the previous 'compile.sh' script
+                    'scripts/ableplayer-base.js',
+                    'scripts/initialize.js',
+                    'scripts/preference.js',
+                    'scripts/webvtt.js',
+                    'scripts/buildplayer.js',
+                    'scripts/track.js',
+                    'scripts/youtube.js',
+                    'scripts/slider.js',
+                    'scripts/volume.js',
+                    'scripts/dialog.js',
+                    'scripts/misc.js',
+                    'scripts/description.js',
+                    'scripts/browser.js',
+                    'scripts/control.js',
+                    'scripts/caption.js',
+                    'scripts/chapters.js',
+                    'scripts/metadata.js',
+                    'scripts/transcript.js',
+                    'scripts/search.js',
+                    'scripts/event.js',
+                    'scripts/dragdrop.js',
+                    'scripts/sign.js',
+                    'scripts/langs.js',
+                    'scripts/translation.js',
+                    'scripts/JQuery.doWhen.js'
+                ],
+                dest: 'build/<%= pkg.name %>.js'
+            },
+        },
+        removelogging: {
+            dist: {
+                src: [
+                    'build/<%= pkg.name %>.js'
+                ],
+                dest: 'build/<%= pkg.name %>.dist.js'
+            },
+            options: {
+                // Remove all console output (see https://www.npmjs.com/package/grunt-remove-logging)
+            }
+        },
+        uglify: {
+            min: {
+                src    : ['build/<%= pkg.name %>.dist.js'],
+                dest   : 'build/<%= pkg.name %>.min.js',
+            },
+            options: {
+                // Add a banner with the package name and version
+                //  (no date, otherwise a new build is different even if the code didn't change!)
+                banner: '/*! <%= pkg.name %> V<%= pkg.version %> */\n',
+                // Preserve comments that start with a bang (like the file header)
+                preserveComments: "some"
+            }
+        },
+        cssmin: {
+            min: {
+                src  : [
+                    'styles/ableplayer.css',
+                ],
+                dest : 'build/<%= pkg.name %>.min.css',
+            },
+            options: {
+                // Add a banner with the package name and version
+                //  (no date, otherwise a new build is different even if the code didn't change!)
+                //  (oddly, here we don't need a '\n' at the end!)
+                banner: '/*! <%= pkg.name %> V<%= pkg.version %> */',
+            }
+        },
+        jshint: {
+            files: ['Gruntfile.js', 'scripts/**/*.js'],
+            options: {
+                // options here to override JSHint defaults
+                globals: {
+                    browser: true,
+                    jquery: true,
+                    devel: true,
+                }
+            }
+        },
+        clean: {
+          build: ['build'],
+        },
+
+    });
+
+    grunt.registerTask('default', ['concat', 'removelogging', 'uglify', 'cssmin']);
+    grunt.registerTask('test', ['jshint']);
+};

data/assets/ableplayer/LICENSE

@@ -0,0 +1,26 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 University of Washington
+
+Able Player development is supported in part by The AccessComputing project, 
+with financial support from the National Science Foundation 
+(grant #CNS-0540615, CNS-0837508, and CNS-1042260); 
+and by the Committee on Institutional Cooperation (CIC).
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.